deepdragon/src/ldmap/utils/map/init.js

1792 lines
45 KiB
JavaScript
Raw Normal View History

2024-02-07 16:50:15 +08:00
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