修改地图模式品种图片缩放

guoshilong

2022-09-09 40ae23a639540a159d9f6f935a5a18943377e6f4

 src/components/map/plotMap.vue

@@ -6,6 +6,8 @@

<script>
import NCregion from "@/assets/region"
import { glob } from "glob"
import * as turf from '@turf/turf'

var farmRegionLayer = null
var plotRegionLayer = null
@@ -208,7 +210,6 @@
            //         maximumLevel: 18
            //     })
            // )

            global.viewer.camera.setView({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
@@ -293,21 +294,45 @@
            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
@@ -442,29 +467,42 @@

        // 经纬度测算中心位置
        getCenter (arr) {
            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);
            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) {
            //     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)
            // }
            centerLonLat = [centroid.geometry.coordinates[0],centroid.geometry.coordinates[1]]
            return centerLonLat
        }
    }