农事操作隐藏后四个，地图模式2d改为3d

guoshilong

2022-11-08 082613d446e29e4ec1c16bfaa52345106a498b23

 src/components/map/plotMap.vue

@@ -6,6 +6,10 @@

<script>
import NCregion from "@/assets/region"
import { glob } from "glob"
import {getDetail } from "@/api/farm/farm"
import { mapGetters } from "vuex"
import * as turf from '@turf/turf'

var farmRegionLayer = null
var plotRegionLayer = null
@@ -20,6 +24,7 @@
    data () {
        return {
            polyline: null,
            farm:{},
        }
    },
    watch: {
@@ -30,14 +35,14 @@
        }
    },
    computed: {

        ...mapGetters(["$farmId"]),
    },
    mounted () {
        if (global.viewer != null) {
            global.viewer = null
        }

        function initViewer () {
        function initViewer (lat,lon) {
            global.viewer = new global.DC.Viewer('viewer-container', {
                contextOptions: {
                    webgl: {
@@ -46,7 +51,6 @@
                        preserveDrawingBuffer: true
                    }
                },
                sceneMode: 2
            })

            farmRegionLayer = new global.DC.VectorLayer('farmRegionLayer')
@@ -208,12 +212,11 @@
            //         maximumLevel: 18
            //     })
            // )

            global.viewer.camera.setView({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    116.56705776, 27.42386903, 1800.0
                    lon, lat, 1800.0
                ),
                orientation: {
                    // 指向
@@ -227,8 +230,17 @@
            // global.viewer.locationBar.enable = true
        }

        global.DC.ready(initViewer)
        this.addRegionPolyLine(NCregion)
        getDetail(this.$farmId).then(res=>{
            this.farm.latitude = res.data.data.latitude
            this.farm.longitude = res.data.data.longitude
            // global.DC.ready(initViewer(this.farm.latitude,this.farm.longitude))

            global.DC.ready(() => {
                initViewer(this.farm.latitude,this.farm.longitude)
            })

            this.addRegionPolyLine(NCregion)
        })
    },
    methods: {
        /**
@@ -293,39 +305,65 @@
            if (item.strainUrl != "") {
                const urls = item.strainUrl.split(',')
                let imageStr = `<div class="farm-map-icon">`
                var i = 0;
                //billboard image可以添加canvas
                // const canvas = document.createElement('canvas');
                // var ctx=c.getContext("2d");
                urls.forEach(url => {
                    imageStr += `<img src="${url}" alt=""width="100px" height="100px" text-align="center" class="strainImg">`
                    // imageStr += `<img src="${url}" alt=""width="100px" height="100px" text-align="center" class="strainImg">`
                    // imageStr += `<img src="${url}" alt=""width="50%" height="auto" text-align="center" class="strainImg">`
                    global.viewer.entities.add({
                        position: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(center[0]-(i*0.002) + (i*0.00120), center[1]),
                        billboard: {
                            image: url, // default: undefined
                            scaleByDistance: new global.DC.Namespace.Cesium.NearFarScalar(0, 1.5, 50000, 0.3),
                            width:50,
                            height:50,
                        },
                    })
                    i++;

                })
                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.showDetailPopup(e.overlay.attrParams)
                // imageStr += `</div>`
                // const divIcon = new global.DC.DivIcon(
                //     new global.DC.Position(center[0], center[1], 0), imageStr
                // )
                // divIcon.attrParams = item
                // divIcon.setStyle({
                //     className:"ttttttt",
                //     scaleByDistance:new global.DC.Namespace.Cesium.NearFarScalar(0, 2, 50000, 0.5),
                //     // scaleByDistance:{
                //     //     near: 0, //最近距离
                //     //     nearValue: 0.8, //最近距离值
                //     //     far:17118300, //最远距离值
                //     //     farValue: 0.5 //最远距离值
                //     // },
                //     // distanceDisplayCondition:{
                //     //     near:0,
                //     //     far:17118300
                //     // }
                // })
                // farmLogoLayer.addOverlay(divIcon)
            }
            const polygon = new global.DC.Polygon(positions)
            polygon.attrParams = item
            polygon.setStyle({
                material: global.DC.Namespace.Cesium.Color.fromBytes(
                    129, 255, 84,
                    200
                )
            })
            if(positions){
                const polygon = new global.DC.Polygon(positions)
                polygon.attrParams = item
                polygon.setStyle({
                    material: global.DC.Namespace.Cesium.Color.fromBytes(
                        129, 255, 84,
                        200
                    )
                })

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


            plotRegionLayer.addOverlay(polygon)
            addPlotLayers.push({ center, name: item.landName, id: item.id })
                plotRegionLayer.addOverlay(polygon)
                addPlotLayers.push({ center, name: item.landName, id: item.id })
            }
        },
        /**
         * 地块画线
@@ -406,6 +444,7 @@

            // 根据坐标画线
            const positions = this.setPositionByLandRange(landObj.landRange)
          console.log(positions,123455555)
            if (positions) {
                this.drawLandPolyLine(positions)
            }
@@ -442,28 +481,45 @@

        // 经纬度测算中心位置
        getCenter (arr) {

            // 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)]
            //     console.log("中心",centerLonLat)
            // }
            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)]
            if(arr.length >= 3 ){
                var positionArr = []
                arr.forEach(e=>{
                    // e = new global.DC.Namespace.Cesium.Cartesian3(e[0]-0, e[1]-0, 0)
                    e[0] = e[0]-0
                    e[1] = e[1]-0
                    positionArr.push(e)
                })
                positionArr.push(arr[0])
                var positionTurf = [positionArr]
                var polygon = turf.polygon(positionTurf);
                var centroid = turf.centroid(polygon);

                centerLonLat = [centroid.geometry.coordinates[0],centroid.geometry.coordinates[1]]
            }
            return centerLonLat
        }