添加公交地图界面部分地图

master

2022-04-29 941f6f70206d33c3f507c092c32fc5647a240c37

 src/views/map/map.vue

@@ -123,6 +123,7 @@
import img_zhandian_s_url from "../../assets/mapv2/icon_zhandian_s.png";
import img_cheliang_s_url from "../../assets/mapv2/icon_cheliang_s.png";
import img_cheliang_ss_url from "../../assets/mapv2/icon_cheliang_ss.png";
// import bus_model from '../../assets/model/bus3.gltf'
import img_bg_s_url from '../../assets/mapv2/bg_s.png';
import fgsmarkers from '../../assets/json/fgsmarkers.json';
import czmarkers from '../../assets/json/czmarkers.json';
@@ -272,6 +273,9 @@
      if (window.drawTool) { window.drawTool.disable(); }
      switch (type) {
        case 0:
          window.marsmap._layerCache.zhandian_layer && window.marsmap._layerCache.zhandian_layer.remove()
           window.marsmap._layerCache.changzhan_layer && window.marsmap._layerCache.changzhan_layer.remove()
           window.marsmap._layerCache.cheliang_layer && window.marsmap._layerCache.cheliang_layer.remove()
          this.initfgsLayer();
          this.isActivatetool = false
          this.isActivatetoolcl = false
@@ -282,6 +286,9 @@
          this.bar[type].text_div = false;
          break;
        case 1:
           window.marsmap._layerCache.zhandian_layer && window.marsmap._layerCache.zhandian_layer.remove()
           window.marsmap._layerCache.fengongsi_layer && window.marsmap._layerCache.fengongsi_layer.remove()
           window.marsmap._layerCache.cheliang_layer && window.marsmap._layerCache.cheliang_layer.remove()
          this.initczLayer();
          this.$store.commit("SET_MapMenu", "场站")
          this.$store.commit("SET_SelAttr", { visa: false })
@@ -302,6 +309,9 @@
          this.initxlLayer();
          break;
        case 3:
          window.marsmap._layerCache.fengongsi_layer && window.marsmap._layerCache.fengongsi_layer.remove()
          window.marsmap._layerCache.changzhan_layer && window.marsmap._layerCache.changzhan_layer.remove()
          window.marsmap._layerCache.cheliang_layer && window.marsmap._layerCache.cheliang_layer.remove()
          this.initzdLayer();
          this.isActivatetool = false
          this.isActivatetoolcl = false
@@ -313,6 +323,9 @@
          this.bar[type].text_div = false;
          break;
        case 4:
          window.marsmap._layerCache.fengongsi_layer && window.marsmap._layerCache.fengongsi_layer.remove()
          window.marsmap._layerCache.changzhan_layer && window.marsmap._layerCache.changzhan_layer.remove()
          window.marsmap._layerCache.zhandian_layer && window.marsmap._layerCache.zhandian_layer.remove()
          this.initclLayer();
          this.isActivatetool = false
          this.isActivatetoolcl = true
@@ -500,9 +513,11 @@
    hideAllLayer () {
      utils.hideAllLayer();
    },
    // 分公司按钮
    initfgsLayer () {


      let that = this
      //utils.initfgsLayer();
      const fengongsi_layer = new this.mars3d.layer.GraphicLayer({ id: 'fengongsi_layer' })
      // 2.在layer上绑定监听事件
      fengongsi_layer.on(this.mars3d.EventType.click, function (event) {
@@ -515,7 +530,6 @@
      const fengongsi_area_layer = new this.mars3d.layer.GraphicLayer({ id: 'fengongsi_area_layer' })
      window.marsmap.addLayer(fengongsi_layer)
      window.marsmap.addLayer(fengongsi_area_layer)

      this.$axios.get(this.$Interface.mapResource.getFenGongSiAll, {}).then((res) => {
        if (res.code === 0) {
          console.log(res.data);
@@ -541,19 +555,15 @@
        }
      });
    },
    // 站点按钮
    initzdLayer () {
      // 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 })
        that.$store.commit("SET_SelAttr", { visa: true, type: "zhandian", id: event.graphic.attr.stationId, value: event.graphic.attr.stationName })
        event.graphic.flyTo({ radius: 2000, duration: 1 })

      })
@@ -565,13 +575,12 @@
        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],
            let positionses = [res.data[i].longitude, res.data[i].latitude, 0]
            const graphic = new this.mars3d.graphic.BillboardPrimitive({
              position: positionses,
              style: {
                html: `<div class="marsBlueGradientPnl"><div>` + res.data[i].companyName + `</div></div>`,
                offsetY: -60,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                image: img_zhandian_m_url,
                scale: 0.3,
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 按视距距离显示
                // 高亮时的样式
                highlight: {
@@ -586,19 +595,94 @@
        }
      });
    },

    // 场站图层
    initczLayer () {
      let datas = []
      this.$axios.get(this.$Interface.mapResource.getChangZhanAllData, {}).then((res) => {
        console.log(res, "场站接口")
      let that = this
      const changzhan_layer = new this.mars3d.layer.GraphicLayer({ id: 'changzhan_layer' })
      // 2.在layer上绑定监听事件
      changzhan_layer.on(this.mars3d.EventType.click, function (event) {
        console.log('监听layer，单击了矢量对象', event)
        console.log(event.graphic.attr)
        that.$store.commit("SET_SelAttr", { visa: true, type: "changzhan", id: event.graphic.attr.stationId, value: event.graphic.attr.stationName })
        event.graphic.flyTo({ radius: 2000, duration: 1 })

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

      this.$axios.get(this.$Interface.mapResource.getChangZhanAllData, {}).then((res) => {
        console.log(res,"changzhan")
        if (res.code === 0) {
          console.log(res.data);
          for (let i = 0; i < res.data.length; i++) {
            let positionses = [res.data[i].longitude, res.data[i].latitude, 0]
            const graphic = new this.mars3d.graphic.BillboardPrimitive({
              position: positionses,
              style: {
                image: img_zhandian_m_url,
                scale: 0.3,
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 按视距距离显示
                // 高亮时的样式
                highlight: {
                  type: this.mars3d.EventType.click,
                  className: "marsBlueGradientPnl-highlight"
                }
              },
              attr: res.data[i]
            })
            changzhan_layer.addGraphic(graphic)
          }
        }
      });
    },
    initxlLayer () {
      // utils.loadGeometryById("411", "1");
      console.log("eee")
    },

    // 车辆图层
    initclLayer () {
      // utils.initcheliangLayer();
      console.log("eeeeeeee")
      let that = this
      const cheliang_layer = new this.mars3d.layer.GraphicLayer({ id: 'cheliang_layer' })
      // 2.在layer上绑定监听事件
      cheliang_layer.on(this.mars3d.EventType.click, function (event) {
        console.log('监听layer，单击了矢量对象', event)
        console.log(event.graphic.attr)
        that.$store.commit("SET_SelAttr", { visa: true, type: "cheliang", id: event.graphic.attr.stationId, value: event.graphic.attr.stationName })
        event.graphic.flyTo({ radius: 2000, duration: 1 })

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

      this.$axios.get(this.$Interface.mapResource.getChangZhanAllData, {}).then((res) => {
        console.log(res,"cheliang")
        if (res.code === 0) {
          console.log(res.data);
          for (let i = 0; i < res.data.length; i++) {
            let positionses = [res.data[i].longitude, res.data[i].latitude, 0]
            const graphic = new this.mars3d.graphic.ModelEntity({
              position: positionses,
              style: {
                url: "//data.mars3d.cn/gltf/mars/car/bus3.gltf",
                scale: 0.1,
                minimumPixelSize: 20,
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 按视距距离显示
                // 高亮时的样式
                highlight: {
                  type: this.mars3d.EventType.click,
                  className: "marsBlueGradientPnl-highlight"
                }
              },
              attr: res.data[i]
            })
            cheliang_layer.addGraphic(graphic)
          }
        }
      });
    },
    closediv (str) {
      if (str === "zhandian") {