BJYSYBZ/WEB-VIEW/src/views/components/BigScreenMap/index.vue

<template>
  <vl-map
    class-name="overview-map"
    :map.sync="map"
    projection="EPSG:4490"
    @loaded="mapLoaded"
  >
    <vl-china-cities :enabled="false" @pick="(fea) => (feature = fea)" />
    <vl-map-dev-info
      :top="140"
      :show-panel="false"
      @info-update="(v) => (viewInfo = v)"
    />

    <vl-config-layers
      ref="configLayer"
      :layers-config="layersConfig"
      :visible-layer-ids="realLayers"
      @loaded="configLayerLoaded"
    />
    <vl-tool-bar :height="34" :radius="4">
      <vl-tool-bar-item
        no-padding
        class="tool-box"
        style="width: 110px !important;color: #FFF"
      >
        <vl-tool-box
          ref="toolBox"
          :enable-scope-sketch="false"
          @drawend="drawend"
          style="width: 110px"
        />
      </vl-tool-bar-item>
      <vl-tool-bar-item
        no-padding
        style="margin-left: 10px;"
        v-show="layerShow"
        title="图层"
      >
        <vl-layer-tree :enabled-layers="enabledLayersConfig" />
      </vl-tool-bar-item>
    </vl-tool-bar>

    <VlImglayers
      :imgLayers="imgLayers"
      @change="vlImgLayerChangeHandle"
      @change1="vlImgLayerChangeHandle1"
      @sliderChange="vlImgLayerSliderChangeHandle"
      @sliderChange1="vlImgLayerSliderChangeHandle1"
    >
    </VlImglayers>
    <vl-feature-flicker
      :feature="feature"
      new-layer
      :duration="2400"
      :interval="800"
    />
    <!-- 详情 -->
  </vl-map>
</template>
<script>
import { mapGetters, mapState } from 'vuex';
import MapUtils from '@/utils/MapUtils';
import olMapUtils from '@/utils/OlMapUtils';
import 'ol/ol.css';
import DragPan from 'ol/interaction/DragPan';
import VlMap from '@/components/ol/VlMap';
import { getMapLayerConfig } from '@/components/ol/_utils/map-layer-utils';
import { VlConfigLayers, VlLayerTree } from '@/components/ol/VlConfigLayers';
import { VlToolBar, VlToolBarItem } from '@/components/ol/VlToolBar';
import {
  VlFeatureFlicker,
  VlFeatureOverlay,
} from '@/components/ol/VlFeatureTool';
import VlImglayers from '@/components/ol/VLImgLayers';
import { arcgisQuery } from '@/utils/arcgis-map-server-query';
import { GeoServerQuery } from '@/utils/geo-map-server-query'
import VlMapDevInfo from '@/components/ol/VlMapDevInfo';
import VlChinaCities from '@/components/ol/VlChinaCities';
import { MultiPolygon, Point } from 'ol/geom';
import { getSrid, mapFit, toArcGIS } from '@/utils/arcgis-utils';
import { Stroke, Style } from 'ol/style';
import { Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';
import EChartsLayer from 'ol-echarts';
import { XZQ } from '@/utils/constant/Constant.js';
import { scatter_bg4, bg_text } from './base64Img.js';
import { Geometry as WkxGeometry } from 'wkx';
import { GeoJSON } from 'ol/format';
import { convertRingsToGeoJSON } from '@/utils/ArcGISGeoJSONConvertTool.js';
import { Fill, Text, Icon } from 'ol/style';
import VlToolBox from '@/components/ol/VlToolBox';

import TABLE_COMP_MAPPING from './TABLE_COMP_MAPPING.js';
import { getArea } from 'ol/sphere';
import TdytMapping from '@/mock/TdytMapping.js';

import HeatmapLayer from 'ol/layer/Heatmap';
import hotJson from '@/assets/geoJson/GYYDPT4490.json';
import { Feature } from 'ol';
export default {
  name: 'BigScreenMap',
  computed: {
    ...mapState({
      xzqNameState: (state) => state.BaseData.xzqState,
      mapDataOne: (state) => state.BaseData.TDG,
    }),
    ...mapGetters({
      xzqdm: 'BaseData/xzqCodeGetter',
    }),
  },
  components: {
    VlFeatureOverlay,
    VlChinaCities,
    VlMapDevInfo,
    VlLayerTree,
    VlFeatureFlicker,
    VlToolBarItem,
    VlToolBar,
    VlConfigLayers,
    VlMap,
    VlToolBox,
    VlImglayers,
  },
  filters: {},
  props: {
    districtCode: {
      type: String,
      default: '33',
    },
    imgLayers: Array,
    title: {
      type: String,
      default: '',
    },
    visibleLayerIds: {
      type: Array,
      default: () => [],
    },
    overlayShow: {
      type: Boolean,
      default: false,
    },
    layerShow: {
      type: Boolean,
      default: false,
    },
    defaultLayerId: {
      type: String,
      default: '',
    },
    fixed: {
      type: Number,
      default: 0,
    },
    GZData: {
      type: Array,
      default() {
        return [];
      },
    },
    legendShow: {
      type: Boolean,
      default: true,
    },
    defaultExpand: {
      type: Boolean,
      default: true,
    },
    townShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      mapPointList: [],
      pointLayerSource: null,
      pointLayer: null, // 绘制地图中心点的图层
      map: undefined,
      mapDragPan: null,
      visibleLayerId: '',
      detailData: {},
      detailType: 1,
      layerFeatureKey: undefined,
      viewInfo: {
        x: 120,
        y: 30,
        center: [0, 0],
        zoom: 0,
        extent: [0, 0, 0, 0],
        scale: 1,
      },
      layersConfig: getMapLayerConfig(), // getMapLayerConfig 获取的是 config.js 配置的克隆
      enabledLayersConfig: [], // 启用的图层配置，来源于 vl-config-layers 的loaded事件回调
      feature: undefined, // 闪烁和气泡的 特征
      districtFeature: undefined, // 行政区的特征
      showDetail: false,
      echartslayer: null,
      showLifeCircle: false,
      xzqType: 'city',
      xzqName: '',
      realLayers: [],
      lifeCycleShow: false,
      vectorGeo: null,
      vmEventType: '',
      tdytMapping: {
        1: '工业用地',
        2: '商服用地',
        3: '住宅用地',
        4: '其他用地',
      },
      isIconBool: false,
      isShowIcon: false,
      echartsLayerClickHandle: null,
      layerIndex: '0', //图层级别默认为0
      heatMapLayer: null,
      tzzxShow: false,
      geoSource: new VectorSource(),
      geoLayer: undefined,
      isgyyd: '',
      kgLayer: null,
    };
  },
  watch: {
    GZData: {
      immediate: true,
      deep: true,
      handler: function() {
        // 迁徙图图层初始化
        this.echartsLayerLoad();
      },
    },
    visibleLayerIds: {
      immediate: true,
      deep: true,
      handler() {
        this.visibleLayerId = this.visibleLayerIds[0];
      },
    },
  },
  mounted() {
    setTimeout(() => {
      this.map.getView().setCenter([120.1748818095, 30.12907927]);
    }, 1000);
    this.$vm.$on('setLayerIndexEvent', (index) => {
      this.layerIndex = index;
    });
    let _initZoom = 8;
    const _clientW = document.documentElement.clientWidth;
    if (parseInt(_clientW) > 2000) {
      setTimeout(() => {
        _initZoom = 8.5;
        this.map.getView().setZoom(_initZoom);
      }, 200);
    }
    this.$vm.$on('updateLayer', (payload) => {
      const { id, param, layerIdx1, layerIdx2 } = payload;
      let params = {};
      if (layerIdx2 != null) {
        params = {
          layers: `show:${layerIdx1},${layerIdx2}`,
          layerDefs: {
            [layerIdx1]: param,
            [layerIdx2]: param,
          },
        };
      } else {
        params = {
          layers: `show:${layerIdx1}`,
          layerDefs: {
            [layerIdx1]: param,
          },
        };
      }
      let layer = this.getLayerById(id);
      layer.setVisible(true);
      const source = layer.getSource();
      source.updateParams(params);
    });
    this.$vm.$on('refreshLayer', (id) => {
      this.feature = null;
      if (id) {
        let layer = this.getLayerById(id);
        layer.setVisible(true);
        const source = layer.getSource();
        source.refresh();
      }
    });
    this.$vm.$on('setTzzxShow', (payload) => {
      this.tzzxShow = payload;
    });
    this.$vm.$on('setEchartsLayerClickHandle', (handle) => {
      this.echartsLayerClickHandle = handle;
    });
    this.$vm.$on('getGdDetailData', (payload) => {
      this.detailData = payload;
    });
    this.$vm.$on('setGdDetailType', (payload) => {
      this.detailType = payload;
    });
    this.$vm.$on('location-init', () => {
      this.feature = null;
      this.$vm.$emit('switchLayerShow', true);
      if (this.xzqNameState != '' && this.xzqNameState != '浙江省') {
        this.locationMaskFeatureHttp(this.xzqNameState, this.visibleLayerId);
      } else {
        setTimeout(() => {
          if (this.map) {
            if (window.vtLayer) {
              this.map.removeLayer(window.vtLayer);
            }
            this.map
              .getView()
              .setCenter([120.45690944408925, 29.248390754380974]);
            this.map.getView().setZoom(7.85);
          }
        }, 0);
      }
    });
    //改变图层显示
    this.$vm.$on('change-layer', () => {
      this.feature = null;
      this.removeHotLayer();
      this.$vm.$emit('switchLayerShow', true);
    });
    this.$vm.$on('clear-layer', () => {
      if (this.vectorGeo != null) {
        this.vectorGeo.getSource().clear();
        this.vectorGeo = null;
      }
    });
    this.$vm.$on('setLayerIdEvent', (name) => {
      if (!name) {
        this.visibleLayerId = this.visibleLayerIds[
          this.visibleLayerIds.length - 1
        ];
      } else {
        this.visibleLayerId = name;
      }
    });
    this.$vm.$on('location-feature', (payload) => {
      //根据dzjgh进行图斑定位
      const { dzjgh } = payload;
      this.locationFeatureHttp(dzjgh, this.visibleLayerId);
    });
    this.$vm.$on('location-feature-where', (payload) => {
      //根据dzjgh进行图斑定位
      const { layerId, where, setting = {}, isFit = false } = payload;
      this.locationFeatureWhere(layerId, where, setting);
    });
    this.$vm.$on('addPoint', (city) => {
      //根据dzjgh进行图斑定位
      this.addPoints(city);
    });
    this.$vm.$on('location-more-feature-where', (payload) => {
      //根据dzjgh进行图斑定位
      const { layerId, where, setting = {} } = payload;
      this.locationMoreFeatureWhere(layerId, where, setting);
    });
    this.$vm.$on('location-mask-feature', (payload) => {
      //根据dzjgh进行图斑定位
      const { dzjgh } = payload;
      this.locationMaskFeatureHttp(dzjgh, this.visibleLayerId);
    });
    this.$vm.$on('location-mask-self-where', (payload) => {
      //根据dzjgh进行图斑定位
      const { layerId, where } = payload;
      this.locationMaskFeatureWhere(layerId, where);
    });
    this.$vm.$on('showIconEvent', (name, type) => {
      if (!this.isIconBool) return;
      let id = '';
      switch (name) {
        case '已批未征':
          id = 'pewg-ypwz';
          break;
        case '规划调整':
          id = 'pewg-ghtz';
          break;
        case '项目未落实':
          id = 'pewg-xmwls';
          break;
        case '手续未完善':
          id = 'pewg-sxwws';
          break;
        case '储备土地':
          id = 'pewg-zbtd';
          break;
        case '供地前期工作':
          id = 'pewg-gdqqgz';
          break;
        case '零星难利用':
          id = 'pewg-lxnly';
          break;
        case '农转用无法调整':
          id = 'pewg-nzywftz';
          break;
        case '其他原因':
          id = 'pewg-qtyy';
          break;
        case '待认定':
          id = 'pewg-drd';
          break;
      }
      this.$vm.$emit('setLandMapLayerContro', { type: type, id: id });
    });
    //根据图层ID显示响应图层
    this.$vm.$on('setLandMapLayerContro', (payload) => {
      const { parentId, type, id } = payload;
      const landMapLayers = this.enabledLayersConfig[1]['children'];
      if (parentId) {
        for (let i = 0; i < landMapLayers.length; i++) {
          if (landMapLayers[i]['id'] === parentId) {
            landMapLayers[i]['visible'] = true;
            break;
          }
        }
      }
      if (id) {
        for (let i = 0; i < landMapLayers.length; i++) {
          if (landMapLayers[i]['id'] === id) {
            setTimeout(() => {
              landMapLayers[i]['visible'] = type == 'hide' ? false : true;
            }, 1000);
            break;
          }
        }
      }
    });

    this.$vm.$on('switchLayerShow', (boolean) => {
      if (boolean) {
        this.feature = null;
        this.visibleLayerId = this.visibleLayerIds[0];
        this.realLayers = JSON.parse(JSON.stringify(this.visibleLayerIds));
      } else {
        this.realLayers = [];
      }
    });
    this.$vm.$on('GlobalStatisticsLayer', (payload) => {
      let { layerId, setting } = payload;
      this.statisticsLayer(layerId, setting);
    });
  },
  beforeDestroy() {
    // 修复 页面大小改变时 echartslayer 未销毁
    this.echartslayer && this.echartslayer.remove();
  },
  methods: {
    addPoints(city) {
      // 地理坐标数组
      if (this.pointLayer) {
        this.mapPointList = [];
        this.map.removeLayer(this.pointLayer);
        this.pointLayer = null;
      }
      const pointData = [city];
      pointData.map((item) => {
        // 创建点
        const point = new Feature({
          geometry: new Point([item.longitude, item.latitude]),
          data: item,
        });
        // 点的样式
        const iconStyle = new Style({
          image: new Icon({
            color: '#ffffff',
            crossOrigin: 'anonymous',
            src: require('../../../assets/images/webview/dian.png'), // 图片url,
          }),
        });
        // 设置样式
        point.setStyle(iconStyle);
        this.mapPointList.push(point);
      });

      // 创建geojson据源
      this.pointLayerSource = new VectorSource({ features: this.mapPointList });
      // 创建图层 并加载数据
      this.pointLayer = new VectorLayer({ source: this.pointLayerSource });
      // 将图层添加地图上
      this.pointLayer.setZIndex(1003);
      this.map.addLayer(this.pointLayer);
    },

    initHotLayer(field) {
      this.heatMapLayer = new HeatmapLayer({
        source: new VectorSource({
          features: new GeoJSON().readFeatures(hotJson),
          // 我们使用json数据
          // url: require('@/assets/geojson/dxccHotlayer.json'),
          // format: new GeoJSON()
        }),
        // 这里可以根据自己项目的实际，绑定页面的控件动态调整
        blur: 8,
        radius: 6,
        weight: weightFunction,
      });

      /*
       *设置权重
       */
      function weightFunction(feature) {
        var weight = feature.get(field);
        weight = parseFloat(weight);
        // weight = parseFloat(weight) / 10;
        return weight;
      }

      // this.heatMapLayer.getSource().on('addfeature', function(event) {
      //
      //   //var place = event.feature.get('place');
      //   var magnitude = event.feature.get('mjss');
      //   //设定权重减去的数字是为了过滤地震等级，比如只想显示3级以上地震，那就减去3
      //   event.feature.set('weight', magnitude);
      // });
      this.heatMapLayer.setZIndex(999);
      this.map.addLayer(this.heatMapLayer);
    },
    vlImgLayerChangeHandle(val) {
      this.visibleLayerId = 'bj-kgdk';
      const layer = this.$refs.configLayer.getLayerConfigById(
        this.visibleLayerId,
      );
      layer.enabled = true;
      layer.visible = val;
      if (!val) {
        this.visibleLayerId = this.visibleLayerIds[0];
      }
    },
    vlImgLayerChangeHandle1(val) {
      this.visibleLayerId = 'bjq-gd';
      const layer = this.$refs.configLayer.getLayerConfigById(
        this.visibleLayerId,
      );
      layer.enabled = true;
      layer.visible = val;
      if (!val) {
        this.visibleLayerId = this.visibleLayerIds[0];
      }
    },
    vlImgLayerSliderChangeHandle(val) {
      this.visibleLayerId = 'bj-kgdk';
      const layer = this.$refs.configLayer.getLayerConfigById(
        this.visibleLayerId,
      );
      layer.opacity = val / 100;
    },
    vlImgLayerSliderChangeHandle1(val) {
      this.visibleLayerId = 'bjq-gd';
      const layer = this.$refs.configLayer.getLayerConfigById(
        this.visibleLayerId,
      );
      layer.opacity = val / 100;
    },
    removeHotLayer() {
      this.map.removeLayer(this.heatMapLayer);
      this.heatMapLayer = null;
    },
    clearGeoLayer() {
      if (this.geoLayer && this.geoSource) {
        this.geoSource.clear();
        this.map.removeLayer(this.geoLayer);
      }
    },
    addGeoLayer(geoJson) {
      if (this.geoLayer && this.geoSource) {
        this.geoSource.clear();
        this.map.removeLayer(this.geoLayer);
      }
      this.geoSource.addFeatures(new GeoJSON().readFeatures(geoJson));

      this.geoLayer = new VectorLayer({
        source: this.geoSource,
        style: function(feature) {
          return new Style({
            stroke: new Stroke({
              width: 1,
              color: 'rgba(255, 255, 255, 1)',
            }),
            fill: new Fill({
              color: feature.get('color'),
            }),
            // text: new Text(({
            //   // 位置
            //   textAlign: 'center',
            //   // 基准线
            //   textBaseline: 'middle',
            //   // 文字样式
            //   font: 'bold 16px 微软雅黑',
            //   // 文本内容
            //   text: feature.get('name')+'\n'+feature.get('value')+' '+feature.get('unit'),
            //   // 文字颜色
            //   fill: new Fill({ color: '#FFF' }),
            //   // fill: new Fill({ color: feature.get('color') }),
            //   // 文字背景
            //   // stroke: new Stroke({ color: '#ffcc33', width: 10 })
            // }))
          });
        },
        zIndex: 99,
      });
      this.map.addLayer(this.geoLayer);
      // this.map.getView().fit(this.geoLayer.getSource().getExtent(), { duration: 500 })
      // let selectClick = new interaction.Select();
      // this.map.addInteraction(selectClick);
      // selectClick.on('select', (e)=>{
      //   var features=e.target.getFeatures().getArray();
      //   this.$emit('mapSelect',features[0].getProperties())
      // })

      return this.geoLayer;
      // this.geoLayer.setMap(this.map)
    },
    addGeoLayer2(geoJson) {
      if (this.geoLayer && this.geoSource) {
        this.geoSource.clear();
        this.map.removeLayer(this.geoLayer);
      }
      this.geoSource.addFeatures(new GeoJSON().readFeatures(geoJson));

      this.geoLayer = new VectorLayer({
        source: this.geoSource,
        style: function() {
          return new Style({
            stroke: new Stroke({
              width: 1,
              color: '#4AD808',
            }),
            fill: new Fill({
              color: '#4AD808',
            }),
            // text: new Text(({
            //   // 位置
            //   textAlign: 'center',
            //   // 基准线
            //   textBaseline: 'middle',
            //   // 文字样式
            //   font: 'bold 16px 微软雅黑',
            //   // 文本内容
            //   text: feature.get('name')+'\n'+feature.get('value')+' '+feature.get('unit'),
            //   // 文字颜色
            //   fill: new Fill({ color: '#FFF' }),
            //   // fill: new Fill({ color: feature.get('color') }),
            //   // 文字背景
            //   // stroke: new Stroke({ color: '#ffcc33', width: 10 })
            // }))
          });
        },
        zIndex: 99,
      });
      this.map.addLayer(this.geoLayer);
      // this.map.getView().fit(this.geoLayer.getSource().getExtent(), { duration: 500 })
      // let selectClick = new interaction.Select();
      // this.map.addInteraction(selectClick);
      // selectClick.on('select', (e)=>{
      //   var features=e.target.getFeatures().getArray();
      //   this.$emit('mapSelect',features[0].getProperties())
      // })

      return this.geoLayer;
      // this.geoLayer.setMap(this.map)
    },
    filterTdyt(val) {
      if (!val) return;
      if (!TdytMapping[val.trim()]) {
        return '';
      } else {
        return TdytMapping[val.trim()];
      }
    },
    showLandDetail(props) {
      this.$vm.$emit('yqModalShow', props);
    },
    showSpDetail(props) {
      this.$vm.$emit('showSpDetail', props);
    },
    async locationMoreFeatureWhere(layerId, where, setting = {}) {
      const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
      if (!layerById) {
        console.error(`no layer id`);
        return;
      }
      if (layerById.serverType === 'wms') {
        await GeoServerQuery(`${layerById.queryUrl}`, {
          typeName: layerById.params.layers,
          cql_filter: where
        }, true).then(({ features }) => {
          const json = { type: "FeatureCollection", features: [] };
          json.features.push(
            features[0].geometry
          );
          this.drawShadeLayer(json);
        })
      } else { 
        await arcgisQuery(
          `${layerById.url}/${this.layerIndex}/query`,
          {
            outSR: getSrid(this.map),
            where,
            ...setting,
          },
          false,
        ).then(({ features }) => {
          let json = { type: 'FeatureCollection', features: [] };
          features.forEach((it) => {
            json.features.push(convertRingsToGeoJSON(it.geometry.rings));
          });
          this.drawShadeLayer(json);
        });
      }
    },
    drawShadeLayer (json) {
      if (this.vectorGeo != null) {
        this.vectorGeo.getSource().clear();
        this.vectorGeo = null;
      }
      // 使用GeoJSON构建source
      const source = new VectorSource({
        features: new GeoJSON().readFeatures(json),
      });
      this.vectorGeo = new VectorLayer({
        source: source,
        style: new Style({
          fill: new Fill({
            // 填充
            color: 'rgba(0,255,0, 0.6)',
          }),
          stroke: new Stroke({
            width: 5,
            color: '#00FF00',
          }),
        }),
        zIndex: 99,
      });
      this.map.addLayer(this.vectorGeo);
      this.map.getView().fit(source.getExtent(), {
        duration: 500,
        maxZoom: 17,
      });
    },
    locationByGeoJson(geos) {
      this.feature = new GeoJSON().readFeatures(geos)[0];
    },
    locationByGeoJsonColor(geos, color, width) {
      let source = new VectorSource({
        features: new GeoJSON().readFeatures(geos),
      });
      let geoLayer = new VectorLayer({
        source: source,
        // 设置样式，边框和填充
        style: new Style({
          stroke: new Stroke({
            color: color,
            width: width,
          }),
          // fill: new Fill({
          //   color: 'rgba(255, 255, 0, 0.5)'
          // })
        }),
        zIndex: 999,
      });
      // 添加GeoJSON到map上
      this.map.addLayer(geoLayer);

      this.map.getView().fit(source.getExtent(), {
        duration: 500,
        maxZoom: 17,
      });
    },
    async locationFeatureHttp(
      bsm,
      layerId,
      { feature = undefined, row = undefined } = {},
    ) {
      this.layerFeatureKey = TABLE_COMP_MAPPING[layerId].layerField;
      layerId = layerId || this.visibleLayerId;
      const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
      if (!layerById) {
        console.error(`no layer id`);
        return;
      }
      if (layerId == 'pewg_1') {
        if (bsm) {
          this.spinShow = true;

          if (!feature) {
            const where = `${this.layerFeatureKey} = '${bsm}'`;
            await arcgisQuery(
              `${layerById.url}/${this.layerIndex}/query`,
              {
                outSR: getSrid(this.map),
                where,
              },
              false,
            ).then(({ features }) => {
              const geos = {
                type: 'FeatureCollection',
                features: [
                  {
                    type: 'Feature',
                    geometry: {
                      type: 'MultiPolygon',
                      coordinates: [],
                    },
                    properties: {},
                  },
                ],
              };
              let temp = [];
              features.forEach((it) => {
                temp = [...temp, ...it['geometry']['rings']];
              });
              geos['features'][0]['geometry']['coordinates'] = [[...temp]];
              feature = new GeoJSON().readFeatures(geos)[0];
            });
          }
          if (row) {
            feature.setProperties({ ...row });
          }
          this.spinShow = false;
        }
        if (feature) {
          const geometry = feature.getGeometry();
          const wkt = WkxGeometry.parseGeoJSON(
            new GeoJSON().writeGeometryObject(geometry),
          ).toWkt();

          feature.set('wkt', wkt);
          this.feature = feature;
          this.$vm.$emit('getGeoData', feature); //初始化土地生命周期geo/feature参数
        }
      } else {
        if (bsm) {
          this.spinShow = true;

          if (!feature) {
            const where = `${this.layerFeatureKey} = '${bsm}'`;
            await arcgisQuery(
              `${layerById.url}/${this.layerIndex}/query`,
              {
                outSR: getSrid(this.map),
                where,
              },
              true,
            ).then(({ features }) => {
              feature = features[0];
            });
          }
          if (row) {
            feature.setProperties({ ...row });
          }
          this.spinShow = false;
        }
        if (feature) {
          const geometry = feature.getGeometry();
          const wkt = WkxGeometry.parseGeoJSON(
            new GeoJSON().writeGeometryObject(geometry),
          ).toWkt();
          feature.set('wkt', wkt);
          this.feature = feature;
          this.$vm.$emit('getGeoData', feature); //初始化土地生命周期geo/feature参数
        }
      }
    },
    async locationFeatureWhere(layerId, where, setting) {
      this.spinShow = true;
      const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
      if (layerById.serverType === 'wms') {
        await GeoServerQuery(`${layerById.queryUrl}`, {
          typeName: layerById.params.layers,
          cql_filter: where
        }, true).then(({ features }) => {
          this.feature = features[0]
        })
      } else {
        await arcgisQuery(
          `${layerById.url}/${this.layerIndex}/query`,
          {
            outSR: getSrid(this.map),
            where,
            ...setting,
          },
          true
        ).then(({ features }) => {
          let feature = features[0];
          this.feature = feature;
        });
      }
      const geometry = this.feature.getGeometry();
      const wkt = WkxGeometry.parseGeoJSON(
        new GeoJSON().writeGeometryObject(geometry)
      ).toWkt();
      this.feature.set("wkt", wkt);
      setTimeout(() => {
        let [width, height] = this.map.getSize();
        width = Math.ceil(width / 5);
        height = Math.ceil(height / 5);
        this.map.getView().fit(geometry.getExtent(), {
          padding: [height, width, height + 340, width],
          duration: 500,
          maxZoom: 18,
        });
      }, 500);

      this.spinShow = false;
    },
    async locationMaskFeatureHttp(
      bsm,
      layerId,
      { feature = undefined, row = undefined } = {},
    ) {
      this.layerFeatureKey = TABLE_COMP_MAPPING[layerId].layerField;
      layerId = layerId || this.visibleLayerId;
      const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
      if (!layerById) {
        console.error(`no layer id`);
        return;
      }
      if (bsm) {
        this.spinShow = true;

        if (!feature) {
          const where = `${this.layerFeatureKey} = '${bsm}'`;
          await arcgisQuery(
            `${layerById.url}/${this.layerIndex}/query`,
            {
              outSR: getSrid(this.map),
              where,
            },
            false,
          ).then((resp) => {
            const { features } = resp;
            let json = { type: 'FeatureCollection', features: [] };
            json.features.push(
              convertRingsToGeoJSON(features[0].geometry.rings),
            );
            MapUtils.drawShade(this.map, json);
          });
        }
        if (row) {
          feature.setProperties({ ...row });
        }
        this.spinShow = false;
      }
      this.feature = feature;

      if (feature) {
        this.$vm.$emit('getGeoData', feature); //初始化土地生命周期geo/feature参数
      }
    },
    async locationMaskFeatureWhere(layerId, where) {
      const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
      if (!layerById) {
        console.error(`no layer id`);
        return;
      }
      this.spinShow = true;
      
      if (layerById.serverType === 'wms') {
        await GeoServerQuery(`${layerById.queryUrl}`, {
          typeName: layerById.params.layers,
          cql_filter: where
        }, false).then((resp) => {
          const { features } = resp;
          const json = { type: 'FeatureCollection', features: [] };
          json.features.push(
            features[0].geometry
          );
          MapUtils.drawShade(this.map, json);
        })
      } else { 
        await arcgisQuery(
          `${layerById.url}/0/query`,
          {
            outSR: getSrid(this.map),
            where,
          },
          false,
        ).then((resp) => {
          const { features } = resp;
          let json = { type: 'FeatureCollection', features: [] };
          json.features.push(convertRingsToGeoJSON(features[0].geometry.rings));
          MapUtils.drawShade(this.map, json);
        });
      }
      this.spinShow = false;
    },
    mapLoaded(map) {
      window.map = map;
      this.map = map;
      const layerId = this.visibleLayerId;
      // 图斑拾取黑名单
      const pickBlackList = [];
      map.on('click', (e) => {
        this.$vm.$emit('clear-layer');
        if (this.visibleLayerId === 'xzqh-s-search') return;
        if (this.visibleLayerId === 'xzqh-x-search') return;
        const drawing = map.get('drawing');
        if (drawing || pickBlackList.includes(layerId)) {
          console.log('no pick event');
          return;
        }
        this.pickServerFeature(e);
      });
      map.on('moveend', () => {
        let zoom = map.getView().getZoom(); //获取当前地图的缩放级别
        if (zoom >= 11.3) {
          // this.visibleLayerId = this.visibleLayerIds[
          //   this.visibleLayerIds.length - 1
          // ];
          if (this.mapDragPan) {
            this.mapDragPan.setActive(true);
          }
          //缩放至一定级别不显示tooptip图例
          // this.echartslayer.hide();
        } else {
          this.visibleLayerId = this.visibleLayerIds[0];
          if (this.visibleLayerId === 'xzqh-s-search' && this.mapDragPan) {
            this.mapDragPan.setActive(true);
          }
          // this.echartslayer.show();
        }
        if (zoom >= 9 && this.xzqType !== 'town' && this.townShow) {
          // 县级市
          if (this.vmEventType) {
            this.$vm.$emit(this.vmEventType, 'town');
          }
          this.xzqType = 'town';
          this.$emit('moveend', this.xzqType);
          this.enabledLayersConfig[0]['children'][2]['children'][0][
            'visible'
          ] = false;
          this.enabledLayersConfig[0]['children'][2]['children'][4][
            'visible'
          ] = true;
          if (this.isIconBool && !this.isShowIcon) {
            this.isShowIcon = true;
          }
        } else if (zoom < 9 && this.xzqType !== 'city') {
          // 地级市
          if (this.vmEventType) {
            this.$vm.$emit(this.vmEventType, 'city');
          }
          this.xzqType = 'city';
          this.$emit('moveend', this.xzqType);
          this.enabledLayersConfig[0]['children'][2]['children'][0][
            'visible'
          ] = true;
          this.enabledLayersConfig[0]['children'][2]['children'][4][
            'visible'
          ] = false;
        }
      });
      map.getView().setCenter([120.45690944408925, 29.248390754380974]);
      map.getView().setZoom(7.85);
      this.map.getInteractions().forEach((element) => {
        if (element instanceof DragPan) {
          this.mapDragPan = element;
        }
      });
    },
    echartsLayerLoad() {
      if (this.echartslayer !== null) {
        // this.map.removeLayer(this.echartslayer);
        this.echartslayer.remove();
        this.echartslayer = null;
      }
      // 迁徙图图层初始化
      this.echartslayer = new EChartsLayer(this.getOption());
      this.echartslayer.setMap(this.map);
      this.echartslayer.$chart.on('click', (item) => {
        if (!this.echartsLayerClickHandle) return;
        this.echartsLayerClickHandle(item);
      });
    },
    getOption() {
      var geoCoordMap = null;
      let GZData = [];
      let isShow = true;
      let typeStr = 1; //Scatter背景图类型 0、1
      if (this.GZData && this.GZData.length > 0) {
        isShow = true;
        GZData = this.GZData;
        typeStr = GZData[0]['typeIndex'];
      } else {
        isShow = false;
      }
      if (!this.xzqName) {
        if (this.xzqType === 'town') {
          const keys = Object.keys(XZQ[this.xzqType]);
          geoCoordMap = {};
          for (let i = 0; i < keys.length; i++) {
            const mapItem = XZQ[this.xzqType][keys[i]];
            Object.assign(geoCoordMap, mapItem);
          }
        } else {
          geoCoordMap = XZQ[this.xzqType];
        }
      } else {
        geoCoordMap = XZQ[this.xzqType][this.xzqName];
      }
      var convertData2 = function(data) {
        var res = [];
        data.forEach((item) => {
          var geoCoord = geoCoordMap[item.name];
          if (geoCoord) {
            res.push({
              name: item.name,
              value: geoCoord,
              query: item['query'],
              param: item['param'],
            });
          }
        });
        return res;
      };
      const series = [
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          tooltip: { show: false },
          z: 999,
          label: {
            normal: {
              show: true,
              formatter: function(item) {
                return `{tline|${item['name']}}`;
              },
              rich: {
                tline: {
                  color: '#FFF',
                  align: 'center',
                  fontSize: 15,
                  fontWeight: 600,
                },
              },
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            opacity: 1,
            color: function(val) {
              return '#333';
            },
          },
          data: convertData2(GZData),
        },
      ];
      if (isShow) {
        if (typeStr === 0) {
          series[0]['symbolOffset'] = [0, -5];
          series.push(
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              tooltip: { show: false },
              z: 999999999,
              label: {
                normal: {
                  show: true,
                  formatter: function(item) {
                    const param = item['data']['param'];
                    const order = param['order'] || '0';
                    return `{tline|${order}}`;
                  },
                  rich: {
                    tline: {
                      color: '#0B2E3A',
                      align: 'center',
                      fontSize: 14,
                      fontWeight: 600,
                    },
                  },
                },
                emphasis: {
                  show: true,
                },
              },
              itemStyle: {
                opacity: 1,
                color: function(val) {
                  let a;
                  if (val.data.param.order < 4) {
                    a = '#FAED25';
                  } else {
                    a = '#00FFEA';
                  }

                  return a;
                },
              },
              symbol: 'circle',
              symbolSize: 26,
              symbolOffset: [-45, -80], //开发强度 [-40, -70]、要素保障 [-35, -80]
              data: convertData2(GZData),
            },
            {
              //图例
              type: 'scatter',
              coordinateSystem: 'geo',
              tooltip: { show: false },
              z: 99999,
              label: {
                normal: {
                  show: true,
                  formatter: function(item) {
                    const param = item['data']['param'];
                    const value1 = param['value1'] || '';
                    const value2 = param['value2'] || 0;
                    const unit1 = param['unit1'] || '';
                    const unit2 = param['unit2'] || '';
                    return `{tline1|${value1}}{tline2|${unit1}}\n{fline1|${value2}}{fline2|${unit2}}`;
                  },
                  rich: {
                    //开发强度 [0, 2]、要素保障 [2, 2]
                    tline1: {
                      padding: [5, 0],
                      color: '#07FCFF',
                      align: 'center',
                      fontSize: 15,
                      fontWeight: 700,
                    },
                    tline2: {
                      padding: [5, 0],
                      color: '#07FCFF',
                      align: 'center',
                      fontSize: 12,
                      fontWeight: 600,
                    },
                    fline1: {
                      color: '#FFFFFF',
                      fontSize: 14,
                      align: 'center',
                      fontWeight: 700,
                    },
                    fline2: {
                      color: '#FFFFFF',
                      fontSize: 14,
                      align: 'center',
                    },
                  },
                  //开发强度 [0, 10]、要素保障 [2, 2]
                  offset: [0, -5],
                },
                emphasis: {
                  show: true,
                },
              },
              itemStyle: {
                borderWidth: 0,
                opacity: 1,
                color: 'transparent',
              },
              symbol: function(val, item) {
                return scatter_bg4;
              },
              symbolSize: function(val, item) {
                return [90, 65];
              },
              symbolOffset: [0, -50],
              data: convertData2(GZData),
            },
          );
        } else {
          series[0]['symbolOffset'] = [0, 28];

          const getLineMaxHeight = (data) => {
            const maxValue = Math.max(
              ...data.map((item) => item['param']['value1']),
            );
            return 0.6 / maxValue;
          };
          const maxHeight = getLineMaxHeight(GZData);
          const getLineData = (data) => {
            const dataArr = [];
            data.forEach((item) => {
              const name = item.name;
              if (geoCoordMap[name]) {
                dataArr.push({
                  query: item['query'],
                  coords: [
                    geoCoordMap[name],
                    [
                      geoCoordMap[name][0],
                      geoCoordMap[name][1] +
                        item['param']['value1'] * maxHeight,
                    ],
                  ],
                });
              }
            });
            return dataArr;
          };
          const lineData = getLineData(GZData);

          // 柱状体的顶部
          const getTopBarPosition = (data) => {
            const dataArr = [];
            data.forEach((item) => {
              const name = item.name;
              if (geoCoordMap[name]) {
                dataArr.push([
                  geoCoordMap[name][0],
                  geoCoordMap[name][1] + item['param']['value1'] * maxHeight,
                ]);
              }
            });
            return dataArr;
          };
          const getTopBarPosAndData = (data) => {
            const dataArr = [];
            data.forEach((item) => {
              const name = item.name;
              if (geoCoordMap[name]) {
                dataArr.push([
                  geoCoordMap[name][0],
                  geoCoordMap[name][1] + item['param']['value1'] * maxHeight,
                  item,
                ]);
              }
            });
            return dataArr;
          };
          series.push(
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              tooltip: { show: false },
              z: 9999999,
              label: {
                normal: {
                  show: true,
                  formatter: function(item) {
                    const data = item['data'];
                    const param = data[data.length - 1]['param'];
                    if (!param) return;
                    const value1 = param['value1'] || '';
                    const unit1 = param['unit1'] || '';
                    return `{tline1|${value1}}{tline2|${unit1}}`;
                  },
                  rich: {
                    tline1: {
                      color: '#07FCFF',
                      align: 'center',
                      fontSize: 15,
                      fontWeight: 700,
                    },
                    tline2: {
                      color: '#07FCFF',
                      align: 'center',
                      fontSize: 12,
                      fontWeight: 600,
                    },
                  },
                  offset: [0, 0],
                },
                emphasis: {
                  show: true,
                },
              },
              itemStyle: {
                borderWidth: 0,
                opacity: 1,
                color: 'transparent',
              },
              symbol: bg_text,
              symbolSize: function(val, item) {
                return [70, 30];
              },
              symbolOffset: [0, -24],
              data: getTopBarPosAndData(GZData),
            },
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              geoIndex: 0,
              zlevel: 999999,
              label: {
                show: false,
              },
              symbol: 'circle',
              symbolSize: [20, 10],
              itemStyle: {
                color: '#ECC200',
                opacity: 1,
              },
              silent: true,
              data: getTopBarPosition(GZData),
            },
            // 柱状体的主干
            {
              type: 'lines',
              zlevel: 999,
              effect: {
                show: false,
                symbolSize: 5, // 图标大小
              },
              lineStyle: {
                width: 20, // 尾迹线条宽度
                color: '#FFDE00',
                opacity: 1, // 尾迹线条透明度
                curveness: 0, // 尾迹线条曲直度
              },
              label: {
                show: 0,
                position: 'end',
                formatter: '245',
              },
              data: lineData,
            },
            // 柱状体的底部
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              geoIndex: 0,
              zlevel: 9,
              label: {
                show: false,
              },
              symbol: 'circle',
              symbolSize: [20, 10],
              itemStyle: {
                color: '#FFDE44',
                opacity: 1,
              },
              silent: true,
              data: convertData2(GZData),
            },
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              geoIndex: 0,
              zlevel: 4,
              label: {
                show: false,
              },
              symbol: 'circle',
              symbolSize: [40, 20],
              itemStyle: {
                color: '#fff',
                opacity: 1,
              },
              silent: true,
              data: convertData2(GZData),
            },
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              geoIndex: 0,
              zlevel: 4,
              label: {
                show: false,
              },
              symbol: 'circle',
              symbolSize: [60, 32],
              itemStyle: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'transparent', // 0% 处的颜色
                    },
                    {
                      offset: 0.85,
                      color: 'transparent', // 100% 处的颜色
                    },
                    {
                      offset: 0.98,
                      color: '#FFDE44', // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#FFDE44', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                opacity: 1,
              },
              silent: true,
              data: convertData2(GZData),
            },
          );
        }
      } else {
        series.push({
          type: 'scatter',
          coordinateSystem: 'geo',
          itemStyle: {
            color: 'transparent',
          },
          z: 999,
          label: {
            show: true,
            normal: {
              show: true,
              formatter: function(params) {
                const name = params.name;
                return name;
              },
              fantFamily: 'Microsoft YaHei',
              color: '#FFFFFF',
              fontSize: 19,
              textShadowColor: '#000000',
              textShadowBlur: 2,
              textShadowOffsetX: 2,
              textShadowOffsetY: 2,
            },
          },
          data: convertData2(GZData),
        });
      }
      return {
        tooltip: {
          trigger: 'item',
        },
        series: series,
      };
    },
    configLayerLoaded(enabledLayersConfig) {
      this.enabledLayersConfig = enabledLayersConfig;
    },
    async pickServerFeature (e) {
      console.log(e)
      let tempLayerIds = this.visibleLayerIds.filter(
        (it) =>
          it !== 'xzqh-s' &&
          it !== 'xzqh-s-search' &&
          it !== 'xzqh-x-search' &&
          it !== 'xzqh-x-search-dzl' &&
          it !== 'xzqh-x' &&
          it !== 'xzqh-z' &&
          it !== 'hzyx-202311' &&
          it !== 'hzyx-202310' &&
          it !== 'hzyx-202308' &&
          it !== 'hzyx-202309' &&
          it !== 'bj-czkfbj' &&
          it !== 'bj-stbhhx' &&
          it !== 'bj-kfbjw',
      );
      if (tempLayerIds.length === 1) {
        const layerConfig = this.$refs.configLayer.getLayerConfigById(
          this.visibleLayerId,
        );
        // 带上图层显示参数，只拾取显示的图斑
        let where = '1=1';
        try {
          where = layerConfig.params.layerDefs[0];
          if (!where) {
            where = '1=1';
          }
        } catch (e) {
          // 获取图层 参数
        }
        const [x, y] = e.coordinate;
        const param = {
          where,
          f: 'json',
          inSR: getSrid(this.map),
          outFields: TABLE_COMP_MAPPING[this.visibleLayerId]
            ? TABLE_COMP_MAPPING[this.visibleLayerId]['outFields']
            : '',
          returnGeometry: 'true',
          geometry: JSON.stringify({ x, y }),
          geometryType: 'esriGeometryPoint',
        };
        if (layerConfig.serverType === 'wms') {
          const pointWkt = `POINT(${y} ${x})`
          await GeoServerQuery(`${layerConfig.queryUrl}`, {
            typeName: layerConfig.params.layers,
            cql_filter: `INTERSECTS(shape, ${pointWkt})`
          }, true).then(({ features: [feature] }) => {
              if (feature) {
                this.locationFeature(null, this.visibleLayerId, { feature });
              } else {
                this.feature = undefined;
              }
          })
        } else { 
          arcgisQuery(
            `${layerConfig.url}/${this.layerIndex}/query`,
            param,
            true,
          ).then(({ features: [feature] }) => {
            if (feature) {
              this.locationFeature(null, this.visibleLayerId, { feature });
            } else {
              this.feature = undefined;
            }
          });
        }
      } else if (tempLayerIds.length > 1) {
        // 带上图层显示参数，只拾取显示的图斑
        const where = '1=1';
        const [x, y] = e.coordinate;
        const param = {
          where,
          f: 'json',
          inSR: getSrid(this.map),
          outFields: '',
          returnGeometry: 'true',
          geometry: JSON.stringify({ x, y }),
          geometryType: 'esriGeometryPoint',
        };
        const urls = tempLayerIds.map((i) => this.getLayerConfigById(i));

        const promiseArr = urls.map((i) => {
          param.outFields = TABLE_COMP_MAPPING[i.id]
            ? TABLE_COMP_MAPPING[i.id]['outFields']
            : '';
          return arcgisQuery(`${i.url}/${this.layerIndex}/query`, param, true);
        });

        const feature = await Promise.all(promiseArr).then((resp) => {
          if (this.visibleLayerIds.includes('bj-gyyd-new')) {
            for (let i = 0; i < resp.length; i++) {
              if (resp[i].features.length != 0) {
                this.isgyyd = resp[i].displayFieldName;
              }
            }
          }

          for (let i = 0; i < resp.length; i++) {
            if (resp[i].features.length) {
              this.visibleLayerId = tempLayerIds[i];
              break;
            }
          }
          const features = resp
            .filter((i) => i.features.length)
            .map((i) => i.features[0]);
          return features[0];
        });
        if (feature) {
          this.locationFeature(null, this.visibleLayerId, { feature });
        } else {
          this.feature = undefined;
        }
      }
    },
    async locationFeature(
      bsm,
      layerId,
      { feature = undefined, row = undefined } = {},
    ) {
      if (feature) {
        const geometry = feature.getGeometry();
        const wkt = WkxGeometry.parseGeoJSON(
          new GeoJSON().writeGeometryObject(geometry),
        ).toWkt();
        feature.set('wkt', wkt);
        this.feature = feature;
        this.$vm.$emit('getGeoData', feature); //初始化土地生命周期geo/feature参数
        this.$vm.$emit(
          'mapClickHandle',
          feature.getProperties(),
          this.visibleLayerId,
        );
        this.$emit('mapClick', feature.getProperties(), this.visibleLayerId);
      }
      this.drawendFeaturePop(this.feature);
    },
    locationMoreFeatureWithShade(where, layerId, setting = {}) {
      this.spinShow = true;
      const layer = this.$refs.configLayer.getLayerConfigById(layerId);
      if (!layer) {
        console.error(`no layer id`);
        return;
      }
      arcgisQuery(
        `${layer.url}/${this.layerIndex}/query`,
        {
          outSR: getSrid(this.map),
          where,
          ...setting,
        },
        false,
      ).then(({ features }) => {
        this.spinShow = false;
        const geos = {
          type: 'FeatureCollection',
          features: [
            {
              type: 'Feature',
              geometry: {
                type: 'MultiPolygon',
                coordinates: [],
              },
              properties: {},
            },
          ],
        };
        let temp = [];
        features.forEach((it) => {
          temp = [...temp, ...it['geometry']['rings']];
        });
        geos['features'][0]['geometry']['coordinates'] = [[...temp]];

        this.addGeoLayer2(geos);
        // MapUtils.drawShade(this.map, JSON.stringify(geos))
      });
    },
    drawendFeaturePop(drawFeature) {
      if (!drawFeature) {
        this.drawFeature = drawFeature;
        return;
      }
      const geometry = drawFeature.getGeometry();
      const area = getArea(geometry, {
        projection: this.map.getView().getProjection(),
      });
      drawFeature.set('area', (area / 666.67).toFixed(2));
      this.drawendDistrict(drawFeature);
    },
    drawendDistrict(drawFeature) {
      // const urls = ['xzqh-s', 'xzqh-x', 'xzqh-z'].map(i => this.getLayerConfigById(i).url)
      const urls = ['xzqh-z'].map((i) => this.getLayerConfigById(i).url);
      const srid = getSrid(this.map);

      const param = {
        geometry: toArcGIS(drawFeature.getGeometry(), true),
        geometryType: 'esriGeometryPolygon',
        spatialRel: 'esriSpatialRelIntersects',
        inSR: srid,
        outSR: srid,
        returnGeometry: false,
        where: `1=1`,
      };

      const promiseArr = urls.map((i) =>
        arcgisQuery(`${i}/${this.layerIndex}/query`, param, false),
      );
      Promise.all(promiseArr).then((resp) => {
        const features = resp
          .filter((i) => i.features.length)
          .map((i) => i.features);
        drawFeature.set(
          'areaList',
          features.flat().map((i) => i.attributes.FULLNAME.substr(3)),
        );
        this.drawFeature = drawFeature;
      });
    },
    resetMapView() {
      const { districtFeature, map } = this;
      if (districtFeature) {
        mapFit(districtFeature, map);
      } else {
        this.$refs.configLayer.resetMapView();
      }
    },
    drawend(features) {
      // 绘制结束或清空绘制
      const multiPolygon = features
        ? new MultiPolygon(features.map((i) => i.getGeometry()))
        : features;

      const payload = {
        geometry: multiPolygon ? toArcGIS(multiPolygon, true) : '',
        srid: getSrid(this.map),
      };
      this.$store.dispatch('spacemap/setSketchRangeAnalysis', payload);
    },
    getLayerConfigById(layerId) {
      return this.$refs.configLayer.getLayerConfigById(layerId);
    },
    dateFormat(date) {
      if (date === null || date === undefined || date === '') {
        console.log('时间格式化有误，时间为null');
        return '';
      }
      if (typeof date === 'string') {
        return date.substr(0, 10);
      }
      var time = new Date(date);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      return y + '-' + this.add0(m) + '-' + this.add0(d);
    },
    add0(m) {
      return m < 10 ? '0' + m : m;
    },
    getLayerById(id) {
      return this.$refs.configLayer.getLayerById(id);
    },
    mockDetail(props) {
      this.$vm.$emit('getMockDetail', props);
    },
    bjmockDetail(props) {
      this.$vm.$emit('getBjMockDetail', props);
    },
    locationTsxzDetail(props) {
      this.$vm.$emit('locationTsxzDetail', props);
    },
    tzzxDetail(props) {
      this.$vm.$emit('getTzzxDetail', props);
    },
    statisticsLayer(layerId, setting) {
      const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
      arcgisQuery(
        `${layerById.url}/${this.layerIndex}/query`,
        setting,
        false,
      ).then(({ features }) => {
        this.$vm.$emit(
          'statisticsLayerCallback',
          features,
          setting['groupByFieldsForStatistics'],
        );
      });
    },
    skyb(p) {
      window.open(`https://yt.zjasm.net/kjzlptv2/blockTool?geometry=${p.wkt}`);
    },
  },
};
</script>
<style lang="scss" scoped>
.vl-tool-bar {
  display: flex;
  top: 5px !important;
  right: 10px !important;
  > li {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 34px !important;
    height: 34px !important;
    border: 1px solid #468ec0;
    background: linear-gradient(0deg, #102a54 0%, #3d5a93 100%);
    border-radius: 4px;
    .img {
      width: 18px !important;
      height: 18px !important;
    }
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.overlayBox {
  background: url('../../../assets/images/dk_detail_bg.png') no-repeat;
  background-size: 100% 100%;
  padding: 12px 15px;
  border-radius: 2px;
  position: relative;
  font-family: Alibaba PuHuiTi;
  margin-bottom: 40px;
  min-width: 340px;
  > .fixedIcon {
    position: absolute;
    width: 50px;
    height: 50px;
    bottom: -50px;
    left: 0px;
    right: 0px;
    margin: auto;
    background: url('../../../assets/images/map_icon.png') no-repeat;
    background-size: 100% 100%;
  }
  > .title {
    color: #fff;
    position: relative;
    top: -5px;
    font-size: 16px;
    font-weight: bold;
    > .btn {
      float: right;
      cursor: pointer;
      background-color: #0178cd;
      padding: 5px 10px;
      display: inline-block;
      border-radius: 2px;
      margin-top: -5px;
      color: #fff;
      &:hover {
        color: #22f3e2;
      }
    }
    .label {
      float: right;
      color: #22f3e2;
      margin-top: 8px;
    }
  }
  > .content {
    padding: 15px 5px;
    max-width: 360px;
    > h2,
    p {
      color: #fff;
    }
    > h2 {
      font-size: 16px !important;
      margin-bottom: 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-weight: bold;
    }
    > p {
      font-size: 15px;
      margin: 5px 0px;
    }
  }
}
.overview-map {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  $mask-bgc: radial-gradient(
    closest-side at 50%,
    rgba(4, 18, 41, 0) 0,
    rgba(0, 15, 51, 0.2)
  );

  .space-map-mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-image: $mask-bgc;
    pointer-events: none;
  }

  .map-view-info {
    position: absolute;
    bottom: 10px;
    left: 15px;
    width: 350px;
    height: 32px;
    background: rgba(56, 150, 236, 0.64);
    box-shadow: 0 0 20px 1px #012357;

    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 32px;
    text-indent: 1em;
  }

  $bgc: rgba(255, 255, 255, 0.9);

  &::v-deep {
    .vl-tool-bar {
      .vl-tool-bar-item {
        background-color: transparent;
      }
    }

    .vl-legend {
      border: 1px solid #0660b8;
      .legend-panel {
        // background: $bgc;
        background: #02285c;
        color: #00edff;

        .legend-title {
          background: transparent;
          border-bottom: 1px solid #0660b8;
        }
      }
    }

    .vl-layer-tree {
      .layer-dropdown {
        background-color: $bgc;
      }
    }
  }

  .feature-overlay {
    z-index: 999;
    // min-width: 331px;
    // max-width: 400px;
    width: 295px;
    // min-height: 186px;
    // background: url(~@/assets/project/map-overlay.png) no-repeat;
    // background-size: 100% 100%;;
    // padding: 2px 6px 20px;
    color: white;
    background: #fff;

    z-index: 999;
    position: absolute;
    top: 80px;
    right: 20px;

    .title {
      font-size: 18px;
      line-height: 30px;
      font-weight: 600;
      // background: linear-gradient(270deg, #47c4fa 0%, #2390ee 100%);
      background: #2390ee;
      // border-radius: 10px 10px 0px 0px;
      padding-left: 16px;
      .title-label {
        font-size: 16px;
        font-weight: normal;
        float: right;
        cursor: pointer;
        color: #00ffff;
        &:hover {
          font-weight: bolder;
        }
      }

      .detail {
        font-size: 16px;
        color: #22f3e2;
        cursor: pointer;
        margin-left: 5px;
      }
    }

    .section5 {
      padding: 0 20px 10px;

      .name {
        font-weight: 600;
        padding: 10px 0;
        font-size: 17px;
        color: #333333;
        line-height: 22px;
        cursor: default;

        .detail {
          cursor: pointer;
          margin-left: 5px;
          background: #00b9d6;
          border-radius: 3px;
          font-size: 15px;
          color: #ffffff;
          padding: 0 8px;
        }
      }

      table {
        width: 100%;
        font-size: 15px;
        line-height: 15px;

        td,
        th {
          padding: 3px 0;
        }

        th {
          padding-right: 0.5em;
          word-break: keep-all;
          font-weight: normal;
          color: #666666;
          width: 4.3em;
        }

        td {
          min-width: 3em;
          color: #333333;
          font-weight: bold;
        }

        td + th {
          padding-left: 0.5em;
        }
      }
    }
  }

  .ivu-spin-fix {
    z-index: 0 !important;
    background-color: unset;
    color: white;
    background-image: $mask-bgc;
  }
}
</style>