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";
@@ -122,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';
@@ -129,7 +131,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 +198,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 +219,7 @@
        show: true,
        flyTo: false
      });

      // 边界墙
      const graphic = new this.mars3d.graphic.WallEntity({
        positions: this.liaocheng_boundary,
        style: {
@@ -270,30 +242,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");
    },
@@ -325,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
@@ -335,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 })
@@ -355,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
@@ -366,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
@@ -553,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) {
@@ -568,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);
@@ -590,47 +551,138 @@
              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 that = this
      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)
        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 })

      })
      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++) {
            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]
            })
            zhandian_layer.addGraphic(graphic)
          }
        }
      });
    },

    // 场站图层
    initczLayer () {
      utils.initchangzhanLayer();
      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");
      // utils.loadGeometryById("411", "1");
      console.log("eee")
    },

    // 车辆图层
    initclLayer () {
      utils.initcheliangLayer();
      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") {

 src/views/map/zhandianinfo.vue

@@ -1,496 +1,588 @@
<template>
    <div class="v-views-map-zhandianinfo">
        <div class="header">
            <div class="in-top-box flex ju-sb align-c">
                <div class="flex">
                    <div class="header-title-i">{{zdname}}</div>
                    <div class="header-temp"></div>
                    <div class="header-switch" v-show="$store.state.mapMenu ==='站点'">
                        <el-switch class="switch" v-model="linenetwork" active-text="开" inactive-text="关" active-color="#1890ff" inactive-color="#c0c0c0" @change="changline($event,linenetwork)"></el-switch>
                    </div>
                </div>
                <div class="flex">
                    <div class="flex align-c" @click="gozhandian()">
                        <div class="small-p">查看详情</div>
                        <img class="more-img-size" src="../../assets/png/icon_more@2x.png" alt="">
                    </div>
                    <div class="header-temp"></div>
                    <div class="flex align-c">
                        <img class="close-img-size" src="../../assets/map/icon_close_s@2x.png" alt="" @click="closediv">
                    </div>
                </div>
            </div>
  <div class="v-views-map-zhandianinfo">
    <div class="header">
      <div class="in-top-box flex ju-sb align-c">
        <div class="flex">
          <div class="header-title-i">{{zdname}}</div>
          <div class="header-temp"></div>
          <div class="header-switch"
               v-show="$store.state.mapMenu ==='站点'">
            <el-switch class="switch"
                       v-model="linenetwork"
                       active-text="开"
                       inactive-text="关"
                       active-color="#1890ff"
                       inactive-color="#c0c0c0"
                       @change="changline($event,linenetwork)"></el-switch>
          </div>
        </div>
        <div class="container-info  color-white ">
            <div class="flex warp mt20">
                <div class="flex  item-info">
                    <div class="flex" >
                        <img class="img-size" src="../../assets/map/icon_shishikeliu.png" alt="">
                        <div class="divtext">
                            <div class="divnumber">{{typeof form.realTimePassengerFlow == "number" ? form.realTimePassengerFlow : '-'}}</div>
                            <div>实时客流(人次)</div>
                        </div>
                    </div>

                </div>
                <div class="flex  item-info">
                    <div class="flex" >
                        <img class="img-size" src="../../assets/map/icon_zuorikeliu.png" alt="">
                        <div class="divtext">
                            <div class="divnumber">{{typeof form.yesterdayPassengerFlow == "number" ? form.yesterdayPassengerFlow : '-'}}</div>
                            <div>昨日客流(人次)</div>
                        </div>
                    </div>

                </div>
        <div class="flex">
          <div class="flex align-c"
               @click="gozhandian()">
            <div class="small-p">查看详情</div>
            <img class="more-img-size"
                 src="../../assets/png/icon_more@2x.png"
                 alt="">
          </div>
          <div class="header-temp"></div>
          <div class="flex align-c">
            <img class="close-img-size"
                 src="../../assets/map/icon_close_s@2x.png"
                 alt=""
                 @click="closediv">
          </div>
        </div>
      </div>
    </div>
    <div class="container-info  color-white ">
      <div class="flex warp mt20">
        <div class="flex  item-info">
          <div class="flex">
            <img class="img-size"
                 src="../../assets/map/icon_shishikeliu.png"
                 alt="">
            <div class="divtext">
              <div class="divnumber">{{typeof form.realTimePassengerFlow == "number" ? form.realTimePassengerFlow : '-'}}</div>
              <div>实时客流(人次)</div>
            </div>
            <div class="flex warp mt30">
                <div class="flex  item-info">
                    <div class="flex" >
                        <img class="img-size" src="../../assets/map/icon_xianlushuliang.png" alt="">
                        <div class="divtext">
                            <div class="divnumber">{{typeof form.sumLine == "number" ? form.sumLine : '-'}}</div>
                            <div>线路数量(条)</div>
                        </div>
                    </div>

                </div>
                <div class="flex  item-info">
                    <div class="flex" >
                        <img class="img-size" src="../../assets/map/icon_zhundianlv.png" alt="">
                        <div class="divtext">
                            <div class="divnumber _green">{{form.shiftNum || '-'}}</div>
                            <div>途径班次</div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="zhuangshi">
                <div class="zhuangshitext">{{form.stationTypeName}}</div>
                <img class="zhuangshi-img-size" src="../../assets/map/shuangshi.png" alt="">
            </div>
          </div>

        </div>
        <div class="counttable" v-show="$store.state.mapMenu ==='站点' && talbestyle">
            <div class="navitem mt10 ml10">
                <!-- <div v-for="(item, index) in navitemlist" :key="index" class="navitemlist">
        <div class="flex  item-info">
          <div class="flex">
            <img class="img-size"
                 src="../../assets/map/icon_zuorikeliu.png"
                 alt="">
            <div class="divtext">
              <div class="divnumber">{{typeof form.yesterdayPassengerFlow == "number" ? form.yesterdayPassengerFlow : '-'}}</div>
              <div>昨日客流(人次)</div>
            </div>
          </div>

        </div>
      </div>
      <div class="flex warp mt30">
        <div class="flex  item-info">
          <div class="flex">
            <img class="img-size"
                 src="../../assets/map/icon_xianlushuliang.png"
                 alt="">
            <div class="divtext">
              <div class="divnumber">{{typeof form.sumLine == "number" ? form.sumLine : '-'}}</div>
              <div>线路数量(条)</div>
            </div>
          </div>

        </div>
        <div class="flex  item-info">
          <div class="flex">
            <img class="img-size"
                 src="../../assets/map/icon_zhundianlv.png"
                 alt="">
            <div class="divtext">
              <div class="divnumber _green">{{form.shiftNum || '-'}}</div>
              <div>途径班次</div>
            </div>
          </div>

        </div>
      </div>
      <div class="zhuangshi">
        <div class="zhuangshitext">{{form.stationTypeName}}</div>
        <img class="zhuangshi-img-size"
             src="../../assets/map/shuangshi.png"
             alt="">
      </div>

    </div>
    <div class="counttable"
         v-show="$store.state.mapMenu ==='站点' && talbestyle">
      <div class="navitem mt10 ml10">
        <!-- <div v-for="(item, index) in navitemlist" :key="index" class="navitemlist">
                    <div>{{item.name}}</div>
                </div> -->
                线路时段客流表(人)
            </div>
            <div class="g-table navtable ml16 mr16">
                <el-table
                    :data="tableData"
                    :height="300"
                    stripe
                    v-loading="loading"
                    header-row-class-name="table-header"
                    highlight-current-row
                    style="width: calc(100% - 32px)">
                    <el-table-column
                        prop="lineName"
                        label="线路"
                        width="80">
                        <template slot="header">
                            <div class="_table-header">
                                <div class="__icon"></div>
                                <div class="__title">时段</div>
                                <div>线路</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_0_1"
                        label="0-1点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_0_1, 0) }}</div></template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_1_2"
                        label="1-2点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_1_2, 1) }}</div></template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_2_3"
                        label="2-3点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_2_3, 2) }}</div></template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_3_4"
                        label="3-4点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_3_4, 3) }}</div></template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_4_5"
                        label="4-5点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_4_5, 4) }}</div></template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_5_6"
                        label="5-6点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_5_6, 5) }}</div></template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_6_7"
                        label="6-7点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_6_7, 6) }}</div></template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_7_8"
                        label="7-8点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_7_8, 7) }}</div></template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_8_9"
                        label="8-9点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_8_9, 8) }}</div></template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_9_10"
                        label="9-10点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_9_10, 9) }}</div></template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_10_11"
                        label="10-11点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_10_11, 10)}}</div> </template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_11_12"
                        label="11-12点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_11_12, 11)}}</div> </template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_12_13"
                        label="12-13点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_12_13, 12)}}</div> </template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_13_14"
                        label="13-14点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_13_14, 13)}}</div> </template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_14_15"
                        label="14-15点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_14_15, 14)}}</div> </template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_15_16"
                        label="15-16点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_15_16, 15)}}</div> </template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_16_17"
                        label="16-17点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_16_17, 16)}}</div> </template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_17_18"
                        label="17-18点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_17_18, 17)}}</div> </template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_18_19"
                        label="18-19点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_18_19, 18)}}</div> </template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_19_20"
                        label="19-20点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_19_20, 19)}}</div> </template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_20_21"
                        label="20-21点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_20_21, 20)}}</div> </template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_21_22"
                        label="21-22点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_21_22, 21)}}</div> </template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_22_23"
                        label="22-23点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_22_23, 22)}}</div> </template>
                    </el-table-column>
                    <el-table-column
                        prop="passengerFlow_23_24"
                        label="23-24点"
                        width="60">
                        <template slot-scope="scope"><div class="_num">{{ formatter(scope.row.passengerFlow_23_24, 23)}}</div> </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        线路时段客流表(人)
      </div>
      <div class="g-table navtable ml16 mr16">
        <el-table :data="tableData"
                  :height="300"
                  stripe
                  v-loading="loading"
                  header-row-class-name="table-header"
                  highlight-current-row
                  style="width: calc(100% - 32px)">
          <el-table-column prop="lineName"
                           label="线路"
                           width="80">
            <template slot="header">
              <div class="_table-header">
                <div class="__icon"></div>
                <div class="__title">时段</div>
                <div>线路</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_0_1"
                           label="0-1点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_0_1, 0) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_1_2"
                           label="1-2点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_1_2, 1) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_2_3"
                           label="2-3点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_2_3, 2) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_3_4"
                           label="3-4点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_3_4, 3) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_4_5"
                           label="4-5点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_4_5, 4) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_5_6"
                           label="5-6点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_5_6, 5) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_6_7"
                           label="6-7点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_6_7, 6) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_7_8"
                           label="7-8点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_7_8, 7) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_8_9"
                           label="8-9点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_8_9, 8) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_9_10"
                           label="9-10点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_9_10, 9) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_10_11"
                           label="10-11点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_10_11, 10)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_11_12"
                           label="11-12点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_11_12, 11)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_12_13"
                           label="12-13点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_12_13, 12)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_13_14"
                           label="13-14点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_13_14, 13)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_14_15"
                           label="14-15点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_14_15, 14)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_15_16"
                           label="15-16点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_15_16, 15)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_16_17"
                           label="16-17点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_16_17, 16)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_17_18"
                           label="17-18点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_17_18, 17)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_18_19"
                           label="18-19点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_18_19, 18)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_19_20"
                           label="19-20点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_19_20, 19)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_20_21"
                           label="20-21点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_20_21, 20)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_21_22"
                           label="21-22点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_21_22, 21)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_22_23"
                           label="22-23点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_22_23, 22)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="passengerFlow_23_24"
                           label="23-24点"
                           width="60">
            <template slot-scope="scope">
              <div class="_num">{{ formatter(scope.row.passengerFlow_23_24, 23)}}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
    import gauge1 from '../../components/echart/gauge1.vue'
    import { message } from 'ant-design-vue'
    import utils from "../../unit/map";
    export default {
        name: 'zhandianinfo',
        props: {
            data1: {
                type:Object,
                default(){
                    return{}
                }
            }
        },
        data() {
            return {
                show:false,
                zdname: "",
                zdid: "",
                loading: false,
                linenetwork: false,
                talbestyle: false,
                form: {
                    "stationName": "夏湾路中",
                    "stationTypeName": "中途站",
                    "realTimePassengerFlow": null,
                    "yesterdayPassengerFlow": null,
                    "sumLine": 1,
                    "headEndLeaveOnTimeRate": null
                },
                navitemlist: [],
                lindids: '',
                tableData: []
            }
        },
        components:{
            gauge1
        },

        methods: {
            getSelectDetailByName(params,id) {
                let lineID = ''
                if(this.$store.state.mapMenu == "线路"){
                    lineID = this.$store.state.lineName
                }
                this.$axios.get(this.$Interface.mapResource.getZhandianDetailById, {
                    params: { stationId: id, lineId: lineID },
                }).then((res) => {
                  if(res.code == 0) {
                    this.navitemlist = []
                    if(res.data){
                        this.form = res.data;
                        if(res.data.passLine && res.data.passLineIds){
                            let name = res.data.passLine.split(",")
                            let ids = res.data.passLineIds.split(",")
                            this.lindids = res.data.passLineIds
                            let names = res.data.passLine
                            for(let index = 0; index<ids.length;index++){
                                this.navitemlist.push({"id":ids[index],"name":name[index]})
                            }
                            this.getKeliuAllDetailByStationName(names, id)
                        }
                      } else {
                          message.warning('获取数据为空!')
                      }
                  } else {
                    message.warning('您当前网络不稳定,未获取到数据!')
                  }
                });
            },
            getKeliuAllDetailByStationName(lineids, id){
                this.$axios.get(this.$Interface.mapResource.getListStationLinePassengerFlow, {
                    params: { passLine: lineids, stationId: id },
                }).then((res) => {
                  if(res.code == 0) {
                    if(res.data){
                        // this.tableData = res.data;
                        // this.tableData = this.navitemlist.map((item, index) => {
                        //     console.log(item, 'i', index);
                            
                        //     return {
                        //         lineName: item.name,
                        //         ...res.data[index]
                        //     }
                        // }) ;
                        this.tableData = res.data;
                        // console.log( this.tableData, ' this.tableData');
                        
                      } else {
                          message.warning('获取数据为空!')
                      }
                  } else {
                    message.warning('您当前网络不稳定,未获取到数据!')
                  }
                });
            },
            changline(row){
                utils.loadLineNetworkByName(this.zdid,this.zdname,row)
                this.talbestyle = true
            },
            initstate(){
                this.linenetwork = false
            },
            closediv(){
                this.talbestyle = false
                this.$emit("closediv","zhandian")
            },
            gozhandian(){
                this.$router.push({ path: '/branchOfficeResource', query: { sence: 5, siteName: this.zdname }})
            }
        },
        mounted() {
            // this.initstate()
        },
        watch: {
            "$store.state.selAttr": function(newVal,oldVal){
            if(newVal.visa && newVal.type == "zhandian"){
                this.zdname = newVal.value
                this.zdid = newVal.id
                this.getSelectDetailByName(newVal.value,newVal.id)
                // this.initstate()
            }
        }

import gauge1 from '../../components/echart/gauge1.vue'
import { message } from 'ant-design-vue'
import utils from "../../unit/map";
export default {
  name: 'zhandianinfo',
  props: {
    data1: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      show: false,
      zdname: "",
      zdid: "",
      loading: false,
      linenetwork: false,
      talbestyle: false,
      form: {
        "stationName": "夏湾路中",
        "stationTypeName": "中途站",
        "realTimePassengerFlow": null,
        "yesterdayPassengerFlow": null,
        "sumLine": 1,
        "headEndLeaveOnTimeRate": null
      },
      navitemlist: [],
      lindids: '',
      tableData: []
    }
  },
  components: {
    gauge1
  },

  methods: {
    getSelectDetailByName (params, id) {
      let lineID = ''
      if (this.$store.state.mapMenu == "线路") {
        lineID = this.$store.state.lineName
      }
      this.$axios.get(this.$Interface.mapResource.getZhandianDetailById, {
        params: { stationId: id, lineId: lineID },
      }).then((res) => {
        if (res.code == 0) {
          this.navitemlist = []
          if (res.data) {
            this.form = res.data;
            if (res.data.passLine && res.data.passLineIds) {
              let name = res.data.passLine.split(",")
              let ids = res.data.passLineIds.split(",")
              this.lindids = res.data.passLineIds
              let names = res.data.passLine
              for (let index = 0; index < ids.length; index++) {
                this.navitemlist.push({ "id": ids[index], "name": name[index] })
              }
              this.getKeliuAllDetailByStationName(names, id)
            }
          } else {
            message.warning('获取数据为空!')
          }
        } else {
          message.warning('您当前网络不稳定,未获取到数据!')
        }
      });
    },
    getKeliuAllDetailByStationName (lineids, id) {
      this.$axios.get(this.$Interface.mapResource.getListStationLinePassengerFlow, {
        params: { passLine: lineids, stationId: id },
      }).then((res) => {
        if (res.code == 0) {
          if (res.data) {
            // this.tableData = res.data;
            // this.tableData = this.navitemlist.map((item, index) => {
            //     console.log(item, 'i', index);

            //     return {
            //         lineName: item.name,
            //         ...res.data[index]
            //     }
            // }) ;
            this.tableData = res.data;
            // console.log( this.tableData, ' this.tableData');

          } else {
            message.warning('获取数据为空!')
          }
        } else {
          message.warning('您当前网络不稳定,未获取到数据!')
        }
      });
    },
    changline (row) {
      console.log("eee")
      // utils.loadLineNetworkByName(this.zdid,this.zdname,row)
      this.talbestyle = true
    },
    initstate () {
      this.linenetwork = false
    },
    closediv () {
      this.talbestyle = false
      this.$emit("closediv", "zhandian")
    },
    gozhandian () {
      this.$router.push({ path: '/branchOfficeResource', query: { sence: 5, siteName: this.zdname } })
    }
  },
  mounted () {
    // this.initstate()
  },
  watch: {
    "$store.state.selAttr": function (newVal, oldVal) {
      if (newVal.visa && newVal.type == "zhandian") {
        this.zdname = newVal.value
        this.zdid = newVal.id
        this.getSelectDetailByName(newVal.value, newVal.id)
        // this.initstate()
      }
    }

  }
}
</script>
<style lang="less">
    .v-views-map-zhandianinfo {
        width: 536px;
        height: 229px;
        opacity: 0.8;
        background: linear-gradient(180deg,#06203f, #08141c);
        border: 2px solid #2a488a;
        .el-table tr {
            background: #0289B2!important;
            height: 30px;
        }
        .g-table .table-header th {
            height: 30px !important;
            line-height: 16px;
        }
        .el-table .el-table__cell {
             padding: 0;

        }
        ._num {
            color: #FFFFFF;
            font-family: 'Digital';
            font-size: 18px;
            
        }
        .header{width:100%;height:44px;background:url("../../assets/png/header_bg_info.png") no-repeat center/cover;}
        .in-top-box{width:90%;height:34px; margin:0 auto;}
        .header-title-i{color:#333;font-weight: 600;font-size:16px;}
        .small-p{color:#00f09b;font-size:14px;}
        .more-img-size{width:12px;height:12px}
        .divtext {padding-left: 10px; text-align: left;}
        .divnumber {font-family:'Digital';font-size: 22px;color:#69CCFF}
        ._green {
        color: #00FFB5 
        }
        .container-info{width:460px;margin:15px auto 0;}
        .item-info{width:40%;text-align: center;position:relative}
        .img-size{width:48px;height:48px;}
        .line-fg{height: 1px;opacity: 0.4;border: 1px solid #2a4a8e;}
        .title-b{position: absolute;bottom:0;left:0;right:0;margin:0 auto;font-size:12px;}
        .zhuangshi {position:absolute;right:2px;top:107px;}
        .zhuangshitext {
            position:absolute;bottom:22px;right:23px;transform: rotate(-45deg);
            font-family: 'PingFangSC';
            text-shadow: 0px 0px 20px #ffcc00; 
            font-size: 16px;
            font-weight: 500;
        }
        .counttable {
            width: 100%;
            display: flex;
            flex-direction: column;
            top: 50px;
            position: relative;
            opacity: 0.8;
            background: linear-gradient(180deg,#06203f, #08141c);
            border: 2px solid #2a488a;
            .navitem{
                display: flex;
                color: #08141c;
                padding-left: 10px;
                height: 30px;
                width: 100%;
                color: #333;
                font-weight: 600;
                font-size: 15px;
                line-height: 30px;
                // background: linear-gradient(90deg,rgba(255,255,255,1), rgba(255,255,255,0.1));
                color: #B7EAFF;
                font-family: 'PingFangSC';
                .navitemlist {
                    padding-left:10px;
                    line-height: 30px;
                

                }
            }
            .navtable {
                width: 100%;
                padding-top: 5px;
            }


        }
        .switch .el-switch__label {
            position: absolute;
            display: none;
        }

       .el-switch__core {
            width: 45px !important;
            border: 1px solid rgb(112 114 116) !important;
        }
        .switch .el-switch__label--right {
            z-index: 1;
        }
        /*显示文字*/
        .switch .el-switch__label.is-active {
            display: block;
        }
        .switch .el-switch__label--right span{
            padding-right: 9px;
            color:#fff;
            font-weight: 600;
        }
        .switch .el-switch__label--left {
            z-index: 1;
        }
        .switch .el-switch__label--left span{
            padding-left: 25px;
            color:#fff;
            font-weight: 600;
        }

.v-views-map-zhandianinfo {
  width: 536px;
  height: 229px;
  opacity: 0.8;
  background: linear-gradient(180deg, #06203f, #08141c);
  border: 2px solid #2a488a;
  .el-table tr {
    background: #0289b2 !important;
    height: 30px;
  }
  .g-table .table-header th {
    height: 30px !important;
    line-height: 16px;
  }
  .el-table .el-table__cell {
    padding: 0;
  }
  ._num {
    color: #ffffff;
    font-family: "Digital";
    font-size: 18px;
  }
  .header {
    width: 100%;
    height: 44px;
    background: url("../../assets/png/header_bg_info.png") no-repeat
      center/cover;
  }
  .in-top-box {
    width: 90%;
    height: 34px;
    margin: 0 auto;
  }
  .header-title-i {
    color: #333;
    font-weight: 600;
    font-size: 16px;
  }
  .small-p {
    color: #00f09b;
    font-size: 14px;
  }
  .more-img-size {
    width: 12px;
    height: 12px;
  }
  .divtext {
    padding-left: 10px;
    text-align: left;
  }
  .divnumber {
    font-family: "Digital";
    font-size: 22px;
    color: #69ccff;
  }
  ._green {
    color: #00ffb5;
  }
  .container-info {
    width: 460px;
    margin: 15px auto 0;
  }
  .item-info {
    width: 40%;
    text-align: center;
    position: relative;
  }
  .img-size {
    width: 48px;
    height: 48px;
  }
  .line-fg {
    height: 1px;
    opacity: 0.4;
    border: 1px solid #2a4a8e;
  }
  .title-b {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 12px;
  }
  .zhuangshi {
    position: absolute;
    right: 2px;
    top: 107px;
  }
  .zhuangshitext {
    position: absolute;
    bottom: 22px;
    right: 23px;
    transform: rotate(-45deg);
    font-family: "PingFangSC";
    text-shadow: 0px 0px 20px #ffcc00;
    font-size: 16px;
    font-weight: 500;
  }
  .counttable {
    width: 100%;
    display: flex;
    flex-direction: column;
    top: 50px;
    position: relative;
    opacity: 0.8;
    background: linear-gradient(180deg, #06203f, #08141c);
    border: 2px solid #2a488a;
    .navitem {
      display: flex;
      color: #08141c;
      padding-left: 10px;
      height: 30px;
      width: 100%;
      color: #333;
      font-weight: 600;
      font-size: 15px;
      line-height: 30px;
      // background: linear-gradient(90deg,rgba(255,255,255,1), rgba(255,255,255,0.1));
      color: #b7eaff;
      font-family: "PingFangSC";
      .navitemlist {
        padding-left: 10px;
        line-height: 30px;
      }
    }
    
    .navtable {
      width: 100%;
      padding-top: 5px;
    }
  }
  .switch .el-switch__label {
    position: absolute;
    display: none;
  }

  .el-switch__core {
    width: 45px !important;
    border: 1px solid rgb(112 114 116) !important;
  }
  .switch .el-switch__label--right {
    z-index: 1;
  }
  /*显示文字*/
  .switch .el-switch__label.is-active {
    display: block;
  }
  .switch .el-switch__label--right span {
    padding-right: 9px;
    color: #fff;
    font-weight: 600;
  }
  .switch .el-switch__label--left {
    z-index: 1;
  }
  .switch .el-switch__label--left span {
    padding-left: 25px;
    color: #fff;
    font-weight: 600;
  }
}
</style>