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