内容修改

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

@@ -1,270 +1,287 @@
<template>
  <div class="m-left-mobileCortrolButtom">
    <!-- 底部按钮
    <div class="m-left-mobileCortrolButtom">
        <!-- 底部按钮
mobileCortrolButtom
 -->
    <!-- <div class="m-l-inbut" @click="mubiao"><i class="el-icon-s-help"></i></div> -->
    <div class="m-l-inbut" v-show="false">
      <!-- <i class="el-icon-s-flag"></i> -->
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link icons">
          <i class="el-icon-s-flag icon"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, index) in tabTable"
            :key="index"
            :command="item"
            >{{ item.title }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="m-l-inbut" @click="openBigPopupAfter">
      <i class="el-icon-menu"></i>
    </div>
    <!-- <div class="m-l-inbut" @click="openActivity">
        -->
        <!-- <div class="m-l-inbut" @click="mubiao"><i class="el-icon-s-help"></i></div> -->
        <div class="m-l-inbut" v-show="false">
            <!-- <i class="el-icon-s-flag"></i> -->
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link icons">
                    <i class="el-icon-s-flag icon"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                        v-for="(item, index) in tabTable"
                        :key="index"
                        :command="item"
                    >{{ item.title }}</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="m-l-inbut" @click="openBigPopupAfter">
            <i class="el-icon-menu"></i>
        </div>
        <!-- <div class="m-l-inbut" @click="openActivity">
      <i class="el-icon-s-opportunity"></i>
        </div>-->
    <div class="m-l-inbut" @click="zoomIns">
      <i class="el-icon-refresh"></i>
        <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="openOurSee">
            <i class="el-icon-map-location"></i>
        </div>
    </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>
  </div>
</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",
  data() {
    return {
      tabTable: [],
      ccData: [
        {
          lnt: 114.03835559,
          lat: 27.63057034,
        },
        {
          lnt: 114.03971446,
          lat: 27.62986481,
        },
        {
          lnt: 114.03841654,
          lat: 27.62919726,
        },
        {
          lnt: 114.039946,
          lat: 27.62847544,
        },
      ],
    };
  },
  computed: {
    ...mapGetters([
      "openmobileGoTo",
      "dimensionData",
      // "startPointFn",
      "dimension",
    ]),
  },
  created() {
    // this.getStreet();
  },
  mounted() {},
  methods: {
    openOurSee() {
      this.$store.commit(
        "MSET_OPENMOBILEPANORAMA",
        "http://vr.jxpskj.com/lxxqw/"
      );
    },
    goOns() {
      let that = this;
      this.$store.commit("GET_NOWPOSITION", (res) => {
        that.$store.dispatch("pcMoveView", {
          jd: res[0],
          wd: res[1],
          viewer: global.viewer,
        });

        let data = [
          {
            name: "我的位置",
            jd: res[0],
            wd: res[1],
          },
        ];
        that.$store.dispatch("addLabelLayerIconMobelUse", {
          list: data,
          clear: true,
          mviewer: global.viewer,
        });
      });
    },
    zoomIns(val) {
      // this.$store.dispatch("mapFlyTo", {
      //   //飞入
      //   lntLat: [115.87988885, 28.72502592, 2100],
      //   // lntLat: [115.87186406, 28.74449337, 1200],
      //   // lntLat: [121.50492752204283, 31.21567802276832, 2530],
      //   heading: 0,
      //   pitch: -45,
      //   roll: 0,
      //   noOpen: true,
      // });
      //   if (val) {
      //     if (this.dimension != val) {
      //       this.$store.dispatch("MSET_DIMENSIONS", val);
      //     }
      //     return;
      //   }
      window.startPointFn();
    },
    openActivity() {
      const d = {
        main: [
          {
            name: "活动",
            type: 1,
            method: getActivity,
          },
        ],
        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, "定位");
      // 定位
      // this.$store.commit("MSETCC_SETCC", {
      //   lntLat: position,
      // });
      // this.$store.dispatch("mapFlyTo", {
      //   //飞入
      //   lntLat: [...position, 450],
      //   heading: 0,
      //   pitch: -90,
      //   roll: 0,
      //   noOpen: true,
      // });
      global.viewer.camera.setView({
        // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
        // fromDegrees()方法，将经纬度和高程转换为世界坐标
        // eslint-disable-next-line new-cap
        destination: new global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
          // 114.0351,
          // 27.6314,
          // 200.0
          position[0],
          position[1],
          position[2]
        ),
        orientation: {
          heading: global.DC.Namespace.Cesium.Math.toRadians(
            that.dimensionData.heading
          ),
          pitch: global.DC.Namespace.Cesium.Math.toRadians(
            that.dimensionData.pitch
          ),
          // heading: data.heading,
          // pitch: data.pitch,
          roll: that.dimensionData.roll,
        },
      });
    },
    openBigPopupAfter() {
      this.$store.commit("MSET_BIGPOPUPAFTER", true);
    },
    goOn() {
      const that = this;
      this.$store.commit("MSET_OPENMOBILEGOTO", !that.openmobileGoTo);
      // console.log(returnCitySN["cip"]);
      // let data = {
      //   ip: returnCitySN["cip"],
      //   key: "7WKBZ-QDY62-WEEUG-C7KUN-ADAF5-L5BKZ",
      // };
      // console.log("定位", data.ip);
      // getIp(data).then((res) => {
      //   // getUsers(data).then((res) => {
      //   console.log(res);
      // });
    },
    getStreet() {
      const that = this;
      getListarc().then((res) => {
        const title = [];
        const data = res.data.data;
        for (let k = 0; k < data.length; k++) {
          title.push({
            title: data[k].dictValue,
            flag: false,
            key: data[k].dictKey,
            child: [],
            lnt: that.ccData[k].lnt,
            lat: that.ccData[k].lat,
          });
    name: 'mobileCortrolButtom',
    data () {
        return {
            tabTable: [],
            ccData: [
                {
                    lnt: 114.03835559,
                    lat: 27.63057034
                },
                {
                    lnt: 114.03971446,
                    lat: 27.62986481
                },
                {
                    lnt: 114.03841654,
                    lat: 27.62919726
                },
                {
                    lnt: 114.039946,
                    lat: 27.62847544
                }
            ]
        }
        // res.data.data.forEach((item) => {
        //   title.push({
        //     title: item.dictValue,
        //     flag: false,
        //     key: item.dictKey,
        //     child: [],
        //   });
        // });
        this.tabTable = title;
        this.$store.commit("MSET_POPUPTABLENAME", title);
      });
    },
  },
};
    props: ['mapCenter', 'frislayertHeight'],
    computed: {
        ...mapGetters([
            'openmobileGoTo',
            'dimensionData',
            // "startPointFn",
            'dimension'
        ])
    },
    created () {
        // this.getStreet();
    },
    mounted () { },
    methods: {
        openOurSee () {
            this.$store.commit(
                'MSET_OPENMOBILEPANORAMA',
                'http://vr.jxpskj.com/lxxqw/'
            )
        },
        goOns () {
            const that = this
            this.$store.commit('GET_NOWPOSITION', (res) => {
                that.$store.dispatch('pcMoveView', {
                    jd: res[0],
                    wd: res[1],
                    viewer: global.viewer
                })

                const data = [
                    {
                        name: '我的位置',
                        jd: res[0],
                        wd: res[1]
                    }
                ]
                that.$store.dispatch('addLabelLayerIconMobelUse', {
                    list: data,
                    clear: true,
                    mviewer: global.viewer
                })
            })
        },
        zoomIns (val) {
            // this.$store.dispatch("mapFlyTo", {
            //   //飞入
            //   lntLat: [115.87988885, 28.72502592, 2100],
            //   // lntLat: [115.87186406, 28.74449337, 1200],
            //   // lntLat: [121.50492752204283, 31.21567802276832, 2530],
            //   heading: 0,
            //   pitch: -45,
            //   roll: 0,
            //   noOpen: true,
            // });
            //   if (val) {
            //     if (this.dimension != val) {
            //       this.$store.dispatch("MSET_DIMENSIONS", val);
            //     }
            //     return;
            //   }
            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: '活动',
                        type: 1,
                        method: getActivity
                    }
                ],
                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, '定位')
            // 定位
            // this.$store.commit("MSETCC_SETCC", {
            //   lntLat: position,
            // });
            // this.$store.dispatch("mapFlyTo", {
            //   //飞入
            //   lntLat: [...position, 450],
            //   heading: 0,
            //   pitch: -90,
            //   roll: 0,
            //   noOpen: true,
            // });
            global.viewer.camera.setView({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                // eslint-disable-next-line new-cap
                destination: new global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    // 114.0351,
                    // 27.6314,
                    // 200.0
                    position[0],
                    position[1],
                    position[2]
                ),
                orientation: {
                    heading: global.DC.Namespace.Cesium.Math.toRadians(
                        that.dimensionData.heading
                    ),
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(
                        that.dimensionData.pitch
                    ),
                    // heading: data.heading,
                    // pitch: data.pitch,
                    roll: that.dimensionData.roll
                }
            })
        },
        openBigPopupAfter () {
            this.$store.commit('MSET_BIGPOPUPAFTER', true)
        },
        goOn () {
            const that = this
            this.$store.commit('MSET_OPENMOBILEGOTO', !that.openmobileGoTo)
            // console.log(returnCitySN["cip"]);
            // let data = {
            //   ip: returnCitySN["cip"],
            //   key: "7WKBZ-QDY62-WEEUG-C7KUN-ADAF5-L5BKZ",
            // };
            // console.log("定位", data.ip);
            // getIp(data).then((res) => {
            //   // getUsers(data).then((res) => {
            //   console.log(res);
            // });
        },
        getStreet () {
            const that = this
            getListarc().then((res) => {
                const title = []
                const data = res.data.data
                for (let k = 0; k < data.length; k++) {
                    title.push({
                        title: data[k].dictValue,
                        flag: false,
                        key: data[k].dictKey,
                        child: [],
                        lnt: that.ccData[k].lnt,
                        lat: that.ccData[k].lat
                    })
                }
                // res.data.data.forEach((item) => {
                //   title.push({
                //     title: item.dictValue,
                //     flag: false,
                //     key: item.dictKey,
                //     child: [],
                //   });
                // });
                this.tabTable = title
                this.$store.commit('MSET_POPUPTABLENAME', title)
            })
        }
    }
}
</script>

<style scoped lang="scss">
.m-left-mobileCortrolButtom {
  position: fixed;
  bottom: 35px;
  left: 20px;
  z-index: 200;
  .m-l-inbut {
    float: left;
    width: 39px;
    height: 39px;
    background-color: rgb(33, 150, 243);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    margin-left: 12px;
    border-radius: 5px;
    .icons {
      display: inline-block;
      width: 100%;
      height: 100%;
    position: fixed;
    bottom: 35px;
    left: 20px;
    z-index: 200;
    .m-l-inbut {
        float: left;
        width: 39px;
        height: 39px;
        background-color: rgb(33, 150, 243);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 32px;
        margin-left: 12px;
        border-radius: 5px;
        .icons {
            display: inline-block;
            width: 100%;
            height: 100%;
        }
        .icon {
            font-size: 32px;
            color: #fff;
            &::before {
                width: 100%;
                height: 100%;
            }
        }
    }
    .icon {
      font-size: 32px;
      color: #fff;
      &::before {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>

 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/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: {