2677 lines
77 KiB
Vue
2677 lines
77 KiB
Vue
<template>
|
||
<div class="map-container">
|
||
<div :id="mapContainerName" @mouseover="mapmouseover" class="map-box"></div>
|
||
<div class="cloud-query-div" v-if="props.geomsList">
|
||
<div v-if="useCloudQuery.getIdentification" @click="initiateCloudQuery2">
|
||
<div class="cloud-query-icon">
|
||
<Loading3QuartersOutlined spin :style="{ fontSize: '20px' }" />
|
||
</div>
|
||
<div>云查询</div>
|
||
</div>
|
||
<div
|
||
v-else-if="
|
||
!useCloudQuery.getIdentification &&
|
||
useCloudQuery?.beforeId &&
|
||
props.caseno == useCloudQuery?.caseno
|
||
"
|
||
@click="initiateCloudQuery3"
|
||
>
|
||
<div class="cloud-query-icon">
|
||
<Icon icon="gis:globe-poi" :size="20" />
|
||
</div>
|
||
<div> 查看结果 </div>
|
||
</div>
|
||
<div v-else @click="initiateCloudQuery1">
|
||
<div class="cloud-query-icon">
|
||
<Icon icon="gis:globe-poi" :size="20" />
|
||
</div>
|
||
<div>云查询</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 云查询内容提示 -->
|
||
<div class="cloudqueryNotice" v-if="props.geomsList && useCloudQuery.getCloudQueryVisable">
|
||
<div class="cloudquery-title">
|
||
<div class="cloudquery-left">
|
||
<img src="/message.png" alt="" />
|
||
<span class="title-box">您有一条云查询结果，请查收</span>
|
||
</div>
|
||
<div class="cloudquery-right">
|
||
<a-button type="primary" @click="initiateCloudQuery3">查看</a-button>
|
||
<div class="line"></div>
|
||
<CloseOutlined @click="closeCloudQuery" style="color: #fff" title="关闭" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 云查询结果 -->
|
||
<a-modal
|
||
v-model:open="open"
|
||
:footer="false"
|
||
@cancel="closeCloudQueryModal"
|
||
:width="compare ? '1020px' : '510px'"
|
||
style="top: 20px"
|
||
:destroyOnClose="true"
|
||
>
|
||
<CloudQueryContent @changeCompare="changeCompare"/>
|
||
</a-modal>
|
||
|
||
<!-- 图层控制 -->
|
||
<div class="layer-control-center" v-if="false">
|
||
<a-collapse v-model:activeKey="activeKey" accordion expandIconPosition="end" expandIcon="">
|
||
<a-collapse-panel key="1" header="图层">
|
||
<p v-for="(item, index) in props.mapConfig.layers" class="layer-item">
|
||
<a-checkbox v-model:checked="item.checked" @change="handlerCheckboxChange(item)">{{
|
||
item.name
|
||
}}</a-checkbox>
|
||
</p>
|
||
<p v-for="(item, index) in props.mapConfig.baseLayers" class="layer-item">
|
||
<a-checkbox v-model:checked="item.checked" @change="handlerCheckboxChange(item)">{{
|
||
item.name
|
||
}}</a-checkbox>
|
||
</p>
|
||
</a-collapse-panel>
|
||
</a-collapse>
|
||
</div>
|
||
|
||
<!-- 绘图控制 -->
|
||
<div class="draw-control-center" v-show="drawing">
|
||
<div class="draw-btn" @click="handlerCancleDraw"> 取消 </div>
|
||
<div class="draw-btn" @click="handlerDrawComplete"> 保存 </div>
|
||
</div>
|
||
|
||
<!-- 根据输入坐标定位 -->
|
||
<div class="position-by-lnglat">
|
||
<a-tooltip>
|
||
<template #title>图斑定位</template>
|
||
<div class="to-location" @click="handlerToPosition()"></div>
|
||
</a-tooltip>
|
||
|
||
<a-tooltip>
|
||
<template #title>坐标定位</template>
|
||
<div class="draw-polygon" @click="LocationShow = true"></div>
|
||
</a-tooltip>
|
||
|
||
|
||
<a-popover placement="bottom" v-if="props.splitPlugin" v-model:visible="splitPanelVisible">
|
||
<template #content>
|
||
<div class="split-panel">
|
||
<p class="split-panel-item" @click="handlerDrawLineString()">绘制线分割</p>
|
||
<p class="split-panel-item" @click="handlerDrawPolygon()">绘制面分割</p>
|
||
|
||
<a-upload
|
||
name="file"
|
||
:before-upload="handleImportShapeFileChange"
|
||
:showUploadList="false"
|
||
>
|
||
<p class="split-panel-item">导入图层分割</p>
|
||
</a-upload>
|
||
|
||
<!-- <p class="split-panel-item" >地类图斑分割</p> -->
|
||
|
||
<!-- <a-dropdown>
|
||
<p @click.prevent>地类图斑分割 <DownOutlined /></p>
|
||
<template #overlay>
|
||
<a-menu>
|
||
<a-menu-item @click="handlerSelectLandType('gengdi')">
|
||
<p>耕地地类分割</p>
|
||
</a-menu-item>
|
||
<a-menu-item @click="handlerSelectLandType('jianshe')">
|
||
<p>建设用地地类分割</p>
|
||
</a-menu-item>
|
||
</a-menu>
|
||
</template>
|
||
</a-dropdown> -->
|
||
</div>
|
||
</template>
|
||
<div class="split-line" ></div>
|
||
</a-popover>
|
||
|
||
<a-tooltip>
|
||
<template #title>线分割图斑</template>
|
||
</a-tooltip>
|
||
|
||
<a-tooltip>
|
||
<template #title>{{isShowPicture?'显示选中图片方位角':'显示全部图片方位角'}}</template>
|
||
<div :class="isShowPicture?'picture-azimuth':'picture-azimuth-active'" @click="handlerChangePictureVisible()"></div>
|
||
</a-tooltip>
|
||
|
||
<div class="split-polygon" @click="handlerDrawPolygon()" v-if="false"> </div>
|
||
</div>
|
||
|
||
<!-- 坐标输入框 -->
|
||
<div class="to-location-input" v-if="LocationShow">
|
||
<div class="location-operation">
|
||
<a-button type="default" size="small" @click="handlerPushLocationItem"
|
||
><PlusOutlined />添加</a-button
|
||
>
|
||
|
||
|
||
<a-upload
|
||
name="file"
|
||
:before-upload="handleImportCoorinateChange"
|
||
:showUploadList="false"
|
||
>
|
||
<a-button
|
||
type="default"
|
||
size="small"
|
||
><CloudUploadOutlined />导入
|
||
</a-button>
|
||
</a-upload>
|
||
|
||
|
||
|
||
<a-button type="default" size="small" @click="handlerClearLocationItem"
|
||
><ClearOutlined />清空</a-button
|
||
>
|
||
|
||
|
||
<a-button
|
||
type="default"
|
||
size="small"
|
||
v-if="props.splitPlugin"
|
||
@click="onHandlerSplitPolygon"
|
||
><SplitCellsOutlined />分割图斑</a-button>
|
||
<span style="float: right">
|
||
<CloseOutlined @click="handlerLocationClose" />
|
||
</span>
|
||
</div>
|
||
|
||
<!-- <a-empty v-if="locationArrays.length == 0" /> -->
|
||
|
||
<div class="location-item-list-coantienr">
|
||
|
||
<a-table :dataSource="locationArrays" size="small" :pagination="false" >
|
||
|
||
<a-table-column-group>
|
||
|
||
<a-table-column key="lng" title="经度(Y)" data-index="lng">
|
||
<template #default="{ record }">
|
||
<a-input
|
||
v-model:value="record.lng"
|
||
@chagne="handlerLocationChange"
|
||
size="small"
|
||
/>
|
||
</template>
|
||
</a-table-column>
|
||
|
||
|
||
<a-table-column key="lat" title="纬度(X)" data-index="lat">
|
||
<template #default="{record}">
|
||
<a-input
|
||
v-model:value="record.lat"
|
||
@chagne="handlerLocationChange"
|
||
size="small"
|
||
/>
|
||
</template>
|
||
</a-table-column>
|
||
|
||
<a-table-column key="operation" title="操作" data-index="operation" width="100px">
|
||
<template #default="{record,index}">
|
||
<a-button type="default" size="small" @click="handlerLocationFlyTo(index)"
|
||
><EnvironmentOutlined
|
||
/></a-button>
|
||
|
||
<a-button type="default" size="small" @click="handlerLocationRemove(index)"
|
||
><DeleteOutlined
|
||
/></a-button>
|
||
</template>
|
||
</a-table-column>
|
||
|
||
</a-table-column-group>
|
||
|
||
</a-table>
|
||
|
||
<!-- <div class="location-item" v-for="(item, index) in locationArrays" :key="index">
|
||
<a-button type="default" size="small" @click="handlerLocationFlyTo(item)"
|
||
><EnvironmentOutlined
|
||
/></a-button>
|
||
<a-input
|
||
v-model:value="item.lng"
|
||
@chagne="handlerLocationChange"
|
||
addon-before="经度"
|
||
size="small"
|
||
style="width: 140px; margin: 0px 12px"
|
||
/>
|
||
<a-input
|
||
v-model:value="item.lat"
|
||
@chagne="handlerLocationChange"
|
||
addon-before="纬度"
|
||
size="small"
|
||
style="width: 140px; margin-right: 12px"
|
||
/>
|
||
<a-button type="default" size="small" @click="handlerLocationRemove(index)"
|
||
><DeleteOutlined
|
||
/></a-button>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 地类选择 -->
|
||
<a-modal v-model:open="landTypeVisible" title="请选择分割依据的地类" @ok="handlerSplitByLandType">
|
||
<div style="padding:15px">
|
||
<a-table
|
||
rowKey="id"
|
||
:rowSelection="{type:'radio',onChange:onLandTypeChange}"
|
||
:filterMultiple="false"
|
||
:pagination="false"
|
||
:dataSource="landTypeList"
|
||
:columns="[{title: '地类名称',dataIndex: 'name',key: 'name'}]" />
|
||
</div>
|
||
</a-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import {
|
||
onMounted,
|
||
onUnmounted,
|
||
defineProps,
|
||
defineEmits,
|
||
reactive,
|
||
ref,
|
||
defineExpose,
|
||
watch,
|
||
inject,
|
||
} from 'vue';
|
||
|
||
import { useMessage } from '@/hooks/web/useMessage';
|
||
import {
|
||
CloseOutlined,
|
||
EnvironmentOutlined,
|
||
DeleteOutlined,
|
||
CopyOutlined,
|
||
PlusOutlined,
|
||
ClearOutlined,
|
||
SplitCellsOutlined,
|
||
CloudUploadOutlined,
|
||
Loading3QuartersOutlined,
|
||
DownOutlined,
|
||
} from '@ant-design/icons-vue';
|
||
import mapboxgl, { Map, Popup } from 'mapbox-gl';
|
||
import Icon from '@/components/Icon/Icon.vue';
|
||
import CloudQueryContent from '@/components/CloudQueryContent/index.vue';
|
||
// 图形绘制工具类
|
||
import MapboxDraw from '@mapbox/mapbox-gl-draw';
|
||
|
||
import { generateUUID, getGeometryCenter } from './src/tool';
|
||
|
||
// 测量工具
|
||
import { SwitchLayerControl, MeasureControl } from 'mapbox-extensions';
|
||
import 'mapbox-extensions/dist/index.css';
|
||
|
||
import U from 'mapbox-gl-utils';
|
||
import 'mapbox-gl/dist/mapbox-gl.css';
|
||
|
||
import './src/index.less';
|
||
import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
|
||
import { MP } from './src/MP';
|
||
import { DrawingType } from '@/enums/mapEnum';
|
||
|
||
// POLYGON分割函数
|
||
import { polygonCut } from './lib/segmentation';
|
||
import { splitPolygonByLine, splitPolygonByFill,splitPolygonByMultiFill,handlerToMultiPolygonGeoJson} from './lib/splitpolygon';
|
||
|
||
// 线分割
|
||
import {chunkUtil} from './lib/chunkutil.ts';
|
||
|
||
// 图片切换
|
||
import { userFormFileStore } from '@/store/modules/formFileUrl';
|
||
import { storeToRefs } from 'pinia';
|
||
|
||
import {
|
||
SnapPolygonMode,
|
||
SnapPointMode,
|
||
SnapLineMode,
|
||
SnapModeDrawStyles,
|
||
SnapDirectSelect,
|
||
} from 'mapbox-gl-draw-snap-mode';
|
||
|
||
import { customDrawStyles } from './Styles/Styles';
|
||
import Drawtool from '@/views/datamaintenance/components/drawtool.vue';
|
||
import { WktToGeojson, GeojsonToWkt,wktCollectionToGeoJson } from './src/WktGeojsonTransform';
|
||
import { features } from 'process';
|
||
|
||
import { getAppEnvConfig } from '@/utils/env';
|
||
|
||
import { message, Modal } from 'ant-design-vue';
|
||
import { useCloudQueryStore } from '@/store/modules/cloudquery';
|
||
// 地类分割
|
||
import { splitAndCalTubanArea,splitTubanBackYuan } from '@/api/sys/layerManagement';
|
||
import { CalTubanAreaModel } from '@/api/sys/model/layerModel';
|
||
|
||
import { AddDroneTask, LoadLandType, AddDroneLandTask, LoadCloudQueryByCaseNo } from '@/api/demo/cloudQuery';
|
||
import { signal } from '@/utils/signalR';
|
||
// 坐标系转换
|
||
import proj4 from 'proj4'
|
||
|
||
// shp数据转换
|
||
import JSZip from 'jszip'
|
||
import shp from 'shpjs'
|
||
|
||
// 这里的zip为上传的zip文件
|
||
const parseZip = async(zip)=>{
|
||
// 解析zip数据为二进制数据
|
||
const jsZip = new JSZip()
|
||
const zipData = await jsZip.loadAsync(zip)
|
||
// 将zip文件转化为二进制流
|
||
const data = await zipData.generateAsync({ type: 'arraybuffer' })
|
||
return await shp(data)
|
||
}
|
||
|
||
// 文件选择
|
||
const handleImportShapeFileChange = (e)=>{
|
||
parseZip(e).then(res=>{
|
||
|
||
let geojson = JSON.parse(JSON.stringify(res))
|
||
|
||
// 绘制导入的shapgefile图斑
|
||
handlerDetails(
|
||
res,
|
||
'shapefileSource',
|
||
'shapefileLayer',
|
||
{
|
||
lineStyle: { 'line-color': '#ff0000', 'line-width': 3 },
|
||
fillStyle: { 'fill-color': '#ff0000', 'fill-opacity': 0.1 },
|
||
}
|
||
)
|
||
|
||
Modal.confirm({
|
||
title: '是否确认分割图斑?',
|
||
onCancel() {
|
||
handlerDetails(
|
||
{type:"FeatureCollection",features:[]},
|
||
'shapefileSource',
|
||
'shapefileLayer',
|
||
{
|
||
lineStyle: { 'line-color': '#ff0000', 'line-width': 3 },
|
||
fillStyle: { 'fill-color': '#ff0000', 'fill-opacity': 0.1 },
|
||
}
|
||
)
|
||
},
|
||
async onOk() {
|
||
// splitFeatureByFill(geojson.features[0].geometry.coordinates[0]);
|
||
splitFeatureByMultiFill(geojson);
|
||
handlerDetails(
|
||
{type:"FeatureCollection",features:[]},
|
||
'shapefileSource',
|
||
'shapefileLayer',
|
||
{
|
||
lineStyle: { 'line-color': '#ff0000', 'line-width': 3 },
|
||
fillStyle: { 'fill-color': '#ff0000', 'fill-opacity': 0.1 },
|
||
}
|
||
)
|
||
},
|
||
});
|
||
}).catch((e)=>{
|
||
createMessage.error("分割失败，请检查上传的Shapefile文件压缩包数据是否正确");
|
||
})
|
||
}
|
||
|
||
const landTypeVisible = ref<boolean>(false);
|
||
const landTypeList = ref([])
|
||
const splitLandTypeForm = ref({
|
||
name:null,
|
||
code:null,
|
||
geomData:null,
|
||
caseid:null,
|
||
})
|
||
|
||
//
|
||
|
||
function splitMultiPolygons(str) {
|
||
|
||
let hadnlerStr = str.replace(",MULTIPOLYGON","-MULTIPOLYGON");
|
||
let result = hadnlerStr.split("-");
|
||
// 移除开头的 "MULTIPOLYGON" 和多余的括号
|
||
// const cleanedStr = str.replace(/^MULTIPOLYGON\(/, '').replace(/\)+$/, '');
|
||
|
||
|
||
// // 使用正则表达式分割多个多边形
|
||
// const polygonStrings = cleanedStr.split(/\)\),\s*MULTIPOLYGON\(\(/);
|
||
|
||
// // 重新构建每个 MULTIPOLYGON
|
||
// const result = polygonStrings.map(poly => {
|
||
// // 确保每个多边形有正确的括号结构
|
||
// const fixedPoly = poly.startsWith('((') ? poly : `((${poly}`;
|
||
// return `MULTIPOLYGON(${fixedPoly}))`;
|
||
// });
|
||
|
||
return result;
|
||
}
|
||
|
||
// 地类分割图斑
|
||
const handlerSelectLandType = (type)=>{
|
||
|
||
emit('handlerStartSpliting',true);
|
||
try{
|
||
let geom = GeojsonToWkt(JSON.parse(JSON.stringify(currentGeoJson.value.geometry)));
|
||
// let geom = "POLYGON ((118.309424037556 34.547670781228 , 118.309595164318 34.5475487203142 , 118.30958905415 34.5475220510643 , 118.309594872126 34.5475037441097 , 118.309650493845 34.5474667417388 , 118.309649079958 34.5474500627085 , 118.309623826 34.54738605 , 118.309575552961 34.5472698959146 , 118.309522643 34.5471425680001 , 118.309730137 34.5466727850001 , 118.309679115776 34.5465914577158 , 118.309360468678 34.5467523126098 , 118.309316608846 34.5466467673944 , 118.309288715084 34.5466132635055 , 118.309269848483 34.5467056718441 , 118.309247005657 34.5468275002474 , 118.309298402015 34.5468998358621 , 118.309285967432 34.5469646580605 , 118.309324410141 34.5469494810228 , 118.309340280529 34.5469759786143 , 118.309344087666 34.547027374972 , 118.309400751348 34.5471162294817 , 118.309323166839 34.5471455373382 , 118.309357412648 34.5473528852375 , 118.309424037556 34.547670781228 ))"
|
||
// let geom = "POLYGON((118.30942404 34.54767078,118.30959516 34.54754872,118.30958905 34.54752205,118.30959487 34.54750374,118.30965049 34.54746674,118.30964908 34.54745006,118.30962383 34.54738605,118.30957555 34.5472699,118.30952264 34.54714257,118.30973014 34.54667279,118.30967912 34.54659146,118.30936047 34.54675231,118.30931661 34.54664677,118.30928872 34.54661326,118.30928872 34.54661326,118.30926985 34.54670567,118.30924701 34.5468275,118.3092984 34.54689984,118.30928597 34.54696466,118.30932441 34.54694948,118.30934028 34.54697598,118.30934409 34.54702737,118.30940075 34.54711623,118.30932317 34.54714554,118.30935741 34.54735289,118.30942404 34.54767078,118.30942404 34.54767078))";
|
||
|
||
let calAreaParams = {
|
||
"wktgeom":geom,
|
||
"type":type
|
||
}
|
||
|
||
splitTubanBackYuan(calAreaParams).then(res=>{
|
||
|
||
let geojson = {
|
||
type:"FeatureCollection",
|
||
features:[]
|
||
};
|
||
|
||
|
||
let wktArray = splitMultiPolygons(res.gengdituban);
|
||
|
||
|
||
|
||
if(wktArray.length>0){
|
||
|
||
wktArray?.forEach((item,index)=>{
|
||
console.log("item",item);
|
||
let feature = {
|
||
"type": "Feature",
|
||
"properties": {
|
||
"id": generateUUID()
|
||
},
|
||
"geometry": WktToGeojson(item)
|
||
}
|
||
geojson.features.push(feature);
|
||
})
|
||
}else{
|
||
|
||
//
|
||
let feature = {
|
||
"type": "Feature",
|
||
"properties": {
|
||
"id": generateUUID()
|
||
},
|
||
"geometry": WktToGeojson(res.gengdituban)
|
||
}
|
||
}
|
||
|
||
console.log("splitTubanBackYuan",geojson)
|
||
|
||
splitFeatureByMultiFill(geojson);
|
||
|
||
handlerDetails(
|
||
{type:"FeatureCollection",features:[]},
|
||
'shapefileSource',
|
||
'shapefileLayer',
|
||
{
|
||
lineStyle: { 'line-color': '#ff0000', 'line-width': 3 },
|
||
fillStyle: { 'fill-color': '#ff0000', 'fill-opacity': 0.1 },
|
||
}
|
||
)
|
||
})
|
||
|
||
return null;
|
||
splitAndCalTubanArea(calAreaParams).then(res=>{
|
||
if(res){
|
||
|
||
let splitAfterFeatures = {
|
||
type: 'FeatureCollection',
|
||
features: [],
|
||
};
|
||
|
||
// 耕地
|
||
if(res.gengdituban && !res.gengdituban.match("EMPTY")){
|
||
|
||
// let geojsonData = wktCollectionToGeoJson(res.gengdituban);
|
||
|
||
let geometry = WktToGeojson(res.gengdituban)
|
||
|
||
|
||
// let geomtry_01 = WktToGeojson("POLYGON((118.3093166 34.5466468,118.3095756 34.5472699,118.3095226 34.5471426,118.3097301 34.5466728,118.3096917 34.5466115,118.3096791 34.5465915,118.3096252 34.5466187,118.3093605 34.5467523,118.3093166 34.5466468))");
|
||
|
||
// let geomtry_02 = WktToGeojson("POLYGON((118.3096238 34.5473861,118.3095893 34.5473029,118.309624 34.5473866,118.3096238 34.5473861))");
|
||
|
||
// let geomtry_03 = WktToGeojson("POLYGON((118.3096266 34.547393,118.3096408 34.5474354,118.3096491 34.5474501,118.3096266 34.547393))");
|
||
|
||
console.log("geomtry_01");
|
||
|
||
let feature = {
|
||
"type": "Feature",
|
||
"properties": {
|
||
"id": generateUUID()
|
||
},
|
||
"geometry": geometry
|
||
}
|
||
splitAfterFeatures.features.push(feature)
|
||
|
||
// splitAfterFeatures.features?.push({
|
||
// "type": "Feature",
|
||
// "properties": {
|
||
// "id": generateUUID()
|
||
// },
|
||
// "geometry": geomtry_01
|
||
// })
|
||
|
||
// splitAfterFeatures.features?.push({
|
||
// "type": "Feature",
|
||
// "properties": {
|
||
// "id": generateUUID()
|
||
// },
|
||
// "geometry": geomtry_02
|
||
// })
|
||
|
||
// splitAfterFeatures.features?.push({
|
||
// "type": "Feature",
|
||
// "properties": {
|
||
// "id": generateUUID()
|
||
// },
|
||
// "geometry": geomtry_03
|
||
// })
|
||
|
||
|
||
|
||
}
|
||
// 农用地
|
||
if(res.nongyongdituban && !res.nongyongdituban.match("EMPTY")){
|
||
let geometry = WktToGeojson(res.nongyongdituban)
|
||
let feature = {
|
||
"type": "Feature",
|
||
"properties": {
|
||
"id": generateUUID()
|
||
},
|
||
"geometry": geometry
|
||
}
|
||
splitAfterFeatures.features.push(feature)
|
||
}
|
||
// 基本农田
|
||
if(res.jibennongtiantuban && !res.jibennongtiantuban.match("EMPTY")){
|
||
let geometry = WktToGeojson(res.jibennongtiantuban)
|
||
let feature = {
|
||
"type": "Feature",
|
||
"properties": {
|
||
"id": generateUUID()
|
||
},
|
||
"geometry": geometry
|
||
}
|
||
splitAfterFeatures.features.push(feature)
|
||
}
|
||
//
|
||
if(res.remaintuban && !res.remaintuban.match("EMPTY")){
|
||
let geometry = WktToGeojson(res.remaintuban)
|
||
let feature = {
|
||
"type": "Feature",
|
||
"properties": {
|
||
"id": generateUUID()
|
||
},
|
||
"geometry": geometry
|
||
}
|
||
splitAfterFeatures.features.push(feature)
|
||
}
|
||
// 生态保护红线
|
||
if(res.shengtaihongxiantuban && !res.shengtaihongxiantuban.match("EMPTY")){
|
||
let geometry = WktToGeojson(res.shengtaihongxiantuban)
|
||
let feature = {
|
||
"type": "Feature",
|
||
"properties": {
|
||
"id": generateUUID()
|
||
},
|
||
"geometry": geometry
|
||
}
|
||
splitAfterFeatures.features.push(feature)
|
||
}
|
||
|
||
// 分割数据返回父组件中
|
||
emit('handlerSplitPolygon', splitAfterFeatures.features);
|
||
handlerUnDraw();
|
||
}
|
||
}).catch((e)=>{
|
||
emit('handlerStartSpliting',false);
|
||
})
|
||
}catch(e){
|
||
emit('handlerStartSpliting',false);
|
||
}
|
||
|
||
// let res = {
|
||
// "wktgeom": null,
|
||
// "gengdi": 0.17,
|
||
// "nongyongdi": 1.64,
|
||
// "jibennongtian": 0,
|
||
// "shengtaihongxian": 0,
|
||
// "gengdituban": "POLYGON((118.204530452946 34.6149319373947,118.204383402255 34.6149647739564,118.20439867709747 34.6150347166548,118.2045384290743 34.61501302803828,118.204530452946 34.6149319373947))",
|
||
// "nongyongdituban": "POLYGON((118.204827409679 34.6149804783991,118.204539019005 34.6150190256674,118.204530452946 34.6149319373947,118.204383402255 34.6149647739564,118.204410528111 34.615088981821,118.203870866355 34.6151889191832,118.203870866355 34.6152688690729,118.204421949524 34.6151746424171,118.204421949524 34.6151546549447,118.204847397152 34.6150918371741,118.204827409679 34.6149804783991))",
|
||
// "jibennongtiantuban": "",
|
||
// "shengtaihongxiantuban": "",
|
||
// "remaintuban": "POLYGON EMPTY"
|
||
// }
|
||
|
||
// if(res){
|
||
// let splitAfterFeatures = {
|
||
// type: 'FeatureCollection',
|
||
// features: [],
|
||
// };
|
||
|
||
// // 耕地
|
||
// if(res.gengdituban && !res.gengdituban.match("EMPTY")){
|
||
// let geometry = WktToGeojson(res.gengdituban)
|
||
|
||
// let feature = {
|
||
// "type": "Feature",
|
||
// "properties": {
|
||
// "id": generateUUID()
|
||
// },
|
||
// "geometry": geometry
|
||
// }
|
||
// splitAfterFeatures.features.push(feature)
|
||
// }
|
||
// // 农用地
|
||
// if(res.nongyongdituban && !res.nongyongdituban.match("EMPTY")){
|
||
// let geometry = WktToGeojson(res.nongyongdituban)
|
||
// let feature = {
|
||
// "type": "Feature",
|
||
// "properties": {
|
||
// "id": generateUUID()
|
||
// },
|
||
// "geometry": geometry
|
||
// }
|
||
// splitAfterFeatures.features.push(feature)
|
||
// }
|
||
// // 基本农田
|
||
// if(res.jibennongtiantuban && !res.jibennongtiantuban.match("EMPTY")){
|
||
// let geometry = WktToGeojson(res.jibennongtiantuban)
|
||
// let feature = {
|
||
// "type": "Feature",
|
||
// "properties": {
|
||
// "id": generateUUID()
|
||
// },
|
||
// "geometry": geometry
|
||
// }
|
||
// splitAfterFeatures.features.push(feature)
|
||
// }
|
||
// //
|
||
// if(res.remaintuban && !res.remaintuban.match("EMPTY")){
|
||
// let geometry = WktToGeojson(res.remaintuban)
|
||
// let feature = {
|
||
// "type": "Feature",
|
||
// "properties": {
|
||
// "id": generateUUID()
|
||
// },
|
||
// "geometry": geometry
|
||
// }
|
||
// splitAfterFeatures.features.push(feature)
|
||
// }
|
||
// // 生态保护红线
|
||
// if(res.shengtaihongxiantuban && !res.shengtaihongxiantuban.match("EMPTY")){
|
||
// let geometry = WktToGeojson(res.shengtaihongxiantuban)
|
||
// let feature = {
|
||
// "type": "Feature",
|
||
// "properties": {
|
||
// "id": generateUUID()
|
||
// },
|
||
// "geometry": geometry
|
||
// }
|
||
// splitAfterFeatures.features.push(feature)
|
||
// }
|
||
|
||
// // 分割数据返回父组件中
|
||
// emit('handlerSplitPolygon', splitAfterFeatures.features);
|
||
// handlerUnDraw();
|
||
// }
|
||
// splitAndCalTubanArea(calAreaParams).then(res=>{
|
||
|
||
// })
|
||
|
||
// splitPanelVisible.value = false;
|
||
// LoadLandType().then(res=>{
|
||
// landTypeList.value = res;
|
||
// })
|
||
// landTypeVisible.value = true;
|
||
}
|
||
|
||
// 使用地类分割
|
||
const handlerSplitByLandType = ()=>{
|
||
splitLandTypeForm.value.caseid = props.caseid || props.caseno;
|
||
|
||
let geojson = {
|
||
"type": "Feature",
|
||
"properties": {},
|
||
"geometry": {
|
||
"type": "Polygon",
|
||
"coordinates": [
|
||
[
|
||
|
||
]
|
||
]
|
||
}
|
||
}
|
||
currentGeoJson.value.geometry.coordinates[0]?.forEach((item,index)=>{
|
||
geojson.geometry.coordinates[0].push([item[0],item[1]]);
|
||
})
|
||
|
||
splitLandTypeForm.value.geomData = GeojsonToWkt(JSON.parse(JSON.stringify(geojson.geometry)));
|
||
landTypeVisible.value = false;
|
||
//console.log("splitLandTypeForm",splitLandTypeForm.value)
|
||
let paramStr = "?"
|
||
for(let key in splitLandTypeForm.value){
|
||
//console.log("key",key);
|
||
paramStr+=key+"="+splitLandTypeForm.value[key]+"&";
|
||
}
|
||
|
||
if (useCloudQuery.getIdentification) {
|
||
message.warning('已有地类分割运行，不能再次提交');
|
||
} else {
|
||
AddDroneLandTask(paramStr).then((res) => {
|
||
message.success('成功提交地类分割数据');
|
||
useCloudQuery.setIdentification(true);
|
||
});
|
||
}
|
||
}
|
||
|
||
const onLandTypeChange = (selectedRowKeys, selectedRows)=>{
|
||
splitLandTypeForm.value.name = selectedRows[0].name;
|
||
splitLandTypeForm.value.code = selectedRows[0].id;
|
||
}
|
||
|
||
|
||
|
||
// 投影转地理坐标系
|
||
function GkToCGCS2000(lngLat){
|
||
|
||
try{ // 需要根据投影度带确定转换参数
|
||
let from_system = "";
|
||
if(lngLat[0]>=37000000 && lngLat[0] < 38000000){
|
||
from_system = "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs"
|
||
}if(lngLat[0]>=38000000 && lngLat[0] < 39000000){
|
||
from_system = "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=38500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs"
|
||
}if(lngLat[0]>=39000000 && lngLat[0] < 40000000){ // CGCS2000 / 3-degree Gauss-Kruger zone 39
|
||
from_system = "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=39500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs"
|
||
}else if(lngLat[0] >= 40000000){ // CGCS2000 / 3-degree Gauss-Kruger zone 40
|
||
from_system = "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs"
|
||
}
|
||
// China Geodetic Coordinate System 2000
|
||
// let to_system = "+proj=longlat +ellps=GRS80 +no_defs +type=crs";
|
||
|
||
// WGS 84 -- WGS84 - World Geodetic System 1984,
|
||
let to_system = "+proj=longlat +datum=WGS84 +no_defs +type=crs";
|
||
// transform
|
||
let trasnformLnglat = proj4(from_system,to_system,lngLat);
|
||
return trasnformLnglat;
|
||
}catch(e){
|
||
return null;
|
||
}
|
||
}
|
||
|
||
const useCloudQuery = useCloudQueryStore();
|
||
|
||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||
const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');
|
||
|
||
const mapContainerName = ref<String>();
|
||
|
||
mapContainerName.value = 'mapContainer-' + generateUUID();
|
||
|
||
const openModal = ref(false);
|
||
const insertShpModal = ref(false);
|
||
const changeOpenModal = (value) => {
|
||
openModal.value = value;
|
||
};
|
||
|
||
const changeOpenInsertShpModal = (value) => {
|
||
insertShpModal.value = value;
|
||
};
|
||
|
||
// map参数类型
|
||
interface MapboxOptionsInterface {
|
||
mapOptions: mapboxgl.MapboxOptions;
|
||
control: DrawingType[];
|
||
}
|
||
|
||
const props = defineProps({
|
||
mapConfig: {
|
||
type: Object,
|
||
default: {},
|
||
},
|
||
layers: {
|
||
type: Array,
|
||
default: [],
|
||
},
|
||
location: {
|
||
type: Array,
|
||
default: [],
|
||
},
|
||
type: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
feature: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
splitPlugin: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
geomsList: {
|
||
type: Array,
|
||
default: null,
|
||
},
|
||
caseid: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
caseno: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
countyname: {
|
||
type: String,
|
||
default: '',
|
||
}
|
||
});
|
||
|
||
let nextMapControl: Array<any> = reactive([]);
|
||
nextMapControl = props.control
|
||
? props.control.map((item) => {
|
||
return MapControlConfig[item];
|
||
})
|
||
: [];
|
||
|
||
// 定义地图容器
|
||
let map: Map;
|
||
let drawTool: any;
|
||
let popup: Popup;
|
||
let clickPoisition: Array<number> = [];
|
||
let selectFeature: Object = {};
|
||
let mp: any = null;
|
||
let geojson = reactive({
|
||
geojson: {},
|
||
});
|
||
let drawing = ref(false);
|
||
|
||
let drawGeojson = reactive({
|
||
geojson: {
|
||
type: 'FeatureCollection',
|
||
features: [],
|
||
},
|
||
});
|
||
|
||
let switchLayerControler;
|
||
|
||
const { createConfirm, createMessage } = useMessage();
|
||
|
||
// 定义地图回调emit
|
||
// 地图加载完成回调
|
||
const emit = defineEmits([
|
||
'mapOnLoad',
|
||
'mapDraw',
|
||
'handlerDrawComplete',
|
||
'handlerGetFormDetail',
|
||
'handlerSplitPolygon',
|
||
'handlerStartSpliting',
|
||
'onFeatureClick',
|
||
]);
|
||
|
||
watch(
|
||
() => props.mapConfig,
|
||
(newVal, oldVal) => {
|
||
handlerLoadMapLayer();
|
||
},
|
||
);
|
||
|
||
const formFileStore = userFormFileStore();
|
||
const formFileState = storeToRefs(formFileStore);
|
||
|
||
watch(formFileState.url, (newValue, oldValue) => {});
|
||
|
||
function mapmouseover(e) {}
|
||
onMounted(() => {
|
||
|
||
// let mapDiv = window.document.getElementById(mapContainerName.value);
|
||
// mapDiv?.onmouseover = function(e){
|
||
// alert(e);
|
||
// }
|
||
mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
|
||
map = initMap();
|
||
map.on('load', () => {
|
||
|
||
//挂载mapbox-gl-utils
|
||
U.init(map);
|
||
mp = new MP(map);
|
||
|
||
// 根据地图配置信息加载地形数据
|
||
if (props.mapConfig.mode == '3D') {
|
||
// handlerLoadTerrain();
|
||
}
|
||
|
||
// 初始化绘图空间
|
||
// handlerInitDrawTool(null);
|
||
|
||
map.on('click', (e) => {
|
||
// handlerPreviewFeatureInfo(e);
|
||
clickPoisition = e.lngLat;
|
||
//console.log("clickPoisition",clickPoisition);
|
||
});
|
||
|
||
map.on('draw.selectionchange', (e) => {
|
||
// handlerCopyToTargetLayer(e);
|
||
});
|
||
|
||
emit('mapOnLoad', map);
|
||
|
||
// 设置绘图监听事件
|
||
map.on('draw.create', function (e) {
|
||
drawGeojson.geojson.features = e.features;
|
||
handlerDealFeature(e.features[0]);
|
||
});
|
||
|
||
map.on('draw.update', function (e) {
|
||
drawGeojson.geojson = e.features;
|
||
handlerDealFeature(e.features[0]);
|
||
});
|
||
|
||
map.on('draw.delete', function (e) {
|
||
handlerDeleteFeature(e.features[0]);
|
||
});
|
||
|
||
window.handlerCopyFeature = handlerCopyFeature;
|
||
|
||
// 测量工具
|
||
map.addControl(
|
||
new MeasureControl({
|
||
horizontal: true, //default false
|
||
btnBgColor: '#ffffff', //default '#ffffff'
|
||
btnActiveColor: '#ddd', //default '#ddd'
|
||
geometryClick: true, //defualt false
|
||
enableModes: ['Point', 'LineString', 'Polygon'], //default all
|
||
onStart: () => {},
|
||
onStop: () => {},
|
||
measurePointOptions: {},
|
||
measureLineStringOptions: {},
|
||
measurePolygonOptions: {},
|
||
}),
|
||
'top-right',
|
||
);
|
||
|
||
// 加载图层
|
||
handlerLoadMapLayer();
|
||
// 应用图层绑定点击事件
|
||
// applicationLayers.forEach((item,index)=>{
|
||
// map.on("click",item.layer.id,(e)=>{
|
||
// let state = findLayerAttributeInfo(applicationLayers,e.features[0].layer.id);
|
||
// if(state){
|
||
|
||
// let formDetailParams = {
|
||
// attributeTable:state.attributeTable,
|
||
// attributeField:state.attributeField,
|
||
// value:e.features[0].properties.gid
|
||
// }
|
||
|
||
// // 调用父组件查询表单详情信息
|
||
// emit("handlerGetFormDetail",formDetailParams)
|
||
|
||
// createMessage.success("数据表："+state.attributeTable+"；查询字段："+state.attributeField+"字段值："+e.features[0].properties.gid)
|
||
|
||
// }else{
|
||
// createMessage.warning("当前点击图层未绑定信息");
|
||
// }
|
||
|
||
// })
|
||
// })
|
||
|
||
// 分割多边形
|
||
// splitFeature();
|
||
|
||
// 添加地类分割图斑
|
||
// map.addLayer({
|
||
// id: 'yingxiang',
|
||
// type: 'raster',
|
||
// source: {
|
||
// type: 'raster',
|
||
// tiles: [
|
||
// "http://192.168.10.131:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:geoserver371302&CQL_FILTER=dlmc='旱地'&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
|
||
// ],
|
||
// tileSize: 256,
|
||
// },
|
||
// layout: {
|
||
|
||
// }
|
||
// })
|
||
|
||
// map.addLayer(
|
||
// {
|
||
// 'id': 'geoserver371302Layer',
|
||
// 'type': 'fill',
|
||
// 'source': {
|
||
// type: 'vector',
|
||
// tiles: [VITE_GLOB_API_URL_VAR.value+'api/DroneCaseInfoSingle/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=geoserver371302'],
|
||
// minzoom: 1,
|
||
// maxzoom: 20,
|
||
// 'cluster': true, // 启用聚合
|
||
// 'clusterMaxZoom': 0, // 最大聚合缩放级别
|
||
// 'clusterRadius': 0 // 聚合半径
|
||
// },
|
||
// "source-layer": "geoserver371302",
|
||
// 'layout': {
|
||
// 'line-join': 'round',
|
||
// 'line-cap': 'round',
|
||
// },
|
||
// 'paint': {
|
||
// 'line-color': "#408eff",
|
||
// 'line-width': 2
|
||
// }
|
||
// }
|
||
// )
|
||
|
||
|
||
|
||
|
||
});
|
||
});
|
||
|
||
function handlerLayerChange() {
|
||
var allLayers = map.getStyle().layers;
|
||
if (map.getLayer('detailsLayerLine'))
|
||
map.moveLayer('detailsLayerLine', allLayers[allLayers.length - 1].id);
|
||
allLayers.forEach(function (layer) {});
|
||
// allLayers.forEach(function(layer){
|
||
// //console.log("layersssss",layer.id);
|
||
// // map.moveLayer('detailsLayer', layer.id);
|
||
// });
|
||
}
|
||
// 地图图层控制
|
||
const handlerLoadMapLayer = () => {
|
||
if (switchLayerControler) {
|
||
// var allLayers = map.getStyle().layers;
|
||
// allLayers.forEach(function(layer){
|
||
// //console.log("layerEEEEEE",layer);
|
||
// //console.log(layer.id);
|
||
// // map.removeLayer(layer.id);
|
||
// });
|
||
// var allSources = Object.keys(map.style.sourceCaches);
|
||
// allSources.forEach(function(sourceId){
|
||
// map.removeSource(sourceId);
|
||
// });
|
||
map.removeControl(switchLayerControler);
|
||
}
|
||
let configlayers = {};
|
||
let baseLayers = [];
|
||
props.mapConfig.layers?.forEach((item, index) => {
|
||
let applicationLayers = [];
|
||
item?.layers?.forEach((it, idx) => {
|
||
let style = JSON.parse(it.style);
|
||
let layers = {
|
||
name: it.name,
|
||
layer: style,
|
||
fixed: true,
|
||
zoom: 18,
|
||
easeToOptions: {},
|
||
mutex: false,
|
||
mutexIdentity: generateUUID(),
|
||
active: it.checked,
|
||
backgroundImage: '',
|
||
backgroundImageActive: '',
|
||
selectAndClearAll: true,
|
||
selectAllLabel: 'select all',
|
||
clearAllLabel: 'clear all',
|
||
onVisibleChange: (visible: boolean) => {},
|
||
};
|
||
applicationLayers.push(layers);
|
||
});
|
||
configlayers[item.name] = {
|
||
uiType: 'SwitchBtn',
|
||
collapse: !0,
|
||
defaultCollapsed: !0,
|
||
layers: applicationLayers,
|
||
};
|
||
});
|
||
props.mapConfig.baseLayers?.forEach((item, index) => {
|
||
//console.log('baselayers', item);
|
||
let layer = JSON.parse(item.style);
|
||
let image = item.image.replace('\\', '/');
|
||
let layers = {
|
||
name: item.name,
|
||
layer: layer,
|
||
fixed: false,
|
||
// zoom:0,
|
||
easeToOptions: {},
|
||
active: item.checked,
|
||
backgroundImage: VITE_GLOB_API_URL_VAR.value + image,
|
||
backgroundImageActive: '',
|
||
onVisibleChange: (visible: boolean) => {
|
||
handlerLayerChange();
|
||
},
|
||
};
|
||
//console.log('layersssss', layers);
|
||
baseLayers.push(layers);
|
||
});
|
||
configlayers['地图底图'] = {
|
||
collapse: !0,
|
||
defaultCollapsed: !0,
|
||
uiType: 'ImgTxtBtn',
|
||
layers: baseLayers,
|
||
};
|
||
|
||
if (props?.mapConfig) {
|
||
if (props?.mapConfig?.baseLayers?.length > 0 && props?.mapConfig?.layers?.length > 0) {
|
||
// 图层管理工具
|
||
switchLayerControler = new SwitchLayerControl({
|
||
name: '图层管理',
|
||
position: 'top-left',
|
||
showToTop: true,
|
||
layerGroups: configlayers,
|
||
});
|
||
map.addControl(switchLayerControler, 'top-left');
|
||
}
|
||
}
|
||
|
||
handlerLayerChange();
|
||
};
|
||
// 销毁地图
|
||
|
||
const findLayerAttributeInfo = (layers, id) => {
|
||
let layer = layers?.find((itme, index) => {
|
||
return itme.layer.id == id;
|
||
});
|
||
if (layer) {
|
||
if (layer.layer.state) {
|
||
return layer.layer.state;
|
||
} else {
|
||
return false;
|
||
}
|
||
}
|
||
};
|
||
// 加载地形
|
||
const handlerLoadTerrain = () => {
|
||
map.addSource('mapbox-dem', {
|
||
type: 'raster-dem',
|
||
url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
|
||
tileSize: 512,
|
||
maxzoom: 14,
|
||
});
|
||
map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });
|
||
};
|
||
// 移除地图实例
|
||
onUnmounted(() => {
|
||
map ? map.remove() : null;
|
||
});
|
||
|
||
// 数据绘制完成判断
|
||
const handlerDealFeature = (feature) => {
|
||
let existFeature = geojson.geojson.features.find((item, index) => {
|
||
return item.id == feature.id;
|
||
});
|
||
|
||
if (existFeature) {
|
||
// 如果查找到了 则替换数据
|
||
for (let i = 0; i < geojson.geojson.features.length; i++) {
|
||
if (geojson.geojson.features[i].id == feature.id) {
|
||
geojson.geojson.features[i] = feature;
|
||
}
|
||
}
|
||
} else {
|
||
// 如果没找到数据则添加到数组
|
||
geojson.geojson.features.push(feature);
|
||
}
|
||
// 自动将数据返回给父组件
|
||
handlerDrawComplete();
|
||
};
|
||
|
||
// 删除数据
|
||
const handlerDeleteFeature = (feature) => {
|
||
for (let i = 0; i < geojson.geojson.features.length; i++) {
|
||
if (geojson.geojson.features[i].id == feature.id) {
|
||
geojson.geojson.features.splice(i, 1);
|
||
}
|
||
}
|
||
// handlerDrawComplete();
|
||
};
|
||
|
||
// 初始化地图 返回地图实例
|
||
const initMap = () => {
|
||
return new mapboxgl.Map({
|
||
container: mapContainerName.value,
|
||
language: 'zh-cmn',
|
||
projection: 'equirectangular', // wgs84参考系
|
||
style: MapboxDefaultStyle,
|
||
// maxZoom: props.mapConfig.maxZoom ? props.mapConfig.maxZoom:18,
|
||
maxZoom:50,
|
||
minZoom: props.mapConfig.minZoom ? props.mapConfig.minZoom : 1,
|
||
zoom: props.mapConfig.zoom ? props.mapConfig.zoom : 10,
|
||
pitch: props.mapConfig.angle ? props.mapConfig.angle : 0,
|
||
center: props.mapConfig.center?.split(',')
|
||
? props.mapConfig.center?.split(',')
|
||
: [118.340253, 35.092481],
|
||
});
|
||
};
|
||
|
||
const handlerMapControlClick = (handler: string) => {
|
||
handler === 'handlerDrawPoint' && handlerDrawPoint();
|
||
handler === 'handlerDrawLineString' && handlerDrawLineString();
|
||
handler === 'handlerDrawPolygon' && handlerDrawPolygon();
|
||
};
|
||
// 使用坐标点分割图斑
|
||
const onHandlerSplitPolygon = () => {
|
||
if (locationArrays.value.length < 2) {
|
||
createMessage.warning('必须绘制2个以上点！');
|
||
} else {
|
||
let feature = {
|
||
type: 'Feature',
|
||
geometry: {
|
||
type: 'LineString',
|
||
coordinates: [],
|
||
},
|
||
};
|
||
|
||
locationDrawArrays.value?.forEach((item, index) => {
|
||
if (item.lng && item.lat) {
|
||
let coor = [parseFloat(item.lng), parseFloat(item.lat)];
|
||
feature.geometry.coordinates.push(coor);
|
||
}
|
||
});
|
||
|
||
splitFeature(feature.geometry.coordinates);
|
||
}
|
||
};
|
||
// 分割图斑
|
||
const splitFeature = (line) => {
|
||
|
||
let turfSplitLine = turf.lineString(line);
|
||
|
||
let splitLineString = turf.cleanCoords(turfSplitLine);
|
||
|
||
let splitPolygon = currentGeoJson.value;
|
||
try {
|
||
// let features = polygonCut(splitPolygon,splitLineString,0.1,"meters");
|
||
|
||
|
||
splitPolygon?.geometry.coordinates[0].forEach((item,index)=>{
|
||
splitPolygon.geometry.coordinates[0][index] = [item[0],item[1]];
|
||
})
|
||
|
||
console.log("splitLineString",splitLineString);
|
||
let features = splitPolygonByLine(splitLineString, JSON.parse(JSON.stringify(editGeoJson.value)));
|
||
|
||
if(features){
|
||
let tempFeatures = JSON.parse(JSON.stringify(features))
|
||
let splitAfterFeatures = {
|
||
type: 'FeatureCollection',
|
||
features: [],
|
||
};
|
||
|
||
splitAfterFeatures.features = tempFeatures;
|
||
|
||
console.log("tempFeatures",tempFeatures);
|
||
// 分割数据返回父组件中
|
||
emit('handlerSplitPolygon', tempFeatures);
|
||
|
||
handlerUnDraw();
|
||
}else{
|
||
createMessage.warning("分割失败，请重新绘制")
|
||
handlerUnDraw();
|
||
}
|
||
} catch (e) {
|
||
console.error(e);
|
||
createMessage.warning('分割线起点、终点需要在图斑外，多个图斑时需要点击选择需要分割的图斑！');
|
||
handlerUnDraw();
|
||
}
|
||
};
|
||
|
||
// 根据面分割
|
||
const splitFeatureByFill = (fill) => {
|
||
|
||
// 去除重复点坐标
|
||
let turfPolygon = turf.polygon([fill]);
|
||
let drawPolygon = turf.cleanCoords(turfPolygon);
|
||
//console.log("drawPolygon",drawPolygon);
|
||
|
||
// let drawPolygon = {
|
||
// type: 'Feature',
|
||
// properties: {
|
||
// id:null,
|
||
// },
|
||
// geometry: {
|
||
// coordinates: [fill],
|
||
// type: 'Polygon',
|
||
// },
|
||
// };
|
||
|
||
let splitPolygon = currentGeoJson.value;
|
||
try{
|
||
splitPolygonByFill(drawPolygon, JSON.parse(JSON.stringify(editGeoJson.value))).then(features=>{
|
||
if(features){
|
||
features?.forEach((item,index)=>{
|
||
features[index].properties.id = generateUUID();
|
||
})
|
||
let tempFeatures = JSON.parse(JSON.stringify(features))
|
||
let splitAfterFeatures = {
|
||
type: 'FeatureCollection',
|
||
features: [],
|
||
};
|
||
splitAfterFeatures.features = tempFeatures;
|
||
emit('handlerSplitPolygon', tempFeatures);
|
||
handlerUnDraw();
|
||
}
|
||
})
|
||
}catch(e){
|
||
//console.log(e);
|
||
createMessage.warning('分割失败，请重新绘制数据！');
|
||
handlerUnDraw();
|
||
}
|
||
|
||
};
|
||
// shapefile多面分割数据
|
||
const splitFeatureByMultiFill = (geojson)=>{
|
||
|
||
|
||
let splitPolygon = currentGeoJson.value;
|
||
splitPolygonByMultiFill(geojson.features,JSON.parse(JSON.stringify(editGeoJson.value))).then(features=>{
|
||
if(features){
|
||
features?.forEach((item,index)=>{
|
||
features[index].properties.id = generateUUID();
|
||
})
|
||
let tempFeatures = JSON.parse(JSON.stringify(features))
|
||
let splitAfterFeatures = {
|
||
type: 'FeatureCollection',
|
||
features: [],
|
||
};
|
||
splitAfterFeatures.features = tempFeatures;
|
||
emit('handlerSplitPolygon', tempFeatures);
|
||
handlerUnDraw();
|
||
}
|
||
})
|
||
}
|
||
|
||
//绘制点
|
||
const handlerDrawPoint = () => {
|
||
mp.draw('Point');
|
||
mp.on('Point', function (e) {
|
||
emit('mapDraw', 'Point', e);
|
||
});
|
||
};
|
||
const splitPanelVisible = ref<Boolean>(false);
|
||
//绘制线
|
||
const handlerDrawLineString = () => {
|
||
splitPanelVisible.value = false;
|
||
mp.draw('LineString');
|
||
mp.on('LineString', function (e) {
|
||
Modal.confirm({
|
||
title: '是否确认分割图斑?',
|
||
onCancel() {
|
||
handlerUnDraw();
|
||
},
|
||
async onOk() {
|
||
let coordinates = [];
|
||
e?.forEach((item, index) => {
|
||
coordinates?.push([item.lng, item.lat]);
|
||
});
|
||
splitFeature(coordinates);
|
||
},
|
||
});
|
||
emit('mapDraw', 'LineString', e);
|
||
});
|
||
};
|
||
|
||
//绘制面
|
||
const handlerDrawPolygon = () => {
|
||
splitPanelVisible.value = false;
|
||
mp.draw('Polygon');
|
||
mp.on('Polygon', function (e) {
|
||
Modal.confirm({
|
||
title: '是否确认分割图斑?',
|
||
onCancel() {
|
||
handlerUnDraw();
|
||
},
|
||
async onOk() {
|
||
let coordinates = [];
|
||
e?.forEach((item, index) => {
|
||
coordinates?.push([item.lng, item.lat]);
|
||
});
|
||
coordinates.push(coordinates[0]);
|
||
splitFeatureByFill(coordinates);
|
||
handlerUnDraw();
|
||
},
|
||
});
|
||
emit('mapDraw', 'Polygon', e);
|
||
});
|
||
};
|
||
|
||
//删除标记
|
||
const handlerUnDraw = () => {
|
||
mp.deleteDraw();
|
||
emit('mapDraw', 'cancel');
|
||
};
|
||
|
||
// 初始化绘图空间
|
||
const handlerInitDrawTool = (feature, bool) => {
|
||
// if (feature.features.length > 0) {
|
||
|
||
// feature.features.forEach((item) => {
|
||
|
||
// if (item.geometry.type == 'MultiPolygon') {
|
||
// let arr: any = ref([]);
|
||
// item.geometry.coordinates.forEach((val) => {
|
||
// arr.value.push(val[0]);
|
||
// });
|
||
// item.geometry.coordinates = arr.value;
|
||
// item.geometry.type = 'Polygon';
|
||
// }
|
||
// });
|
||
|
||
// }
|
||
geojson.geojson = feature;
|
||
|
||
if (drawTool) {
|
||
drawTool.deleteAll();
|
||
if (feature.features) {
|
||
drawTool.set(geojson.geojson);
|
||
}
|
||
} else {
|
||
drawTool = new MapboxDraw({
|
||
modes: {
|
||
...MapboxDraw.modes,
|
||
draw_point: SnapPointMode,
|
||
draw_polygon: SnapPolygonMode,
|
||
draw_line_string: SnapLineMode,
|
||
direct_select: SnapDirectSelect,
|
||
},
|
||
styles: customDrawStyles,
|
||
userProperties: true,
|
||
snap: true,
|
||
snapOptions: {
|
||
snapPx: 12, // defaults to 15
|
||
snapToMidPoints: true, // defaults to false
|
||
snapVertexPriorityDistance: 0.0025, // defaults to 1.25
|
||
},
|
||
guides: false,
|
||
});
|
||
|
||
map.addControl(drawTool, 'top-right');
|
||
|
||
if (feature.features) {
|
||
drawTool.set(geojson.geojson);
|
||
}
|
||
}
|
||
|
||
// 正在绘制
|
||
// if (bool) {
|
||
// drawing.value = true;
|
||
// } else {
|
||
// drawing.value = false;
|
||
// }
|
||
|
||
drawing.value = true;
|
||
};
|
||
|
||
// 将图斑复制到指定图层
|
||
const handlerCopyToTargetLayer = (e) => {
|
||
if (e.features.length > 0) {
|
||
if (popup) {
|
||
popup.remove();
|
||
popup = null;
|
||
}
|
||
|
||
selectFeature = e.features[0];
|
||
|
||
popup = new mapboxgl.Popup({
|
||
closeButton: false,
|
||
closeOnClick: false,
|
||
});
|
||
|
||
// 设置 popup 的位置和内容
|
||
popup
|
||
.setLngLat(clickPoisition)
|
||
.setHTML(
|
||
`
|
||
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="handlerCopyFeature();">复制当前图斑</div>`,
|
||
)
|
||
.addTo(map);
|
||
} else {
|
||
popup.remove();
|
||
}
|
||
};
|
||
|
||
const handlerCopyFeature = () => {
|
||
popup.remove();
|
||
createMessage.success('复制成功！');
|
||
};
|
||
|
||
// 添加到图层
|
||
const handlerAddToLayerList = (layer) => {
|
||
handlerCheckLayerExist(layer);
|
||
};
|
||
|
||
// 判断图层列表中是否一定添加
|
||
const handlerCheckLayerExist = (layer) => {
|
||
for (let i = 0; i < layerList.length; i++) {
|
||
if (layerList[i] == layer.id) {
|
||
return;
|
||
}
|
||
}
|
||
layerList.push(layer);
|
||
};
|
||
|
||
const handlerCheckboxChange = (item) => {
|
||
//console.log('itemitemitem', item);
|
||
handlerPreviewLayer(item);
|
||
};
|
||
|
||
// 控制图层是否显示
|
||
const handlerPreviewLayer = (layer) => {
|
||
//console.log('layersss', layer);
|
||
handlerLayerControler(layer);
|
||
};
|
||
|
||
// 图层控制中心
|
||
const handlerLayerControler = (layerInfo) => {
|
||
layerInfo.layer = layerInfo.layer ? layerInfo.layer : JSON.parse(layerInfo.style);
|
||
|
||
if (map.getSource(layerInfo.layer.id)) {
|
||
if (layerInfo.checked) {
|
||
map.setLayoutProperty(layerInfo.layer.id, 'visibility', 'visible');
|
||
} else {
|
||
map.setLayoutProperty(layerInfo.layer.id, 'visibility', 'none');
|
||
}
|
||
} else {
|
||
map.addLayer(layerInfo.layer);
|
||
map.on('click', layerInfo.layer.id, function (e) {
|
||
handlerPreviewFeatureInfo(e);
|
||
});
|
||
}
|
||
};
|
||
|
||
// 查看列表数据
|
||
const handlerDataList = () => {};
|
||
|
||
// 图斑属性查看
|
||
const handlerPreviewFeatureInfo = (e) => {
|
||
if (e.features) {
|
||
isOpen.value = true;
|
||
}
|
||
};
|
||
|
||
const handlerClose = (e) => {
|
||
isOpen.value = e;
|
||
};
|
||
|
||
const currentPosition = ref(null);
|
||
// 图斑定位
|
||
const handlerLocation = (lngLat) => {
|
||
map.flyTo({
|
||
center: lngLat,
|
||
zoom: 17,
|
||
speed: 10, // 飞行速度
|
||
curve: 1, // 飞行曲线
|
||
easing(t) {
|
||
// 飞行动画函数
|
||
return t;
|
||
},
|
||
});
|
||
};
|
||
// 定位
|
||
const handlerToPosition = () => {
|
||
if (currentPosition.value) {
|
||
map.flyTo({
|
||
center: currentPosition.value,
|
||
zoom: 17,
|
||
speed: 10, // 飞行速度
|
||
curve: 1, // 飞行曲线
|
||
easing(t) {
|
||
// 飞行动画函数
|
||
return t;
|
||
},
|
||
});
|
||
}
|
||
};
|
||
|
||
// 编辑图斑
|
||
const handlerEdit = (info) => {
|
||
initDraw(info);
|
||
};
|
||
|
||
const initDraw = (layerInfo) => {
|
||
// 实例化绘图工具
|
||
drawTool = new MapboxDraw({
|
||
modes: {
|
||
...MapboxDraw.modes,
|
||
draw_point: SnapPointMode,
|
||
// draw_polygon: SnapPolygonMode,
|
||
// draw_line_string: SnapLineMode,
|
||
direct_select: SnapDirectSelect,
|
||
},
|
||
styles: customDrawStyles,
|
||
userProperties: true,
|
||
snap: true,
|
||
snapOptions: {
|
||
snapPx: 15, // defaults to 15
|
||
snapToMidPoints: true, // defaults to false
|
||
snapVertexPriorityDistance: 0.0025, // defaults to 1.25
|
||
},
|
||
guides: false,
|
||
});
|
||
|
||
map.addControl(drawTool, 'top-right');
|
||
|
||
// let geojson:Object = {};
|
||
// if (layerInfo.dataType == "面") {
|
||
// geojson.type = "Polygon";
|
||
// geojson.coordinates = geojson.coordinates[0];
|
||
// } else if (layerInfo.dataType == "点") {
|
||
// geojson.type = "Point";
|
||
// geojson.coordinates = geojson.coordinates;
|
||
// } else if (layerInfo.dataType == "线") {
|
||
// geojson.type = "LineString";
|
||
// geojson.coordinates = geojson.coordinates[0];
|
||
// }
|
||
// if (formData.lat && formData.lng) {
|
||
// formData.lat = geojson.coordinates[1];
|
||
// formData.lng = geojson.coordinates[0];
|
||
// }
|
||
// geojson = {
|
||
// type: "FeatureCollection",
|
||
// features: [
|
||
// {
|
||
// type: "Feature",
|
||
// geometry: geojson,
|
||
// },
|
||
// ],
|
||
// };
|
||
// map.setLayoutProperty("pbfLayer", "visibility", "none");
|
||
// drawTool.set(geojson);
|
||
};
|
||
|
||
const handlerDrawComplete = () => {
|
||
let arr = [];
|
||
geojson.geojson.features.forEach((item, index) => {
|
||
let wktStr = GeojsonToWkt(item.geometry);
|
||
let obj = {
|
||
columnName: 'mapgeom',
|
||
value: wktStr,
|
||
};
|
||
arr.push(obj);
|
||
});
|
||
//console.log('aaaa', arr);
|
||
emit('handlerDrawComplete', arr);
|
||
};
|
||
|
||
const handlerCancleDraw = () => {
|
||
|
||
if (drawTool) {
|
||
map.removeControl(drawTool);
|
||
drawTool = null;
|
||
drawing.value = false;
|
||
}
|
||
|
||
// 清空详情图层
|
||
if (map.getSource('detailsSource')) {
|
||
map.getSource('detailsSource').setData({
|
||
type: 'FeatureCollection',
|
||
features: [],
|
||
});
|
||
}
|
||
};
|
||
|
||
const handlerDraw = (status: string, features = null, bool = false) => {
|
||
let geo = {
|
||
type: 'FeatureCollection',
|
||
features: [],
|
||
};
|
||
// 清空详情图斑
|
||
if (map.getSource('detailsSource')) {
|
||
map.getSource('detailsSource').setData({
|
||
type: 'FeatureCollection',
|
||
features: [],
|
||
});
|
||
}
|
||
if (features == null) {
|
||
bool = true;
|
||
} else {
|
||
if (features.length > 0) {
|
||
for (let i = 0; i < features.length; i++) {
|
||
try {
|
||
let featureTemp = WktToGeojson(features[i]?.mapgeom);
|
||
|
||
let feature = {
|
||
id: generateUUID(),
|
||
type: 'Feature',
|
||
properties: {},
|
||
geometry: featureTemp,
|
||
};
|
||
geo.features.push(feature);
|
||
// 获取第一个图斑的中心点跳转定位
|
||
if (i == 0) {
|
||
let lngLat = getGeometryCenter(feature);
|
||
// let lngLat = getGeometryCenter(geo.features[0]);
|
||
currentPosition.value = lngLat;
|
||
handlerLocation(lngLat);
|
||
}
|
||
} catch (e) {
|
||
console.error('wktParse', e);
|
||
createMessage.error('WKT数据格式解析错误，请检查WKT数据格式是否有误！');
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
switch (status) {
|
||
case 'Add':
|
||
handlerInitDrawTool(geo, bool);
|
||
break;
|
||
case 'Edit':
|
||
handlerInitDrawTool(geo, bool);
|
||
break;
|
||
case 'Details':
|
||
handlerDetails(geo,'detailsSource',
|
||
'detailsLayer',
|
||
{
|
||
lineStyle: { 'line-color': '#fcf003', 'line-width': 3 },
|
||
fillStyle: { 'fill-color': '#fcf003', 'fill-opacity': 0.1 },
|
||
},true);
|
||
break;
|
||
default:
|
||
createMessage.error('请传入操作类型！');
|
||
}
|
||
};
|
||
|
||
const currentGeoJson = ref({});
|
||
const editGeoJson = ref({})
|
||
const handlerDetails = (
|
||
geojson,
|
||
source = 'detailsSource',
|
||
layer = 'detailsLayer',
|
||
style = {
|
||
lineStyle: { 'line-color': '#fcf003', 'line-width': 3 },
|
||
fillStyle: { 'fill-color': '#fcf003', 'fill-opacity': 0.1 },
|
||
},
|
||
isFirstLoad=false,
|
||
) => {
|
||
let fillLayerName = layer + 'Fill';
|
||
let lineLayerName = layer + 'Line';
|
||
|
||
if (source == 'detailsSource' || source == "splitPolygonSource") {
|
||
// 判断是单面还是多面
|
||
if(isFirstLoad){
|
||
geojson = handlerToMultiPolygonGeoJson(geojson);
|
||
}else{
|
||
|
||
}
|
||
|
||
let coordinates = null;
|
||
|
||
editGeoJson.value = geojson.features[0];
|
||
|
||
if (geojson.features.length>0 && geojson.features[0].geometry.type == 'MultiPolygon') { // 多面
|
||
// 默认取了第一个面的数据
|
||
coordinates = geojson.features[0].geometry.coordinates[0];
|
||
} else if (geojson.features.length>0 && geojson.features[0].geometry.type == 'Polygon') { // 单面
|
||
coordinates = geojson.features[0].geometry.coordinates;
|
||
}
|
||
|
||
|
||
// 天坑！ 判读端传回的的图斑数据 最后2个坐标完全相同导致Mapbox解析不了报错！！！！
|
||
if (coordinates) {
|
||
if((coordinates[0][coordinates[0].length - 1][0] == coordinates[0][coordinates[0].length - 2][0]) && (coordinates[0][coordinates[0].length - 1][1] == coordinates[0][coordinates[0].length - 2][1])) {
|
||
coordinates[0]?.pop();
|
||
}
|
||
}
|
||
|
||
let singleFeature = {
|
||
type: 'Feature',
|
||
properties: {},
|
||
geometry: {
|
||
coordinates:[],
|
||
type: 'Polygon',
|
||
},
|
||
};
|
||
|
||
if(coordinates){
|
||
let turfPolygon = turf.polygon(coordinates);
|
||
singleFeature = turf.cleanCoords(turfPolygon);
|
||
}
|
||
// 处理清除数据重复的点数据
|
||
|
||
// 需要将传入的geojson处理成单面才能在分割工具中使用
|
||
currentGeoJson.value = singleFeature;
|
||
}
|
||
|
||
if (map.getSource(source)) {
|
||
map.getSource(source).setData(geojson);
|
||
} else {
|
||
map.addSource(source, {
|
||
type: 'geojson',
|
||
data: geojson,
|
||
});
|
||
map.addLayer({
|
||
id: fillLayerName,
|
||
type: 'fill',
|
||
source: source,
|
||
layout: {},
|
||
paint: style.fillStyle,
|
||
});
|
||
map.addLayer({
|
||
id: lineLayerName,
|
||
type: 'line',
|
||
source: source,
|
||
layout: {},
|
||
paint: style.lineStyle,
|
||
});
|
||
map.on('click', fillLayerName, function (e) {
|
||
// handlerPreviewFeatureInfo(e);
|
||
if (e.features.length > 0) {
|
||
var feature = e.features[0];
|
||
emit('onFeatureClick', feature);
|
||
}
|
||
if(fillLayerName == 'detailsLayerFill' || fillLayerName == 'detailsLayerLine'){
|
||
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
// 创建查看图斑图层
|
||
|
||
// 粘贴坐标实现定位、绘图相关
|
||
interface LocationItem {
|
||
lng: string;
|
||
lat: string;
|
||
}
|
||
|
||
const LocationShow = ref<Boolean>(false);
|
||
|
||
const locationColumns = ref([
|
||
{
|
||
title: '定位',
|
||
dataIndex: 'position',
|
||
key: 'position',
|
||
},
|
||
{
|
||
title: '经度',
|
||
dataIndex: 'lng',
|
||
key: 'lng',
|
||
},
|
||
{
|
||
title: '纬度',
|
||
dataIndex: 'lat',
|
||
key: 'lat',
|
||
},
|
||
{
|
||
title: '操作',
|
||
dataIndex: 'operation',
|
||
key: 'operation',
|
||
},
|
||
])
|
||
const locationArrays = ref<LocationItem[]>([]);
|
||
const locationDrawArrays = ref<LocationItem[]>();
|
||
const locationGeoJson = reactive({
|
||
point: {
|
||
type: 'FeatureCollection',
|
||
features: [],
|
||
},
|
||
polyline: {
|
||
type: 'FeatureCollection',
|
||
features: [],
|
||
},
|
||
polygon: {
|
||
type: 'FeatureCollection',
|
||
features: [],
|
||
},
|
||
});
|
||
|
||
const handlerPushLocationItem = () => {
|
||
let item: LocationItem = {
|
||
lng: '',
|
||
lat: '',
|
||
};
|
||
locationArrays.value.push(item);
|
||
};
|
||
|
||
// 通过上传txt文件方式导入坐标数据
|
||
const handleImportCoorinateChange = (e)=>{
|
||
const reader = new FileReader();
|
||
reader.readAsText(e);
|
||
reader.onload = function(text){
|
||
//console.log(text.target?.result?.split("\r\n"))
|
||
handlerImportCoor(text.target?.result?.split("\r\n"));
|
||
}
|
||
}
|
||
|
||
const handlerImportCoor = (arr)=>{
|
||
|
||
arr?.forEach((item,index)=>{
|
||
let coor = item.split(",");
|
||
if(coor[0] && coor[1]){
|
||
let obj = {
|
||
lng:parseFloat(coor[1]),
|
||
lat:parseFloat(coor[0])
|
||
}
|
||
locationArrays.value?.push(obj);
|
||
}
|
||
})
|
||
}
|
||
const handlerClearLocationItem = () => {
|
||
locationArrays.value = [];
|
||
locationGeoJson.point.features = [];
|
||
locationGeoJson.polygon.features = [];
|
||
locationGeoJson.polyline.features = [];
|
||
handlerLocationLoadLayer();
|
||
};
|
||
|
||
const handlerLocationClose = () => {
|
||
LocationShow.value = false;
|
||
};
|
||
const handlerLocationRemove = (index: number) => {
|
||
locationArrays.value.splice(index, 1);
|
||
locationDrawArrays.value?.splice(index, 1);
|
||
handlerLocationGeoJson();
|
||
};
|
||
|
||
const handlerLocationChange = (e) => {};
|
||
|
||
// 定位跳转
|
||
const handlerLocationFlyTo = (clickIndex:number) => {
|
||
locationDrawArrays.value = [];
|
||
locationArrays.value?.forEach((location)=>{
|
||
let obj={...location}
|
||
//console.log(obj);
|
||
locationDrawArrays.value?.push(obj)
|
||
})
|
||
|
||
locationDrawArrays.value?.forEach((item,index)=>{
|
||
// 坐标系转换
|
||
if(item.lng > 180){
|
||
let coor = GkToCGCS2000([parseFloat(item.lng),parseFloat(item.lat)]);
|
||
item.lng = coor[0];
|
||
item.lat = coor[1];
|
||
}
|
||
if (item.lng && item.lat) {
|
||
handlerLocationGeoJson();
|
||
}
|
||
})
|
||
|
||
// 跳转坐标
|
||
handlerLocation([locationDrawArrays.value[clickIndex].lng, locationDrawArrays.value[clickIndex].lat]);
|
||
};
|
||
|
||
// 处理生成geojson数据
|
||
const handlerLocationGeoJson = () => {
|
||
locationGeoJson.point.features = [];
|
||
locationGeoJson.polyline.features = [];
|
||
locationGeoJson.polygon.features = [];
|
||
|
||
locationDrawArrays.value?.forEach((item, index) => {
|
||
if (item.lng && item.lat) {
|
||
let feature = {
|
||
type: 'Feature',
|
||
geometry: {
|
||
type: 'Point',
|
||
coordinates: [parseFloat(item.lng), parseFloat(item.lat)],
|
||
},
|
||
};
|
||
locationGeoJson.point.features.push(feature);
|
||
}
|
||
});
|
||
|
||
if (locationDrawArrays.value?.length >= 2) {
|
||
let feature = {
|
||
type: 'Feature',
|
||
geometry: {
|
||
type: 'LineString',
|
||
coordinates: [],
|
||
},
|
||
};
|
||
|
||
locationDrawArrays.value?.forEach((item, index) => {
|
||
if (item.lng && item.lat) {
|
||
let coor = [parseFloat(item.lng), parseFloat(item.lat)];
|
||
feature.geometry.coordinates.push(coor);
|
||
}
|
||
});
|
||
|
||
feature.geometry.coordinates.push([
|
||
parseFloat(locationDrawArrays.value[0].lng),
|
||
parseFloat(locationDrawArrays.value[0].lat),
|
||
]);
|
||
|
||
locationGeoJson.polyline.features[0] = feature;
|
||
}
|
||
if (locationDrawArrays.value?.length >= 3) {
|
||
let feature = {
|
||
type: 'Feature',
|
||
geometry: {
|
||
type: 'Polygon',
|
||
coordinates: [[]],
|
||
},
|
||
};
|
||
locationDrawArrays.value?.forEach((item, index) => {
|
||
if (item.lng && item.lat) {
|
||
let coor = [parseFloat(item.lng), parseFloat(item.lat)];
|
||
feature.geometry.coordinates[0].push(coor);
|
||
}
|
||
});
|
||
feature.geometry.coordinates[0].push([
|
||
parseFloat(locationDrawArrays.value[0].lng),
|
||
parseFloat(locationDrawArrays.value[0].lat),
|
||
]);
|
||
locationGeoJson.polygon.features[0] = feature;
|
||
}
|
||
handlerLocationLoadLayer();
|
||
//console.log('locationGeoJson', locationGeoJson);
|
||
};
|
||
|
||
// 加载点、线、面图层
|
||
const handlerLocationLoadLayer = () => {
|
||
|
||
//console.log("locationGeoJson123",locationGeoJson);
|
||
// 绘制点
|
||
if (map.getSource('LocationPointSource')) {
|
||
map.getSource('LocationPointSource').setData(locationGeoJson.point);
|
||
} else {
|
||
map.addSource('LocationPointSource', {
|
||
type: 'geojson',
|
||
data: locationGeoJson.point,
|
||
});
|
||
map.addLayer({
|
||
id: 'LocationPointLayer',
|
||
type: 'circle',
|
||
source: 'LocationPointSource',
|
||
paint: {
|
||
'circle-radius': 5,
|
||
'circle-color': '#408eff', // 设置点的颜色
|
||
},
|
||
});
|
||
}
|
||
|
||
// 绘制线
|
||
if (map.getSource('LocationPolylineSource')) {
|
||
map.getSource('LocationPolylineSource').setData(locationGeoJson.polyline);
|
||
} else {
|
||
map.addSource('LocationPolylineSource', {
|
||
type: 'geojson',
|
||
data: locationGeoJson.polyline,
|
||
});
|
||
map.addLayer({
|
||
id: 'LocationLineLayer',
|
||
type: 'line',
|
||
source: 'LocationPolylineSource',
|
||
paint: {
|
||
'line-color': '#408eff', // 设置线的颜色
|
||
'line-width': 2, // 设置线的宽度
|
||
},
|
||
});
|
||
}
|
||
|
||
// 绘制面
|
||
if (map.getSource('LocationPolygonSource')) {
|
||
map.getSource('LocationPolygonSource').setData(locationGeoJson.polygon);
|
||
} else {
|
||
map.addSource('LocationPolygonSource', {
|
||
type: 'geojson',
|
||
data: locationGeoJson.polygon,
|
||
});
|
||
map.addLayer({
|
||
id: 'LocationPolygonLayer',
|
||
type: 'fill',
|
||
source: 'LocationPolygonSource',
|
||
paint: {
|
||
'fill-color': '#408eff', // 设置填充颜色
|
||
'fill-opacity': 0.5, // 设置填充透明度
|
||
},
|
||
});
|
||
}
|
||
};
|
||
|
||
// 绘制图片方位角
|
||
|
||
// 是否显示全部方位角
|
||
const isShowPicture = ref<Boolean>(true);
|
||
const imageList = ref<Array>([]);
|
||
const pictureArrowElementArray = ref([]);
|
||
const pictureArrowMarker = ref([]);
|
||
const pictureParentArrowElementArray = ref([]);
|
||
const currentPictureIndex = ref(null);
|
||
const currentPictureZIndex = ref(0);
|
||
|
||
function handlerLoadPictureAzimuth(list) {
|
||
pictureArrowMarker.value?.forEach((marker,index)=>{
|
||
if(marker){
|
||
marker.remove();
|
||
}
|
||
})
|
||
imageList.value = list;
|
||
pictureArrowMarker.value = [];
|
||
pictureArrowElementArray.value = [];
|
||
pictureParentArrowElementArray.value = [];
|
||
|
||
list.forEach((item, index) => {
|
||
if (item.lng && item.lat) {
|
||
let arrowElement = document.createElement('div');
|
||
arrowElement.className = 'picArrow';
|
||
arrowElement.style.width = '43px';
|
||
arrowElement.style.height = '57px';
|
||
let childElement = document.createElement('div');
|
||
childElement.className = 'childArrow';
|
||
childElement.style.width = '43px';
|
||
childElement.style.height = '57px';
|
||
childElement.style.transform = 'rotate(' + item.orientation + 'deg)';
|
||
childElement.style.backgroundImage = 'url(/map/arrow.png)';
|
||
childElement.style.backgroundSize = '43px 57px';
|
||
childElement.style.position = "relative";
|
||
arrowElement.appendChild(childElement);
|
||
pictureArrowElementArray.value?.push(childElement);
|
||
pictureParentArrowElementArray.value?.push(arrowElement);
|
||
let arrowMark = new mapboxgl.Marker(arrowElement)
|
||
.setLngLat([item.lng, item.lat])
|
||
.addTo(map);
|
||
pictureArrowMarker.value?.push(arrowMark);
|
||
}
|
||
});
|
||
|
||
currentPictureZIndex.value = list?.length;
|
||
|
||
// setTimeout(function(){
|
||
// handlerCurrentImageChange(0);
|
||
// },10000)
|
||
}
|
||
|
||
function handlerCurrentImageChange(fileName) {
|
||
// 根据图片名检索标签
|
||
let currentIndex = null;
|
||
imageList.value?.forEach((item, index) => {
|
||
if (item.filePath?.match(fileName)) {
|
||
currentIndex = index;
|
||
currentPictureIndex.value = index;
|
||
}
|
||
});
|
||
try {
|
||
pictureArrowElementArray.value?.forEach((itme, index) => {
|
||
pictureArrowElementArray.value[index].style.backgroundImage = 'url(/map/arrow.png)';
|
||
if(isShowPicture.value){
|
||
pictureArrowElementArray.value[index].style.display = 'block';
|
||
}else{
|
||
pictureArrowElementArray.value[index].style.display = 'none';
|
||
}
|
||
});
|
||
|
||
pictureArrowElementArray.value[currentIndex].style.backgroundImage = 'url(/map/arrow-a.png)';
|
||
pictureArrowElementArray.value[currentIndex].style.display = 'block';
|
||
|
||
// 设置显示在最上层
|
||
currentPictureZIndex.value = currentPictureZIndex.value + 1;
|
||
pictureParentArrowElementArray.value[currentIndex].style.zIndex = currentPictureZIndex.value;
|
||
} catch (e) {}
|
||
|
||
return;
|
||
}
|
||
|
||
|
||
function handlerChangePictureVisible(){
|
||
isShowPicture.value = !isShowPicture.value;
|
||
// 展示全部
|
||
if(isShowPicture.value){
|
||
pictureArrowElementArray.value?.forEach((itme, index) => {
|
||
pictureArrowElementArray.value[index].style.display = 'block';
|
||
});
|
||
}else{
|
||
pictureArrowElementArray.value?.forEach((itme, index) => {
|
||
pictureArrowElementArray.value[index].style.display = 'none';
|
||
});
|
||
if(pictureArrowElementArray.value?.length){
|
||
pictureArrowElementArray.value[currentPictureIndex.value].style.display = 'block';
|
||
}
|
||
}
|
||
|
||
// 展示选中
|
||
|
||
}
|
||
|
||
// 绘制点
|
||
const handlerLocationDrawPoint = () => {};
|
||
|
||
// 绘制线
|
||
const handlerLocationDrawLine = () => {};
|
||
|
||
// 绘制面
|
||
const handlerLocationDrawPolygon = () => {};
|
||
|
||
// 云查询按钮-启动
|
||
function initiateCloudQuery1() {
|
||
let geomidStr = props.geomsList.map((item) => item.key).join(',');
|
||
AddDroneTask({ geomid: geomidStr, caseno: props.caseno, countyname: props.countyname }).then(
|
||
(res) => {
|
||
if (res) {
|
||
message.success('成功提交云查询');
|
||
useCloudQuery.setGeomid(geomidStr);
|
||
useCloudQuery.setCaseno(props.caseno);
|
||
useCloudQuery.setIdentification(true);
|
||
let expires =
|
||
'; expires=' + new Date(new Date().getTime() + 60 * 60 * 1000).toUTCString();
|
||
document.cookie = 'geomid=' + encodeURIComponent(geomidStr) + expires + '; path=/';
|
||
document.cookie = 'caseno=' + encodeURIComponent(props.caseno) + expires + '; path=/';
|
||
document.cookie = 'identification=true' + expires + '; path=/';
|
||
} else {
|
||
message.error('提交云查询失败');
|
||
useCloudQuery.setIdentification(false);
|
||
}
|
||
},
|
||
);
|
||
}
|
||
// 云查询按钮-查询中
|
||
function initiateCloudQuery2() {
|
||
let geomidStr = props.geomsList.map((item) => item.key).join(',');
|
||
// 查看当前后台云查询图斑的情况
|
||
LoadCloudQueryByCaseNo({
|
||
geomid: useCloudQuery.geomid,
|
||
caseno: useCloudQuery.caseno,
|
||
}).then((res) => {
|
||
if (res) {
|
||
if (geomidStr == useCloudQuery.geomid && props.caseno == useCloudQuery.caseno) {
|
||
if (res.state == 1 || res.state == 0) {
|
||
message.warning('当前图斑的云查询正在运行，请稍候等待');
|
||
} else {
|
||
useCloudQuery.setIdentification(false);
|
||
useCloudQuery.setBeforeId(res.queryId);
|
||
useCloudQuery.setCloudQueryInfo({ id: res.queryId });
|
||
let expires =
|
||
'; expires=' + new Date(new Date().getTime() + 60 * 60 * 1000).toUTCString();
|
||
document.cookie = 'beforeId=' + encodeURIComponent(res.queryId) + expires + '; path=/';
|
||
open.value = true;
|
||
}
|
||
} else {
|
||
// 非当前后台云查询的图斑
|
||
message.warning('已有云查询运行，不能再次提交');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
// 云查询按钮-查看结果
|
||
function initiateCloudQuery3() {
|
||
open.value = true;
|
||
}
|
||
|
||
// 云查询内容提示---------------------------------------------------------
|
||
function closeCloudQuery() {
|
||
useCloudQuery.setCloudQueryVisable(false);
|
||
useCloudQuery.identification = false;
|
||
}
|
||
|
||
//接口推送
|
||
signal.on('RevMsg', (user, cloudDataString, time, id, issystem) => {
|
||
// CloudQuery 云查询
|
||
if (user == 'CloudQuery') {
|
||
let cloudData = JSON.parse(cloudDataString);
|
||
if (
|
||
cloudData.geomid == useCloudQuery.getGeomid &&
|
||
cloudData.caseno == useCloudQuery.getCaseno
|
||
) {
|
||
if (useCloudQuery.beforeId == '' || cloudData.queryid != useCloudQuery.beforeId) {
|
||
let expires =
|
||
'; expires=' + new Date(new Date().getTime() + 24 * 60 * 60 * 1000).toUTCString();
|
||
document.cookie =
|
||
'beforeId=' + encodeURIComponent(cloudData.queryId) + expires + '; path=/';
|
||
}
|
||
useCloudQuery.setBeforeId(cloudData.queryid);
|
||
}
|
||
}
|
||
});
|
||
|
||
const compare = ref(false);
|
||
const open = ref(false);
|
||
const changeCompare = (value) => {
|
||
compare.value = value;
|
||
};
|
||
const closeCloudQueryModal = () => {
|
||
open.value = false;
|
||
compare.value = false;
|
||
}
|
||
|
||
defineExpose({
|
||
handlerDraw,
|
||
handlerDetails,
|
||
handlerLocation,
|
||
handlerCancleDraw,
|
||
handlerLoadPictureAzimuth,
|
||
handlerCurrentImageChange,
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.cloud-query-div {
|
||
position: absolute;
|
||
top: 50px;
|
||
left: 10px;
|
||
width: 66px;
|
||
height: 66px;
|
||
background: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 5px;
|
||
border-radius: 5px;
|
||
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
|
||
user-select: none;
|
||
cursor: pointer;
|
||
}
|
||
.cloud-query-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
.map-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.map-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.layer-control-center {
|
||
position: absolute;
|
||
top: 15px;
|
||
left: 15px;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.layer-control-center p {
|
||
margin: 0px;
|
||
}
|
||
|
||
.layer-control-center .ant-checkbox-wrapper {
|
||
}
|
||
|
||
.draw-control-center {
|
||
position: absolute;
|
||
padding: 8px;
|
||
top: 15px;
|
||
right: 15px;
|
||
background: #ffffff;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.draw-control-center .draw-btn {
|
||
float: left;
|
||
margin: 0px 7px;
|
||
padding: 5px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.draw-control-center .draw-btn:hover {
|
||
background-color: rgb(0 0 0/5%);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mapboxgl-ctrl-group:not(:empty) {
|
||
box-shadow: none;
|
||
}
|
||
|
||
.mapboxgl-ctrl-group {
|
||
padding: 6px;
|
||
border-radius: 12px;
|
||
top: 5px;
|
||
right: 0px;
|
||
}
|
||
.mapbox-gl-draw_ctrl-draw-btn {
|
||
width: 20px !important;
|
||
height: 20px !important;
|
||
float: left;
|
||
}
|
||
|
||
.mapboxgl-ctrl-top-right {
|
||
width: 360px;
|
||
}
|
||
|
||
.mapboxgl-ctrl-group button + button {
|
||
border: 0px;
|
||
margin: 0px 6px;
|
||
}
|
||
|
||
.mapbox-gl-draw_ctrl-draw-btn:hover {
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
.mapbox-gl-draw_polygon {
|
||
background-image: url(/polygon.png);
|
||
background-size: 100% 100%;
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
.mapbox-gl-draw_point {
|
||
background-image: url(/point.png);
|
||
background-size: 100% 100%;
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
.mapbox-gl-draw_line {
|
||
background-image: url(/line.png);
|
||
background-size: 100% 100%;
|
||
width: 100px;
|
||
height: 100px;
|
||
margin: 0px 6px;
|
||
}
|
||
|
||
.mapbox-gl-draw_trash {
|
||
background-image: url(/del.png);
|
||
background-size: 100% 100%;
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
|
||
.mapbox-gl-draw_combine {
|
||
background-image: url(/combine.png);
|
||
background-size: 100% 100%;
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
|
||
.mapbox-gl-draw_uncombine {
|
||
background-image: url(/uncombine.png);
|
||
background-size: 100% 100%;
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
|
||
.jas-ctrl-measure {
|
||
position: relative;
|
||
top: 6px;
|
||
right: 10px;
|
||
}
|
||
|
||
.jas-ctrl-measure-item {
|
||
height: 22px;
|
||
color: rgb(255, 255, 255);
|
||
}
|
||
|
||
.layer-item {
|
||
padding: 8px 16px;
|
||
}
|
||
|
||
.layer-item:hover {
|
||
background: #c7dcf580;
|
||
}
|
||
|
||
::v-deep .ant-collapse-content-box {
|
||
padding: 0px !important;
|
||
}
|
||
|
||
::v-deep .jas-ctrl-extend-desktop-container {
|
||
width: 320px !important;
|
||
}
|
||
|
||
.position-by-lnglat {
|
||
height: 29px;
|
||
background: #fff;
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 131px;
|
||
border-radius: 3px;
|
||
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
|
||
.to-location {
|
||
width: 29px;
|
||
height: 29px;
|
||
float: left;
|
||
background: url(/map/location.png);
|
||
background-size: 20px 20px;
|
||
background-repeat: no-repeat;
|
||
background-position: 4px 5px;
|
||
&:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.picture-azimuth {
|
||
width: 29px;
|
||
height: 29px;
|
||
float: left;
|
||
background: url(/map/is_show_picture.png);
|
||
background-size: 20px 20px;
|
||
background-repeat: no-repeat;
|
||
background-position: 4px 5px;
|
||
&:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.picture-azimuth-active {
|
||
width: 29px;
|
||
height: 29px;
|
||
float: left;
|
||
background: url(/map/not_show_picture.png);
|
||
background-size: 20px 20px;
|
||
background-repeat: no-repeat;
|
||
background-position: 4px 5px;
|
||
&:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.draw-polygon {
|
||
width: 29px;
|
||
height: 29px;
|
||
float: left;
|
||
background: url(/map/draw_polygon.png);
|
||
background-size: 20px 20px;
|
||
background-repeat: no-repeat;
|
||
background-position: 4px 5px;
|
||
&:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.split-line {
|
||
width: 29px;
|
||
height: 29px;
|
||
float: left;
|
||
background: url(/map/split_polygon.png);
|
||
background-size: 20px 20px;
|
||
background-repeat: no-repeat;
|
||
background-position: 4px 5px;
|
||
&:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.split-polygon {
|
||
width: 29px;
|
||
height: 29px;
|
||
float: left;
|
||
background: url(/map/split_polygon_polygon.png);
|
||
background-size: 20px 20px;
|
||
background-repeat: no-repeat;
|
||
background-position: 4px 5px;
|
||
&:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.to-location-input {
|
||
padding: 16px;
|
||
padding-right: 4px;
|
||
width: 418px;
|
||
min-height: 60px;
|
||
background: #fff;
|
||
position: absolute;
|
||
top: 48px;
|
||
right: 10px;
|
||
z-index: 999999;
|
||
border-radius: 5px;
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||
.location-operation {
|
||
width: 100%;
|
||
height: 40px;
|
||
border-bottom: 1px solid #f1f1f1;
|
||
margin-bottom: 12px;
|
||
}
|
||
.location-item-list-coantienr {
|
||
width: 100%;
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
.location-item {
|
||
line-height: 20px;
|
||
margin-bottom: 6px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.split-panel-item:hover {
|
||
cursor: pointer;
|
||
color: #999;
|
||
}
|
||
|
||
.cloudqueryNotice {
|
||
background: rgba(0, 0, 0, 0.53);
|
||
padding: 0px 14px;
|
||
border-radius: 6px;
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 5vw;
|
||
width: 700px;
|
||
color: #fff;
|
||
z-index: 10;
|
||
.cloudquery-title {
|
||
height: 40px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 16px;
|
||
}
|
||
.cloudquery-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.cloudquery-right {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
width: 130px;
|
||
}
|
||
img {
|
||
width: 34px;
|
||
height: 29px;
|
||
}
|
||
.cloudquery-btn {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
.line {
|
||
background: #ededed;
|
||
width: 1px;
|
||
height: 20px;
|
||
}
|
||
.anticon.anticon-close {
|
||
height: 30px;
|
||
}
|
||
button {
|
||
width: 70px;
|
||
height: 26px;
|
||
background: linear-gradient(-74deg, #086dec, #0b4bdd);
|
||
box-shadow: 3px 4px 5px 1px rgba(13, 13, 13, 0.05);
|
||
border-radius: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.title-box {
|
||
margin-left: 10px;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
</style>
|