智慧农业后台管理页面
guanqb
2022-09-01 332cb84f4e7dad39dc4d7e8a2d2a0717dcf72588
src/components/map/plotMap.vue
@@ -5,10 +5,12 @@
</template>
<script>
import NCregion from "@/assets/region"
var farmRegionLayer = null
var plotRegionLayer = null
var farmLogoLayer = null
var regionPolyLineLayer = null
var addLayers = []
var addPlotLayers = []
@@ -23,7 +25,7 @@
    watch: {
        'polyline' (newObj, oldObj) {
            if (newObj && oldObj) {
              plotRegionLayer.removeOverlay(oldObj)
                plotRegionLayer.removeOverlay(oldObj)
            }
        }
    },
@@ -55,6 +57,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({
@@ -223,8 +228,33 @@
        }
        global.DC.ready(initViewer)
        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,15 +290,15 @@
        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">`
                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 += `</div>`
                const divIcon = new global.DC.DivIcon(
                    new global.DC.Position(center[0], center[1], 0),imageStr
                    new global.DC.Position(center[0], center[1], 0), imageStr
                )
                divIcon.attrParams = item
@@ -293,7 +323,6 @@
                that.drawLandPolyLine(positions)
            })
            console.log(item, 123)
            plotRegionLayer.addOverlay(polygon)
            addPlotLayers.push({ center, name: item.landName, id: item.id })
@@ -303,17 +332,17 @@
         * @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 +357,7 @@
                const arr = landRange.split(',')
                var brr = []
                arr.forEach(it => {
                  brr.push(it.split(' '))
                    brr.push(it.split(' '))
                })
                return brr
@@ -363,8 +392,8 @@
        setPlotCenter (landObj) {
            if (!landObj.landRange) {
                this.$message({
                  message: '当前地块暂未绘制',
                  type: 'warning'
                    message: '当前地块暂未绘制',
                    type: 'warning'
                })
                return
            }
@@ -454,12 +483,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>