增加秧苗

guoshilong

2022-08-26 fec7909e8552e98c60f3e14efc7d208e109dc4f8

 src/components/map/plotMap.vue

@@ -1,4 +1,3 @@
/* eslint-disable camelcase */
<template>
    <div>
        <div id="viewer-container" style="height: 100%; width: 100%"></div>
@@ -18,10 +17,16 @@

    data () {
        return {

            polyline: null,
        }
    },

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

    },
@@ -70,11 +75,81 @@

            // http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer

            // 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'
            //         ]
            //     })
            // )

            // 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(
                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/nanchengdomjuly/MapServer/WMTS',
                    // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
                    layer: 'nanchengyjjddom',
                    layer: 'nanchengdomjuly',
                    style: 'default',
                    tileMatrixSetID: 'default028mm',
                    format: 'image/png',
@@ -105,40 +180,8 @@
                })
            )

            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(
@@ -216,25 +259,26 @@

        addPlotPolygon (positions, item) {
            const that = this

            const center = this.getCenter(positions)
            if(item.strainUrl !=""){
                const urls = item.strainUrl.split(',')
                let imageStr = `<div class="farm-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
                )

            // 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)
                divIcon.attrParams = item
                farmLogoLayer.addOverlay(divIcon)

            // divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
            //     that.$parent.showDetailPopup(e.overlay.attrParams)
            // })

                // divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
                //     that.$parent.showDetailPopup(e.overlay.attrParams)
                // })
            }
            const polygon = new global.DC.Polygon(positions)
            polygon.attrParams = item
            polygon.setStyle({
@@ -246,10 +290,50 @@

            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 })
            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)
        },
        /**
         * 将数据库保存值转换成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
        },

        setCenter (name) {
@@ -276,13 +360,26 @@
            })
        },

        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的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
@@ -297,6 +394,20 @@
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0
                }
            })
        },

        setPlotAttr (params) {
            let overLayers = plotRegionLayer.getOverlays()

            overLayers.some(item => {

                if (item.attrParams.id == params.id) {
                    item.attrParams = params

                    return true
                }

            })
        },

@@ -343,4 +454,12 @@
    z-index: 99;
    overflow: hidden;
}
.div-icon{
  background-color: transparent !important;
}
.strainImg{
  width: 80px;
  height: 80px;
  border-radius:50%;
}
</style>