备案地图回显加编辑功能

guanqb

2023-04-10 1356353be2b4d48485169a1d01d2acf6fd667f3a

 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>