2767 lines
70 KiB
JavaScript
2767 lines
70 KiB
JavaScript
import Map from "@arcgis/core/Map";
|
||
import MapView from "@arcgis/core/views/MapView";
|
||
import TianData from './Tmap'
|
||
import TileInfo from "@arcgis/core/layers/support/TileInfo";
|
||
import WebTileLayer from "@arcgis/core/layers/WebTileLayer";
|
||
import TileLayer from "@arcgis/core/layers/TileLayer.js";
|
||
import MapImageLayer from "@arcgis/core/layers/MapImageLayer.js";
|
||
import Draw from "@arcgis/core/views/draw/Draw.js";
|
||
import Polyline from "@arcgis/core/geometry/Polyline.js";
|
||
import Polygon from "@arcgis/core/geometry/Polygon.js";
|
||
import Graphic from "@arcgis/core/Graphic.js";
|
||
import Point from "@arcgis/core/geometry/Point.js";
|
||
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js";
|
||
import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel.js";
|
||
import useMapDataStore from "@map/store/modules/mapData"
|
||
import useMapLogStore from "@map/store/modules/mapLog"
|
||
import * as webMercatorUtils from "@arcgis/core/geometry/support/webMercatorUtils.js";
|
||
import * as geometryEngine from "@arcgis/core/geometry/geometryEngine.js";
|
||
import CIMSymbol from "@arcgis/core/symbols/CIMSymbol.js";
|
||
import * as geodesicUtils from "@arcgis/core/geometry/support/geodesicUtils.js";
|
||
import MapNotesLayer from "@arcgis/core/layers/MapNotesLayer.js";
|
||
import DistanceMeasurement2D from "@arcgis/core/widgets/DistanceMeasurement2D.js";
|
||
import * as print from "@arcgis/core/rest/print.js";
|
||
import PrintTemplate from "@arcgis/core/rest/support/PrintTemplate.js";
|
||
import PrintParameters from "@arcgis/core/rest/support/PrintParameters.js";
|
||
import * as turf from '@turf/turf'
|
||
|
||
import emitter from "../emitter";
|
||
|
||
const symbolData = {
|
||
House: [255, 0, 0, 0.6],
|
||
Road: [118, 116, 218, 0.9],
|
||
River: [94, 208, 81, 0.9]
|
||
}
|
||
|
||
let mapLog = ''
|
||
let logOldGeometry = []
|
||
|
||
let self = '';
|
||
const ldMap = {
|
||
map: '',
|
||
view: '',
|
||
nowlayer: '',
|
||
sketchLayer: {
|
||
pointLayer: '',
|
||
polylineLayer: '',
|
||
polygonLayer: '',
|
||
selectGraphic: null
|
||
},
|
||
pointSketchViewModel: '',
|
||
polygonSketchViewModel: '',
|
||
polylineSketchViewModel: '',
|
||
addGraphicType: '',
|
||
lineLayer: '',
|
||
count: 0,
|
||
lighHight: null,
|
||
selectLine: null,
|
||
draw: null,
|
||
DrawstartPoint: [],
|
||
DrawenedPoint: [],
|
||
DrawDregType: null,
|
||
textLayer: null,
|
||
loadelevationLayer: null,
|
||
ldMapActionType: '',
|
||
printExcent: '',
|
||
pointSketchType: 'Station',
|
||
drawTypeLine: '',// 划线是一条还是多条
|
||
newDrawLineByClick: '',
|
||
pointMaxIndex: -1,
|
||
hightlayer: '',
|
||
pngLayer: null,
|
||
selectPng: '',
|
||
wkid: null,
|
||
//初始化地图
|
||
initMap: function (wkid) {
|
||
|
||
self = this;
|
||
return new Promise((resolve, reject) => {
|
||
|
||
if (wkid == self.wkid) {
|
||
resolve()
|
||
|
||
} else {
|
||
let tileInfo = new TileInfo(TianData.infoData(wkid));
|
||
self.wkid = wkid
|
||
let defaultInfo = {
|
||
subDomains: ["t1"],
|
||
spatialReference: {
|
||
wkid: wkid,
|
||
},
|
||
tileInfo: tileInfo,
|
||
}
|
||
let imageBasemapLayer = new WebTileLayer({
|
||
...defaultInfo,
|
||
urlTemplate: TianData.img_c
|
||
})
|
||
let imageNoteLayer = new WebTileLayer({
|
||
...defaultInfo,
|
||
urlTemplate: TianData.cia_c
|
||
})
|
||
|
||
|
||
this.map = new Map({
|
||
basemap: {
|
||
baseLayers: [imageBasemapLayer, imageNoteLayer],
|
||
},
|
||
slider: false
|
||
});
|
||
|
||
|
||
let lodsView = [
|
||
{ level: 0, resolution: 156543.033928, scale: 591657527.591555 },
|
||
{ level: 1, resolution: 78271.5169639999, scale: 295828763.795777 },
|
||
{ level: 2, resolution: 39135.7584820001, scale: 147914381.897889 },
|
||
{ level: 3, resolution: 19567.8792409999, scale: 73957190.948944 },
|
||
{ level: 4, resolution: 9783.93962049996, scale: 36978595.474472 },
|
||
{ level: 5, resolution: 4891.96981024998, scale: 18489297.737236 },
|
||
{ level: 6, resolution: 2445.98490512499, scale: 9244648.868618 },
|
||
{ level: 7, resolution: 1222.99245256249, scale: 4622324.434309 },
|
||
{ level: 8, resolution: 611.49622628138, scale: 2311162.217155 },
|
||
{ level: 9, resolution: 305.748113140558, scale: 1155581.108577 },
|
||
{ level: 10, resolution: 152.874056570411, scale: 577790.554289 },
|
||
{ level: 11, resolution: 76.4370282850732, scale: 288895.277144 },
|
||
{ level: 12, resolution: 38.2185141425366, scale: 144447.638572 },
|
||
{ level: 13, resolution: 19.1092570712683, scale: 72223.819286 },
|
||
{ level: 14, resolution: 9.55462853563415, scale: 36111.909643 },
|
||
{ level: 15, resolution: 4.77731426794937, scale: 18055.954822 },
|
||
{ level: 16, resolution: 2.38865713397468, scale: 9027.977411 },
|
||
{ level: 17, resolution: 1.19432856685505, scale: 4513.988705 },
|
||
{ level: 18, resolution: 0.597164283559817, scale: 2256.994353 },
|
||
{ level: 19, resolution: 0.298582141647617, scale: 1128.497176 },
|
||
{ level: 20, resolution: 0.14929107082380833, scale: 564.248588 },
|
||
{ level: 21, resolution: 0.07464553541190416, scale: 282.124294 },
|
||
{ level: 22, resolution: 0.03732276770595208, scale: 141.062147 },
|
||
{ level: 23, resolution: 0.01866138385297604, scale: 70.5310735 },
|
||
]
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
this.view = new MapView({
|
||
container: "viewDiv",
|
||
map: this.map,
|
||
spatialReference: {
|
||
wkid: wkid,
|
||
},
|
||
constraints: {
|
||
lods: lodsView,
|
||
rotationEnabled: false,
|
||
minZoom: 0,
|
||
maxZoom: 50
|
||
},
|
||
center: [116.85722842688202, 39.26485279059861],
|
||
zoom: 15,
|
||
});
|
||
let measurementWidget = new DistanceMeasurement2D({
|
||
view: this.view
|
||
});
|
||
// this.view.ui.add(measurementWidget, "bottom-right");
|
||
|
||
self.view.on("drag", function (event) {
|
||
if (event.button == 2 && self.DrawDregType && self.ldMapActionType == 'regectionAction') {
|
||
console.log(event)
|
||
let point = self.view.toMap({ x: event.x, y: event.y });
|
||
if (event.action == 'start') {
|
||
// self.DrawLine()
|
||
self.DrawstartPoint = [point.x, point.y];
|
||
}
|
||
if (event.action == 'end') {
|
||
self.Bindpolygon()
|
||
self.view.graphics.removeAll();
|
||
}
|
||
if (event.action == 'update') {
|
||
// self.destroyDraw()
|
||
self.DrawenedPoint = [point.x, point.y];
|
||
let data = {
|
||
vertices: [self.DrawstartPoint, self.DrawenedPoint]
|
||
}
|
||
self.createPolygon(data)
|
||
}
|
||
|
||
}
|
||
|
||
|
||
});
|
||
mapLog = useMapLogStore()
|
||
self.view.ui.remove("zoom"); //移除
|
||
self.view.ui.remove("attribution"); //移除底部ESRI logo bb
|
||
|
||
self.view.on("click", (event) => {
|
||
|
||
console.log(event)
|
||
if (self.popup) {
|
||
self.popup.remove()
|
||
}
|
||
if (self.hightlayer) {
|
||
|
||
self.hightlayer.removeAll()
|
||
}
|
||
|
||
self.view.hitTest(event).then((response) => {
|
||
|
||
self.lighHight?.remove();
|
||
self.selectLine = ''
|
||
self.selectPng = ''
|
||
if (response.results && response.results[0]) {
|
||
var graphic = response.results[0].graphic;
|
||
console.log(graphic)
|
||
if (self.ldMapActionType == 'lineAction') {
|
||
if (graphic.geometry.type == "polyline") {
|
||
self.view.whenLayerView(graphic.layer).then((layerView) => {
|
||
|
||
emitter.emit('line', graphic.attributes.data)
|
||
self.selectLine = graphic
|
||
self.lighHight = layerView.highlight(graphic)
|
||
|
||
})
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
}
|
||
if (graphic.attributes?.type == 'qdf') {
|
||
self.view.whenLayerView(graphic.layer).then((layerView) => {
|
||
self.selectPng = graphic
|
||
self.lighHight = layerView.highlight(graphic)
|
||
})
|
||
|
||
}
|
||
}
|
||
|
||
|
||
});
|
||
});
|
||
self.view.watch("zoom", function (newValue, oldValue, propertyName, target) {
|
||
|
||
if (Number.isInteger(newValue)) {
|
||
console.info(newValue);
|
||
self.showeleByzoom(newValue)
|
||
}
|
||
});
|
||
//文字
|
||
|
||
self.view.when(e => {
|
||
// const print = new Print({
|
||
// view: self.view,
|
||
// // specify your own print service
|
||
// printServiceUrl:
|
||
// "http://139.224.252.239:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
|
||
// });
|
||
|
||
// // Add widget to the top right corner of the view
|
||
// self.view.ui.add(print, "top-right");
|
||
resolve()
|
||
})
|
||
|
||
|
||
}
|
||
|
||
|
||
})
|
||
|
||
},
|
||
async arcgisPrint() {
|
||
|
||
const url = "http://139.224.252.239:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
|
||
await self.setCenter(self.nowlayer.fullExtent.center.x, self.nowlayer.fullExtent.center.y, 18)
|
||
|
||
let { width, height } = self.nowlayer.fullExtent
|
||
let { metersPerUnit } = self.nowlayer.fullExtent.spatialReference
|
||
width = width * metersPerUnit * 3
|
||
height = height * metersPerUnit * 3
|
||
const template = new PrintTemplate({
|
||
format: 'PNG32',
|
||
exportOptions: {
|
||
width,
|
||
height,
|
||
dpi: 180,
|
||
},
|
||
layout: "map-only",
|
||
})
|
||
const params = new PrintParameters({
|
||
view: self.view,
|
||
template: template,
|
||
})
|
||
print.execute(url, params).then(result => {
|
||
console.log(result.url);
|
||
window.open(result.url);
|
||
}).catch(err => {
|
||
console.log("Something broke: ", err);
|
||
});
|
||
},
|
||
noteSlayerInit() {
|
||
|
||
|
||
self.sketchLayer = new MapNotesLayer();
|
||
self.sketchLayer.isCreate = true
|
||
self.view.map.add(self.sketchLayer, 1)
|
||
self.textLayer = new GraphicsLayer()
|
||
|
||
self.pngLayer = new GraphicsLayer()
|
||
self.loadelevationLayer = new GraphicsLayer()
|
||
self.map.add(self.textLayer, 10)
|
||
self.map.add(self.pngLayer, 11)
|
||
self.map.add(self.loadelevationLayer, 10)
|
||
self.initSketch()
|
||
},
|
||
removeAll() {
|
||
self.view.map.removeAll();
|
||
},
|
||
addLayer: function (e) {
|
||
|
||
self.removeAll();
|
||
let data = {
|
||
id: "layerName",
|
||
url: '',
|
||
...e,
|
||
spatialReference: {
|
||
wkid: self.wkid,
|
||
},
|
||
}
|
||
var imgLayer = new TileLayer(data);
|
||
|
||
this.map.add(imgLayer);
|
||
|
||
imgLayer.when((e) => {
|
||
self.nowlayer = e
|
||
self.setCenter(e.fullExtent.center.x, e.fullExtent.center.y)
|
||
})
|
||
self.view.whenLayerView(imgLayer).then(function (layerView) {
|
||
// self.nowlayer = layerView
|
||
})
|
||
|
||
self.noteSlayerInit()
|
||
return data.id;
|
||
},
|
||
removeLayer: function (e) {
|
||
this.map.remove(this.map.findLayerById(e))
|
||
},
|
||
setCenter: function (x, y, zoom) {
|
||
if (!zoom) {
|
||
zoom = this.view.zoom > 18 ? this.view.zoom : 18
|
||
}
|
||
return new Promise((resolve, reject) => {
|
||
this.view.goTo({
|
||
center: [x, y],
|
||
zoom,
|
||
}).then(res => {
|
||
|
||
resolve()
|
||
});
|
||
})
|
||
|
||
},
|
||
//添加文字标注
|
||
addTextFeature(text, id,) {
|
||
const textSymbol = {
|
||
type: "text", // autocasts as new TextSymbol()
|
||
angle: 90,
|
||
color: "green",
|
||
font: {
|
||
// autocast as new Font()
|
||
family: "Just Another Hand",
|
||
size: 12
|
||
},
|
||
haloColor: "black",
|
||
haloSize: 1,
|
||
horizontalAlignment: "right",
|
||
verticalAlignment: "bottom"
|
||
};
|
||
|
||
},
|
||
//高亮某个数据（未到终点的线）
|
||
hightLineLayer(data) {
|
||
|
||
let path = []
|
||
if (!self.hightlayer) {
|
||
self.hightlayer = new GraphicsLayer();
|
||
self.map.add(self.hightlayer)
|
||
}
|
||
|
||
data.forEach(item => {
|
||
|
||
return path.push([item[0], item[1]])
|
||
})
|
||
|
||
let linelayer = new Polyline({
|
||
paths: path,
|
||
})
|
||
|
||
const graphic = new Graphic({
|
||
geometry: linelayer,
|
||
|
||
symbol: {
|
||
type: "simple-line",
|
||
width: 5,
|
||
color: "red",
|
||
},
|
||
|
||
});
|
||
self.hightlayer.add(graphic)
|
||
|
||
|
||
|
||
// console.log(newPointGraphic)
|
||
},
|
||
//计算两点之间的距离
|
||
distance: function (p1, p2) {
|
||
|
||
let polyline = new Polyline({
|
||
paths: [[p1[0], p1[1]], [p2[0], p2[1]]],
|
||
})
|
||
length = geometryEngine.geodesicLength(polyline, "meters");
|
||
|
||
return length.toFixed(2)
|
||
},
|
||
|
||
initSketch() {
|
||
|
||
let count = 0;
|
||
const pointLayer = self.sketchLayer.pointLayer;
|
||
const polylineLayer = self.sketchLayer.polylineLayer;
|
||
const polygonLayer = self.sketchLayer.polygonLayer;
|
||
self.pointSketchViewModel = createSketchSketchViewModelPoint(pointLayer)
|
||
self.polygonSketchViewModel = createSketchSketchViewModel(polygonLayer)
|
||
self.polylineSketchViewModel = createSketchSketchViewModel(polylineLayer);
|
||
function createSketchSketchViewModel(layer) {
|
||
|
||
const sketchVM = new SketchViewModel({
|
||
view: self.view,
|
||
layer,
|
||
updateOnGraphicClick: true,
|
||
defaultStyle: {
|
||
point: {
|
||
type: "simple-marker",
|
||
color: "[0, 0, 0, 1]",
|
||
outline: {
|
||
color: "[255, 255, 255, 1]",
|
||
width: 1
|
||
},
|
||
size: "5px"
|
||
},
|
||
},
|
||
defaultUpdateOptions: {
|
||
|
||
|
||
highlightOptions: {
|
||
enabled: false,
|
||
},
|
||
enableScaling: false,
|
||
|
||
tool: 'reshape',
|
||
reshapeOptions: {
|
||
edgeOperation: 'none',
|
||
shapeOperation: 'none'
|
||
}
|
||
},
|
||
});
|
||
|
||
sketchVM.on("create", addGraphic);
|
||
sketchVM.on("update", selectData)
|
||
|
||
|
||
return sketchVM;
|
||
}
|
||
function createSketchSketchViewModelPoint(layer) {
|
||
|
||
const sketchVM = new SketchViewModel({
|
||
view: self.view,
|
||
layer,
|
||
updateOnGraphicClick: true,
|
||
defaultStyle: {
|
||
point: {
|
||
type: "simple-marker",
|
||
color: "[0, 0, 0, 1]",
|
||
outline: {
|
||
color: "[255, 255, 255, 1]",
|
||
width: 1
|
||
},
|
||
size: "5px"
|
||
},
|
||
},
|
||
defaultUpdateOptions: {
|
||
|
||
|
||
highlightOptions: {
|
||
enabled: true,
|
||
},
|
||
|
||
toggleToolOnClick: false,
|
||
tool: 'move',
|
||
reshapeOptions: {
|
||
edgeOperation: 'none',
|
||
shapeOperation: 'move-xy'
|
||
}
|
||
},
|
||
});
|
||
sketchVM.on("create", addGraphic);
|
||
sketchVM.on("update", selectData);
|
||
sketchVM.on("delete", selectRemove)
|
||
return sketchVM;
|
||
}
|
||
function selectData(e) {
|
||
|
||
if (e.graphics[0].attributes.data?.pointType == 'Station' || e.graphics[0].attributes.data?.type == 'Station') {
|
||
return
|
||
}
|
||
let graphic = e.graphics[0]
|
||
console.log(e)
|
||
if (e.tool == "move") {
|
||
self.movePointBy(graphic)
|
||
//移动点位，边线跟随移动
|
||
}
|
||
if (e.state == 'start') {
|
||
logOldGeometry = graphic.geometry
|
||
if (graphic.attributes.type == "House") {
|
||
|
||
emitter.emit('polyon', graphic.attributes.data)
|
||
}
|
||
|
||
self.sketchLayer.selectGraphic = graphic
|
||
|
||
// polygonLayer.remove(e.graphics[0])
|
||
}
|
||
if (e.state == 'active') {
|
||
|
||
//记录操作过的特征物
|
||
if (graphic.attributes.type) {
|
||
//更改经纬度范围
|
||
if (graphic.attributes.data && graphic.attributes.data.action == undefined) {
|
||
graphic.attributes.data.action = 1
|
||
}
|
||
if (graphic.attributes.type == "House") {
|
||
|
||
//更改文字显示位置
|
||
if (graphic.attributes.data.isExit) {
|
||
self.setLabelByPolygon(graphic.geometry.centroid, 'text' + graphic.id, (graphic.attributes.data.houseMaterial || '') + (graphic.attributes.data.houseFloors || ''))
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
|
||
if (e.state == 'complete') {
|
||
self.sketchLayer.selectGraphic = null
|
||
if (self.ldMapActionType != 'lineAction') {
|
||
try {
|
||
const areas = geodesicUtils.geodesicAreas([graphic.geometry], "square-meters");
|
||
const area = Math.abs(areas[0]).toFixed(2)
|
||
graphic.attributes.data.area = area
|
||
} catch {
|
||
|
||
}
|
||
}
|
||
|
||
|
||
if (logOldGeometry != graphic.geometry) {
|
||
mapLog.addContent({
|
||
mapType: self.ldMapActionType != 'lineAction' ? 'regon' : 'line',
|
||
actionType: 'edit',
|
||
isrevoke: true,
|
||
tips: self.ldMapActionType != 'lineAction' ? graphic.attributes.type : graphic.attributes.data.pointType,
|
||
oldGeometry: [logOldGeometry],
|
||
oldAttributes: [graphic.geometry],
|
||
id: graphic.id,
|
||
})
|
||
}
|
||
}
|
||
|
||
}
|
||
function addGraphic(event) {
|
||
|
||
let mapdata = useMapDataStore()
|
||
|
||
let id
|
||
if (event.state === "complete") {
|
||
switch (event.tool) {
|
||
case "point":
|
||
pointLayer.remove(event.graphic);
|
||
if (self.pointSketchType == 'png') {
|
||
mapdata.addPngStyle(event.graphic.geometry).then(res => {
|
||
|
||
self.addsepticBygeomery(event.graphic.geometry, self.pointMaxIndex, res)
|
||
|
||
})
|
||
} else {
|
||
|
||
console.log(self.pointSketchType)
|
||
let symbol = {
|
||
type: "simple-marker",
|
||
style: "circle",
|
||
size: self.pointSketchType == 'Station' ? '18px' : self.pointSketchType == 'x' ? '14px' : '10px',
|
||
color: self.pointSketchType == 'Station' ? [8, 240, 36, 255] : self.pointSketchType == 'x' ? [7, 253, 253, 255] : [223, 3, 2, 255],
|
||
outline: {
|
||
width: 0
|
||
}
|
||
}
|
||
|
||
|
||
id = self.pointSketchType == 'Station' ? ('station:' + Date.now()) : self.pointMaxIndex
|
||
const newPointGraphic = new Graphic({
|
||
geometry: event.graphic.geometry,
|
||
symbol: symbol,
|
||
id,
|
||
attributes: {
|
||
data: { pointType: self.pointSketchType },
|
||
startIndex: null,
|
||
endIndex: null,
|
||
}
|
||
});
|
||
pointLayer.add(newPointGraphic);
|
||
mapLog.addContent({
|
||
mapType: self.ldMapActionType != 'lineAction' ? 'regon' : 'line',
|
||
actionType: 'add',
|
||
isrevoke: self.ldMapActionType != 'lineAction' ? false : true,
|
||
tips: self.pointSketchType,
|
||
oldGeometry: [],
|
||
oldAttributes: [event.graphic.geometry],
|
||
id,
|
||
})
|
||
|
||
|
||
}
|
||
|
||
break;
|
||
|
||
case "polyline":
|
||
count++;
|
||
polylineLayer.remove(event.graphic);
|
||
const newPolylineGraphic = new Graphic({
|
||
geometry: event.graphic.geometry,
|
||
symbol: {
|
||
type: "simple-line",
|
||
color: [245, 66, 155, 0.8],
|
||
width: 6
|
||
},
|
||
attributes: {
|
||
type: "polyline",
|
||
title: "polyline#" + count
|
||
}
|
||
});
|
||
polylineLayer.add(newPolylineGraphic);
|
||
|
||
break;
|
||
|
||
case "polygon":
|
||
count++;
|
||
polygonLayer.remove(event.graphic);
|
||
var polygon = event.graphic.geometry;
|
||
id = self.addGraphicType + ':' + Date.now()
|
||
let val = {
|
||
geometryId: id,
|
||
action: 2,
|
||
"innerings": [],
|
||
"extend": null,
|
||
type: self.addGraphicType,
|
||
path: polygon.rings[0]
|
||
}
|
||
|
||
const newPolygonGraphic = new Graphic({
|
||
id: id,
|
||
geometry: event.graphic.geometry,
|
||
symbol: {
|
||
type: "simple-fill", // autocasts as new SimpleFillSymbol()
|
||
color: symbolData[self.addGraphicType],
|
||
outline: {
|
||
// autocasts as new SimpleLineSymbol()
|
||
color: [255, 255, 255, 0.4],
|
||
width: 2
|
||
}
|
||
},
|
||
attributes: {
|
||
data: val,
|
||
type: self.addGraphicType,
|
||
|
||
sketchType: 'polygon'
|
||
}
|
||
});
|
||
polygonLayer.add(newPolygonGraphic);
|
||
mapdata.addByTypeData(self.addGraphicType, val)
|
||
mapLog.addContent({
|
||
mapType: 'regon',
|
||
actionType: 'add',
|
||
isrevoke: true,
|
||
tips: self.addGraphicType,
|
||
oldGeometry: [],
|
||
oldAttributes: [event.graphic.geometry],
|
||
id,
|
||
})
|
||
|
||
|
||
break;
|
||
|
||
default:
|
||
console.log("geometry type not found: ", event);
|
||
}
|
||
}
|
||
}
|
||
function selectRemove(e) {
|
||
|
||
let selectData = e.graphics[0]
|
||
if (self.ldMapActionType == 'lineAction') {
|
||
|
||
let attributes = selectData.attributes
|
||
let allPolyline = self.lineLayer.graphics
|
||
|
||
if (!(attributes.endIndex && attributes.startIndex)) {
|
||
let PolyLine = [];
|
||
if (allPolyline) {
|
||
allPolyline.forEach(item => {
|
||
if (item.attributes.leftId == selectData.id || item.attributes.nextId == selectData.id) {
|
||
PolyLine.push(item)
|
||
}
|
||
})
|
||
PolyLine.forEach(item => {
|
||
let point = self.getSketchDataByType("point").filter(data => {
|
||
return data.id == item.attributes.leftId
|
||
})?.[0];
|
||
point && (point.attributes.endIndex = null)
|
||
|
||
self.lineLayer.remove(item)
|
||
})
|
||
}
|
||
|
||
} else {
|
||
|
||
let leftGra = [], rightGra
|
||
allPolyline.forEach(item => {
|
||
if (item.attributes.nextId == selectData.id) {
|
||
leftGra.push(item)
|
||
}
|
||
if (item.attributes.leftId == selectData.id) {
|
||
rightGra = item
|
||
}
|
||
})
|
||
leftGra.forEach((Leftitem) => {
|
||
let leftPoint
|
||
let rightPoint
|
||
self.sketchLayer.pointLayer.graphics.items.forEach(item => {
|
||
if (item.id == rightGra.attributes.nextId) {
|
||
rightPoint = item
|
||
}
|
||
if (item.id == Leftitem.attributes.leftId) {
|
||
leftPoint = item
|
||
}
|
||
|
||
})
|
||
let polyline = new Polyline({
|
||
paths: [
|
||
[leftPoint.geometry.x, leftPoint.geometry.y],
|
||
[rightPoint.geometry.x, rightPoint.geometry.y]
|
||
|
||
],
|
||
})
|
||
Leftitem.set({
|
||
geometry: polyline,
|
||
attributes: {
|
||
...Leftitem.attributes,
|
||
nextId: rightPoint.id,
|
||
endIndex: rightPoint.id
|
||
}
|
||
})
|
||
|
||
|
||
})
|
||
|
||
self.lineLayer.remove(rightGra)
|
||
|
||
|
||
}
|
||
}
|
||
mapLog.addContent({
|
||
mapType: self.ldMapActionType != 'lineAction' ? 'regon' : 'line',
|
||
actionType: 'delete',
|
||
isrevoke: true,
|
||
tips: self.ldMapActionType != 'lineAction' ? 'Station' : selectData.attributes.data.pointType,
|
||
oldGeometry: [selectData.geometry],
|
||
oldAttributes: [selectData.attributes],
|
||
id: selectData.id,
|
||
})
|
||
}
|
||
|
||
|
||
},
|
||
//验证新增的面是否有重叠
|
||
addPolygonCheck(newPolygonGraphic, val) {
|
||
|
||
let polygonLayer = self.sketchLayer.polygonLayer
|
||
let polygon1 = new Polygon({
|
||
rings: val.path
|
||
})
|
||
let alllayer = self.getSketchDataByType('polygon');
|
||
let arr = []
|
||
alllayer.map(item => {
|
||
let polygon2 = new Polygon({
|
||
rings: item.geometry.rings
|
||
})
|
||
const intersection = geometryEngine.intersect(polygon1, polygon2);
|
||
if (intersection) {
|
||
console.log(intersection)
|
||
console.log(item)
|
||
arr.push(intersection)
|
||
}
|
||
|
||
// return intersection
|
||
})
|
||
if (arr.length) {
|
||
// let unionPolygon =''
|
||
// arr.forEach(item=>{
|
||
// let polygon2 = new Polygon({
|
||
// rings:item.geometry.rings
|
||
// })
|
||
// unionPolygon = polygon2
|
||
// })
|
||
// console.log(unionPolygon)
|
||
polygonLayer.removeAll()
|
||
const newGraphic = new Graphic({
|
||
geometry: arr[0],
|
||
id: '11',
|
||
symbol: {
|
||
type: "simple-fill", // autocasts as new SimpleFillSymbol()
|
||
color: [255, 0, 0, 0.6],
|
||
outline: {
|
||
// autocasts as new SimpleLineSymbol()
|
||
color: [255, 255, 255, 0.4],
|
||
width: 2
|
||
}
|
||
},
|
||
attributes: {
|
||
type: self.addGraphicType,
|
||
}
|
||
});
|
||
polygonLayer.add(newGraphic)
|
||
|
||
} else {
|
||
//新增
|
||
polygonLayer.add(newPolygonGraphic);
|
||
mapdata.addByTypeData(self.addGraphicType, val)
|
||
}
|
||
|
||
|
||
},
|
||
//切换线的状态
|
||
getPoylineLayer(id, visible) {
|
||
let p6 = this.lineLayer.graphics.items.filter(item => {
|
||
return item.attributes.id == id
|
||
})
|
||
p6.forEach(item => item.visible = visible)
|
||
|
||
},
|
||
//智能合并
|
||
MergeOptimization(long = 1) {
|
||
let p6 = this.lineLayer.graphics.items.filter(item => {
|
||
const length = geometryEngine.geodesicLength(polyline, "meters");
|
||
return length < long
|
||
})
|
||
},
|
||
//新增检修井
|
||
addOpionPoint(type, pointId) {
|
||
console.log(pointId)
|
||
self.pointMaxIndex = pointId
|
||
self.pointSketchType = type
|
||
self.pointSketchViewModel.create("point");
|
||
},
|
||
//移动点位，边线跟随
|
||
movePointBy(e) {
|
||
|
||
let nowXy = [e.geometry.longitude, e.geometry.latitude]
|
||
|
||
// let polylineLayer = self.sketchLayer.polylineLayer
|
||
// let allPolyline = polylineLayer.graphics.items;
|
||
|
||
let allPolyline = self.lineLayer.graphics
|
||
let PolyLine = [];
|
||
if (allPolyline) {
|
||
allPolyline.forEach(item => {
|
||
if (item.attributes.leftId == e.id) {
|
||
|
||
PolyLine.push({
|
||
val: item,
|
||
type: 'left'
|
||
})
|
||
|
||
}
|
||
if (item.attributes.nextId == e.id) {
|
||
PolyLine.push({
|
||
val: item,
|
||
type: 'right'
|
||
})
|
||
}
|
||
})
|
||
PolyLine.forEach(item => {
|
||
//可编辑线
|
||
self.polylineSet(item.val, item.type, nowXy)
|
||
|
||
})
|
||
|
||
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
},
|
||
|
||
// 移动后替换原始线路
|
||
polylineSet(polylineVal, type, nowXy) {
|
||
|
||
let paths = polylineVal.geometry.paths
|
||
type == 'left' ? paths[0][0] = nowXy : paths[0][paths[0].length - 1] = nowXy
|
||
const polyline = new Polyline({
|
||
paths: paths,
|
||
|
||
})
|
||
const length = geometryEngine.geodesicLength(polyline, "meters");
|
||
console.log(length.toFixed(2))
|
||
if (length) {
|
||
polylineVal.set({
|
||
geometry: polyline,
|
||
})
|
||
}
|
||
|
||
|
||
},
|
||
DrawSketch(type, addType) {
|
||
|
||
|
||
self.addGraphicType = addType
|
||
switch (type) {
|
||
case 'point': self.pointSketchViewModel.create("point"); break;
|
||
case 'polyline': self.polylineSketchViewModel.create("polyline"); break;
|
||
case 'polygon': self.polygonSketchViewModel.create("polygon"); break;
|
||
}
|
||
|
||
},
|
||
//清空图层数据
|
||
removeAllLayer() {
|
||
|
||
self.sketchLayer.polygonLayer.removeAll();
|
||
self.sketchLayer.pointLayer.removeAll();
|
||
self.lineLayer && self.lineLayer.removeAll()
|
||
self.loadelevationLayer.removeAll()
|
||
self.hightlayer && self.hightlayer.removeAll()
|
||
self.textLayer && self.textLayer.removeAll()
|
||
},
|
||
//清除点位
|
||
removePoint() {
|
||
this.sketchLayer.pointLayer.removeAll();
|
||
},
|
||
removeLine() {
|
||
self.view.graphics.removeAll();
|
||
},
|
||
//布线识别的数据加载
|
||
addDefaultByline(data) {
|
||
|
||
self.ldMapActionType = 'lineAction'
|
||
self.DrawDregType = false
|
||
self.textLayer.removeAll()
|
||
return new Promise((resolve, reject) => {
|
||
// let polylineLayer = self.sketchLayer.polylineLayer;
|
||
self.sketchLayer.polygonLayer.removeAll();
|
||
self.lineLayer && self.lineLayer.removeAll()
|
||
let polylineLayer = new GraphicsLayer()
|
||
|
||
|
||
|
||
|
||
data.forEach(item => {
|
||
const polyline = new Polyline({
|
||
paths: item.path,
|
||
|
||
|
||
})
|
||
const lineSymbol = self.returnLineSymbole(item.width, item.color)
|
||
// const length = geometryEngine.geodesicLength(polyline, "meters");
|
||
// console.log(length.toFixed(2))
|
||
// item.distance = length.toFixed(2)
|
||
const newPolygonGraphic = new Graphic({
|
||
geometry: polyline,
|
||
id: item.id,
|
||
attributes: {
|
||
leftId: item.startIndex,
|
||
nextId: item.endIndex,
|
||
id: item.id,
|
||
data: item,
|
||
},
|
||
symbol: lineSymbol
|
||
})
|
||
|
||
|
||
polylineLayer.graphics.add(newPolygonGraphic)
|
||
|
||
})
|
||
|
||
|
||
|
||
self.map.add(polylineLayer, 1)
|
||
self.lineLayer = polylineLayer
|
||
resolve(data)
|
||
|
||
})
|
||
|
||
|
||
},
|
||
//获取管线起点数据
|
||
getpointByStart() {
|
||
|
||
let point = self.getSketchDataByType("point");
|
||
let linelayer = self.lineLayer.graphics.items
|
||
let returnObj = {
|
||
line: [],
|
||
point: [],
|
||
lineAttribute: {},
|
||
}
|
||
point.forEach(item => {
|
||
if (!item.attributes.startIndex && item.attributes.endIndex) {
|
||
try {
|
||
returnObj.line.push(self.getMapByPoint(item, []))
|
||
} catch (error) {
|
||
console.log(error)
|
||
debugger
|
||
}
|
||
|
||
}
|
||
if (!item.attributes.startIndex && !item.attributes.endIndex) {
|
||
returnObj.point.push([[item.geometry.x, item.geometry.y, item.attributes.data.pointType, parseInt(item.attributes.data.styleVal) || 200, item.id]])
|
||
}
|
||
})
|
||
linelayer.forEach(item => {
|
||
let { endAltitude = null, endElevation = null, material = null, pipelineType = null, startAltitude = null, startElevation = null } = item.attributes.data
|
||
let length = parseFloat(geometryEngine.geodesicLength(item.geometry, "meters").toFixed(2));
|
||
returnObj.lineAttribute[item.attributes.leftId + ',' + item.attributes.nextId] =
|
||
{ endAltitude, endElevation, length, material, pipelineType, startAltitude, startElevation }
|
||
})
|
||
|
||
return returnObj
|
||
|
||
},
|
||
// 开始 结束
|
||
// 线 31 118355 53
|
||
// 点 118355 53 531
|
||
// 线 53 118350 46
|
||
// 线 53 531 180
|
||
|
||
|
||
|
||
|
||
|
||
|
||
//根据起点找终点返回数据
|
||
getMapByPoint(item, data) {
|
||
let linelayer = self.lineLayer.graphics.items
|
||
let point = self.getSketchDataByType("point");
|
||
|
||
let nowPointId = item.id
|
||
let lineId
|
||
lineId = item.attributes.endIndex
|
||
let lineIdMore=linelayer.filter(item => item.attributes.leftId == nowPointId)
|
||
|
||
if(lineIdMore.length>1){
|
||
console.log(lineIdMore)
|
||
}
|
||
|
||
|
||
//当前的元素数据
|
||
let geometry = item.geometry
|
||
let attributes = item.attributes
|
||
|
||
if (lineId && lineId != nowPointId) {
|
||
let linedata = linelayer.filter(item => item.id == lineId)
|
||
console.log(linedata.length)
|
||
if(linedata.length >1){debugger}
|
||
linedata = linedata[0]
|
||
if (!linedata) { return data }
|
||
let val = [geometry.x, geometry.y, attributes.data.pointType, parseInt(linedata.attributes.data.styleId), nowPointId]
|
||
data.push(val)
|
||
let nextPointId = linedata.attributes.nextId
|
||
|
||
let nextItem = point.filter(item => item.id == nextPointId)
|
||
|
||
nextItem=nextItem[0]
|
||
if(nextItem.length >1){debugger}
|
||
if (!nextItem) { debugger }
|
||
return this.getMapByPoint(nextItem, data)
|
||
} else {
|
||
//到终点
|
||
let val = [geometry.x, geometry.y, attributes.data.pointType, parseInt(data[data.length - 1][3]), nowPointId]
|
||
data.push(val)
|
||
return data
|
||
}
|
||
|
||
},
|
||
|
||
//线数据定位
|
||
chooseLineByid(id) {
|
||
|
||
let p6 = this.lineLayer.graphics.items.filter(item => {
|
||
return item.attributes.id == id
|
||
})[0]
|
||
self.lighHight?.remove();
|
||
self.view.whenLayerView(p6.layer).then((layerView) => {
|
||
self.lighHight = layerView.highlight(p6)
|
||
})
|
||
self.setCenter(p6.geometry.extent.center.x, p6.geometry.extent.center.y, 22)
|
||
},
|
||
//根据类型获取总skech要素
|
||
getSketchDataByType(type) {
|
||
let sketch = []
|
||
switch (type) {
|
||
case 'polygon': sketch = this.sketchLayer.polygonLayer.graphics.items; break;
|
||
case 'point': sketch = this.sketchLayer.pointLayer.graphics.items; break;
|
||
case 'polyline': sketch = this.sketchLayer.pointLayer.graphics.items; break;
|
||
}
|
||
return sketch
|
||
},
|
||
//线条样式
|
||
returnLineSymbole(width, color) {
|
||
return new CIMSymbol({
|
||
data: {
|
||
type: "CIMSymbolReference",
|
||
symbol: {
|
||
type: "CIMLineSymbol",
|
||
symbolLayers: [{
|
||
type: "CIMSolidStroke",
|
||
|
||
enable: "true",
|
||
capStyle: "Butt",
|
||
joinStyle: "Round",
|
||
width,
|
||
color
|
||
},
|
||
{
|
||
// arrow symbol
|
||
type: "CIMVectorMarker",
|
||
enable: true,
|
||
size: 5,
|
||
markerPlacement: {
|
||
type: "CIMMarkerPlacementAlongLineSameSize", // places same size markers along the line
|
||
endings: "WithMarkers",
|
||
placementTemplate: [19.5], // determines space between each arrow
|
||
angleToLine: true // symbol will maintain its angle to the line when map is rotated
|
||
},
|
||
frame: {
|
||
xmin: -5,
|
||
ymin: -5,
|
||
xmax: 5,
|
||
ymax: 5
|
||
},
|
||
markerGraphics: [{
|
||
type: "CIMMarkerGraphic",
|
||
geometry: {
|
||
rings: [
|
||
[
|
||
[
|
||
-8,
|
||
-5.47
|
||
],
|
||
[
|
||
-8,
|
||
5.6
|
||
],
|
||
[
|
||
1.96,
|
||
-0.03
|
||
],
|
||
[
|
||
-8,
|
||
-5.47
|
||
]
|
||
]
|
||
]
|
||
},
|
||
symbol: {
|
||
// black fill for the arrow symbol
|
||
type: "CIMPolygonSymbol",
|
||
symbolLayers: [{
|
||
type: "CIMSolidFill",
|
||
enable: true,
|
||
color: [
|
||
255, 255, 255, 255
|
||
|
||
]
|
||
}]
|
||
}
|
||
}]
|
||
}]
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//线添加点位数据
|
||
addDefaultByPoint(data) {
|
||
|
||
let pointLayer = self.sketchLayer.pointLayer;
|
||
let id = data.pointId
|
||
|
||
|
||
// if (data.pointType != 'y') {
|
||
|
||
let point = new Point({
|
||
x: data.point[0],
|
||
y: data.point[1]
|
||
})
|
||
// Create a graphic and add the geometry and symbol to it
|
||
let pointGraphic = new Graphic({
|
||
id: id,
|
||
geometry: point,
|
||
attributes: {
|
||
data: data,
|
||
startIndex: data.startIndex,
|
||
endIndex: data.endIndex,
|
||
},
|
||
symbol: {
|
||
// type: "picture-marker", // autocasts as new PictureMarkerSymbol()
|
||
// url: data.jpg,
|
||
// width: data.width,
|
||
// height: data.height
|
||
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
|
||
color: data.color,
|
||
size: data.size, // pixels
|
||
outline: {
|
||
width: 0
|
||
}
|
||
},
|
||
|
||
});
|
||
|
||
if (data.pointType == 'y') {
|
||
pointGraphic.visible = false
|
||
}
|
||
|
||
pointLayer.add(pointGraphic, 10)
|
||
// return id;
|
||
|
||
// }
|
||
|
||
},
|
||
addsepticBygeomery(geometry, img, id) {
|
||
let pointGraphic = new Graphic({
|
||
id,
|
||
geometry: geometry,
|
||
attributes: {
|
||
type: 'qdf',
|
||
},
|
||
symbol: {
|
||
type: "picture-marker", // autocasts as new PictureMarkerSymbol()
|
||
url: img,
|
||
height: 20,
|
||
width: 20,
|
||
|
||
outline: {
|
||
width: 10
|
||
}
|
||
},
|
||
|
||
});
|
||
self.pngLayer.add(pointGraphic, 10)
|
||
},
|
||
//新增图片点位
|
||
addsepticTank(e) {
|
||
let { data: arr, img } = e
|
||
self.pngLayer.removeAll()
|
||
arr.forEach(data => {
|
||
let point = new Point({
|
||
x: data.point[0],
|
||
y: data.point[1]
|
||
})
|
||
// Create a graphic and add the geometry and symbol to it
|
||
let pointGraphic = new Graphic({
|
||
id: data.id,
|
||
geometry: point,
|
||
attributes: { type: 'qdf' },
|
||
symbol: {
|
||
type: "picture-marker", // autocasts as new PictureMarkerSymbol()
|
||
url: img,
|
||
height: 20,
|
||
width: 20,
|
||
},
|
||
|
||
});
|
||
self.pngLayer.add(pointGraphic, 10)
|
||
})
|
||
},
|
||
//隐藏图片点位
|
||
setPngPoint(visible) {
|
||
self.pngLayer.visible = visible
|
||
|
||
},
|
||
//根据管径信息修改管道
|
||
exitLineByVal(data) {
|
||
|
||
let polylineLayer = self.lineLayer
|
||
|
||
|
||
let p6 = this.lineLayer.graphics.items.filter(item => {
|
||
return item.id == data.id || item.id == data.lineId
|
||
})[0]
|
||
p6.set({
|
||
symbol: self.returnLineSymbole(data.width, data.color)
|
||
})
|
||
|
||
|
||
},
|
||
|
||
//切割面
|
||
cutPolygon() {
|
||
self.startDrawLine()
|
||
},
|
||
getCIMSymbolData(rings) {
|
||
return {
|
||
type: "CIMSymbolReference",
|
||
primitiveOverrides: [
|
||
{
|
||
type: "CIMPrimitiveOverride",
|
||
primitiveName: "textGraphic",
|
||
propertyName: "TextString",
|
||
valueExpressionInfo: {
|
||
type: "CIMExpressionInfo",
|
||
title: "Custom",
|
||
expression: "$feature.text",
|
||
returnType: "Default"
|
||
}
|
||
}
|
||
],
|
||
symbol: {
|
||
type: "CIMPolygonSymbol",
|
||
symbolLayers: [
|
||
|
||
{
|
||
type: "CIMSolidFill", // autocasts as new SimpleFillSymbol()
|
||
"enable": true,
|
||
"color": [255, 0, 0, 153]
|
||
},
|
||
{
|
||
type: "CIMVectorMarker",
|
||
enable: true,
|
||
size: 32,
|
||
colorLocked: true,
|
||
anchorPointUnits: "Relative",
|
||
frame: { xmin: -5, ymin: -5, xmax: 5, ymax: 5 },
|
||
markerGraphics: [
|
||
{
|
||
type: "CIMMarkerGraphic",
|
||
primitiveName: "textGraphic",
|
||
geometry: { x: 0, y: 0 },
|
||
symbol: {
|
||
type: "CIMTextSymbol",
|
||
fontFamilyName: "Arial",
|
||
fontStyleName: "Bold",
|
||
height: 4,
|
||
horizontalAlignment: "Center",
|
||
offsetX: 0,
|
||
offsetY: 0,
|
||
symbol: {
|
||
type: "CIMPolygonSymbol",
|
||
symbolLayers: [
|
||
{
|
||
type: "CIMSolidFill",
|
||
enable: true,
|
||
color: [255, 255, 255, 255]
|
||
}
|
||
]
|
||
},
|
||
verticalAlignment: "Center"
|
||
},
|
||
textString: ""
|
||
}
|
||
],
|
||
scaleSymbolsProportionally: true,
|
||
respectFrame: true
|
||
},
|
||
|
||
|
||
]
|
||
}
|
||
};
|
||
},
|
||
//根据缩放显示高程数据
|
||
showeleByzoom(zoom = self.view.zoom) {
|
||
console.log(zoom)
|
||
if (!self.loadelevationLayer) return;
|
||
|
||
if (zoom >= 22) {
|
||
self.loadelevationLayer.graphics.items.forEach(item => {
|
||
item.visible = true
|
||
})
|
||
} else {
|
||
let level = (22 - zoom) * 3
|
||
self.loadelevationLayer.graphics.items.forEach((item, index) => {
|
||
if (!(index % level)) {
|
||
item.visible = true
|
||
} else {
|
||
item.visible = false
|
||
}
|
||
|
||
})
|
||
}
|
||
},
|
||
//是否有相近的点位
|
||
isNearbypoint(point) {
|
||
let items = self.loadelevationLayer.graphics.items
|
||
let flag = true
|
||
for (let i = 0; i < items.length; i++) {
|
||
|
||
let distance = self.distance(point, [items[i].geometry.x, items[i].geometry.y])
|
||
console.log(distance)
|
||
if (distance < 10) {
|
||
flag = false;
|
||
break;
|
||
}
|
||
}
|
||
return flag
|
||
|
||
},
|
||
//道路高程数据展示
|
||
elevationData(flag, data) {
|
||
if (flag) {
|
||
|
||
data.forEach((item, index) => {
|
||
let point = new Point({ x: item[0], y: item[1] })
|
||
let text = item[2].toFixed(2)
|
||
const graphic = new Graphic({
|
||
geometry: point,
|
||
visible: !(index % ((22 - self.view.zoom) * 2)),
|
||
symbol: {
|
||
type: "text", // autocasts as new TextSymbol()
|
||
text: text,
|
||
color: [255, 255, 255, 255],
|
||
font: {
|
||
weight: "bold"
|
||
}
|
||
}
|
||
});
|
||
|
||
self.loadelevationLayer.add(graphic)
|
||
})
|
||
|
||
} else {
|
||
self.loadelevationLayer.removeAll()
|
||
}
|
||
|
||
|
||
},
|
||
//特征物的站点数据
|
||
addDefaultPoint(data) {
|
||
|
||
let pointLayer = self.sketchLayer.pointLayer
|
||
const point = new Point({
|
||
x: data.path[0],
|
||
y: data.path[1],
|
||
|
||
})
|
||
|
||
const newPointGraphic = new Graphic({
|
||
|
||
geometry: point,
|
||
symbol: {
|
||
type: "simple-marker",
|
||
style: "circle",
|
||
size: '18px',
|
||
color: [8, 240, 36, 255],
|
||
outline: {
|
||
width: 0
|
||
}
|
||
},
|
||
attributes: {
|
||
data,
|
||
}
|
||
});
|
||
pointLayer.add(newPointGraphic);
|
||
},
|
||
//站点数据
|
||
addDeviceData(data, type) {
|
||
|
||
self.pointSketchType = type
|
||
let pointLayer = self.sketchLayer.pointLayer;
|
||
data.forEach(item => {
|
||
let xy = item.path[0]
|
||
let point = new Point({
|
||
x: xy[0],
|
||
y: xy[1],
|
||
})
|
||
const newPointGraphic = new Graphic({
|
||
id: item.geometryId,
|
||
geometry: point,
|
||
symbol: {
|
||
type: "simple-marker",
|
||
style: "circle",
|
||
size: '18px',
|
||
color: [8, 240, 36, 255],
|
||
outline: {
|
||
width: 0
|
||
}
|
||
},
|
||
attributes: {
|
||
data: item
|
||
}
|
||
});
|
||
pointLayer.add(newPointGraphic);
|
||
|
||
})
|
||
|
||
},
|
||
//特征物识别数据
|
||
addDefaultData(data, type) {
|
||
|
||
let SymbolColor = symbolData[type]
|
||
let symbol = ''
|
||
|
||
|
||
self.ldMapActionType = 'regectionAction'
|
||
|
||
let polygonLayer = self.sketchLayer.polygonLayer
|
||
|
||
const num = 3
|
||
const maxNumber = 15000
|
||
const flag = false;
|
||
self.DrawDregType = true
|
||
data.forEach((res) => {
|
||
|
||
let maxNum = 0
|
||
res.innerings = res.innerings
|
||
res.path = res.path
|
||
new Promise((resolve, reject) => {
|
||
maxNum += res.path.length
|
||
|
||
res.innerings.forEach(res => {
|
||
maxNum += res.length
|
||
})
|
||
// if(maxNum>1000)
|
||
console.log(maxNum + ":" + res.geometryId)
|
||
|
||
let path, innerings
|
||
|
||
|
||
|
||
if (maxNum > maxNumber && flag) {
|
||
|
||
|
||
path = res.path.filter((item, index) => {
|
||
return index % num == 0
|
||
})
|
||
innerings = res.innerings.map(element => {
|
||
|
||
data = element.filter((item, index) => {
|
||
return index % num == 0
|
||
})
|
||
return data
|
||
})
|
||
} else {
|
||
path = res.path
|
||
innerings = res.innerings
|
||
}
|
||
const polygon = new Polygon({
|
||
rings: path,
|
||
//
|
||
})
|
||
|
||
|
||
if (innerings.length) {
|
||
innerings.forEach(element => {
|
||
polygon.addRing(element)
|
||
});
|
||
}
|
||
|
||
// symbol={
|
||
// type: "cim",
|
||
// data:this.getCIMSymbolData()
|
||
// }
|
||
symbol = {
|
||
type: "simple-fill", // autocasts as new SimpleFillSymbol()
|
||
color: SymbolColor,
|
||
outline: {
|
||
// autocasts as new SimpleLineSymbol()
|
||
color: [255, 255, 255, 0.4],
|
||
width: 0.5
|
||
}
|
||
}
|
||
|
||
if (res.type == "House") {
|
||
try {
|
||
const areas = geodesicUtils.geodesicAreas([polygon], "square-meters");
|
||
const area = Math.abs(areas[0]).toFixed(2)
|
||
res.area = res.area || area
|
||
} catch {
|
||
|
||
}
|
||
|
||
}
|
||
const newPolygonGraphic = new Graphic({
|
||
geometry: polygon,
|
||
id: res.geometryId,
|
||
symbol: symbol,
|
||
attributes: {
|
||
type: type,
|
||
sketchType: 'polygon',
|
||
data: res,
|
||
}
|
||
});
|
||
|
||
|
||
res.isExit && self.setLabelByPolygon(polygon.centroid, 'text' + res.geometryId, (res.houseMaterial || '') + (res.houseFloors || ''))
|
||
polygonLayer.add(newPolygonGraphic)
|
||
resolve()
|
||
|
||
}).then(e => {
|
||
|
||
})
|
||
|
||
|
||
|
||
})
|
||
|
||
|
||
|
||
|
||
},
|
||
setReconLabel(geometryId, text) {
|
||
|
||
let graphic = self.sketchLayer.polygonLayer.graphics.items.filter(item => {
|
||
return item.id == geometryId
|
||
})
|
||
if (graphic.length) {
|
||
self.setLabelByPolygon(graphic[0].geometry.centroid, 'text' + geometryId, text)
|
||
}
|
||
|
||
|
||
},
|
||
//显示图层中间文字
|
||
setLabelByPolygon(center, id, text) {
|
||
|
||
if (!text) return
|
||
let point = new Point({ x: center.x, y: center.y })
|
||
|
||
let selectGraphic = self.textLayer.graphics.items.filter(item => {
|
||
return item.id == id
|
||
})
|
||
if (selectGraphic.length) {
|
||
selectGraphic.forEach(p6 => {
|
||
p6.set({
|
||
geometry: point,
|
||
symbol: {
|
||
type: "text", // autocasts as new TextSymbol()
|
||
text: text,
|
||
color: [255, 255, 255, 255],
|
||
font: { // autocasts as new Font()
|
||
size: 12,
|
||
weight: "bold"
|
||
}
|
||
}
|
||
})
|
||
})
|
||
} else {
|
||
|
||
const graphic = new Graphic({
|
||
geometry: point,
|
||
id: id,
|
||
symbol: {
|
||
type: "text", // autocasts as new TextSymbol()
|
||
text: text,
|
||
color: [255, 255, 255, 255],
|
||
font: {
|
||
// autocasts as new Font()
|
||
// size: 12,
|
||
|
||
weight: "bold"
|
||
}
|
||
}
|
||
});
|
||
|
||
self.textLayer.add(graphic)
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
},
|
||
//高亮面图层
|
||
lighHightLayer(id) {
|
||
|
||
let graphic = self.sketchLayer.polygonLayer.graphics.items.filter(item => {
|
||
return item.id == id
|
||
})
|
||
|
||
self.polygonSketchViewModel.update(graphic, {
|
||
tool: "reshape",
|
||
enableMoveAllGraphics: false,
|
||
reshapeOptions: {
|
||
edgeOperation: "none",
|
||
shapeOperation: "none",
|
||
vertexOperation: "none"
|
||
}
|
||
})
|
||
|
||
graphic && self.setCenter(graphic[0].geometry.extent.center.x, graphic[0].geometry.extent.center.y)
|
||
|
||
|
||
|
||
},
|
||
//像素转经纬度
|
||
pxMapToLatlon(x, y) {
|
||
|
||
|
||
let view = self.view
|
||
let zoom = view.zoom
|
||
let tileLayer = self.nowlayer
|
||
let imgwidth = tileLayer.sourceJSON.maxImageWidth
|
||
let imgHeight = tileLayer.sourceJSON.maxImageHeight
|
||
|
||
let fullExtent = {
|
||
xmax: 118.86371824235101,
|
||
ymax: 33.26729051757083,
|
||
xmin: 118.85818229653573,
|
||
ymin: 33.26307467082115
|
||
}
|
||
|
||
let lngLatToXYmax = webMercatorUtils.lngLatToXY(fullExtent.xmax, fullExtent.ymax)
|
||
let lngLatToXYmin = webMercatorUtils.lngLatToXY(fullExtent.xmin, fullExtent.ymin)
|
||
|
||
let nowWith = lngLatToXYmax[0] - lngLatToXYmin[0]
|
||
let nowheight = lngLatToXYmax[1] - lngLatToXYmin[1]
|
||
|
||
let nowX = Math.floor(lngLatToXYmin[0] + (x * 4096 / 256) / 125)
|
||
|
||
let nowY = Math.floor(lngLatToXYmax[1] - (y * 4096 / 256) / 125)
|
||
|
||
|
||
|
||
|
||
let lat = webMercatorUtils.xyToLngLat(nowX, nowY)
|
||
return lat
|
||
},
|
||
getTileExtent(layer) {
|
||
|
||
},
|
||
//获取总数居
|
||
getAllData() {
|
||
|
||
self.sketchLayer.polygonLayer.removeAll()
|
||
|
||
},
|
||
//数据恢复
|
||
recoveryData(data) {
|
||
return new Promise((resolve, reject) => {
|
||
|
||
console.log(data)
|
||
switch (data.actionType) {
|
||
case 'add':
|
||
if (data.mapType == 'regon') {
|
||
self.sketchLayer.polygonLayer.graphics.items.forEach(item => {
|
||
if (item.id == data.id) {
|
||
self.sketchLayer.polygonLayer.remove(item)
|
||
}
|
||
})
|
||
resolve()
|
||
}
|
||
|
||
break
|
||
case 'delete':
|
||
if (data.mapType == 'regon') {
|
||
let graphicData = JSON.parse(data.oldAttributes[0])
|
||
let polygon = new Polygon(JSON.parse(data.oldGeometry[0]))
|
||
let symbol = {
|
||
type: "simple-fill", // autocasts as new SimpleFillSymbol()
|
||
color: symbolData[data.tips],
|
||
outline: {
|
||
// autocasts as new SimpleLineSymbol()
|
||
color: [255, 255, 255, 0.4],
|
||
width: 0.5
|
||
}
|
||
}
|
||
const newPolygonGraphic = new Graphic({
|
||
geometry: polygon,
|
||
id: data.id,
|
||
symbol: symbol,
|
||
attributes: graphicData.attributes,
|
||
});
|
||
self.sketchLayer.polygonLayer.add(newPolygonGraphic)
|
||
resolve()
|
||
}
|
||
|
||
break
|
||
case 'edit':
|
||
console.log(data)
|
||
|
||
if (data.mapType == 'regon') {
|
||
self.sketchLayer.polygonLayer.graphics.items.forEach(item => {
|
||
if (item.id == data.id) {
|
||
let geometry = new Polygon(JSON.parse(data.oldGeometry[0]))
|
||
item.set({
|
||
geometry
|
||
})
|
||
}
|
||
})
|
||
resolve()
|
||
}
|
||
|
||
|
||
|
||
|
||
break
|
||
|
||
}
|
||
|
||
})
|
||
|
||
|
||
},
|
||
|
||
//删除数据
|
||
delSketch() {
|
||
|
||
|
||
if (self.sketchLayer.selectGraphic) {
|
||
|
||
let val = self.sketchLayer.selectGraphic.attributes.data
|
||
let layer = ""
|
||
let selectData = self.sketchLayer.selectGraphic
|
||
switch (selectData.attributes.sketchType) {
|
||
case "polygon": layer = self.sketchLayer.polygonLayer.remove(selectData); break;
|
||
case "polyline": layer = self.sketchLayer.polylineLayer.remove(selectData); break;
|
||
}
|
||
|
||
|
||
mapLog.addContent({
|
||
mapType: self.ldMapActionType != 'lineAction' ? 'regon' : 'line',
|
||
actionType: 'delete',
|
||
isrevoke: true,
|
||
tips: val.type,
|
||
oldGeometry: [self.sketchLayer.selectGraphic.geometry],
|
||
oldAttributes: [self.sketchLayer.selectGraphic],
|
||
id: self.sketchLayer.selectGraphic.id,
|
||
})
|
||
self.sketchLayer.selectGraphic = null
|
||
return self.ldMapActionType == 'lineAction' ? null : val;
|
||
|
||
|
||
}
|
||
if (self.lighHight) {
|
||
if (self.selectLine) {
|
||
self.lineLayer.remove(self.selectLine)
|
||
self.sketchLayer.pointLayer.sublayers.items.forEach(item => {
|
||
if (item.id == self.selectLine.attributes.leftId) {
|
||
item.attributes.endIndex = null
|
||
}
|
||
if (item.id == self.selectLine.attributes.nextId) {
|
||
item.attributes.startIndex = null
|
||
}
|
||
})
|
||
}
|
||
if (self.selectPng) {
|
||
let mapdata = useMapDataStore()
|
||
mapdata.delPngTyle(self.selectPng.id).then(() => {
|
||
self.pngLayer.remove(self.selectPng)
|
||
})
|
||
|
||
}
|
||
}
|
||
|
||
},
|
||
destroyDraw() {
|
||
this.draw.destroy()
|
||
if (this.ldMapActionType == 'lineAction') {
|
||
this.drawTypeLine == 'once' ? this.pointLayerBind() : this.pointManyBind()
|
||
}
|
||
},
|
||
startDrawLine(type) {
|
||
|
||
self.drawTypeLine = type
|
||
this.draw && this.draw.destroy()
|
||
self.draw = new Draw({
|
||
view: this.view,
|
||
})
|
||
let action = self.draw.create("polyline", {
|
||
mode: 'click'
|
||
});
|
||
|
||
// self.view.focus()
|
||
// 顶点添加事件
|
||
action.on("vertex-add", (event) => self.creatLineByClick(event));
|
||
|
||
// 鼠标移动事件
|
||
action.on("cursor-update", (event) => self.creatLineByClick(event));
|
||
|
||
// 绘制完成事件
|
||
action.on("draw-complete", (e) => {
|
||
self.destroyDraw()
|
||
});
|
||
|
||
},
|
||
//根据画的线合并到最近的点位并找出中间点位相连
|
||
pointManyBind() {
|
||
|
||
let polylineLayer = self.lineLayer
|
||
|
||
let startItem = null, startMax = 30;
|
||
let endItem = null, endMax = 30;
|
||
|
||
let point = self.getSketchDataByType("point");
|
||
let line
|
||
try {
|
||
line = turf.lineString(self.newDrawLineByClick.geometry.paths[0]);
|
||
} catch (error) {
|
||
console.log(self.newDrawLineByClick.geometry.paths)
|
||
}
|
||
|
||
let options = { units: 'meters' };
|
||
let pointList = []
|
||
|
||
|
||
point.forEach(item => {
|
||
let polyline
|
||
let length
|
||
polyline = new Polyline({
|
||
paths: [self.newDrawLineByClick.geometry.paths[0][0], [item.geometry.x, item.geometry.y,]],
|
||
})
|
||
|
||
length = geometryEngine.geodesicLength(polyline, "meters");
|
||
if (length < startMax) {
|
||
startMax = length;
|
||
startItem = item
|
||
}
|
||
polyline = new Polyline({
|
||
paths: [self.newDrawLineByClick.geometry.paths[0][1], [item.geometry.x, item.geometry.y]],
|
||
})
|
||
length = geometryEngine.geodesicLength(polyline, "meters");
|
||
if (length < endMax) {
|
||
endMax = length;
|
||
endItem = item
|
||
}
|
||
|
||
let point = turf.point([item.geometry.x, item.geometry.y]);
|
||
|
||
if (line && turf.pointToLineDistance(point, line, options) < 10) {
|
||
pointList.push(item)
|
||
}
|
||
|
||
|
||
|
||
|
||
})
|
||
if (endItem && startItem) {
|
||
|
||
let list = pointList.filter(item => {
|
||
return item != startItem
|
||
})
|
||
console.log(list)
|
||
drawByStartItem(startItem)
|
||
|
||
function drawByStartItem(startItem) {
|
||
let Minlength = 999;
|
||
let endItem = ''
|
||
list.forEach(item => {
|
||
|
||
let polyline = new Polyline({
|
||
paths: [[startItem.geometry.x, startItem.geometry.y], [item.geometry.x, item.geometry.y]],
|
||
})
|
||
length = geometryEngine.geodesicLength(polyline, "meters");
|
||
if (length < Minlength) {
|
||
endItem = item
|
||
Minlength = length
|
||
}
|
||
})
|
||
if (endItem) {
|
||
let lineValue = [[startItem.geometry.x, startItem.geometry.y], [endItem.geometry.x, endItem.geometry.y]]
|
||
let lineValueResve = [[endItem.geometry.x, endItem.geometry.y], [startItem.geometry.x, startItem.geometry.y]]
|
||
let polyline = new Polyline({
|
||
paths: lineValue,
|
||
})
|
||
let flag = polylineLayer.graphics.items.filter(data => {
|
||
return JSON.stringify(lineValue) == JSON.stringify(data.geometry.paths[0]) || JSON.stringify(lineValueResve) == JSON.stringify(data.geometry.paths[0])
|
||
})
|
||
|
||
|
||
if (!flag.length) {
|
||
|
||
let newId = parseInt(startItem.id + '1')
|
||
startItem.attributes.endIndex = newId
|
||
endItem.attributes.startIndex = newId
|
||
const lineSymbol = self.returnLineSymbole(3, [0, 255, 255, 255])
|
||
let graphic = new Graphic({
|
||
geometry: polyline,
|
||
id: newId,
|
||
attributes: {
|
||
leftId: startItem.id,
|
||
nextId: endItem.id,
|
||
data: {
|
||
lineId: newId,
|
||
styleId: 400,
|
||
length: geometryEngine.geodesicLength(polyline, "meters").toFixed(2),
|
||
path: polyline.paths[0],
|
||
startIndex: startItem.id,
|
||
endIndex: endItem.id,
|
||
}
|
||
},
|
||
symbol: lineSymbol
|
||
})
|
||
|
||
polylineLayer.add(graphic)
|
||
}
|
||
list = list.filter(item => item != endItem)
|
||
if (list.length != 0)
|
||
drawByStartItem(endItem)
|
||
}
|
||
|
||
|
||
|
||
|
||
}
|
||
}
|
||
|
||
self.view.graphics.removeAll();
|
||
|
||
},
|
||
//根据画的线合并到最近的点位
|
||
pointLayerBind() {
|
||
|
||
|
||
let polylineLayer = self.lineLayer
|
||
|
||
let startItem = null, startMax = 30;
|
||
let endItem = null, endMax = 30;
|
||
|
||
let point = self.getSketchDataByType("point");
|
||
point.forEach(item => {
|
||
let polyline
|
||
let length
|
||
polyline = new Polyline({
|
||
paths: [self.newDrawLineByClick.geometry.paths[0][0], [item.geometry.x, item.geometry.y,]],
|
||
})
|
||
length = geometryEngine.geodesicLength(polyline, "meters");
|
||
if (length < startMax) {
|
||
startMax = length;
|
||
startItem = item
|
||
}
|
||
|
||
polyline = new Polyline({
|
||
paths: [self.newDrawLineByClick.geometry.paths[0][1], [item.geometry.x, item.geometry.y]],
|
||
})
|
||
length = geometryEngine.geodesicLength(polyline, "meters");
|
||
if (length < endMax) {
|
||
endMax = length;
|
||
endItem = item
|
||
}
|
||
})
|
||
if (endItem && startItem) {
|
||
|
||
let polyline = new Polyline({
|
||
paths: [[startItem.geometry.x, startItem.geometry.y], [endItem.geometry.x, endItem.geometry.y]],
|
||
|
||
})
|
||
let newId = parseInt(startItem.id + '1')
|
||
startItem.attributes.endIndex = newId
|
||
endItem.attributes.startIndex = newId
|
||
const lineSymbol = self.returnLineSymbole(3, [0, 255, 255, 255])
|
||
let graphic = new Graphic({
|
||
geometry: polyline,
|
||
id: newId,
|
||
attributes: {
|
||
leftId: startItem.id,
|
||
nextId: endItem.id,
|
||
data: {
|
||
styleId: 400,
|
||
|
||
lineId: newId,
|
||
length: geometryEngine.geodesicLength(polyline, "meters").toFixed(2),
|
||
path: polyline.paths[0],
|
||
startIndex: startItem.id,
|
||
endIndex: endItem.id,
|
||
}
|
||
},
|
||
symbol: lineSymbol
|
||
})
|
||
|
||
polylineLayer.add(graphic)
|
||
}
|
||
|
||
self.view.graphics.removeAll();
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
},
|
||
creatLineByClick(event) {
|
||
|
||
|
||
self.view.graphics.removeAll();
|
||
|
||
var vertices = event.vertices;
|
||
|
||
let falg = false
|
||
if (vertices.length > 2) {
|
||
vertices = vertices.slice(0, 2)
|
||
falg = true
|
||
}
|
||
|
||
let polyline = {
|
||
type: "polyline", // autocasts as new Polyline()
|
||
paths: vertices,
|
||
|
||
}
|
||
const lineSymbol = self.returnLineSymbole(3, [0, 255, 255, 255])
|
||
let graphic = new Graphic({
|
||
geometry: polyline,
|
||
attributes: {
|
||
data: '1111'
|
||
},
|
||
symbol: lineSymbol
|
||
})
|
||
self.view.graphics.add(graphic)
|
||
if (falg) this.destroyDraw()
|
||
self.newDrawLineByClick = graphic
|
||
},
|
||
|
||
|
||
//处理合并的经纬度
|
||
Bindpolygon() {
|
||
|
||
let polygonLayer = self.sketchLayer.polygonLayer
|
||
let graphic = self.view.graphics.items[0]
|
||
|
||
|
||
if (!graphic || !self.sketchLayer.selectGraphic) { return }
|
||
let polygon1 = new Polygon({
|
||
rings: graphic.geometry.rings
|
||
})
|
||
let item = self.sketchLayer.selectGraphic
|
||
let rings = item.geometry.rings
|
||
let newRings = []
|
||
let deletFlag = false;
|
||
rings.forEach(ring => {
|
||
let newRing = []
|
||
ring.forEach(p => {
|
||
let point = new Point({ x: p[0], y: p[1] })
|
||
const pointFlag = geometryEngine.intersect(polygon1, point);
|
||
if (!pointFlag) {
|
||
newRing.push(p)
|
||
} else {
|
||
deletFlag = true
|
||
}
|
||
})
|
||
newRing.length && newRings.push(newRing)
|
||
})
|
||
console.log(newRings)
|
||
if (deletFlag) {
|
||
if (newRings.length) {
|
||
|
||
if (!item.attributes.data.action) {
|
||
item.attributes.data.action = 1
|
||
}
|
||
|
||
item.geometry.set({
|
||
rings: newRings
|
||
})
|
||
item.notifyGeometryChanged()
|
||
self.polygonSketchViewModel.update(item, { tool: "reshape" })
|
||
} else {
|
||
polygonLayer.remove(item)
|
||
let mapdata = useMapDataStore()
|
||
mapdata.delData(item.attributes.data);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
self.view.graphics.removeAll()
|
||
|
||
|
||
},
|
||
createPolygon(event) {
|
||
|
||
var vertices = event.vertices;
|
||
//两点画矩形
|
||
if (vertices.length < 2) {
|
||
return
|
||
}
|
||
var rings = [vertices[0], [vertices[0][0], vertices[1][1]], vertices[1], [vertices[1][0], vertices[0][1]]];
|
||
self.view.graphics.removeAll();
|
||
|
||
|
||
const polygon = new Polygon({
|
||
hasZ: false,
|
||
hasM: false,
|
||
rings: [rings],
|
||
|
||
})
|
||
let graphic = new Graphic({
|
||
geometry: polygon,
|
||
symbol: {
|
||
type: "simple-fill", // autocasts as new SimpleFillSymbol()
|
||
color: [234, 191, 13, 0.6],
|
||
style: "solid",
|
||
outline: { // autocasts as new SimpleLineSymbol()
|
||
color: "white",
|
||
width: 1
|
||
}
|
||
|
||
|
||
}
|
||
})
|
||
|
||
self.view.graphics.add(graphic)
|
||
},
|
||
addImgbyLine(points, x, y, imgPoint) {
|
||
|
||
if (imgPoint) {
|
||
|
||
self.view.graphics.remove(imgPoint)
|
||
}
|
||
|
||
var x1 = points[0][0]
|
||
var y1 = points[0][1]
|
||
var x2 = points[1][0]
|
||
var y2 = points[1][1]
|
||
let p = (y2 - y1) / (x2 - x1)// 斜率
|
||
|
||
let angle = self.calcAngle(x1, y1, x2, y2) //朝向
|
||
let point = {
|
||
type: "point",
|
||
longitude: x,
|
||
latitude: y,
|
||
}
|
||
let graphic = new Graphic({
|
||
geometry: point,
|
||
symbol: {
|
||
type: "picture-marker",
|
||
url: "http://localhost/src/ldmap/assets/tool/icon.png",
|
||
width: 20,
|
||
height: 20,
|
||
angle: angle
|
||
}
|
||
})
|
||
self.view.graphics.add(graphic)
|
||
return graphic
|
||
},
|
||
calcAngle(x1, y1, x2, y2) {
|
||
let tan = (Math.atan(Math.abs((y2 - y1) / (x2 - x1))) * 180) / Math.PI + 90
|
||
if (x2 > x1 && y2 > y1) {
|
||
return -tan + 180
|
||
} else if (x2 > x1 && y2 < y1) {
|
||
return tan
|
||
} else if (x2 < x1 && y2 > y1) {
|
||
return tan - 180
|
||
} else {
|
||
return -tan
|
||
}
|
||
},
|
||
drawPoint(data) {
|
||
|
||
let position = {
|
||
type: "point",
|
||
longitude: data[0],
|
||
latitude: data[1]
|
||
}
|
||
let graphic = new Graphic({
|
||
geometry: position,
|
||
symbol: {
|
||
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
|
||
|
||
color: 'yello',
|
||
size: "8px",
|
||
outline: { // autocasts as new SimpleLineSymbol()
|
||
color: [255, 255, 0],
|
||
width: 3 // points
|
||
}
|
||
}
|
||
})
|
||
self.view.graphics.add(graphic)
|
||
|
||
},
|
||
//优化管线数据（大于50）
|
||
ponitBindByFivety(MAXLENGTH = 50) {
|
||
|
||
let pointAll = self.getSketchDataByType("point");
|
||
let linelayer = self.lineLayer.graphics.items
|
||
pointAll.forEach(item => {
|
||
if (!item.attributes.startIndex && item.attributes.endIndex) {
|
||
try {
|
||
|
||
//从头开始找
|
||
getpointByStart(item, null, [], [])
|
||
|
||
} catch (error) {
|
||
}
|
||
|
||
}
|
||
})
|
||
function getpointByStart(leftPoint, leftLIne, arrPoint, arrline) {
|
||
if (leftPoint.attributes.data.pointType == 'x') {
|
||
if (arrPoint.length) {
|
||
arrPoint.push(leftPoint)
|
||
arrline.push(leftLIne)
|
||
isArrPointMax50(arrPoint, arrline)
|
||
arrPoint = [];
|
||
arrline = []
|
||
//597 595 596
|
||
} else {
|
||
arrPoint.push(leftPoint)
|
||
|
||
|
||
}
|
||
|
||
|
||
} else {
|
||
if (arrPoint.length) {
|
||
arrPoint.push(leftPoint)
|
||
arrline.push(leftLIne)
|
||
}
|
||
|
||
}
|
||
let nextPoint, pointLine
|
||
for (let i = 0; i < linelayer.length; i++) {
|
||
if (linelayer[i].id == leftPoint.attributes.endIndex) {
|
||
pointLine = linelayer[i]
|
||
nextPoint = pointAll.filter(item => {
|
||
return item.id == pointLine.attributes.nextId
|
||
})[0]
|
||
break
|
||
}
|
||
|
||
}
|
||
if (nextPoint) {
|
||
getpointByStart(nextPoint, pointLine, arrPoint, arrline)
|
||
}
|
||
|
||
|
||
}
|
||
|
||
function isArrPointMax50(arrPoint, arrLine) {
|
||
|
||
let paths = []
|
||
arrPoint.forEach(item => {
|
||
paths.push([item.geometry.x, item.geometry.y])
|
||
})
|
||
let polyline = new Polyline({
|
||
paths: paths
|
||
|
||
})
|
||
let length = parseFloat(geometryEngine.geodesicLength(polyline, "meters"));
|
||
|
||
if (length >= MAXLENGTH) {
|
||
|
||
console.log(length)
|
||
|
||
|
||
|
||
length = length / 2
|
||
//判断中心点位再哪条线上
|
||
let centerLine
|
||
for (let i = 0; i < arrLine.length; i++) {
|
||
let item = arrLine[i]
|
||
let desic = parseFloat(geometryEngine.geodesicLength(item.geometry, "meters"))
|
||
length = length - desic
|
||
if (length <= 0) {
|
||
centerLine = item;
|
||
break;
|
||
}
|
||
}
|
||
//获取中心点位
|
||
let centerPoint = new Point({
|
||
x: centerLine.geometry.extent.center.x,
|
||
y: centerLine.geometry.extent.center.y
|
||
})
|
||
|
||
|
||
|
||
|
||
//新增中心点位
|
||
let mapdata = useMapDataStore()
|
||
let id = mapdata.setMaxPointIndex(1);
|
||
let symbol = {
|
||
type: "simple-marker",
|
||
style: "circle",
|
||
size: '14px',
|
||
color: [7, 253, 253, 255],
|
||
outline: {
|
||
width: 0
|
||
}
|
||
}
|
||
const newPointGraphic = new Graphic({
|
||
geometry: centerPoint,
|
||
symbol: symbol,
|
||
id,
|
||
attributes: {
|
||
data: { pointType: 'h' },
|
||
startIndex: centerLine.id,
|
||
endIndex: id + '1',
|
||
}
|
||
});
|
||
|
||
self.sketchLayer.pointLayer.add(newPointGraphic);
|
||
|
||
//clone 一条线，开始和结尾改为连接到中心点位
|
||
|
||
|
||
|
||
let centerlineClone = centerLine.clone()
|
||
|
||
centerLine.set({
|
||
geometry: new Polyline({
|
||
paths: [
|
||
[centerPoint.x, centerPoint.y],
|
||
centerLine.geometry.paths[0][1],
|
||
]
|
||
})
|
||
})
|
||
centerLine.attributes.leftId = id
|
||
|
||
|
||
|
||
|
||
|
||
let newPolygon = new Polyline({
|
||
paths: [
|
||
centerlineClone.geometry.paths[0][0],
|
||
[centerPoint.x, centerPoint.y],
|
||
]
|
||
})
|
||
let LineGraphic = new Graphic({
|
||
geometry: newPolygon,
|
||
id: id * 10 + 1,
|
||
attributes: {
|
||
leftId: centerlineClone.attributes.leftId,
|
||
nextId: id,
|
||
data: centerlineClone.attributes.data
|
||
},
|
||
symbol: centerlineClone.symbol
|
||
})
|
||
|
||
self.lineLaye.add(LineGraphic)
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
if (!self.hightlayer) {
|
||
self.hightlayer = new GraphicsLayer();
|
||
self.map.add(self.hightlayer)
|
||
}
|
||
|
||
|
||
|
||
const graphic = new Graphic({
|
||
geometry: polyline,
|
||
|
||
symbol: {
|
||
type: "simple-line",
|
||
width: 5,
|
||
color: "red",
|
||
},
|
||
|
||
});
|
||
self.hightlayer.add(graphic)
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
|
||
|
||
|
||
},
|
||
|
||
//优化检修井数据点位
|
||
pointBindByLength(minlength = 5) {
|
||
let pointAll = self.getSketchDataByType("point");
|
||
let linelayer = self.lineLayer.graphics.items
|
||
let index
|
||
let sum
|
||
let num
|
||
let allSum = 0
|
||
do {
|
||
console.log('--------------------------------')
|
||
sum = 0
|
||
index = 1
|
||
pointAll.forEach((item) => {
|
||
|
||
if (!item.attributes.startIndex && item.attributes.endIndex) {
|
||
try {
|
||
num = 0
|
||
//从头开始找
|
||
num = getpointBytype(item, num)
|
||
// console.log(`查找中:${index++}条,优化点位${num}个`)
|
||
sum += num
|
||
} catch (error) {
|
||
console.log(error)
|
||
|
||
}
|
||
|
||
}
|
||
|
||
})
|
||
allSum += sum
|
||
console.log(sum)
|
||
} while (sum)
|
||
|
||
return allSum
|
||
|
||
|
||
|
||
|
||
|
||
//找到相邻的点位并且是检修井
|
||
function getpointBytype(leftPoint, num) {
|
||
|
||
let nextPoint, p1Top2Line
|
||
for (let i = 0; i < linelayer.length; i++) {
|
||
if (linelayer[i].id == leftPoint.attributes.endIndex) {
|
||
p1Top2Line = linelayer[i]
|
||
nextPoint = pointAll.filter(item => {
|
||
return item.id == p1Top2Line.attributes.nextId
|
||
})[0]
|
||
break
|
||
}
|
||
|
||
}
|
||
if (nextPoint) {
|
||
if (leftPoint.attributes.data.pointType == 'x' && nextPoint.attributes.data.pointType == 'x') {
|
||
nextPoint = setLinelength(leftPoint, nextPoint, p1Top2Line)
|
||
}
|
||
num = nextPoint == leftPoint ? num + 1 : num
|
||
|
||
return getpointBytype(nextPoint, num)
|
||
|
||
} else {
|
||
return num
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
function setLinelength(point1, point2, p1Top2Line) {
|
||
|
||
let length = parseFloat(geometryEngine.geodesicLength(p1Top2Line.geometry, "meters").toFixed(2));
|
||
// console.log(length)
|
||
if (length >= 50) {
|
||
console.log('50米', length, p1Top2Line)
|
||
}
|
||
if (length < minlength) {
|
||
|
||
let p3, p2top3line
|
||
|
||
//所有连接到p2的点位都替换到p1，并且连接线都改成连接p1（除了p1本身）
|
||
linelayer.forEach(item => {
|
||
if (item.attributes.nextId == point2.id && item.attributes.leftId != point1.id) {
|
||
item.attributes.nextId = point1.id;
|
||
let polyline = new Polyline({
|
||
paths: [item.geometry.paths[0][0], [point1.geometry.x, point1.geometry.y]],
|
||
|
||
})
|
||
item.set({
|
||
geometry: polyline,
|
||
})
|
||
}
|
||
|
||
if (item.attributes.leftId == point2.id) {
|
||
p3 = pointAll.filter(val => val.id == item.attributes.nextId)[0]
|
||
p2top3line = item
|
||
}
|
||
})
|
||
|
||
//p1到p2的线修改成p1到p3
|
||
|
||
let polyline = new Polyline({
|
||
paths: [p1Top2Line.geometry.paths[0][0], [p3.geometry.x, p3.geometry.y]],
|
||
|
||
})
|
||
p1Top2Line.set({
|
||
geometry: polyline,
|
||
attributes: {
|
||
...p1Top2Line.attributes,
|
||
nextId: p3.id
|
||
}
|
||
})
|
||
|
||
|
||
//p2连接到p3的线删除
|
||
|
||
self.lineLayer.remove(p2top3line)
|
||
//p2删除
|
||
self.sketchLayer.pointLayer.remove(point2)
|
||
|
||
|
||
|
||
|
||
return point1
|
||
} else {
|
||
return point2
|
||
}
|
||
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
},
|
||
drawPolygon(data) {
|
||
|
||
|
||
const polygon = new Polygon({
|
||
rings: data.path,
|
||
|
||
|
||
})
|
||
let graphic = new Graphic({
|
||
geometry: polygon,
|
||
attributes: data,
|
||
symbol: {
|
||
type: "simple-fill",
|
||
color: [226, 119, 40],
|
||
|
||
}
|
||
|
||
})
|
||
let editPolygonLayer = new GraphicsLayer({
|
||
graphics: [graphic],
|
||
id: 'editPolygonLayer',
|
||
fullExtent: {
|
||
spatialReference: 4326
|
||
}
|
||
})
|
||
self.map.add(editPolygonLayer)
|
||
const sketchViewModel = new SketchViewModel({
|
||
view: self.view,
|
||
layer: editPolygonLayer,
|
||
defaultUpdateOptions: {
|
||
highlightOptions: {
|
||
enabled: false,
|
||
},
|
||
enableScaling: false,
|
||
tool: 'reshape',
|
||
reshapeOptions: {
|
||
// edgeOperation :'none',
|
||
shapeOperation: 'none'
|
||
}
|
||
},
|
||
});
|
||
|
||
},
|
||
drawLine(data) {
|
||
|
||
let graphics = []
|
||
data.forEach(item => {
|
||
let line = new Polyline({
|
||
paths: item.path,
|
||
"spatialReference": self.view.spatialReference
|
||
})
|
||
let graphic = new Graphic({
|
||
geometry: line,
|
||
attributes: item,
|
||
symbol: {
|
||
type: "simple-line", // autocasts as new SimpleMarkerSymbol()
|
||
color: item.color,
|
||
width: item.width, // pixels
|
||
outline: { // autocasts as new SimpleLineSymbol()
|
||
color: [255, 255, 0],
|
||
width: 3 // points
|
||
}
|
||
},
|
||
// popupTemplate:{
|
||
// title: '管道'
|
||
// },
|
||
})
|
||
graphic.attributes.imgPoint = self.addImgbyLine(
|
||
item.path,
|
||
graphic.geometry.extent.center.x,
|
||
graphic.geometry.extent.center.y
|
||
)
|
||
graphics.push(graphic)
|
||
});
|
||
let editPolygonLayer = new GraphicsLayer({
|
||
graphics: graphics,
|
||
id: 'editPolygonLayer',
|
||
fullExtent: {
|
||
spatialReference: 4326
|
||
}
|
||
})
|
||
|
||
self.map.add(editPolygonLayer)
|
||
// const sketchViewModel = new SketchViewModel({
|
||
// view: self.view,
|
||
// layer: editPolygonLayer,
|
||
// defaultUpdateOptions: {
|
||
// highlightOptions: {
|
||
// enabled: false,
|
||
// },
|
||
// enableScaling: false,
|
||
// tool: 'reshape',
|
||
// reshapeOptions: {
|
||
// // edgeOperation :'none',
|
||
// shapeOperation: 'none'
|
||
// }
|
||
// },
|
||
|
||
|
||
// });
|
||
// sketchViewModel.on("update", onGraphicUpdate);
|
||
// function onGraphicUpdate(event) {
|
||
// // get the graphic as it is being updated
|
||
// const graphic = event.graphics[0];
|
||
|
||
// let extent = graphic.geometry.extent
|
||
// graphic.attributes.imgPoint = self.addImgbyLine(
|
||
// [[extent.xmax, extent.ymax], [extent.xmin, extent.ymin],],
|
||
// graphic.geometry.extent.center.x,
|
||
// graphic.geometry.extent.center.y,
|
||
// graphic.attributes.imgPoint
|
||
|
||
// )
|
||
|
||
// }
|
||
|
||
|
||
|
||
},
|
||
}
|
||
|
||
export default ldMap
|