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

guoshilong

2022-11-08 082613d446e29e4ec1c16bfaa52345106a498b23

 src/components/map/plotMap.vue

@@ -5,10 +5,16 @@
</template>

<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
var farmLogoLayer = null
var regionPolyLineLayer = null
var addLayers = []
var addPlotLayers = []

@@ -18,24 +24,25 @@
    data () {
        return {
            polyline: null,
            farm:{},
        }
    },
    watch: {
        'polyline' (newObj, oldObj) {
            if (newObj && oldObj) {
              plotRegionLayer.removeOverlay(oldObj)
                plotRegionLayer.removeOverlay(oldObj)
            }
        }
    },
    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: {
@@ -44,7 +51,6 @@
                        preserveDrawingBuffer: true
                    }
                },
                sceneMode: 2
            })

            farmRegionLayer = new global.DC.VectorLayer('farmRegionLayer')
@@ -55,6 +61,9 @@

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

            if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) { // 判断是否支持图像渲染像素化处理
                global.viewer.setOptions({
@@ -203,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: {
                    // 指向
@@ -222,9 +230,43 @@
            // global.viewer.locationBar.enable = true
        }

        global.DC.ready(initViewer)
        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: {
        /**
         * 添加南城县边界的数据
         * @param {string} url arcgis服务地址
         */
        addRegionPolyLine (regionJSON) {
            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)
        },
        addPolygon (positions, item) {
            const that = this

@@ -260,60 +302,85 @@
        addPlotPolygon (positions, item) {
            const that = this
            const center = this.getCenter(positions)
            if(item.strainUrl !=""){
            if (item.strainUrl != "") {
                const urls = item.strainUrl.split(',')
                let imageStr = `<div class="farm-map-icon">`;
                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)
                })

            console.log(item, 123)

            plotRegionLayer.addOverlay(polygon)
            addPlotLayers.push({ center, name: item.landName, id: item.id })
                plotRegionLayer.addOverlay(polygon)
                addPlotLayers.push({ center, name: item.landName, id: item.id })
            }
        },
        /**
         * 地块画线
         * @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)
            // 画线
            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)
        },
        /**
         * 将数据库保存值转换成Map使用坐标
@@ -328,7 +395,7 @@
                const arr = landRange.split(',')
                var brr = []
                arr.forEach(it => {
                  brr.push(it.split(' '))
                    brr.push(it.split(' '))
                })

                return brr
@@ -363,8 +430,8 @@
        setPlotCenter (landObj) {
            if (!landObj.landRange) {
                this.$message({
                  message: '当前地块暂未绘制',
                  type: 'warning'
                    message: '当前地块暂未绘制',
                    type: 'warning'
                })
                return
            }
@@ -377,6 +444,7 @@

            // 根据坐标画线
            const positions = this.setPositionByLandRange(landObj.landRange)
          console.log(positions,123455555)
            if (positions) {
                this.drawLandPolyLine(positions)
            }
@@ -413,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
        }
@@ -454,12 +539,12 @@
    z-index: 99;
    overflow: hidden;
}
.div-icon{
  background-color: transparent !important;
.div-icon {
    background-color: transparent !important;
}
.strainImg{
  width: 80px;
  height: 80px;
  border-radius:50%;
.strainImg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
</style>