农场地块添加秧苗

guoshilong

2022-08-31 7d8e4eccb1ada1eea39ea34c68481179fa5b3d42

 src/components/map/index.vue

@@ -4,7 +4,8 @@
</template>

<script>
import axios from 'axios'
// import axios from 'axios'
import NCregion from '@/assets/region'

// 图层变量做声明
var farmRegionLayer = null
@@ -27,10 +28,16 @@

    data () {
        return {

            polyline: null
        }
    },

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

    },
@@ -51,6 +58,10 @@
                    }
                }
            })

            // 去除logo
            let primitiveArr = global.viewer.scene.primitives._primitives
            global.viewer.scene.primitives.remove(primitiveArr[0])

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

@@ -212,40 +223,40 @@
        }

        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) {
            const that = this
@@ -256,7 +267,7 @@
                new global.DC.Position(center[0], center[1], 0),
                `
                        <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 +306,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,8 +429,29 @@
        },

        /**
         * 将数据库保存值转换成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 对应站点（农场范围）的中心点 --- 对应的名字
         * @param {*} name 对应站点（基地范围）的中心点 --- 对应的名字
         */
        setCenter (name) {
            let center
@@ -411,7 +463,7 @@

            if (center == '') {
                this.$message({
                    message: '当前农场暂未绘制',
                    message: '当前基地暂未绘制',
                    type: 'warning'
                })
                return
@@ -438,13 +490,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 +586,12 @@
            }
            return centerLonLat
        },
        // 隐藏农场标记图层
        // 隐藏基地标记图层
        hiddenFarmLayer () {
            farmLogoLayer.show = false
            farmRegionLayer.show = false
        },
        // 显示农场标记图层
        // 显示基地标记图层
        showFarmLayer () {
            farmLogoLayer.show = true
            farmRegionLayer.show = true