内容修改

shuishen

2022-04-29 4f55f7d94198eca8eba9ae6b85af19a07cac2f79

内容修改

 public/index.html

@@ -7,7 +7,6 @@
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>智慧社区大数据三维可视化平台</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <!-- 高德定位 -->
    <!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=9c4b1a0ce88821775605e726073c52b5">
  </script> -->

 src/components/mobileCortrolButtom/index.vue

@@ -15,8 +15,7 @@
            v-for="(item, index) in tabTable"
            :key="index"
            :command="item"
            >{{ item.title }}</el-dropdown-item
          >
                    >{{ item.title }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
@@ -29,7 +28,9 @@
    <div class="m-l-inbut" @click="zoomIns">
      <i class="el-icon-refresh"></i>
    </div>
    <div class="m-l-inbut" @click="goOns"><i class="el-icon-location"></i></div>
        <div class="m-l-inbut" @click="goOns">
            <i class="el-icon-location"></i>
        </div>
    <div class="m-l-inbut" @click="openOurSee">
      <i class="el-icon-map-location"></i>
    </div>
@@ -37,42 +38,43 @@
</template>

<script>
import { mapGetters } from "vuex";
import { getIp, getUsers } from "@/api/mobile/ip/index";
import { getListarc } from "@/api/mobile/public/arc";
import { getActivity } from "@/api/mobile/hd/hd";
import { mapGetters } from 'vuex'
import { getIp, getUsers } from '@/api/mobile/ip/index'
import { getListarc } from '@/api/mobile/public/arc'
import { getActivity } from '@/api/mobile/hd/hd'
export default {
  name: "mobileCortrolButtom",
    name: 'mobileCortrolButtom',
  data() {
    return {
      tabTable: [],
      ccData: [
        {
          lnt: 114.03835559,
          lat: 27.63057034,
                    lat: 27.63057034
        },
        {
          lnt: 114.03971446,
          lat: 27.62986481,
                    lat: 27.62986481
        },
        {
          lnt: 114.03841654,
          lat: 27.62919726,
                    lat: 27.62919726
        },
        {
          lnt: 114.039946,
          lat: 27.62847544,
                    lat: 27.62847544
                }
            ]
        }
        },
      ],
    };
  },
    props: ['mapCenter', 'frislayertHeight'],
  computed: {
    ...mapGetters([
      "openmobileGoTo",
      "dimensionData",
            'openmobileGoTo',
            'dimensionData',
      // "startPointFn",
      "dimension",
    ]),
            'dimension'
        ])
  },
  created() {
    // this.getStreet();
@@ -81,32 +83,32 @@
  methods: {
    openOurSee() {
      this.$store.commit(
        "MSET_OPENMOBILEPANORAMA",
        "http://vr.jxpskj.com/lxxqw/"
      );
                'MSET_OPENMOBILEPANORAMA',
                'http://vr.jxpskj.com/lxxqw/'
            )
    },
    goOns() {
      let that = this;
      this.$store.commit("GET_NOWPOSITION", (res) => {
        that.$store.dispatch("pcMoveView", {
            const that = this
            this.$store.commit('GET_NOWPOSITION', (res) => {
                that.$store.dispatch('pcMoveView', {
          jd: res[0],
          wd: res[1],
          viewer: global.viewer,
        });
                    viewer: global.viewer
                })

        let data = [
                const data = [
          {
            name: "我的位置",
                        name: '我的位置',
            jd: res[0],
            wd: res[1],
          },
        ];
        that.$store.dispatch("addLabelLayerIconMobelUse", {
                        wd: res[1]
                    }
                ]
                that.$store.dispatch('addLabelLayerIconMobelUse', {
          list: data,
          clear: true,
          mviewer: global.viewer,
        });
      });
                    mviewer: global.viewer
                })
            })
    },
    zoomIns(val) {
      // this.$store.dispatch("mapFlyTo", {
@@ -125,30 +127,45 @@
      //     }
      //     return;
      //   }
      window.startPointFn();
            var that = this

            global.viewer.flyToPosition(
                new global.DC.Position(
                    that.mapCenter[0],
                    that.mapCenter[1],
                    that.frislayertHeight,
                    that.dimensionData.heading,
                    that.dimensionData.pitch,
                    that.dimensionData.roll
                ),
                () => {

                },
                0
            )
    },
    openActivity() {
      const d = {
        main: [
          {
            name: "活动",
                        name: '活动',
            type: 1,
            method: getActivity,
          },
                        method: getActivity
                    }
        ],
        qurey: "活动",
      };
      this.$store.commit("MSET_POPUPOUROPENDATA", d);
      this.$store.commit("MSET_BIGPOPUP", { name: "活动" });
                qurey: '活动'
            }
            this.$store.commit('MSET_POPUPOUROPENDATA', d)
            this.$store.commit('MSET_BIGPOPUP', { name: '活动' })
      // this.$store.commit("set_showActivity", true);
    },
    mubiao() {
      // 测试fllyTo
    },
    handleCommand(command) {
      const that = this;
      const position = [+command.lnt + 0.00027, +command.lat + 0.00048, 450];
      console.log(command, "定位");
            const that = this
            const position = [+command.lnt + 0.00027, +command.lat + 0.00048, 450]
            console.log(command, '定位')
      // 定位
      // this.$store.commit("MSETCC_SETCC", {
      //   lntLat: position,
@@ -182,16 +199,16 @@
          ),
          // heading: data.heading,
          // pitch: data.pitch,
          roll: that.dimensionData.roll,
        },
      });
                    roll: that.dimensionData.roll
                }
            })
    },
    openBigPopupAfter() {
      this.$store.commit("MSET_BIGPOPUPAFTER", true);
            this.$store.commit('MSET_BIGPOPUPAFTER', true)
    },
    goOn() {
      const that = this;
      this.$store.commit("MSET_OPENMOBILEGOTO", !that.openmobileGoTo);
            const that = this
            this.$store.commit('MSET_OPENMOBILEGOTO', !that.openmobileGoTo)
      // console.log(returnCitySN["cip"]);
      // let data = {
      //   ip: returnCitySN["cip"],
@@ -204,10 +221,10 @@
      // });
    },
    getStreet() {
      const that = this;
            const that = this
      getListarc().then((res) => {
        const title = [];
        const data = res.data.data;
                const title = []
                const data = res.data.data
        for (let k = 0; k < data.length; k++) {
          title.push({
            title: data[k].dictValue,
@@ -215,8 +232,8 @@
            key: data[k].dictKey,
            child: [],
            lnt: that.ccData[k].lnt,
            lat: that.ccData[k].lat,
          });
                        lat: that.ccData[k].lat
                    })
        }
        // res.data.data.forEach((item) => {
        //   title.push({
@@ -226,12 +243,12 @@
        //     child: [],
        //   });
        // });
        this.tabTable = title;
        this.$store.commit("MSET_POPUPTABLENAME", title);
      });
    },
  },
};
                this.tabTable = title
                this.$store.commit('MSET_POPUPTABLENAME', title)
            })
        }
    }
}
</script>

<style scoped lang="scss">

 src/components/mobilemap/index.vue

@@ -10,7 +10,11 @@
        <!-- 控制↓ -->
        <mobileLeftNav ref="mobileLeftNav"></mobileLeftNav>
        <mobileCortrol ref="mobileCortrol"></mobileCortrol>
        <mobileCortrolButtom ref="mobileCortrolButtom"></mobileCortrolButtom>
        <mobileCortrolButtom
            ref="mobileCortrolButtom"
            :mapCenter="mapCenter"
            :frislayertHeight="frislayertHeight"
        ></mobileCortrolButtom>
        <mobileCortrolSearch ref="mobileCortrolSearch"></mobileCortrolSearch>
        <!-- 控制↑ -->
        <!-- 控制大弹窗的弹窗 -->

 src/mobileDivForms/mobileDivForms.js

@@ -10,8 +10,6 @@
import DC from '@dvgis/dc-sdk/dist/dc.base.min' // 基础包
import DcCore from '@dvgis/dc-sdk/dist/dc.core.min' // 核心包

var $ = window.$

DC.use(DcCore) // 安装DC核心库

class mobileDivForms {
@@ -20,13 +18,13 @@
     *
     */
    constructor(viewer, popup) {
        this._viewer = viewer;
        this._popup = popup;
        this._position = popup.position;
        this._title = popup.title;
        this._content = popup.content;
        this.appendPopup();
        this.isOpen = true;
        this._viewer = viewer
        this._popup = popup
        this._position = popup.position
        this._title = popup.title
        this._content = popup.content
        this.appendPopup()
        this.isOpen = true
    }

    get viewer() {
@@ -59,8 +57,8 @@

    // 创建元素并追加
    createVideoWindowAll(id, className, position) {
        let dom = document.getElementById('mobile-map_popup_content');
        dom.style.display = 'block';
        const dom = document.getElementById('mobile-map_popup_content')
        dom.style.display = 'block'

        var childs = document.getElementById('mobile-map_popup_content').getElementsByTagName('div')

@@ -72,20 +70,22 @@

        var self = this

        var el = $("<div class=''></div>")
        // var el = $("<div class=''></div>")

        var el = document.createElement('div')

        // var titleDiv = $("<div class='mobiletitle'></div>").text(this._title)
        // var labelContent = $("<div class='mobilelabel-content'></div>").append(this._content)

        // el.append(titleDiv)
        // el.append(labelContent)
        el.append(this._content)
        el.appendChild(this._content)

        el.attr('id', id)
        el.setAttribute('id', id)

        el.addClass(className || '')
        el.setAttribute('class', className || '')

        $('#mobile-map_popup_content').append(el)
        document.getElementById('mobile-map_popup_content').appendChild(el)
        // let time;
        // function cons(e) {
        //     time = setTimeout(() => {
@@ -101,7 +101,7 @@

        this._viewer.scene.postRender.addEventListener(function (e) {
            if (!self.isOpen) {
                return;
                return
            }
            const windowCoord = DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
                self._viewer.scene,
@@ -114,12 +114,12 @@

    positionPopUp(windowCoord, id) {
        if (!windowCoord) {
            return;
            return
        }
        // console.log(windowCoord)
        const wx = document.getElementById('app').clientWidth;
        const x = windowCoord.x - (wx / 100 * 35);
        const y = windowCoord.y - document.getElementById(id).offsetHeight - 15;
        const wx = document.getElementById('app').clientWidth
        const x = windowCoord.x - (wx / 100 * 35)
        const y = windowCoord.y - document.getElementById(id).offsetHeight - 15
        // x = windowCoord.x - document.getElementById(id).offsetWidth

        // document.getElementById(id).style.cssText = `
@@ -129,10 +129,11 @@
        transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
        `
    }

    closeOur() {
        this.isOpen = false;
        let dom = document.getElementById('mobile-map_popup_content');
        dom.style.display = 'none';
        this.isOpen = false
        const dom = document.getElementById('mobile-map_popup_content')
        dom.style.display = 'none'
        // var childs = document.getElementById('mobile-map_popup_content').getElementsByTagName('div')

        // if (childs.length > 0) {

 src/pcLayout/index.vue

@@ -92,8 +92,9 @@
                        <el-menu-item index="/pcLayout/default/technique/map">地图数据</el-menu-item>
                        <el-menu-item index="/pcLayout/default/technique/video">视频融合</el-menu-item>
                        <el-menu-item index="/pcLayout/default/technique/data">数据动画</el-menu-item>
                        <el-menu-item index="/pcLayout/default/technique/turf">turf计算</el-menu-item>
                        <el-menu-item index="/pcLayout/default/technique/space">三维空间分析</el-menu-item>
                        <el-menu-item index="/pcLayout/default/technique/graph">人口迁移</el-menu-item>
                        <el-menu-item index="/pcLayout/default/technique/graph">学生迁徙图</el-menu-item>
                        <el-menu-item index="/pcLayout/default/technique/path">漫游</el-menu-item>
                    </el-submenu>
                </el-menu>

 src/pcviews/technique/data.vue

@@ -40,7 +40,7 @@
                </li>

                <li>
                    波纹雷达
                    动态波纹
                    <el-switch
                        v-model="circleRadarShow"
                        :active-value="true"

 src/pcviews/technique/graph.vue

@@ -5,14 +5,14 @@
    <public-box class="technique-box">
        <template slot="public-box-header">
            <div class="title">
                <span>人口迁移</span>
                <span>学生迁徙</span>
            </div>
            <img class="close deblurring" src="/img/navicon/close.png" alt @click="closeModel" />
        </template>
        <template slot="public-box-content">
            <ul>
                <li>
                    人口迁移
                    学生迁徙
                    <el-switch
                        v-model="personShow"
                        :active-value="true"

 src/pcviews/technique/path.vue

@@ -12,7 +12,7 @@
        <template slot="public-box-content">
            <ul>
                <li>
                    路径漫游
                    自动漫游
                    <el-switch
                        v-model="pathShow"
                        :active-value="true"

 src/pcviews/technique/space.vue

@@ -12,30 +12,26 @@
        <template slot="public-box-content">
            <ul>
                <li>
                    点位缓冲
                    日照分析
                    <el-switch
                        v-model="pointShow"
                        v-model="sunlightShow"
                        :active-value="true"
                        :inactive-value="false"
                        @change="pointChange"
                        @change="sunlightChange"
                    ></el-switch>
                </li>
                <li>
                    线缓冲
                    <el-switch
                        v-model="plineShow"
                        :active-value="true"
                        :inactive-value="false"
                        @change="plineChange"
                    ></el-switch>
                    通视分析(圆)
                    <el-button type="primary" size="mini" @click="drawCircle">标绘</el-button>
                    <el-button type="primary" size="mini" @click="removeCircle">清除</el-button>
                </li>
                <li>
                    面缓冲
                    可视域分析
                    <el-switch
                        v-model="regionShow"
                        v-model="visualShow"
                        :active-value="true"
                        :inactive-value="false"
                        @change="regionChange"
                        @change="visualChange"
                    ></el-switch>
                </li>
            </ul>
@@ -45,130 +41,108 @@

<script>

let pointTrufLayer = null
let pointTrufPolygon = null
let pointTrufPoint = null
let sunlightLayer = null
let tileset = null
let plot = null

let plineTrufLayer = null
let plineTrufPolygon = null
let plineTrufPline = null

let regionTrufLayer = null
let regionTrufRegion = null
let regionTrufPolygon = null
let visualLayer = null
let visualTileset = null

export default {
    data () {
        return {
            pointShow: false,
            plineShow: false,
            regionShow: false
            sunlightShow: false,
            visualShow: false
        }
    },
    mounted () {
        plot = new global.DC.Plot(global.viewer, {
            clampToGround: false
        })

        global.viewer.use(new global.DC.Analysis())
    },
    methods: {
        closeModel () {
            this.$router.push('/pcLayout/default')
        },
        loadPoint () {
            pointTrufLayer = new global.DC.VectorLayer('pointTrufLayer')
            global.viewer.addLayer(pointTrufLayer)
            pointTrufPoint = new global.DC.Point('114.0415,27.6299,150')
            pointTrufLayer.addOverlay(pointTrufPoint)
            const coords = global.DC.GeoTools.pointBuffer('114.0415,27.6299', 50)
            pointTrufPolygon = new global.DC.Polygon(coords)
            pointTrufPolygon.setStyle({
                material: global.DC.Color.RED.withAlpha(0.4)
            })
            pointTrufLayer.addOverlay(pointTrufPolygon)
            global.viewer.flyTo(pointTrufLayer)
        loadSunlight () {
            sunlightLayer = new global.DC.TilesetLayer('sunlightLayer')
            global.viewer.addLayer(sunlightLayer)
            tileset = new global.DC.Tileset(
                'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
            )
            const style = new global.DC.TilesetStyle()
            style.color = {
                conditions: [
                    ['${Height} >= 300', 'rgba(45, 0, 75, 0.5)'],
                    ['${Height} >= 200', 'rgb(102, 71, 151)'],
                    ['${Height} >= 100', 'rgb(170, 162, 204)'],
                    ['${Height} >= 50', 'rgb(224, 226, 238)'],
                    ['${Height} >= 25', 'rgb(252, 230, 200)'],
                    ['${Height} >= 10', 'rgb(248, 176, 87)'],
                    ['${Height} >= 5', 'rgb(198, 106, 11)'],
                    ['true', 'rgb(127, 59, 8)']
                ]
            }
            tileset.setStyle(style)
            sunlightLayer.addOverlay(tileset)
            global.viewer.flyTo(tileset)

            global.viewer.analysis.shadows(new Date(), 1600)
        },
        removePoint () {
            pointTrufPoint != null && pointTrufLayer.removeOverlay(pointTrufPoint)
            pointTrufPolygon != null && pointTrufLayer.removeOverlay(pointTrufPolygon)
            pointTrufLayer != null && global.viewer.removeLayer(pointTrufLayer)
            pointTrufPoint = null
            pointTrufPolygon = null
            pointTrufLayer = null
        removeSunlight () {
            global.viewer.analysis.deactivate(global.DC.AnalysisType.SHADOWS)
            tileset != null && sunlightLayer.removeOverlay(tileset)
            sunlightLayer != null && global.viewer.removeLayer(sunlightLayer)
            tileset = null
            sunlightLayer = null
        },
        pointChange (e) {
        sunlightChange (e) {
            if (e) {
                this.loadPoint()
                this.loadSunlight()
            } else {
                this.removePoint()
                this.removeSunlight()
            }
        },
        loadPline () {
            plineTrufLayer = new global.DC.VectorLayer('plineTrufLayer')
            global.viewer.addLayer(plineTrufLayer)
            plineTrufPline = new global.DC.Polyline('114.0411,27.62997062,152;114.0418,27.62997062,152')
            plineTrufPline.setStyle({
                width: 2,
                material: global.DC.Color.YELLOW,
                zIndex: 1
        drawCircle () {
            global.viewer.analysis.deactivate(global.DC.AnalysisType.SIGHT_CIRCLE)
            plot.draw(global.DC.OverlayType.CIRCLE, overlay => {
                global.viewer.analysis.sightCircle(overlay.center, overlay.radius, [])
            })
            plineTrufLayer.addOverlay(plineTrufPline)
            const coords = global.DC.GeoTools.polylineBuffer('114.0411,27.62997062;114.0418,27.62997062', 50)
            plineTrufPolygon = new global.DC.Polygon(coords)
            plineTrufPolygon.setStyle({
                material: global.DC.Color.RED.withAlpha(0.4)
            })
            plineTrufLayer.addOverlay(plineTrufPolygon)
            global.viewer.flyTo(plineTrufLayer)
        },
        removePline () {
            plineTrufPline != null && plineTrufLayer.removeOverlay(plineTrufPline)
            plineTrufPolygon != null && plineTrufLayer.removeOverlay(plineTrufPolygon)
            plineTrufLayer != null && global.viewer.removeLayer(plineTrufLayer)
            plineTrufPline = null
            plineTrufPolygon = null
            plineTrufLayer = null
        removeCircle () {
            global.viewer.analysis.deactivate(global.DC.AnalysisType.SIGHT_CIRCLE)
        },
        plineChange (e) {
        loadVisual () {
            this.$EventBus.$emit('chinaDx', 'remove')
            visualLayer = new global.DC.TilesetLayer('visualLayer').addTo(global.viewer)
            visualTileset = new global.DC.Tileset('http://resource.dvgis.cn/data/3dtiles/dayanta/tileset.json')
            visualTileset.setHeight(-420)
            visualLayer.addOverlay(visualTileset)
            global.viewer.flyTo(visualTileset)
            global.viewer.analysis.viewshed('108.95772292882747,34.22122559229137,20,130', 400, 60, 1.3)
        },
        removeVisual () {
            this.$EventBus.$emit('chinaDx', 'add')
            global.viewer.analysis.deactivate(global.DC.AnalysisType.VIEWSHED)
            visualTileset != null && visualLayer.removeOverlay(visualTileset)
            visualLayer != null && global.viewer.removeLayer(visualLayer)
            visualTileset = null
            visualLayer = null
        },
        visualChange (e) {
            if (e) {
                this.loadPline()
                this.loadVisual()
            } else {
                this.removePline()
            }
        },
        loadRegion () {
            regionTrufLayer = new global.DC.VectorLayer('regionTrufLayer')
            global.viewer.addLayer(regionTrufLayer)
            regionTrufRegion = new global.DC.Polygon('114.0410,27.6299,152;114.0418,27.6312,152;114.0426,27.6299,152')
            regionTrufRegion.setStyle({
                zIndex: 1,
                material: global.DC.Color.YELLOW
            })
            regionTrufLayer.addOverlay(regionTrufRegion)
            const coords = global.DC.GeoTools.polygonBuffer('114.0410,27.6299;114.0415,27.6312;114.0426,27.6299', 150)
            regionTrufPolygon = new global.DC.Polygon(coords)
            regionTrufPolygon.setStyle({
                material: global.DC.Color.RED.withAlpha(0.4)
            })
            regionTrufLayer.addOverlay(regionTrufPolygon)
            global.viewer.flyTo(regionTrufLayer)
        },
        removeRegion () {
            regionTrufRegion != null && regionTrufLayer.removeOverlay(regionTrufRegion)
            regionTrufPolygon != null && regionTrufLayer.removeOverlay(regionTrufPolygon)
            regionTrufLayer != null && global.viewer.removeLayer(regionTrufLayer)
            regionTrufRegion = null
            regionTrufPolygon = null
            regionTrufLayer = null
        },
        regionChange (e) {
            if (e) {
                this.loadRegion()
            } else {
                this.removeRegion()
                this.removeVisual()
            }
        }
    },
    destroyed () {
        this.removePoint()
        this.removePline()
        this.removeRegion()
        this.removeSunlight()
        this.removeCircle()
        this.removeVisual()
    }
}
</script>

 src/pcviews/technique/turf.vue

New file
@@ -0,0 +1,179 @@
/* * @Author: Morpheus * @Name: 地图测距 * @Date: 2021-11-13 16:04:27 * @Last
Modified by: Morpheus * @Last Modified time: 2022-02-15 14:28:44 */

<template>
    <public-box class="technique-box">
        <template slot="public-box-header">
            <div class="title">
                <span>turf计算</span>
            </div>
            <img class="close deblurring" src="/img/navicon/close.png" alt @click="closeModel" />
        </template>
        <template slot="public-box-content">
            <ul>
                <li>
                    点位缓冲
                    <el-switch
                        v-model="pointShow"
                        :active-value="true"
                        :inactive-value="false"
                        @change="pointChange"
                    ></el-switch>
                </li>
                <li>
                    线缓冲
                    <el-switch
                        v-model="plineShow"
                        :active-value="true"
                        :inactive-value="false"
                        @change="plineChange"
                    ></el-switch>
                </li>
                <li>
                    面缓冲
                    <el-switch
                        v-model="regionShow"
                        :active-value="true"
                        :inactive-value="false"
                        @change="regionChange"
                    ></el-switch>
                </li>
            </ul>
        </template>
    </public-box>
</template>

<script>

let pointTrufLayer = null
let pointTrufPolygon = null
let pointTrufPoint = null

let plineTrufLayer = null
let plineTrufPolygon = null
let plineTrufPline = null

let regionTrufLayer = null
let regionTrufRegion = null
let regionTrufPolygon = null

export default {
    data () {
        return {
            pointShow: false,
            plineShow: false,
            regionShow: false
        }
    },
    mounted () {
    },
    methods: {
        closeModel () {
            this.$router.push('/pcLayout/default')
        },
        loadPoint () {
            pointTrufLayer = new global.DC.VectorLayer('pointTrufLayer')
            global.viewer.addLayer(pointTrufLayer)
            pointTrufPoint = new global.DC.Point('114.0415,27.6299,150')
            pointTrufLayer.addOverlay(pointTrufPoint)
            const coords = global.DC.GeoTools.pointBuffer('114.0415,27.6299', 50)
            pointTrufPolygon = new global.DC.Polygon(coords)
            pointTrufPolygon.setStyle({
                material: global.DC.Color.RED.withAlpha(0.4)
            })
            pointTrufLayer.addOverlay(pointTrufPolygon)
            global.viewer.flyTo(pointTrufLayer)
        },
        removePoint () {
            pointTrufPoint != null && pointTrufLayer.removeOverlay(pointTrufPoint)
            pointTrufPolygon != null && pointTrufLayer.removeOverlay(pointTrufPolygon)
            pointTrufLayer != null && global.viewer.removeLayer(pointTrufLayer)
            pointTrufPoint = null
            pointTrufPolygon = null
            pointTrufLayer = null
        },
        pointChange (e) {
            if (e) {
                this.loadPoint()
            } else {
                this.removePoint()
            }
        },
        loadPline () {
            plineTrufLayer = new global.DC.VectorLayer('plineTrufLayer')
            global.viewer.addLayer(plineTrufLayer)
            plineTrufPline = new global.DC.Polyline('114.0411,27.62997062,152;114.0418,27.62997062,152')
            plineTrufPline.setStyle({
                width: 2,
                material: global.DC.Color.YELLOW,
                zIndex: 1
            })
            plineTrufLayer.addOverlay(plineTrufPline)
            const coords = global.DC.GeoTools.polylineBuffer('114.0411,27.62997062;114.0418,27.62997062', 50)
            plineTrufPolygon = new global.DC.Polygon(coords)
            plineTrufPolygon.setStyle({
                material: global.DC.Color.RED.withAlpha(0.4)
            })
            plineTrufLayer.addOverlay(plineTrufPolygon)
            global.viewer.flyTo(plineTrufLayer)
        },
        removePline () {
            plineTrufPline != null && plineTrufLayer.removeOverlay(plineTrufPline)
            plineTrufPolygon != null && plineTrufLayer.removeOverlay(plineTrufPolygon)
            plineTrufLayer != null && global.viewer.removeLayer(plineTrufLayer)
            plineTrufPline = null
            plineTrufPolygon = null
            plineTrufLayer = null
        },
        plineChange (e) {
            if (e) {
                this.loadPline()
            } else {
                this.removePline()
            }
        },
        loadRegion () {
            regionTrufLayer = new global.DC.VectorLayer('regionTrufLayer')
            global.viewer.addLayer(regionTrufLayer)
            regionTrufRegion = new global.DC.Polygon('114.0410,27.6299,152;114.0418,27.6312,152;114.0426,27.6299,152')
            regionTrufRegion.setStyle({
                zIndex: 1,
                material: global.DC.Color.YELLOW
            })
            regionTrufLayer.addOverlay(regionTrufRegion)
            const coords = global.DC.GeoTools.polygonBuffer('114.0410,27.6299;114.0415,27.6312;114.0426,27.6299', 150)
            regionTrufPolygon = new global.DC.Polygon(coords)
            regionTrufPolygon.setStyle({
                material: global.DC.Color.RED.withAlpha(0.4)
            })
            regionTrufLayer.addOverlay(regionTrufPolygon)
            global.viewer.flyTo(regionTrufLayer)
        },
        removeRegion () {
            regionTrufRegion != null && regionTrufLayer.removeOverlay(regionTrufRegion)
            regionTrufPolygon != null && regionTrufLayer.removeOverlay(regionTrufPolygon)
            regionTrufLayer != null && global.viewer.removeLayer(regionTrufLayer)
            regionTrufRegion = null
            regionTrufPolygon = null
            regionTrufLayer = null
        },
        regionChange (e) {
            if (e) {
                this.loadRegion()
            } else {
                this.removeRegion()
            }
        }
    },
    destroyed () {
        this.removePoint()
        this.removePline()
        this.removeRegion()
    }
}
</script>

<style lang="sass" scoped>
.move
    cursor: move
</style>

 src/router/page/index.js

@@ -2,7 +2,7 @@
 * @Author: Morpheus
 * @Date: 2021-04-30 14:12:09
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-04-27 09:42:28
 * @Last Modified time: 2022-04-28 13:53:48
 */

import Vue from 'vue'
@@ -58,6 +58,7 @@
const pcTechniqueMapData = () => import('../../pcviews/technique/map.vue')
const pcTechniqueVideo = () => import('../../pcviews/technique/video.vue')
const pcTechniqueData = () => import('../../pcviews/technique/data.vue')
const pcTechniqueTurf = () => import('../../pcviews/technique/turf.vue')
const pcTechniqueSpace = () => import('../../pcviews/technique/space.vue')
const pcTechniqueGraph = () => import('../../pcviews/technique/graph.vue')
const pcTechniquePath = () => import('../../pcviews/technique/path.vue')
@@ -391,6 +392,13 @@
                    }
                },
                {
                    path: 'turf',
                    component: pcTechniqueTurf,
                    meta: {
                        title: 'turf计算'
                    }
                },
                {
                    path: 'space',
                    component: pcTechniqueSpace,
                    meta: {