添加站点

master

2022-04-28 3f01dc7da4c12311ecb31ad8d5d7224dd27e52e3

添加站点

 src/unit/map.js

@@ -1,6 +1,7 @@
import * as maptalks from 'maptalks';
import mapboxgl from "mapbox-gl";
// import * as turf from '@turf/turf';

import customTool from './customTool';
import 'maptalks/dist/maptalks.css';
import { MapboxglLayer } from "maptalks.mapboxgl";
@@ -33,612 +34,96 @@
let czMarkers = []
let zdMarkers = []
let clMarkers = []
const initMap = (id) => {
  // let arcUrl = 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer';
  // maptalks.SpatialReference.loadArcgis(arcUrl + '?f=pjson', function (err, conf) {
  // if (err) {
  //   throw new Error(err);
  // }
  // window.map = new maptalks.Map(id, {
  //   center: [113.576892,22.271644],
  //   zoom: 10,
  //   minZoom: 1,
  //   maxZoom : 20,
  //   baseLayer: new maptalks.TileLayer('base', {
  //     // 'tileSystem' : conf.tileSystem,
  //     // 'tileSize' : conf.tileSize, // [512, 512]
  //     'urlTemplate' : '//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
  //   })
  // });
  mapboxgl.accessToken = "pk.eyJ1Ijoiam9saW5lZHUiLCJhIjoiY2txb2ZuY2lvMDM5aDJ3bzFnaWlxa2I3MSJ9.-qa5dZYXif7kWJUgOlBz-g";
  window.map = new maptalks.Map(id, {
    center: [115.980367,36.456013],
    zoom: 4,
    maxZoom: 20,
    baseLayer: new maptalks.TileLayer("tile", {
      urlTemplate: "http://t{s}.tianditu.gov.cn/vec_c/wmts?tk=6565500a44e87d94d26131d1288c8ecb&x={x}&y={y}&l={z}",
      subdomains:[0,1,2,3,4,5,6,7]
    }).on("layerload", function () {
    }),
    /*
    baseLayer: new MapboxglLayer("tile", {
      glOptions: {
        'style': 'mapbox://styles/jolinedu/ckxiss0v2k3m714lghbdlqpku'
      },
    }).on("layerload", function () {
    }),
    */

  });
  new maptalks.VectorLayer('fengongsilayer', null, { zIndex: 2 }).addTo(window.map);
  new maptalks.VectorLayer('changzhanlayer', null, { zIndex: 2 }).addTo(window.map);
  new maptalks.VectorLayer('xianlulayer', null, { zIndex: 1 }).addTo(window.map);
  new maptalks.VectorLayer('zhandianlayer', null, { zIndex: 2 }).addTo(window.map);
  new maptalks.VectorLayer('chelianglayer', null, { zIndex: 2 }).addTo(window.map);
  new maptalks.VectorLayer('templayer', null, { zIndex: 0 }).addTo(window.map);
  new maptalks.VectorLayer('toollayer', null, { zIndex: 3 }).addTo(window.map);
  if (window.map.isLoaded()) {
    window.map.animateTo({
      zoom: 13,
      center: [115.980367,36.456013],
      pitch: 30
    }, {
      duration: 5000,
      easing: 'out'
    }, function (frame) {
      if (frame.state.playState === 'finished') {
        initfgsLayer()
      }
    });
  }
  // })
}
const hideAllLayer = () => {
  if (window.map && window.map.isLoaded()) {
    let layer = window.map.getLayer("fengongsilayer");
    if (!layer.isEmpty()) { layer.clear() }
    layer = window.map.getLayer("changzhanlayer");
    if (!layer.isEmpty()) { layer.clear() }
    layer = window.map.getLayer("xianlulayer");
    if (!layer.isEmpty()) { layer.clear() }
    layer = window.map.getLayer("zhandianlayer");
    if (!layer.isEmpty()) { layer.clear() }
    layer = window.map.getLayer("chelianglayer");
    if (!layer.isEmpty()) { layer.clear() }
    layer = window.map.getLayer("templayer");
    if (!layer.isEmpty()) { layer.clear() }
    layer = window.map.getLayer("toollayer");
    if (!layer.isEmpty()) { layer.clear() }
    layer = window.map.getLayer("CustomTool_layer");
    if (layer) { layer.clear() }
    if (window.amap) {
      layer = window.amap.getLayer("afengongsilayer");
      if (!layer.isEmpty()) { layer.clear() }
      layer = window.amap.getLayer("atemplayer");
      if (!layer.isEmpty()) { layer.clear() }
    }
  }
}
// const initfgsLayer = () => {
//   if(window.map && window.map.isLoaded()){
//     let layer = window.map.getLayer("fengongsilayer");
//     if(layer.isEmpty()){
//       //测试数据
//       fgsMarkers = [];
//       //循环获取测试数据经纬度和名称，添加到标注属性
//       for (var i = 0; i < fgsmarkers.datas.length; i++) {
//         var x = fgsmarkers.datas[i].longitude
//         var y = fgsmarkers.datas[i].latitude
//         fgsMarkers.push(new maptalks.Marker([x, y], { //标注添加到集合
//         'id' : Common.uuid()+''+i,
//         // 'id' : fgsmarkers.datas[i].companyId,
//         'editable': true,
//         'properties' : {
//             'id' : fgsmarkers.datas[i].companyId,
//             'name' : fgsmarkers.datas[i].companyName,
//           },
//           'symbol' : [
//             {
//               'markerFile'   : img_fengongsi_m_url,
//               'markerWidth'  : 60,
//               'markerHeight' : 80
//             },
//             {
//               'markerFile'   : img_bg_s_url,
//               'markerDy': -75,
//             },
//             {
//               'textFaceName' : 'sans-serif',
//               'textName' : fgsmarkers.datas[i].companyName,
//               'textSize' : 14,
//               'textFill': '#ffffff',
//               'textDy': -90,
//               'textHorizontalAlignment': 'top', //left middle right
//               'textVerticalAlignment': 'middle' //top middle bottom
//             }
//           ]
//         }))
//       }
//       layer.addGeometry(fgsMarkers);
//       window.map.on('click', function (e) {
//         layer.forEach(function (g) {
//           g.updateSymbol([{'markerFile': img_fengongsi_m_url},{'markerFile': img_bg_s_url}]);
//         });
//         window.map.identify({
//             'coordinate' : e.coordinate,
//             'layers' : [layer]
//           },
//           function (geos) {
//             if (geos.length === 0) {
//               return;
//             } else {
//               // if(geos.length ===1 ){
//               store.commit("SET_SelAttr", {visa:true,type: "fengongsi",id: geos[0].properties.id,value:geos[0].properties.name})
//               geos[0].updateSymbol([{'markerFile': img_fengongsi_mm_url},{'markerFile': img_bg_m_url}]);
//               loadtempLayer(geos[0].properties)
//               window.map.animateTo({
//                   zoom : 14,
//                   center : geos[0]._coordinates.add(0.015, 0.000)
//               }, {
//                   duration : 500,
//                   easing : 'out'
//               })
//             }
//           }
//         );
//       });
//     } else {
//       layer.show()
//     }
//   }
// }




// 真实接口
const initfgsLayer = () => {
  let datas = []
  let layer = window.map.getLayer("fengongsilayer");
  if (fgsMarkers && fgsMarkers.length < 1) {
    axios.get(interfaces.mapResource.getFenGongSiAll, {}).then((res) => {
      if (res.code === 0) {
        datas = res.data
        if (window.map && window.map.isLoaded()) {
          //循环获取测试数据经纬度和名称，添加到标注属性
          if (layer.isEmpty()) {
            for (var i = 0; i < datas.length; i++) {
              var x = datas[i].longitude
              var y = datas[i].latitude
              fgsMarkers.push(new maptalks.Marker([x, y], { //标注添加到集合
                'id': Common.uuid() + '' + i,
                // 'id' : fgsmarkers.datas[i].companyId,
                'editable': true,
                'properties': {
                  'id': datas[i].companyId,
                  'name': datas[i].companyName,
                },
                'symbol': [
                  {
                    'markerFile': img_fengongsi_m_url,
                    'markerWidth': 72,
                    'markerHeight': 122
                  },
                  {
                    'markerFile': img_bg_s_url,
                    'markerDy': -120,
                  },
                  {
                    'textFaceName': 'sans-serif',
                    'textName': datas[i].companyName,
                    'textSize': 14,
                    'textFill': '#ffffff',
                    'textDy': -140,
                    'textHorizontalAlignment': 'top', //left middle right
                    'textVerticalAlignment': 'middle' //top middle bottom
                  }
                ]
              }))
  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) {
    console.log('监听layer，单击了矢量对象', event)
    console.log(event.graphic.attr)
    that.$store.commit("SET_SelAttr", { visa: true, type: "fengongsi", id: event.graphic.attr.companyId, value: event.graphic.attr.companyName })
    event.graphic.flyTo({ radius: 2000, duration: 1 })

  })
  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);
      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"
            }
            layer.addGeometry(fgsMarkers);
          } else {
            layer.show()
          }
        }
      } else {
        message.warning('您当前网络不稳定,未获取到数据!')
      }
    })
  } else {
    if (layer.isEmpty()) {
      layer.addGeometry(fgsMarkers);
    } else {
      layer.show()
    }
  }
  window.map.on('click', function (e) {
    layer.forEach(function (g) {
      g.updateSymbol([{ 'markerFile': img_fengongsi_m_url }, { 'markerFile': img_bg_s_url }]);
    });
    window.map.identify({
      'coordinate': e.coordinate,
      'layers': [layer]
    },
      function (geos) {
        if (geos.length === 0) {
          return;
        } else {
          store.commit("SET_SelAttr", { visa: true, type: "fengongsi", id: geos[0].properties.id, value: geos[0].properties.name })
          geos[0].updateSymbol([{ 'markerFile': img_fengongsi_mm_url }, { 'markerFile': img_bg_m_url }]);
          loadtempLayer(geos[0].properties)
          window.map.animateTo({
            zoom: 14,
            center: geos[0]._coordinates.add(0.015, 0.000)
          }, {
            duration: 500,
            easing: 'out'
          },
          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]
            },
          })
          return
          fengongsi_area_layer.addGraphic(graphic)
        }
      }
    );
    }
  });
}

// const initzhandianLayer = () => {
//   if(window.map && window.map.isLoaded()){
//     let layer = window.map.getLayer("zhandianlayer");
//     if(layer.isEmpty()){
//       zdMarkers = [];
//       for (var i = 0; i < zdmarkers.datas.length; i++) {
//         var x = zdmarkers.datas[i].longitude
//         var y = zdmarkers.datas[i].latitude
//         zdMarkers.push(new maptalks.Marker([x, y], { //标注添加到集合
//         'id' : Common.uuid()+''+i,
//         // 'id' : zdmarkers.datas[i].stationId,
//         'editable': true,
//         'properties' : {
//             'id': zdmarkers.datas[i].stationId,
//             'name' : zdmarkers.datas[i].stationName,
//             'type':zdmarkers.datas[i].stationTypeName,
//           },
//           'symbol' : [
//             {
//               'markerFile'   : img_zhandian_m_url,
//               'markerWidth'  : { stops: [[4, 12], [14, 12], [16, 60]] },
//               'markerHeight' : { stops: [[4, 16], [14, 16], [16, 80]] },
//             },
//             {
//               'markerFile'   : img_bg_s_url,
//               'markerDy': -75,
//               'markerWidth'  : { stops: [[4, 0], [16, 0], [17, 102]] },
//               'markerHeight' : { stops: [[4, 0], [16, 0], [17, 32]] },
//             },
//             {
//               'textFaceName' : 'sans-serif',
//               'textName' : zdmarkers.datas[i].stationName,
//               'textSize' : { stops: [[4, 0], [16, 0], [17, 14]] },
//               'textFill': '#ffffff',
//               'textDy': -90,
//               'textHorizontalAlignment': 'top', //left middle right
//               'textVerticalAlignment': 'middle' //top middle bottom
//             }
//           ]
//         }))
//       }
//       layer.addGeometry(zdMarkers);
//       window.map.on('click', function (e) {
//         layer.forEach(function (g) {
//           g.updateSymbol([{'markerFile': img_zhandian_m_url},{'markerFile': img_bg_s_url}]);
//         });
//         window.map.identify({
//             'coordinate' : e.coordinate,
//             'layers' : [layer]
//           },
//           function (geos) {
//             if (geos.length === 0) {
//               return;
//             } else {
//               store.commit("SET_SelAttr", {visa:true,type: "zhandian",id:geos[0].properties.id, value:geos[0].properties.name})
//               geos[0].updateSymbol([{'markerFile': img_zhandian_mm_url},{'markerFile': img_bg_m_url}]);
//               // loadtempLayer(geos[0].properties)
//               // window.map.animateTo({
//               //     zoom : 14,
//               //     center : geos[0]._coordinates.add(0.015, 0.000)
//               // }, {
//               //     duration : 500,
//               //     easing : 'out'
//               // })
//             }
//           }
//         );
//       });
//     } else {
//       layer.show()
//     }
//   }
// }

// 站点走的真实接口查询
const initzhandianLayer = () => {
  let datas = []
  let layer = window.map.getLayer("zhandianlayer");
  let layertool = window.map.getLayer("CustomTool_layer");
  if (layertool) {
    layertool.clear()
  }
  if (zdMarkers && zdMarkers.length < 1) {
    axios.get(interfaces.mapResource.getZhandianDataAll, {}).then((res) => {
      if (res.code === 0) {
        datas = res.data
        if (window.map && window.map.isLoaded()) {
          if (layer.isEmpty()) {
            zdMarkers = []; //标注集合
            //循环获取测试数据经纬度和名称，添加到标注属性
            for (var i = 0; i < datas.length; i++) {
              var x = datas[i].longitude
              var y = datas[i].latitude
              zdMarkers.push(new maptalks.Marker([x, y], { //标注添加到集合
                'id': Common.uuid() + i,
                'editable': true,
                'properties': {
                  'id': datas[i].stationId,
                  'name': datas[i].stationName,
                  'type': datas[i].stationTypeName
                },
                'symbol': [
                  {
                    'markerFile': img_zhandian_m_url,
                    'markerWidth': { stops: [[4, 12], [14, 12], [16, 72]] },
                    'markerHeight': { stops: [[4, 16], [14, 16], [16, 122]] },
                  },
                  {
                    'markerFile': img_bg_s_url,
                    'markerDy': -120,
                    'markerWidth': { stops: [[4, 0], [16, 0], [17, 130]] },
                    'markerHeight': { stops: [[4, 0], [16, 0], [17, 34]] },
                  },
                  {
                    'textFaceName': 'sans-serif',
                    'textName': datas[i].stationName,
                    'textSize': { stops: [[4, 0], [16, 0], [17, 14]] },
                    'textFill': '#ffffff',
                    'textDy': { stops: [[10, 0], [16, -120], [17, -140]] },
                    'textHorizontalAlignment': 'top', //left middle right
                    'textVerticalAlignment': 'middle' //top middle bottom
                  }
                ]
              }))
            }
            layer.addGeometry(zdMarkers);
          }
        } else {
          layer.show()
        }
      } else {
        message.warning('您当前网络不稳定,未获取到数据!')
      }
    })
  } else {
    if (layer.isEmpty()) {
      layer.addGeometry(zdMarkers);
    } else {
      layer.forEach(function (g) {
        g.updateSymbol([{ 'markerFile': img_zhandian_m_url }, { 'markerFile': img_bg_s_url }]);
      });
      layer.show()
    }
  }
  window.map.animateTo({
    zoom: 13,
    center: [115.980367,36.456013]
  });
  window.map.on('click', function (e) {
    if (!store.state.maptool) {
      layer.forEach(function (g) {
        g.updateSymbol([{ 'markerFile': img_zhandian_m_url }, { 'markerFile': img_bg_s_url }]);
      });
      window.map.identify({
        'coordinate': e.coordinate,
        'layers': [layer]
      },
        function (geos) {
          if (geos.length === 0) {
            return;
          } else {
            store.commit("SET_SelAttr", { visa: true, type: "zhandian", id: geos[0].properties.id, value: geos[0].properties.name })
            geos[0].updateSymbol([{ 'markerFile': img_zhandian_mm_url }, { 'markerFile': img_bg_m_url }]);
            // loadtempLayer(geos[0].properties)
            // window.map.animateTo({
            //     zoom : 14,
            //     center : geos[0]._coordinates.add(0.015, 0.000)
            // }, {
            //     duration : 500,
            //     easing : 'out'
            // })
            return
          }
        }
      );
    } else {
      window.map.identify({
        'coordinate': e.coordinate,
        'layers': [layer]
      },
        function (geos) {
          if (geos.length === 0) {
            return;
          } else {
            let str = store.state.selAttr.value
            if (str != "") {
              if (str.indexOf(geos[0].properties.id) < 0) {
                str = str + "," + geos[0].properties.id
              }
            } else {
              str = geos[0].properties.id
            }
            store.commit("SET_SelAttr", { visa: true, type: "zhandiancircle", value: str })
            geos[0].updateSymbol([{ 'markerFile': img_zhandian_mm_url }, { 'markerFile': img_bg_m_url }]);
            return;
          }
        }
      );
    }
    //   }
    // } else {
    //   message.warning('您当前网络不稳定,未获取到数据!')
    // }
  });
  axios.get(interfaces.mapResource.getZhandianDataAll, {}).then((res) => {
    console.log(res, "站点接口")
  })
}

// 场站接口
const initchangzhanLayer = () => {
  let datas = []
  let layer = window.map.getLayer("changzhanlayer");
  if (czMarkers && czMarkers.length < 1) {
    axios.get(interfaces.mapResource.getChangZhanAllData, {}).then((res) => {
      if (res.code === 0) {
        datas = res.data
        if (window.map && window.map.isLoaded()) {
          if (layer.isEmpty()) {
            czMarkers = []; //标注集合
            //循环获取测试数据经纬度和名称，添加到标注属性
            for (let i = 0; i < datas.length; i++) {
              let x = datas[i].longitude
              let y = datas[i].latitude
              czMarkers.push(new maptalks.Marker([x, y], { //标注添加到集合
                'id': Common.uuid() + '' + i,
                'editable': true,
                'properties': {
                  'id': datas[i].stationId,
                  'name': datas[i].stationName,
                  'type': datas[i].stationType
                },
                'symbol': [
                  {
                    'markerFile': img_changzhan_m_url,
                    'markerWidth': 72,
                    'markerHeight': 122
                  },
                  {
                    'markerFile': img_bg_m_url,
                    'markerDy': -120,
                    'markerOpacity': 0
                  },
                  {
                    'textFaceName': 'sans-serif',
                    'textName': datas[i].stationName,
                    'textSize': 0,
                    'textFill': '#ffffff',
                    'textDy': -140,
                    'textHorizontalAlignment': 'top', //left middle right
                    'textVerticalAlignment': 'middle' //top middle bottom
                  }
                ]
              }))
            }
            layer.addGeometry(czMarkers);
          } else {
            layer.show()
          }
        }
      } else {
        message.warning('您当前网络不稳定,未获取到数据!')
      }
    })
  } else {
    if (layer.isEmpty()) {
      layer.addGeometry(czMarkers);
    } else {
      layer.show()
    }
  }
  window.map.on('click', function (e) {
    layer.forEach(function (g) {
      g.updateSymbol([{ 'markerFile': img_changzhan_m_url }, { 'markerOpacity': 0 }, { 'textSize': 0 }]);
    });
    window.map.identify({
      'coordinate': e.coordinate,
      'layers': [layer]
    },
      function (geos) {
        if (geos.length === 0) {
          return;
        } else {
          store.commit("SET_SelAttr", { visa: true, type: "changzhan", id: geos[0].properties.id, value: geos[0].properties.name })
          geos[0].updateSymbol([{ 'markerFile': img_changzhan_mm_url }, { 'markerOpacity': 1 }, { 'textSize': 14 }]);
          return;
        }
      }
    );
  });
  axios.get(interfaces.mapResource.getChangZhanAllData, {}).then((res) => {
    console.log(res, "场站接口")
  })
}
// 场站走后台接口方法
// const initchangzhanLayer = () => {
//   if(window.map && window.map.isLoaded()){
//     let layer = window.map.getLayer("changzhanlayer");
//     if(layer.isEmpty()){
//       //测试数据
//       czMarkers = [];
//       //循环获取测试数据经纬度和名称，添加到标注属性
//       for (var i = 0; i < czmarkers.datas.length; i++) {
//         var x = czmarkers.datas[i].longitude
//         var y = czmarkers.datas[i].latitude
//         czMarkers.push(new maptalks.Marker([x, y], { //标注添加到集合
//         'id' : Common.uuid()+''+i,
//         'editable': true,
//         'properties' : {
//             'id' : czmarkers.datas[i].stationId,
//             'name' : czmarkers.datas[i].stationName,
//             'type' : czmarkers.datas[i].stationType
//           },
//           'symbol' : [
//             {
//               'markerFile'   : img_changzhan_m_url,
//               'markerWidth'  : 60,
//               'markerHeight' : 80
//             },
//             {
//               'markerFile'   : img_bg_s_url,
//               'markerDy': -75,
//             },
//             {
//               'textFaceName' : 'sans-serif',
//               'textName' : czmarkers.datas[i].stationName,
//               'textSize' : 14,
//               'textFill': '#ffffff',
//               'textDy': -90,
//               'textHorizontalAlignment': 'top', //left middle right
//               'textVerticalAlignment': 'middle' //top middle bottom
//             }
//           ]
//         }))
//       }
//       layer.addGeometry(czMarkers);
//       window.map.on('click', function (e) {
//         layer.forEach(function (g) {
//           g.updateSymbol([{'markerFile': img_changzhan_m_url},{'markerFile': img_bg_s_url}]);
//         });
//         window.map.identify({
//             'coordinate' : e.coordinate,
//             'layers' : [layer]
//           },
//           function (geos) {
//             if (geos.length === 0) {
//               return;
//             } else {
//               store.commit("SET_SelAttr", {visa:true,type: "changzhan",id:geos[0].properties.id, value:geos[0].properties.name})
//               geos[0].updateSymbol([{'markerFile': img_changzhan_mm_url},{'markerFile': img_bg_m_url}]);
//               window.map.animateTo({
//                   zoom : 14,
//                   center : geos[0]._coordinates.add(0.015, 0.000)
//               }, {
//                   duration : 500,
//                   easing : 'out'
//               })
//             }
//           }
//         );
//       });
//     } else {
//       layer.show()
//     }
//   }
// }


const queryChangZhanAttrByType = (value) => {
  let layer = window.map.getLayer("changzhanlayer");
@@ -795,94 +280,7 @@
      for (var i = 0; i < attr.stationList.length; i++) {
        var x = attr.stationList[i].longitude
        var y = attr.stationList[i].latitude
        // if (i == 0) {
        // xianlumarker.push(new maptalks.Marker([x, y], { //标注添加到集合
        //   'id': Common.uuid() + '' + i,
        //   'editable': true,
        //   'properties': {
        //     'id': attr.stationList[i].stationId,
        //     'name': attr.stationList[i].stationName,
        //     'type': attr.stationList[i].stationTypeName,
        //     'flag': false
        //   },
        //   'symbol': [
        //     {
        //       'markerFile': img_qidian_url,
        //       'markerWidth': 248,
        //       'markerHeight': 132,
        //       'markerDy': 33
        //     },
        //     {
        //       'textFaceName': 'sans-serif',
        //       'textName': attr.stationList[i].stationName,
        //       'textFill': '#ffffff',
        //       'textDy': -65,
        //       'textDx': 30,
        //       'textHorizontalAlignment': 'right', //left middle right
        //       'textVerticalAlignment': 'top' //top middle bottom
        //     }
        //   ]
        // }))
        // } else if (i == attr.stationList.length - 1) {
        //   xianlumarker.push(new maptalks.Marker([x, y], { //标注添加到集合
        //     'id': Common.uuid() + '' + i,
        //     'editable': true,
        //     'properties': {
        //       'id': attr.stationList[i].stationId,
        //       'name': attr.stationList[i].stationName,
        //       'type': attr.stationList[i].stationTypeName,
        //       'flag': false
        //     },
        //     'symbol': [
        //       {
        //         'markerFile': img_zhongdian_url,
        //         'markerWidth': 182,
        //         'markerHeight': 97,
        //         'markerDy': 24
        //       },
        //       {
        //         'textFaceName': 'sans-serif',
        //         'textName': attr.stationList[i].stationName,
        //         'textFill': '#ffffff',
        //         'textDy': -65,
        //         'textDx': 30,
        //         'textHorizontalAlignment': 'right', //left middle right
        //         'textVerticalAlignment': 'top' //top middle bottom
        //       }
        //     ]
        //   }))
        // } else {
        //   xianlumarker.push(new maptalks.Marker([x, y], { //标注添加到集合
        //     'id': Common.uuid() + '' + i,
        //     'editable': true,
        //     'properties': {
        //       'id': attr.stationList[i].stationId,
        //       'name': attr.stationList[i].stationName,
        //       'type': attr.stationList[i].stationTypeName,
        //       'flag': true
        //     },
        //     'symbol': [
        //       {
        //         'markerFile': img_zhandian_m_url,
        //         'markerWidth': 60,
        //         'markerHeight': 80
        //       },
        //       {
        //         'markerFile': img_bg_s_url,
        //         'markerDy': -75,
        //       },
        //       {
        //         'textFaceName': 'sans-serif',
        //         'textName': attr.stationList[i].stationName,
        //         'textSize': 14,
        //         'textFill': '#ffffff',
        //         'textDy': -90,
        //         'textHorizontalAlignment': 'top', //left middle right
        //         'textVerticalAlignment': 'middle' //top middle bottom
        //       }
        //     ]
        //   }))
        // }

        xianlumarker.push(new maptalks.Marker([x, y], { //标注添加到集合
          'id': Common.uuid() + '' + i,
          'editable': true,
@@ -971,6 +369,8 @@
    }
  }
}

// 
const loadCheLiangByLine = (id) => {
  let layer = window.map.getLayer("chelianglayer");
  layer.clear()
@@ -995,22 +395,9 @@
          'symbol': [
            {
              'markerFile': img_cheliang_n_url,
              // 'markerWidth': { stops: [[4, 20], [14, 20], [16, 54]] },
              // 'markerHeight': { stops: [[4, 20], [14, 20], [16, 54]] },
              'markerWidth': 30,
              'markerHeight': 30,
            }
            // {
            //   'textFaceName': 'sans-serif',
            //   'textName': datas[i].plateNum,
            //   // 'textSize': { stops: [[10, 0], [16, 0], [17, 14]] },
            //   'textSize': 12,
            //   // 'textDy': -45,
            //   'textDy': -20,
            //   'textFill': '#ffffff',
            //   'textHorizontalAlignment': 'middle', //left middle right
            //   'textVerticalAlignment': 'top' //top middle bottom
            // }
          ]
        }))
      }
@@ -1041,192 +428,13 @@
    }
  });
}
// 车辆静态数据
// const initcheliangLayer = () => {
//   if(window.map && window.map.isLoaded()){
//     let layer = window.map.getLayer("chelianglayer");
//     if(layer.isEmpty()){
//       //测试数据
//       clMarkers = [];
//       //循环获取测试数据经纬度和名称，添加到标注属性
//       for (var i = 0; i < clmarkers.datas.length; i++) {
//         var x = clmarkers.datas[i].LON
//         var y = clmarkers.datas[i].LAT
//         clMarkers.push(new maptalks.Marker([x, y], { //标注添加到集合
//         'id' : clmarkers.datas[i].id,
//         'editable': true,
//         'properties' : {
//             'name' : clmarkers.datas[i].NAME,
//             'company' : clmarkers.datas[i].company,
//           },
//           'symbol' : [
//             {
//               'markerFile'   : img_cheliang_m_url,
//               'markerWidth'  : 60,
//               'markerHeight' : 80
//             },
//             {
//               'markerFile'   : img_bg_s_url,
//               'markerDy': -75,
//             },
//             {
//               'textFaceName' : 'sans-serif',
//               'textName' : clmarkers.datas[i].NAME,
//               'textSize' : 14,
//               'textFill': '#ffffff',
//               'textDy': -90,
//               'textHorizontalAlignment': 'top', //left middle right
//               'textVerticalAlignment': 'middle' //top middle bottom
//             }
//           ]
//         }))
//       }
//       layer.addGeometry(clMarkers);
//       window.map.on('click', function (e) {
//         layer.forEach(function (g) {
//           g.updateSymbol([{'markerFile': img_cheliang_m_url},{'markerFile': img_bg_s_url}]);
//         });
//         window.map.identify({
//             'coordinate' : e.coordinate,
//             'layers' : [layer]
//           },
//           function (geos) {
//             if (geos.length === 0) {
//               return;
//             } else {
//               store.commit("SET_SelAttr", {visa:true,type: "cheliang",value:geos[0].properties.name})
//               geos[0].updateSymbol([{'markerFile': img_cheliang_mm_url},{'markerFile': img_bg_m_url}]);
//               window.map.animateTo({
//                   zoom : 14,
//                   center : geos[0]._coordinates.add(0.015, 0.000)
//               }, {
//                   duration : 500,
//                   easing : 'out'
//               })
//             }
//           }
//         );
//       });
//     } else {
//       layer.show()
//     }
//   }
// }

// 接口获取车辆动态数据
const initcheliangLayer = () => {
  if (window.map && window.map.isLoaded()) {
    let layer = window.map.getLayer("chelianglayer");
    let toollayer = window.map.getLayer("CustomTool_layer");
    if (toollayer) { toollayer.clear() }
    let datas = [];
    if (clMarkers && clMarkers.length < 1) {
      axios.get(interfaces.mapResource.getCheLiangDateAll, {}).then((res) => {
        if (res.code === 0) {
          datas = res.data
          if (layer.isEmpty()) {
            //测试数据
            clMarkers = [];
            //循环获取测试数据经纬度和名称，添加到标注属性
            for (var i = 0; i < datas.length; i++) {
              var x = datas[i].longitude
              var y = datas[i].latitude
              clMarkers.push(new maptalks.Marker([x, y], { //标注添加到集合
                'id': Common.uuid() + i,
                'editable': true,
                'properties': {
                  'id': datas[i].plateNum,
                  'name': datas[i].plateNum,
                  'companyName': datas[i].companyName
                },
                'symbol': [
                  {
                    'markerFile': img_cheliang_m_url,
                    'markerWidth': { stops: [[10, 12], [14, 12], [16, 72]] },
                    'markerHeight': { stops: [[10, 16], [14, 16], [16, 122]] },
                  },
                  {
                    'markerFile': img_bg_s_url,
                    'markerDy': -120,
                    'markerWidth': { stops: [[4, 0], [16, 0], [17, 130]] },
                    'markerHeight': { stops: [[4, 0], [16, 0], [17, 34]] },
                  },
                  {
                    'textFaceName': 'sans-serif',
                    'textName': datas[i].plateNum,
                    'textSize': { stops: [[10, 0], [16, 0], [17, 14]] },
                    'textFill': '#ffffff',
                    'textDy': { stops: [[10, 0], [16, -120], [17, -140]] },
                    'textHorizontalAlignment': 'top', //left middle right
                    'textVerticalAlignment': 'middle' //top middle bottom
                  }
                ]
              }))
            }
            layer.addGeometry(clMarkers);
          }
        } else {
          message.warning('您当前网络不稳定,未获取到数据!')
        }
      })
    } else {
      if (layer.isEmpty()) {
        layer.addGeometry(clMarkers);
      } else {
        layer.forEach(function (g) {
          g.updateSymbol([{ 'markerFile': img_cheliang_m_url }, { 'markerFile': img_bg_s_url }]);
        });
        layer.show()
      }
    }
    window.map.animateTo({
      zoom: 11,
      center: [115.980367,36.456013]
    });
    window.map.on('click', function (e) {
      if (!store.state.maptool) {
        layer.forEach(function (g) {
          g.updateSymbol([{ 'markerFile': img_cheliang_m_url }, { 'markerFile': img_bg_s_url }]);
        });
        window.map.identify({
          'coordinate': e.coordinate,
          'layers': [layer]
        },
          function (geos) {
            if (geos.length === 0) {
              return;
            } else {
              store.commit("SET_SelAttr", { visa: true, type: "cheliang", id: geos[0].properties.id, value: geos[0].properties.name })
              geos[0].updateSymbol([{ 'markerFile': img_cheliang_mm_url }, { 'markerFile': img_bg_m_url }]);
              return;
            }
          }
        );
      } else {
        window.map.identify({
          'coordinate': e.coordinate,
          'layers': [layer]
        },
          function (geos) {
            if (geos.length === 0) {
              return;
            } else {
              let str = store.state.selAttr.value
              if (str != "") {
                if (str.indexOf(geos[0].properties.id) < 0) {
                  str = str + "," + geos[0].properties.id
                }
              } else {
                str = geos[0].properties.id
              }
              store.commit("SET_SelAttr", { visa: true, type: "cheliangcircle", value: str })
              geos[0].updateSymbol([{ 'markerFile': img_cheliang_mm_url }, { 'markerFile': img_bg_m_url }]);
              return;
            }
          }
        );
      }
    })
  }
  let datas = [];
  axios.get(interfaces.mapResource.getCheLiangDateAll, {}).then((res) => {
    console.log(res, "获取车辆动态数据")
  })
}

const queryCheLiangAttrByType = (value) => {
@@ -1243,7 +451,7 @@
  }
}

const loadGeometryById = (id,type) => {
const loadGeometryById = (id, type) => {
  let obj = {};
  if (window.map && window.map.isLoaded()) {
    if (store.state.mapMenu == "分公司") {
@@ -1274,7 +482,7 @@
      let layer = window.map.getLayer("xianlulayer");
      layer.clear()
      axios.get(interfaces.mapResource.getXianLuDataByLineID, {
        params: { lineId: id,flag:type },
        params: { lineId: id, flag: type },
      })
        .then((res) => {
          if (res.code === 0) {
@@ -1510,16 +718,8 @@
  }
}
export default {
  initMap,
  hideAllLayer,
  initfgsLayer,
  initToolLayer,
  initxianluLayer,
  loadGeometryById,
  initcheliangLayer,
  initzhandianLayer,
  initchangzhanLayer,
  loadLineNetworkByName,
  queryCheLiangAttrByType,
  queryChangZhanAttrByType,
  initcheliangLayer,
}

 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") {