From 1356353be2b4d48485169a1d01d2acf6fd667f3a Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Mon, 10 Apr 2023 22:24:48 +0800
Subject: [PATCH] 备案地图回显加编辑功能
---
src/components/map/dcMap.vue | 99 +++++++++++++++++++++++++++++++++----------------
1 files changed, 66 insertions(+), 33 deletions(-)
diff --git a/src/components/map/dcMap.vue b/src/components/map/dcMap.vue
index 6726094..389f638 100644
--- a/src/components/map/dcMap.vue
+++ b/src/components/map/dcMap.vue
@@ -11,17 +11,18 @@
</template>
<script>
+let polygonLayer = null
+let polyLineLayer = null
+let polygon = null
+let polyLine = null
+let plotTool = null
+let plot = undefined
+
export default {
name: "dcMap",
props: ['isDetail', 'range'],
data () {
return {
- polygonLayer: null,
- polyLineLayer: null,
- polygon: null,
- polyLine: null,
- //绘制工具
- plotTool: null,
coordinates: []
}
},
@@ -57,27 +58,40 @@
// })
// )
+ // global.viewer.imageryLayers.addImageryProvider(
+ // new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ // url: "http://10.141.11.11:80/slapi/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
+ // layer: "wmts_4326_361100",
+ // style: "default",
+ // format: "image/png",
+ // tileMatrixSetID: "c",
+ // tileMatrixLabels: new Array(18).fill(0).map((v, i) => i + 1),
+ // tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ // })
+ // )
+
global.viewer.imageryLayers.addImageryProvider(
- new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- url: "http://10.141.11.11:80/slapi/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
- layer: "wmts_4326_361100",
- style: "default",
- format: "image/png",
- tileMatrixSetID: "c",
- tileMatrixLabels: new Array(18).fill(0).map((v, i) => i + 1),
- tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
+ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+ format: 'image/jpeg',
+ show: true,
+ maximumLevel: 18
})
)
//添加图层
- self.polygonLayer = new global.DC.VectorLayer('polygonLayer')
- global.viewer.addLayer(self.polygonLayer)
+ polygonLayer = new global.DC.VectorLayer('polygonLayer')
+ global.viewer.addLayer(polygonLayer)
+ plot = new global.DC.Plot(global.viewer, {
+ clampToModel: true
+ })
//添加图层
- self.polyLineLayer = new global.DC.VectorLayer('polyLineLayer')
- global.viewer.addLayer(self.polyLineLayer)
+ polyLineLayer = new global.DC.VectorLayer('polyLineLayer')
+ global.viewer.addLayer(polyLineLayer)
- self.plotTool = new global.DC.Plot(global.viewer)
+ plotTool = new global.DC.Plot(global.viewer)
//初始化定位
global.viewer.camera.setView({
@@ -105,13 +119,12 @@
methods: {
//开始绘画
draw (type) {
- if (this.polygon) {
+ if (polygon) {
this.clearDraw()
}
-
- this.plotTool && this.plotTool.draw(type, overlay => {
+ plotTool && plotTool.draw(type, overlay => {
if (overlay) {
- this.polygonLayer.addOverlay(overlay)
+ polygonLayer.addOverlay(overlay)
overlay.positions.forEach(e => {
this.coordinates.push([e.lng, e.lat])
})
@@ -122,7 +135,7 @@
},
//重置
clearDraw () {
- this.polygonLayer.clear()
+ polygonLayer.clear()
},
//转换成数据库数据
doData (val) {
@@ -140,26 +153,46 @@
},
//回显多边形
showPolygon (positions) {
+ console.log('positions', positions)
let viewer = global.viewer
positions = positions.replaceAll(",", ";").replaceAll(" ", ",")
- this.polygon = new global.DC.Polygon(positions)
- this.polygon.setStyle({
+ polygon = new global.DC.Polygon(positions)
+ polygon.setStyle({
material: global.DC.Color.RED
})
- this.polygonLayer.addOverlay(this.polygon)
- viewer.flyTo(this.polygonLayer)
+ polygonLayer.addOverlay(polygon)
+ viewer.flyTo(polygonLayer)
+ polygon.on(global.DC.MouseEventType.CLICK, this.polygonClick)
},
//回显线
showPolyLine (positions) {
let viewer = global.viewer
positions = positions.replaceAll(",", ";").replaceAll(" ", ",")
- this.polyLine = new global.DC.Polyline(positions)
- this.polyLine.setStyle({
+ polyLine = new global.DC.Polyline(positions)
+ polyLine.setStyle({
material: global.DC.Color.RED
})
- this.polyLineLayer.addOverlay(this.polyLine)
- viewer.flyTo(this.polyLineLayer)
- }
+ polyLineLayer.addOverlay(polyLine)
+ viewer.flyTo(polyLineLayer)
+ },
+
+ // 点击编辑多边形
+ polygonClick (e) {
+ let plotOverlay = e.overlay
+ plot.edit(plotOverlay, (e) => {
+ let newPolygonPositions = []
+ let newPolygonPositionsArr = []
+ plotOverlay._positions.forEach((item, index) => {
+ if (index % 2 == 0) {
+ newPolygonPositions.push(item)
+ newPolygonPositionsArr.push([item._lng, item._lat])
+ }
+ })
+ plotOverlay.positions = newPolygonPositions
+ let toData = this.doData(newPolygonPositionsArr)
+ this.$emit('toData', toData)
+ }, { material: global.DC.Color.RED.withAlpha(0.5) })
+ },
}
}
</script>
--
Gitblit v1.9.3