基地信息坐标有误差的问题

xiebin

2022-11-16 3dc278f10a4c3e3db7ce3a445bed710bdc88916e

 src/components/map/index.vue

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

<script>
// import axios from 'axios'
import NCregion from '@/assets/region'
import {getSensings} from '@/api/remote/remote'

// 图层变量做声明
var farmRegionLayer = null
var plotRegionLayer = null
var farmLogoLayer = null
var regionPolyLineLayer = null

var addLayers = []
var addPlotLayers = []

var siteEntitylayers = null
var siteEntitylayers1 = null
var siteEntitylayers2 = null
var siteEntitylayers3 = null
var siteEntitylayers4 = null
var sitePositionsArray = []

export default {
    name: 'mapBox',

    data () {
        return {

            polyline: null
        }
    },

    watch: {
        'polyline' (newObj, oldObj) {
            if (newObj && oldObj) {
                plotRegionLayer.removeOverlay(oldObj)
            }
        }
    },
    computed: {

    },
@@ -21,7 +47,9 @@
            global.viewer = null
        }

        // 初始化地图
        function initViewer () {
            // new Viewer(new 地图)
            global.viewer = new global.DC.Viewer('viewer-container', {
                contextOptions: {
                    webgl: {
@@ -32,22 +60,67 @@
                }
            })

            if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) { // 判断是否支持图像渲染像素化处理
            // 去除logo
            let primitiveArr = global.viewer.scene.primitives._primitives
            global.viewer.scene.primitives.remove(primitiveArr[0])

            // global.viewer.scene.globe.depthTestAgainstTerrain = true

            // 已声明的图层添加到地图上
            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)

            siteEntitylayers = new global.DC.VectorLayer('siteEntitylayers')
            global.viewer.addLayer(siteEntitylayers)
            siteEntitylayers1 = new global.DC.VectorLayer('siteEntitylayers1')
            global.viewer.addLayer(siteEntitylayers1)
            siteEntitylayers2 = new global.DC.VectorLayer('siteEntitylayers2')
            global.viewer.addLayer(siteEntitylayers2)
            siteEntitylayers3 = new global.DC.VectorLayer('siteEntitylayers3')
            global.viewer.addLayer(siteEntitylayers3)
            siteEntitylayers4 = new global.DC.VectorLayer('siteEntitylayers4')
            global.viewer.addLayer(siteEntitylayers4)

            // 南城县边界数据
            regionPolyLineLayer = new global.DC.VectorLayer('regionPolyLineLayer')
            global.viewer.addLayer(regionPolyLineLayer)

            // 判断是否支持图像渲染像素化处理
            if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
                global.viewer.setOptions({
                    resolutionScale: window.devicePixelRatio
                })
            }

            // 影像
            // 天地图 影像
            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
                    url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_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
                })
            )


            //获取默认展示影像
            getSensings("SHOW").then(res=>{
                res.data.data.forEach(e=>{
                    global.viewer.imageryLayers.addImageryProvider(
                        new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                          url: e.reUrl,
                          maximumLevel: 18
                        })
                    )
                })
            })

            // 矢量电子
            // global.viewer.imageryLayers.addImageryProvider(
@@ -59,22 +132,23 @@
            //         maximumLevel: 18
            //     })
            // )
            //
            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            //         url: 'http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
            //         subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            //         format: 'image/jpeg',
            //         show: true,
            //         maximumLevel: 18
            //     })
            // )

            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: 'http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
                    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                    format: 'image/jpeg',
                    show: true,
                    maximumLevel: 18
                })
            )

            // 设置地图初始位置，角度等
            global.viewer.camera.setView({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    116.35381525, 27.95839468, 1950.0
                    116.56705776, 27.42386903, 1800.0
                ),
                orientation: {
                    // 指向
@@ -84,11 +158,427 @@
                    roll: 0.0
                }
            })
        }

            // global.viewer.locationBar.enable = true
        }
        global.DC.ready(initViewer)
        // this.addRegionPolyLine('http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengfwx/MapServer/0/query?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&returnTrueCurves=false&resultOffset=&resultRecordCount=&f=pjson')
        this.addRegionPolyLine(NCregion)
    },
    methods: {
        /**
         * 添加南城县边界的数据
         * @param {string} url arcgis服务地址
         */
        addRegionPolyLine (regionJSON) {
            // axios.get(regionJSON).then(res => {
            let position = ''

            regionJSON.features[0].geometry.rings[0].forEach(item => {
                position += `${item[0]}, ${item[1]};`
            })

            console.log(position, 565656)

            const polyline = new global.DC.Polyline(position)
            polyline.setStyle({
                width: 4,
                material: global.DC.Namespace.Cesium.Color.fromBytes(
                    244, 157, 21,
                    200
                ),
                clampToGround: true
            })
            regionPolyLineLayer.addOverlay(polyline)
            // })
        },
        /**
         * 添加基地点及范围的方法
         * @param {*} positions 位置信息（范围信息）
         * @param {*} item 基地对应的所有信息（接口返回的数据）
         */
        addPolygon (item) {
            const that = this

            // const center = this.getCenter(positions)

            const center = global.DC.CoordTransform.GCJ02ToWGS84(item.longitude, item.latitude)

            const divIcon = new global.DC.DivIcon(new global.DC.Position(center[0], center[1]),
                `
                        <div class="farm-map-icon">
                            <img src="../../../zhny-dp/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)

            if (item.position != '') {
                addLayers.push({ center, name: item.farmName })
            } else {
                addLayers.push({ center: '', name: item.farmName })
            }
        },

        /**
         * 添加地块范围的方法
         * @param {*} positions 位置信息（范围信息）
         * @param {*} item 地块对应的所有信息（接口返回的数据）
         */
        addPlotPolygon (positions, item) {
            const that = this

            const center = this.getCenter(positions)

            if (item.strainUrl != '') {
                const urls = item.strainUrl.split(',')
                let imageStr = '<div class="land-map-icon">'
                urls.forEach(url => {
                    imageStr += `<img src="${url}" alt=""width="100px" height="100px" text-align="center" class="strainImg">`
                })
                imageStr += '</div>'
                const divIcon = new global.DC.DivIcon(
                    new global.DC.Position(center[0], center[1], 0), imageStr
                )

                divIcon.attrParams = item
                farmLogoLayer.addOverlay(divIcon)

                divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
                    that.$parent.plotDetailsPopupShow(e.overlay.attrParams)
                })
            }
            const polygon = new global.DC.Polygon(positions)
            polygon.attrParams = item
            polygon.setStyle({
                material: global.DC.Namespace.Cesium.Color.fromBytes(
                    129, 255, 84,
                    400
                )
            })

            polygon.on(global.DC.MouseEventType.CLICK, (e) => {
                that.drawLandPolyLine(positions)
                that.$parent.plotDetailsPopupShow(e.overlay.attrParams)
            })

            plotRegionLayer.addOverlay(polygon)
            addPlotLayers.push({ center, name: item.landName })
        },
        /**
         * 地块画线
         * @param positions
         */
        drawLandPolyLine (positions) {
            // 画线
            this.polyline = new global.DC.Polyline(positions)
            this.polyline.setStyle({
                width: 4,
                material: global.DC.Namespace.Cesium.Color.fromBytes(
                        200, 255, 255,
                        200
                ),
                clampToGround: true
            })
            plotRegionLayer.addOverlay(this.polyline)
        },

        /**
         * 在图层中添加实体(点)
         * @param {*} item 站点（某个设备）对应的所有参数（接口返回对应站点的数据）
         * @param {*} url 图标地址
         */
        addSiteEntity (item, url) {
            const that = this

            const center = [Number(item.lon), Number(item.lat)]

            const label = new global.DC.Label(new global.DC.Position(Number(item.lon), Number(item.lat)), item.name)

            label.attrParams = item

            label.setStyle({
                fillColor: global.DC.Namespace.Cesium.Color.fromBytes(
                    1, 190, 254, 255
                ),
                showBackground: true,
                backgroundColor: global.DC.Namespace.Cesium.Color.fromBytes(
                    0, 0, 0, 145
                ), // 背景颜色
                distanceDisplayCondition: {
                    near: 0, // 最近距离
                    far: 3000 // 最远距离
                }, // 根据距离设置可见
                font: '12px',
                pixelOffset: { x: 0, y: -32 } // 偏移像素
            })

            label.on(global.DC.MouseEventType.CLICK, (e) => {
                if (!item.dictTypeNum) {
                    that.$parent.goToJkDetail(e.overlay.attrParams)
                } else {
                    that.$parent.goToDetail(e.overlay.attrParams)
                }
            })

            const billboard = new global.DC.Billboard(new global.DC.Position(Number(item.lon), Number(item.lat)), url)
            billboard.size = [20, 28]
            billboard.attrParams = item

            billboard.on(global.DC.MouseEventType.CLICK, (e) => {
                if (!item.dictTypeNum) {
                    that.$parent.goToJkDetail(e.overlay.attrParams)
                } else {
                    that.$parent.goToDetail(e.overlay.attrParams)
                }
            })
            if (!item.dictTypeNum) {
                siteEntitylayers.addOverlay(label)
                siteEntitylayers.addOverlay(billboard)
            } else if (item.dictTypeNum == 1) {
                siteEntitylayers1.addOverlay(label)
                siteEntitylayers1.addOverlay(billboard)
            } else if (item.dictTypeNum == 2) {
                siteEntitylayers2.addOverlay(label)
                siteEntitylayers2.addOverlay(billboard)
            } else if (item.dictTypeNum == 3) {
                siteEntitylayers3.addOverlay(label)
                siteEntitylayers3.addOverlay(billboard)
            } else if (item.dictTypeNum == 4) {
                siteEntitylayers4.addOverlay(label)
                siteEntitylayers4.addOverlay(billboard)
            }

            sitePositionsArray.push({ center, name: item.name, id: item.id })
        },

        /**
         * 将数据库保存值转换成Map使用坐标
         * @param landRange 数据库的值
         * @returns {*[]} Map使用坐标
         */
        setPositionByLandRange (landRange) {
            if (landRange) {
                landRange = landRange.replace(/POLYGON\(\(/g, '')
                landRange = landRange.replace(/\)\)/g, '')

                const arr = landRange.split(',')
                var brr = []
                arr.forEach(it => {
                    brr.push(it.split(' '))
                })

                return brr
            }
            return null
        },

        /**
         * 设置中心点
         * @param {*} name 对应站点（基地范围）的中心点 --- 对应的名字
         */
        setCenter (farmObj) {
            // let center
            // addLayers.forEach(item => {
            //     if (name == item.name) {
            //         center = item.center
            //     }
            // })

            // if (center == '') {
            //     this.$message({
            //         message: '当前基地暂未绘制',
            //         type: 'warning'
            //     })
            //     return
            // }
            const center = global.DC.CoordTransform.GCJ02ToWGS84(farmObj.longitude, farmObj.latitude)
            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
                }
            })
        },

        /**
         * 设置地块中心点
         * @param {*} name 对应站点（地块范围）的中心点 --- 对应的名字
         */

        setPlotCenter (landObj) {
            if (!landObj.landRange) {
                this.$message({
                    message: '当前地块暂未绘制',
                    type: 'warning'
                })
                return
            }
            let center
            addPlotLayers.forEach(item => {
                if (landObj.landName == item.name) {
                    center = item.center
                }
            })
            // 根据坐标画线
            const positions = this.setPositionByLandRange(landObj.landRange)
            if (positions) {
                this.drawLandPolyLine(positions)
            }

            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
                }
            })
        },

        /**
         * 设置中心点
         * @param {*} name 对应站点（设备点）的中心点 --- 对应的名字
         */
        setSiteCenter (name) {
            let center
            sitePositionsArray.forEach(item => {
                if (name == item.name) {
                    center = item.center
                }
            })

            console.log(name, center)

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

        /**
         * 根据经纬度范围计算中心点位置
         * @param {*} arr 记录经纬度信息的数组
         */
        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
        },
        // 隐藏基地标记图层
        hiddenFarmLayer () {
            farmLogoLayer.show = false
            farmRegionLayer.show = false
        },
        // 显示基地标记图层
        showFarmLayer () {
            farmLogoLayer.show = true
            farmRegionLayer.show = true
        },
        // 隐藏地块图层
        hiddenPlotLayer () {
            plotRegionLayer.show = false
        },
        // 显示地块图层
        showPlotLayer () {
            plotRegionLayer.show = true
        },
        // 隐藏监控图层
        hiddenJKLayer () {
            siteEntitylayers.show = false
        },
        // 显示监控图层
        showJKLayer () {
            siteEntitylayers.show = true
        },
        // 隐藏气象图层
        hiddenQXLayer () {
            siteEntitylayers1.show = false
            siteEntitylayers2.show = false
        },
        // 显示气象图层
        showQXLayer () {
            siteEntitylayers1.show = true
            siteEntitylayers2.show = true
        },
        // 隐藏水质图层
        hiddenSZLayer () {
            siteEntitylayers3.show = false
        },
        // 显示水质图层
        showSZLayer () {
            siteEntitylayers3.show = true
        },
        // 隐藏土壤图层
        hiddenTRLayer () {
            siteEntitylayers4.show = false
        },
        // 显示土壤图层
        showTRLayer () {
            siteEntitylayers4.show = true
        }

    }
}