部分修改

shuishen

2022-07-13 2a547086974c31dd7a1ebc3c85c5afc6bf4cc999

 src/components/map/index.vue

@@ -2,7 +2,14 @@
<template>
    <div id="viewer-container" style="height: 100%; width: 100%"></div>
</template>

<script>

var farmRegionLayer = null
var plotRegionLayer = null
var farmLogoLayer = null
var addLayers = []
var addPlotLayers = []

export default {
    name: 'mapBox',
@@ -31,6 +38,15 @@
                    }
                }
            })

            farmRegionLayer = new global.DC.VectorLayer('farmRegionLayer')
            global.viewer.addLayer(farmRegionLayer)

            plotRegionLayer = new global.DC.VectorLayer('plotRegionLayer')
            global.viewer.addLayer(plotRegionLayer)

            farmLogoLayer = new global.DC.HtmlLayer('farmLogoLayer')
            global.viewer.addLayer(farmLogoLayer)

            if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) { // 判断是否支持图像渲染像素化处理
                global.viewer.setOptions({
@@ -163,7 +179,145 @@
        global.DC.ready(initViewer)
    },
    methods: {
        addPolygon (positions, item) {
            const that = this

            const center = this.getCenter(positions)

            const divIcon = new global.DC.DivIcon(
                new global.DC.Position(center[0], center[1], 0),
                `
                        <div class="farm-map-icon">
                            <img src="/img/icon/3858.png" alt="">
                            <div>${item.farmName}</div>
                        </div>
                        `
            )
            divIcon.attrParams = item
            farmLogoLayer.addOverlay(divIcon)

            divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
                that.$parent.showDetailPopup(e.overlay.attrParams)
            })

            const polygon = new global.DC.Polygon(positions)
            polygon.setStyle({
                material: global.DC.Namespace.Cesium.Color.fromBytes(
                    244, 157, 21,
                    200
                )
            })
            farmRegionLayer.addOverlay(polygon)
            addLayers.push({ center, name: item.farmName })
        },

        addPlotPolygon (positions, item) {
            // const that = this

            const center = this.getCenter(positions)

            // const divIcon = new global.DC.DivIcon(
            //     new global.DC.Position(center[0], center[1], 0),
            //     `
            //             <div class="farm-map-icon">
            //                 <img src="/img/icon/3858.png" alt="">
            //                 // <div>${item.farmName}</div>
            //             </div>
            //             `
            // )
            // divIcon.attrParams = item
            // farmLogoLayer.addOverlay(divIcon)

            // divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
            //     that.$parent.showDetailPopup(e.overlay.attrParams)
            // })

            const polygon = new global.DC.Polygon(positions)
            polygon.setStyle({
                material: global.DC.Namespace.Cesium.Color.fromBytes(
                    129, 255, 84,
                    200
                )
            })
            plotRegionLayer.addOverlay(polygon)
            addPlotLayers.push({ center, name: item.landName })
        },

        setCenter (name) {
            let center
            addLayers.forEach(item => {
                if (name == item.name) {
                    center = item.center
                }
            })

            global.viewer.camera.flyTo({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    center[0], center[1], 3000.0
                ),
                orientation: {
                    // 指向
                    heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0
                }
            })
        },

        setPlotCenter (name) {
            let center
            addPlotLayers.forEach(item => {
                if (name == item.name) {
                    center = item.center
                }
            })

            global.viewer.camera.flyTo({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    center[0], center[1], 3000.0
                ),
                orientation: {
                    // 指向
                    heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0
                }
            })
        },

        // 经纬度测算中心位置
        getCenter (arr) {
            let centerLonLat = []
            if (arr.length) {
                const lon = []
                const lat = []
                const poly = []
                for (let i = 0, len = arr.length; i < len; i++) {
                    lon.push(arr[i][0])
                    lat.push(arr[i][1])
                }
                for (let i = 0, len = lon.length; i < len; i++) {
                    poly.push({
                        x: parseFloat(lon[i]),
                        y: parseFloat(lat[i]),
                        z: 0
                    })
                }
                const sortedLongitudeArray = poly.map(item => item.x).sort()
                const sortedLatitudeArray = poly.map(item => item.y).sort()
                const centerLongitude = ((parseFloat(sortedLongitudeArray[0]) + parseFloat(sortedLongitudeArray[sortedLongitudeArray.length - 1])) / 2).toFixed(14)
                const centerLatitude = ((parseFloat(sortedLatitudeArray[0]) + parseFloat(sortedLatitudeArray[sortedLatitudeArray.length - 1])) / 2).toFixed(14)
                console.log(centerLongitude, centerLatitude)
                centerLonLat = [Number(centerLongitude), Number(centerLatitude)]
            }
            return centerLonLat
        }
    }
}
</script>