1792 lines
45 KiB
JavaScript
1792 lines
45 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 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 * 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 * as print from "@arcgis/core/rest/print.js";
|
||
|
import Print from "@arcgis/core/widgets/Print.js";
|
||
|
import PrintTemplate from "@arcgis/core/rest/support/PrintTemplate.js";
|
||
|
import PrintParameters from "@arcgis/core/rest/support/PrintParameters.js";
|
||
|
|
||
|
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 self = '';
|
||
|
const ldMap = {
|
||
|
map: '',
|
||
|
view: '',
|
||
|
nowlayer: '',
|
||
|
sketchLayer: {
|
||
|
pointLayer: '',
|
||
|
polylineLayer: '',
|
||
|
polygonLayer: '',
|
||
|
selectGraphic: null
|
||
|
},
|
||
|
pointSketchViewModel: '',
|
||
|
polygonSketchViewModel: '',
|
||
|
polylineSketchViewModel: '',
|
||
|
addGraphicType: '',
|
||
|
lineLayer: '',
|
||
|
count: 0,
|
||
|
lighHight: null,
|
||
|
draw: null,
|
||
|
DrawstartPoint: [],
|
||
|
DrawenedPoint: [],
|
||
|
DrawDregType: null,
|
||
|
textLayer: null,
|
||
|
ldMapActionType: '',
|
||
|
printExcent: '',
|
||
|
pointSketchType: 'Station',
|
||
|
|
||
|
newDrawLineByClick:'',
|
||
|
//初始化地图
|
||
|
initMap: function () {
|
||
|
|
||
|
self = this;
|
||
|
return new Promise((resolve, reject) => {
|
||
|
|
||
|
let tileInfo = new TileInfo(TianData.infoData);
|
||
|
|
||
|
let defaultInfo = {
|
||
|
subDomains: ["t1"],
|
||
|
spatialReference: {
|
||
|
wkid: 4326,
|
||
|
},
|
||
|
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: 4326,
|
||
|
},
|
||
|
constraints: {
|
||
|
lods: lodsView,
|
||
|
rotationEnabled: false,
|
||
|
minZoom: 0,
|
||
|
maxZoom: 50
|
||
|
},
|
||
|
center: [116.85722842688202, 39.26485279059861],
|
||
|
zoom: 15,
|
||
|
});
|
||
|
|
||
|
|
||
|
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)
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
});
|
||
|
|
||
|
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()
|
||
|
}
|
||
|
|
||
|
self.view.hitTest(event).then((response) => {
|
||
|
|
||
|
self.lighHight?.remove();
|
||
|
if (self.ldMapActionType == 'lineAction') {
|
||
|
if (response.results && response.results[0]) {
|
||
|
|
||
|
var graphic = response.results[0].graphic;
|
||
|
self.view.whenLayerView(graphic.layer).then((layerView) => {
|
||
|
|
||
|
// emitter.emit('line', graphic.attributes.data)
|
||
|
self.lighHight = layerView.highlight(graphic)
|
||
|
|
||
|
})
|
||
|
|
||
|
|
||
|
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
});
|
||
|
});
|
||
|
//文字
|
||
|
|
||
|
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.map.add(self.textLayer, 10)
|
||
|
self.initSketch()
|
||
|
},
|
||
|
removeAll() {
|
||
|
|
||
|
|
||
|
self.view.map.removeAll();
|
||
|
|
||
|
},
|
||
|
addLayer: function (e) {
|
||
|
|
||
|
self.removeAll();
|
||
|
let data = {
|
||
|
id: "layerName",
|
||
|
url: '',
|
||
|
...e
|
||
|
}
|
||
|
var imgLayer = new TileLayer(data);
|
||
|
|
||
|
this.map.layers.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"
|
||
|
};
|
||
|
|
||
|
},
|
||
|
//计算两点之间的距离
|
||
|
distance: function (p1, p2) {
|
||
|
const join = geodesicUtils.geodesicDistance(
|
||
|
new Point({ x: p1[0], y: p1[1] }),
|
||
|
new Point({ x: p2[0], y: p2[1] }),
|
||
|
"meters"
|
||
|
);
|
||
|
const { distance, azimuth } = join;
|
||
|
return distance.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)
|
||
|
return sketchVM;
|
||
|
}
|
||
|
function selectData(e) {
|
||
|
|
||
|
let graphic = e.graphics[0]
|
||
|
console.log(e)
|
||
|
if (e.tool == "move") {
|
||
|
self.movePointBy(graphic)
|
||
|
//移动点位,边线跟随移动
|
||
|
}
|
||
|
if (e.state == 'start') {
|
||
|
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 == "House") {
|
||
|
//更改经纬度范围
|
||
|
if (graphic.attributes.data && graphic.attributes.data.action == undefined) {
|
||
|
graphic.attributes.data.action = 1
|
||
|
}
|
||
|
//更改文字显示位置
|
||
|
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
|
||
|
}
|
||
|
|
||
|
}
|
||
|
function addGraphic(event) {
|
||
|
|
||
|
let mapdata = useMapDataStore()
|
||
|
let id = self.addGraphicType + ':' + Date.now()
|
||
|
if (event.state === "complete") {
|
||
|
switch (event.tool) {
|
||
|
case "point":
|
||
|
count++;
|
||
|
pointLayer.remove(event.graphic);
|
||
|
console.log(self.pointSketchType)
|
||
|
let symbol = {
|
||
|
type: "simple-marker",
|
||
|
style: "circle",
|
||
|
size: self.pointSketchType == 'Station' ? '18px' : '14px',
|
||
|
color: self.pointSketchType == 'Station' ? [8, 240, 36, 255] : [7, 253, 253, 255],
|
||
|
outline: {
|
||
|
width: 0
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
const newPointGraphic = new Graphic({
|
||
|
geometry: event.graphic.geometry,
|
||
|
symbol: symbol,
|
||
|
attributes: {
|
||
|
point: 'point',
|
||
|
title: "point#" + count
|
||
|
}
|
||
|
});
|
||
|
pointLayer.add(newPointGraphic);
|
||
|
|
||
|
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;
|
||
|
let val = {
|
||
|
geometryId: id,
|
||
|
action: 2,
|
||
|
"innerings": "[]",
|
||
|
"extend": null,
|
||
|
type: self.addGraphicType,
|
||
|
path: JSON.stringify(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)
|
||
|
|
||
|
|
||
|
break;
|
||
|
|
||
|
default:
|
||
|
console.log("geometry type not found: ", event);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
},
|
||
|
//验证新增的面是否有重叠
|
||
|
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() {
|
||
|
|
||
|
self.pointSketchType = 'y'
|
||
|
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 polylineLayer = self.sketchLayer.polylineLayer
|
||
|
let polylineLayer = self.lineLayer
|
||
|
let paths = polylineVal.geometry.paths
|
||
|
|
||
|
// leftpath[0]= leftpath[0].slice(0,leftpath[0].length-1)
|
||
|
// console.log(leftpath[0])
|
||
|
type == 'left' ? paths[0][0] = nowXy : paths[0][paths[0].length - 1] = nowXy
|
||
|
// polylineVal.geometry.setPoint(0,0,[noxy])
|
||
|
|
||
|
const polyline = new Polyline({
|
||
|
paths: paths,
|
||
|
spatialReference: self.view.spatialReference,
|
||
|
|
||
|
})
|
||
|
|
||
|
const length = geometryEngine.geodesicLength(polyline, "meters");
|
||
|
console.log(length.toFixed(2))
|
||
|
const newPolygonGraphic = new Graphic({
|
||
|
geometry: polyline,
|
||
|
attributes: polylineVal.attributes,
|
||
|
symbol: polylineVal.symbol
|
||
|
})
|
||
|
|
||
|
|
||
|
polylineLayer.add(newPolygonGraphic)
|
||
|
polylineLayer.remove(polylineVal)
|
||
|
|
||
|
},
|
||
|
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()
|
||
|
|
||
|
},
|
||
|
//清除点位
|
||
|
removePoint() {
|
||
|
this.sketchLayer.pointLayer.removeAll();
|
||
|
},
|
||
|
//布线识别的数据加载
|
||
|
addDefaultByline(data) {
|
||
|
|
||
|
self.ldMapActionType = 'lineAction'
|
||
|
self.DrawDregType = false
|
||
|
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,
|
||
|
spatialReference: self.view.spatialReference,
|
||
|
|
||
|
})
|
||
|
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,
|
||
|
endId: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){
|
||
|
returnObj.line.push(self.getMapByPoint(item,[]))
|
||
|
}
|
||
|
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) ,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
|
||
|
|
||
|
},
|
||
|
//根据起点找终点返回数据
|
||
|
getMapByPoint(item,data){
|
||
|
|
||
|
let linelayer = self.lineLayer.graphics.items
|
||
|
let point= self.getSketchDataByType("point");
|
||
|
|
||
|
let nowPointId = item.id
|
||
|
let lineId= item.attributes.endIndex
|
||
|
|
||
|
//当前的元素数据
|
||
|
let geometry = item.geometry
|
||
|
let attributes = item.attributes
|
||
|
|
||
|
if(lineId&&lineId!=nowPointId){
|
||
|
let linedata = linelayer.filter(item=>item.id==lineId)[0]
|
||
|
let val = [geometry.x,geometry.y,attributes.data.pointType,parseInt( linedata.attributes.data.styleId),nowPointId]
|
||
|
data.push(val)
|
||
|
let nextPointId = linedata.attributes.data.endIndex
|
||
|
|
||
|
let nextItem = point.filter(item=>item.id==nextPointId)[0]
|
||
|
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: "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;
|
||
|
|
||
|
// }
|
||
|
|
||
|
},
|
||
|
//根据管径信息修改管道
|
||
|
exitLineByVal(data) {
|
||
|
|
||
|
let polylineLayer = self.lineLayer
|
||
|
|
||
|
let p6 = this.lineLayer.graphics.items.filter(item => {
|
||
|
return item.attributes.id == data.id
|
||
|
})[0]
|
||
|
const newPolygonGraphic = new Graphic({
|
||
|
geometry: p6.geometry,
|
||
|
attributes: p6.attributes,
|
||
|
symbol: self.returnLineSymbole(data.width, data.color)
|
||
|
})
|
||
|
polylineLayer.add(newPolygonGraphic)
|
||
|
polylineLayer.remove(p6)
|
||
|
|
||
|
},
|
||
|
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
|
||
|
},
|
||
|
|
||
|
|
||
|
]
|
||
|
}
|
||
|
};
|
||
|
},
|
||
|
//特征物的站点数据
|
||
|
addDefaultPoint(data) {
|
||
|
|
||
|
let pointLayer = self.sketchLayer.pointLayer
|
||
|
const point = new Point({
|
||
|
x: data.path[0],
|
||
|
y: data.path[1],
|
||
|
spatialReference: self.view.spatialReference
|
||
|
})
|
||
|
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 = JSON.parse(item.path)[0]
|
||
|
let point = new Point({
|
||
|
x: xy[0],
|
||
|
y: xy[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: 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 = JSON.parse(res.innerings)
|
||
|
res.path = JSON.parse(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,
|
||
|
spatialReference: self.view.spatialReference
|
||
|
})
|
||
|
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
|
||
|
}
|
||
|
}
|
||
|
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) {
|
||
|
|
||
|
|
||
|
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"
|
||
|
}
|
||
|
})
|
||
|
|
||
|
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)
|
||
|
// debugger
|
||
|
|
||
|
|
||
|
|
||
|
let lat = webMercatorUtils.xyToLngLat(nowX, nowY)
|
||
|
return lat
|
||
|
},
|
||
|
getTileExtent(layer) {
|
||
|
|
||
|
},
|
||
|
//获取总数居
|
||
|
getAllData() {
|
||
|
|
||
|
self.sketchLayer.polygonLayer.removeAll()
|
||
|
|
||
|
},
|
||
|
|
||
|
delSketch() {
|
||
|
|
||
|
|
||
|
if (self.sketchLayer.selectGraphic) {
|
||
|
|
||
|
let val = self.sketchLayer.selectGraphic.attributes.data
|
||
|
let layer = ""
|
||
|
let selectData = self.sketchLayer.selectGraphic
|
||
|
switch (selectData.attributes.sketchType) {
|
||
|
case "point": layer = self.sketchLayer.pointLayer.remove(selectData); break;
|
||
|
case "polygon": layer = self.sketchLayer.polygonLayer.remove(selectData); break;
|
||
|
case "polyline": layer = self.sketchLayer.polylineLayer.remove(selectData); break;
|
||
|
}
|
||
|
self.sketchLayer.selectGraphic = null
|
||
|
return val;
|
||
|
|
||
|
|
||
|
}
|
||
|
|
||
|
},
|
||
|
destroyDraw() {
|
||
|
this.draw.destroy()
|
||
|
if( this.ldMapActionType == 'lineAction'){
|
||
|
this.pointLayerBind()
|
||
|
}
|
||
|
},
|
||
|
startDrawLine() {
|
||
|
|
||
|
|
||
|
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.pointLayerBind()
|
||
|
});
|
||
|
|
||
|
},
|
||
|
//根据画的线合并到最近的点位
|
||
|
pointLayerBind(){
|
||
|
|
||
|
|
||
|
console.log(self.newDrawLineByClick)
|
||
|
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){
|
||
|
debugger
|
||
|
let polyline = {
|
||
|
type: "polyline", // autocasts as new Polyline()
|
||
|
paths: [[startItem.geometry.x,startItem.geometry.y],[endItem.geometry.x,endItem.geometry.y]],
|
||
|
spatialReference: self.view.spatialReference
|
||
|
}
|
||
|
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,
|
||
|
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,
|
||
|
spatialReference: self.view.spatialReference
|
||
|
}
|
||
|
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) {
|
||
|
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],
|
||
|
spatialReference: self.view.spatialReference
|
||
|
})
|
||
|
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)
|
||
|
|
||
|
},
|
||
|
drawPolygon(data) {
|
||
|
|
||
|
|
||
|
const polygon = new Polygon({
|
||
|
rings: data.path,
|
||
|
spatialReference: self.view.spatialReference
|
||
|
|
||
|
})
|
||
|
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
|