添加站点

master

2022-04-28 3f01dc7da4c12311ecb31ad8d5d7224dd27e52e3

 src/views/map/map.vue

@@ -92,6 +92,7 @@
  </div>
</template>
<script>
import MarsMap from '../../components/mars/map.vue'
import * as maptalks from "maptalks";
import mapboxgl from "mapbox-gl";
import "maptalks/dist/maptalks.css";
@@ -106,7 +107,7 @@
import maptool from "./maptool.vue";
import seltool from "./seltool.vue";
import seltoolcl from "./seltoolcl.vue";
import utils from "../../unit/map";

import img_fengongsi_n_url from "../../assets/mapv2/icon_fengongsi.png";
import img_changzhan_n_url from "../../assets/mapv2/icon_changzhan.png";
import img_xianlu_n_url from "../../assets/mapv2/icon_xianlu.png";
@@ -129,7 +130,7 @@
import clmarkers from '../../assets/json/clmarkers.json';
import xianlumap from '../../assets/json/xianlumap.json';

import MarsMap from '../../components/mars/map.vue'


export default {
  name: "maptalk",
@@ -196,37 +197,7 @@
        console.log(event.graphic.attr)
        that.hoverDiv(0, event.graphic.attr.companyId)
      })
      /*
      graphicLayer.on(this.mars3d.EventType.mouseOver, function (event) {
        console.log('监听layer，鼠标移入了矢量对象', event)
      })
      graphicLayer.on(this.mars3d.EventType.mouseOut, function (event) {
        console.log('监听layer，鼠标移出了矢量对象', event)
      })
      */

      // 可在图层上绑定popup,对所有加到这个图层的矢量数据都生效
      /*
      graphicLayer.bindPopup('我是layer上绑定的Popup', {
        anchor: [0, -10]
      })
      */

      // 可在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
      /*
      graphicLayer.bindContextMenu([
        {
          text: '删除对象',
          iconCls: 'fa fa-trash-o',
          callback: function (e) {
            const graphic = e.graphic
            if (graphic) {
              graphicLayer.removeGraphic(graphic)
            }
          }
        }
      ])
      */
      // 聊城边界
      const maskLayer = new this.mars3d.layer.GeoJsonLayer({
        id: 300,
        url: "/data/liaocheng.geojson",
@@ -247,7 +218,7 @@
        show: true,
        flyTo: false
      });

      // 边界墙
      const graphic = new this.mars3d.graphic.WallEntity({
        positions: this.liaocheng_boundary,
        style: {
@@ -270,30 +241,6 @@

      /*
      this.addFenggongsi(graphicLayer)
      this.addGraphic_e02(graphicLayer)
      this.addGraphic_e03(graphicLayer)
      this.addGraphic_e04(graphicLayer)
      this.addGraphic_e05(graphicLayer)
      this.addGraphic_e06(graphicLayer)
      this.addGraphic_e07(graphicLayer)
      this.addGraphic_e08(graphicLayer)
      this.addGraphic_e09(graphicLayer)
      this.addGraphic_e10(graphicLayer)
      this.addGraphic_e11(graphicLayer)
      this.addGraphic_e12(graphicLayer)
      this.addGraphic_e13(graphicLayer)
      this.addGraphic_e14(graphicLayer)
      this.addGraphic_e15(graphicLayer)
      */

      /*
      let rotateOut = new this.mars3d.thing.RotateOut({
        direction: false, // 方向 true逆时针，false顺时针
        time: 60 // 给定飞行一周所需时间(单位 秒)，控制速度
      })
      map.addThing(rotateOut)
      开启旋转
      rotateOut.start()
      */
      this.selectImg(0, "click");
    },
@@ -590,47 +537,68 @@
              attr: res.data[i]
            })
            fengongsi_layer.addGraphic(graphic)

            if (res.data[i].shape != null) {
              const graphic = new this.mars3d.graphic.PolygonEntity({
                positions: res.data[i].shape,
                style: {
                  height: 500 + Math.random() * 1000,
                  diffHeight: 2000.0,
                  color: this.fillBoderColors[i],
                  alphaPower: 1.5,
                  opacity: 0.5,
                  highlight: {
                    type: this.mars3d.EventType.click,
                    diffHeight: 3000,
                    material: this.mars3d.MaterialUtil.createMaterialProperty(this.mars3d.MaterialType.LineFlow, {
                      image: "img/textures/fence.png",
                      color: "#bdf700",
                      repeat: new Cesium.Cartesian2(10, 1),
                      axisY: true, // 方向，true时上下，false左右
                      speed: 10
                    })
                  },
                  attr: res.data[i]
                },
              })
              fengongsi_area_layer.addGraphic(graphic)
            }
          }
        }
      });
    },
    initzdLayer () {
      utils.initzhandianLayer();
      // let datas = []
      // this.$axios.get(this.$Interface.mapResource.getZhandianDataAll, {}).then((res) => {
      //   console.log(res, "站点接口")
      // })
      let that = this
      //utils.initfgsLayer();
      const zhandian_layer = new this.mars3d.layer.GraphicLayer({ id: 'zhandian_layer' })
      // 2.在layer上绑定监听事件
      zhandian_layer.on(this.mars3d.EventType.click, function (event) {
        console.log('监听layer，单击了矢量对象', event)
        console.log(event.graphic.attr)
        store.commit("SET_SelAttr", { visa: true, type: "zhandian", id: event.graphic.attr.id, value: event.graphic.attr.name })
        event.graphic.flyTo({ radius: 2000, duration: 1 })

      })
      const zhandian_area_layer = new this.mars3d.layer.GraphicLayer({ id: 'zhandian_area_layer' })
      window.marsmap.addLayer(zhandian_layer)
      window.marsmap.addLayer(zhandian_area_layer)

      this.$axios.get(this.$Interface.mapResource.getZhandianDataAll, {}).then((res) => {
        if (res.code === 0) {
          console.log(res.data);
          for (let i = 0; i < res.data.length; i++) {
            const graphic = new this.mars3d.graphic.DivGraphic({
              position: [res.data[i].longitude, res.data[i].latitude, 1000],
              style: {
                html: `<div class="marsBlueGradientPnl"><div>` + res.data[i].companyName + `</div></div>`,
                offsetY: -60,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 按视距距离显示
                // 高亮时的样式
                highlight: {
                  type: this.mars3d.EventType.click,
                  className: "marsBlueGradientPnl-highlight"
                }
              },
              attr: res.data[i]
            })
            zhandian_layer.addGraphic(graphic)
          }
        }
      });
    },
    initczLayer () {
      utils.initchangzhanLayer();
      let datas = []
      this.$axios.get(this.$Interface.mapResource.getChangZhanAllData, {}).then((res) => {
        console.log(res, "场站接口")
      })
    },
    initxlLayer () {
      utils.loadGeometryById("411", "1");
      // utils.loadGeometryById("411", "1");
      console.log("eee")
    },
    initclLayer () {
      utils.initcheliangLayer();
      // utils.initcheliangLayer();
      console.log("eeeeeeee")
    },
    closediv (str) {
      if (str === "zhandian") {