智慧农业大数据平台
xiebin
2022-11-16 3dc278f10a4c3e3db7ce3a445bed710bdc88916e
src/components/map/index.vue
@@ -4,7 +4,9 @@
</template>
<script>
import axios from 'axios'
// import axios from 'axios'
import NCregion from '@/assets/region'
import {getSensings} from '@/api/remote/remote'
// 图层变量做声明
var farmRegionLayer = null
@@ -27,10 +29,16 @@
    data () {
        return {
            polyline: null
        }
    },
    watch: {
        'polyline' (newObj, oldObj) {
            if (newObj && oldObj) {
                plotRegionLayer.removeOverlay(oldObj)
            }
        }
    },
    computed: {
    },
@@ -51,6 +59,10 @@
                    }
                }
            })
            // 去除logo
            let primitiveArr = global.viewer.scene.primitives._primitives
            global.viewer.scene.primitives.remove(primitiveArr[0])
            // global.viewer.scene.globe.depthTestAgainstTerrain = true
@@ -89,7 +101,7 @@
            // 天地图 影像
            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,
@@ -97,79 +109,18 @@
                })
            )
            // http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer
            // arcgis服务添加
            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                    url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengyjjddom/MapServer/WMTS',
                    // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
                    layer: 'nanchengyjjddom',
                    style: 'default',
                    tileMatrixSetID: 'default028mm',
                    format: 'image/png',
                    tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
                    maximumLevel: 19,
                    tileMatrixLabels: [
                        '0',
                        '1',
                        '2',
                        '3',
                        '4',
                        '5',
                        '6',
                        '7',
                        '8',
                        '9',
                        '10',
                        '11',
                        '12',
                        '13',
                        '14',
                        '15',
                        '16',
                        '17',
                        '18',
                        '19'
                    ]
            //获取默认展示影像
            getSensings("SHOW").then(res=>{
                res.data.data.forEach(e=>{
                    global.viewer.imageryLayers.addImageryProvider(
                        new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                          url: e.reUrl,
                          maximumLevel: 18
                        })
                    )
                })
            )
            // arcgis服务添加
            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                    url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
                    // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
                    layer: 'nanchengdom',
                    style: 'default',
                    tileMatrixSetID: 'default028mm',
                    format: 'image/png',
                    tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
                    maximumLevel: 19,
                    tileMatrixLabels: [
                        '0',
                        '1',
                        '2',
                        '3',
                        '4',
                        '5',
                        '6',
                        '7',
                        '8',
                        '9',
                        '10',
                        '11',
                        '12',
                        '13',
                        '14',
                        '15',
                        '16',
                        '17',
                        '18',
                        '19'
                    ]
                })
            )
            })
            // 矢量电子
            // global.viewer.imageryLayers.addImageryProvider(
@@ -181,7 +132,7 @@
            //         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',
@@ -210,53 +161,53 @@
            // 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('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 (url) {
            axios.get(url).then(res => {
                let position = ''
        addRegionPolyLine (regionJSON) {
            // axios.get(regionJSON).then(res => {
            let position = ''
                res.data.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)
            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 农场对应的所有信息(接口返回的数据)
         * @param {*} item 基地对应的所有信息(接口返回的数据)
         */
        addPolygon (positions, item) {
        addPolygon (item) {
            const that = this
            const center = this.getCenter(positions)
            // const center = this.getCenter(positions)
            const divIcon = new global.DC.DivIcon(
                new global.DC.Position(center[0], center[1], 0),
            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="/img/icon/3858.png" alt="">
                            <img src="../../../zhny-dp/img/icon/3858.png" alt="">
                            <div>${item.farmName}</div>
                        </div>
                        `
@@ -295,37 +246,57 @@
            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)
            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.on(global.DC.MouseEventType.CLICK, (e) => {
            //     that.$parent.showDetailPopup(e.overlay.attrParams)
            // })
                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,
                    200
                    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)
        },
        /**
@@ -398,30 +369,52 @@
        },
        /**
         * 设置中心点
         * @param {*} name 对应站点(农场范围)的中心点 --- 对应的名字
         * 将数据库保存值转换成Map使用坐标
         * @param landRange 数据库的值
         * @returns {*[]} Map使用坐标
         */
        setCenter (name) {
            let center
            addLayers.forEach(item => {
                if (name == item.name) {
                    center = item.center
                }
            })
        setPositionByLandRange (landRange) {
            if (landRange) {
                landRange = landRange.replace(/POLYGON\(\(/g, '')
                landRange = landRange.replace(/\)\)/g, '')
            if (center == '') {
                this.$message({
                    message: '当前农场暂未绘制',
                    type: 'warning'
                const arr = landRange.split(',')
                var brr = []
                arr.forEach(it => {
                    brr.push(it.split(' '))
                })
                return
            }
                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
                        center[0], center[1], 3000.0
                ),
                orientation: {
                    // 指向
@@ -438,13 +431,25 @@
         * @param {*} name 对应站点(地块范围)的中心点 --- 对应的名字
         */
        setPlotCenter (name) {
        setPlotCenter (landObj) {
            if (!landObj.landRange) {
                this.$message({
                    message: '当前地块暂未绘制',
                    type: 'warning'
                })
                return
            }
            let center
            addPlotLayers.forEach(item => {
                if (name == item.name) {
                if (landObj.landName == item.name) {
                    center = item.center
                }
            })
            // 根据坐标画线
            const positions = this.setPositionByLandRange(landObj.landRange)
            if (positions) {
                this.drawLandPolyLine(positions)
            }
            global.viewer.camera.flyTo({
                // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州
@@ -522,12 +527,12 @@
            }
            return centerLonLat
        },
        // 隐藏农场标记图层
        // 隐藏基地标记图层
        hiddenFarmLayer () {
            farmLogoLayer.show = false
            farmRegionLayer.show = false
        },
        // 显示农场标记图层
        // 显示基地标记图层
        showFarmLayer () {
            farmLogoLayer.show = true
            farmRegionLayer.show = true