内容更改

shuishen

2022-04-29 443c649303cc275f4ff07b3d2f5e589047f8054d

内容更改

 public/img/bg/echarts-content.png

 public/img/bg/echarts-title.png

 src/api/pc/label.js

@@ -2,7 +2,7 @@
 * @Author: Morpheus
 * @Date: 2021-05-09 15:17:44
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-12-14 08:58:30
 * @Last Modified time: 2022-04-29 16:53:53
 */
// 党群机构
import request from '@/router/axios'
@@ -15,10 +15,21 @@
    })
}

export const uploadImg = (data) => {
    return request({
        url: 'blade-resource/oss/endpoint/put-files-talk',
        method: 'post',
        data: data,
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
}

export const getlabel = () => {
    return request({
        url: 'tagging/tagging/list',
        method: 'get',
        method: 'get'
    })
}

@@ -30,4 +41,4 @@
            ids: id
        }
    })
}
}

 src/components/map/index.vue

@@ -275,8 +275,7 @@
                selectionIndicator: false,
                timeline: false,
                navigationHelpButton: false,
                navigationInstructionsInitiallyVisible: false,
                creditContainer: undefined
                navigationInstructionsInitiallyVisible: false
                // sceneMode: global.DC.Namespace.Cesium.SceneMode.SCENE2D
            })


 src/components/mobileCortrolButtom/index.vue

@@ -67,6 +67,7 @@
            ]
        }
    },
    props: ['mapCenter', 'frislayertHeight'],
    computed: {
        ...mapGetters([
            'openmobileGoTo',
@@ -126,7 +127,22 @@
            //     }
            //     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 = {

 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,36 +18,36 @@
     *
     */
    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() {
    get viewer () {
        return this._viewer
    }

    get title() {
    get title () {
        return this._title
    }

    get content() {
    get content () {
        return this._content
    }

    get popup() {
    get popup () {
        return this._popup
    }

    get position() {
    get position () {
        return this._position
    }

    appendPopup() {
    appendPopup () {
        /**
         * @domId 存放 dom 的id, 多个数组，单个字符串
         */
@@ -58,9 +56,9 @@
    }

    // 创建元素并追加
    createVideoWindowAll(id, className, position) {
        let dom = document.getElementById('mobile-map_popup_content');
        dom.style.display = 'block';
    createVideoWindowAll (id, className, position) {
        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,
@@ -112,14 +112,14 @@
        })
    }

    positionPopUp(windowCoord, id) {
    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';

    closeOur () {
        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/large/index.vue

@@ -14,14 +14,34 @@
            </div>
        </div>
        <div class="left-container">
            <div class="top" id="LeftTop"></div>
            <div class="center" id="LeftCenter"></div>
            <div class="bottom" id="LeftBottom"></div>
            <div class="top">
                <div class="l-title">
                    <span class="text">建筑统计</span>
                </div>
                <div class="l-content" id="LeftTop"></div>
            </div>
            <div class="center">
                <div class="l-title"></div>
                <div class="l-content" id="LeftCenter"></div>
            </div>
            <div class="bottom">
                <div class="l-title"></div>
                <div class="l-content" id="LeftBottom"></div>
            </div>
        </div>
        <div class="right-container">
            <div class="top" id="RightTop"></div>
            <div class="center" id="RightCenter"></div>
            <div class="bottom" id="RightBottom"></div>
            <div class="top">
                <div class="r-title"></div>
                <div class="r-content" id="RightTop"></div>
            </div>
            <div class="center">
                <div class="r-title"></div>
                <div class="r-content" id="RightCenter"></div>
            </div>
            <div class="bottom">
                <div class="r-title"></div>
                <div class="r-content" id="RightBottom"></div>
            </div>
        </div>
    </div>
</template>
@@ -54,11 +74,8 @@
            // 柱形图
            // 因为初始化echarts 的时候，需要指定的容器 id='main'
            this.$echarts.init(document.getElementById('LeftTop')).setOption({
                title: {
                    text: '建筑物统计'
                },
                grid: {
                    // top: '2%',
                    top: '4%',
                    left: '3%',
                    right: '3%',
                    bottom: '2%',
@@ -69,19 +86,39 @@
                    nameRotate: 45,
                    data: ['文教建筑', '医疗建筑', '体育建筑', '展览建筑', '商业建筑', '行政建筑', '观演建筑'],
                    axisLabel: {
                        color: '#5ce7ff',
                        color: '#fff',
                        rotate: 35
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                },
                yAxis: {
                    type: 'value'
                    type: 'value',
                    axisLabel: {
                        color: '#fff'
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        show: true
                    },
                    splitLine: {
                        show: false
                    }
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    itemStyle: {
                        color: '#38ACD7'
                    }
                }]
            })
@@ -404,7 +441,7 @@
        position: absolute;
        top: 130px;
        left: 10px;
        width: 24%;
        width: 20%;
        height: calc(100% - 140px);
        // transform: rotateY(10deg);
        // transform-origin: left center;
@@ -414,7 +451,7 @@
        position: absolute;
        top: 130px;
        right: 10px;
        width: 24%;
        width: 20%;
        height: calc(100% - 140px);
    }

@@ -432,11 +469,38 @@
        }

        .center {
            background: rgba(248, 248, 248, 0.75);
        }

        .bottom {
            background: rgba(248, 248, 248, 0.75);
        }

        .l-title,
        .r-title {
            position: relative;
            height: 40px;
            background: url('/img/bg/echarts-title.png');
            background-size: 100% 100%;
            color: #fff;

            .text {
                position: absolute;
                top: 0;
                left: 20px;
                right: auto;
                bottom: 0;
                margin: auto;
                font-size: 18px;
                line-height: 40px;
                font-weight: 700;
                font-style: italic;
                letter-spacing: 2px;
            }
        }
        .l-content,
        .r-content {
            height: calc(100% - 40px);
            background: url('/img/bg/echarts-content.png');
            background-size: 100% 100%;
        }
    }
}

 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-20 09:54:54
 * @Last Modified time: 2022-04-28 11:55:30
 */

import Vue from 'vue'
@@ -60,6 +60,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')
@@ -393,6 +394,13 @@
                    }
                },
                {
                    path: 'turf',
                    component: pcTechniqueTurf,
                    meta: {
                        title: 'turf计算'
                    }
                },
                {
                    path: 'space',
                    component: pcTechniqueSpace,
                    meta: {