上饶市警务平台后台管理前端
zhongrj
2025-01-21 c393f8b721c1e7f6ea65ff0f3ad3a47dce71cfbc
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: []
        }
    },
@@ -59,7 +60,7 @@
            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                    url: "http://10.141.11.8:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
                    url: "http://10.141.11.11:80/slapi/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
                    layer: "wmts_4326_361100",
                    style: "default",
                    format: "image/png",
@@ -69,15 +70,28 @@
                })
            )
            //添加图层
            self.polygonLayer = new global.DC.VectorLayer('polygonLayer')
            global.viewer.addLayer(self.polygonLayer)
            // global.viewer.imageryLayers.addImageryProvider(
            //     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.polyLineLayer = new global.DC.VectorLayer('polyLineLayer')
            global.viewer.addLayer(self.polyLineLayer)
            polygonLayer = new global.DC.VectorLayer('polygonLayer')
            global.viewer.addLayer(polygonLayer)
            plot = new global.DC.Plot(global.viewer, {
                clampToModel: true
            })
            self.plotTool = new global.DC.Plot(global.viewer)
            //添加图层
            polyLineLayer = new global.DC.VectorLayer('polyLineLayer')
            global.viewer.addLayer(polyLineLayer)
            plotTool = new global.DC.Plot(global.viewer)
            //初始化定位
            global.viewer.camera.setView({
@@ -105,13 +119,13 @@
    methods: {
        //开始绘画
        draw (type) {
            if (this.polygon) {
            if (polygon) {
                this.clearDraw()
            }
            this.plotTool && this.plotTool.draw(type, overlay => {
            this.coordinates = []
            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 +136,7 @@
        },
        //重置
        clearDraw () {
            this.polygonLayer.clear()
            polygonLayer.clear()
        },
        //转换成数据库数据
        doData (val) {
@@ -140,29 +154,48 @@
        },
        //回显多边形
        showPolygon (positions) {
            console.log('showPolygon', 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>
<style scoped>
</style>
<style scoped></style>