BJYSYBZ/BJYSYBZ_C/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>

    <vl-legend
      :size="40"
      :legend-fill="0.4"
      :enabled-layers="enabledLayersConfig"
      :default-expand="defaultExpand"
      v-if="legendShow"
    />
    <VlImglayers
      :imgLayers="imgLayers"
      @change="vlImgLayerChangeHandle"
      @change1="vlImgLayerChangeHandle1"
      @sliderChange="vlImgLayerSliderChangeHandle"
      @sliderChange1="vlImgLayerSliderChangeHandle1"
    >
    </VlImglayers>
    <vl-feature-flicker
      :feature="feature"
      new-layer
      :duration="2400"
      :interval="800"
    />
    <!-- 详情 -->
    <vl-feature-overlay
      v-show="overlayShow"
      :feature="feature"
      :use-centroid="false"
      no-styled
    >
      <template slot-scope="{ props }" v-if="detailType != 0">
        <div class="overlayBox">
          <span class="title" v-if="detailType == 1 || detailType == 2"
            >详情<a class="btn" @click="showLandDetail(props)">详情</a></span
          >
          <span class="title" v-if="detailType == 4 || detailType == 5"
            >详情<a
              v-if="detailType == 6"
              class="btn"
              @click="mockDetail(props)"
              >要素配置模拟</a
            ></span
          >
          <span
            class="title"
            v-if="
              (detailType == 5 && tzzxShow) || (detailType == 33 && tzzxShow)
            "
            >详情<a class="btn" @click="tzzxDetail(props)">提质增效</a></span
          >
          <span class="title" v-if="detailType == 10 || detailType == 11"
            >详情<a class="btn" @click="showSpDetail(props)">更多</a></span
          >
          <span
            class="title"
            v-if="
              detailType == 13 ||
                detailType == 14 ||
                detailType == 15 ||
                detailType == 16 ||
                detailType == 33
            "
            >详情</span
          >
          <span class="title" v-if="detailType == 12"
            >详情<a class="btn" @click="locationTsxzDetail(props)"
              >详情</a
            ></span
          >
          <span
            class="title"
            v-if="
              detailType == 20 ||
                detailType == 21 ||
                detailType == 22 ||
                detailType == 23 ||
                detailType == 24 ||
                detailType == 25 ||
                detailType == 26 ||
                detailType == 27 ||
                detailType == 31 ||
                detailType == 100
            "
            >详情<a class="btn" @click="skyb(props)">时空演变</a></span
          >
          <span class="title" v-if="detailType == 101"
            >控规详情<a class="btn" @click="skyb(props)">时空演变</a></span
          >
          <span class="title" v-if="detailType == 32"
            >详情<a
              v-if="detailType == 32"
              class="btn"
              @click="bjmockDetail(props)"
              >要素配置模拟</a
            ></span
          >
          <span class="title" v-if="detailType == 50 || detailType == 51">
            详情
          </span>
          <span class="title" v-if="detailType == 99">
            详情
            <a class="label" v-show="props['dksyh']">工业用地</a>
            <a
              class="label"
              v-show="props['tdyt'] && props['tdyt'].startsWith('07')"
              >住宅用地</a
            >
            <a
              class="label"
              v-show="props['tdyt'] && props['tdyt'].startsWith('0803')"
              >教育用地</a
            >
            <a class="label" v-show="props['新增调查地']">商业用地</a>
            <a class="label" v-show="props['spmj']">临时用地</a>
          </span>
          <div class="content" v-if="detailType == 1">
            <h2>{{ props["KFQMC"] }}</h2>
            <p>总面积：{{ Number(props["开发区评价面积"]).toFixed(0) }}公顷</p>
            <p>管理机构：{{ props["开发区管理机构"] }}</p>
            <p>地块位置：{{ props["开发区四至范围"] }}</p>
          </div>
          <div class="content" v-if="detailType == 2">
            <h2>{{ props["TDQLR"] }}</h2>
            <p>总面积：{{ Number(props["SJYDMJ"] * 0.0015).toFixed(2) }}亩</p>
            <p>容积率：{{ props["SJRJL"].toFixed(1) }}</p>
            <p>税收总额：{{ props["SJSF2020"].toFixed(1) }}万元</p>
          </div>
          <div class="content" v-if="detailType == 4 || detailType == 6">
            <h2>{{ props["dkbh"] }}</h2>
            <p>总面积：{{ Number(props["mj"] * 15).toFixed(2) }}亩</p>
            <p>批复文号：{{ props["pfwh"] }}</p>
            <p>规划单元：{{ props["ghdy"] }}</p>
          </div>
          <div class="content" v-if="detailType == 5">
            <h2>{{ props["TDQLR"] }}</h2>
            <p>总面积：{{ Number(props["SJYDMJ"] * 0.0015).toFixed(2) }}亩</p>
            <p>亩均税收：{{ Number(props["mjss"]).toFixed(2) }}万元/亩</p>
            <p>行业类别：{{ props["HYLB"] }}</p>
            <p>土地坐落：{{ props["TDZL"] }}</p>
          </div>

          <div class="content" v-if="detailType == 10">
            <h2>{{ props["xmmc"] }}</h2>
            <p>行政区：{{ props["szs"] || props["sxs"] }}</p>
            <!--            <p>面积：{{props['sjydmj']}}</p>-->
            <p>项目类型：{{ props["xmlx"] }}</p>
          </div>

          <div class="content" v-if="detailType == 11">
            <h2>{{ props["xmmc"] }}</h2>
            <p>行政区：{{ props["xzqmc"] }}</p>
            <p>面积：{{ props["ydmj"] }}亩</p>
            <p>总投资：{{ props["ztz"] }}亿元</p>
            <p>2022完成投资：{{ props["ywctz"] }}亿元</p>
            <p>2023计划投资：{{ props["jhtz"] }}亿元</p>
          </div>

          <div class="content" v-if="detailType == 12">
            <h2>{{ props["name"] }}</h2>
            <p>行政区：{{ props["sqs"] }}</p>
            <p>建成面积：{{ (props["jcmj"] * 1500).toFixed(0) }}亩</p>
            <p>产业类型：{{ props["cylx"] }}</p>
            <p>
              非生产性用地面积：{{ (props["fscxydmj"] * 1500).toFixed(0) }}亩
            </p>
          </div>

          <div class="content" v-if="detailType == 13">
            <h2>{{ props["tdqlr"] }}</h2>
            <p>地块名称：{{ props["dkmc"] }}</p>
            <p>土地坐落：{{ props["tdzl"] }}</p>
          </div>

          <div class="content" v-if="detailType == 14">
            <h2>{{ props["xmmc"] }}</h2>
            <p>批准文号：{{ props["pzwh"] }}</p>
            <p>实际利用：{{ props["sjly"] }}</p>
          </div>

          <div class="content" v-if="detailType == 15">
            <h2>{{ props["dlmc"] }}</h2>
            <p>坐落单位名称：{{ props["zldwmc"] }}</p>
            <p>面积：{{ (props["tbmj"] * 0.0015).toFixed(2) }}亩</p>
          </div>

          <div class="content" v-if="detailType == 20">
            <h2>{{ detailData["dkbh"] || props['dkbh'] }}</h2>
            <p>行政区划：{{ (detailData["ssqx"] || props["ssqx"]) }} - {{ detailData["ssjd"] || props["ssjd"] }}</p>
            <p>面积：{{ ((detailData["mj"] || props['mj'] * 15)).toFixed(2) }} 亩</p>
          </div>
          <div class="content" v-if="detailType == 21">
            <h2>{{ props["tdqlr"] }}</h2>
            <p>
              行政区划：{{ props["szx"] }}
              {{
                props["szxz"] && props["szxz"] !== " "
                  ? "-" + props["szxz"]
                  : ""
              }}
            </p>
            <p>用地面积：{{ (props["sjydmj"] * 0.0015).toFixed(2) }} 亩</p>
          </div>
          <div class="content" v-if="detailType == 22">
            <h2>{{ props["xmmc"] }}</h2>
            <p>批次名称：{{ props["bpxmmc"] }}</p>
            <p>批准文号：{{ props["pzwh"] }}</p>
          </div>
          <div class="content" v-if="detailType == 23">
            <h2>
              {{ props["dkmc"] }}
              {{ props["dkbh"] && props["dkbh"] !== " " ? props["dkbh"] : "" }}
            </h2>
            <p>项目名称：{{ props["tzxmmc"] }}</p>
            <p>
              面积：{{ props["txmj"] && (props["txmj"] * 0.0015).toFixed(2) }}
              亩
            </p>
          </div>
          <div class="content" v-if="detailType == 24">
            <h2>{{ detailData["dkbh"] }}</h2>
            <p>行政区划：{{ "滨江区 - " + detailData["dkwz"] }}</p>
            <p>管地单位：{{ detailData["gddw"] }}</p>
          </div>
          <div class="content" v-if="detailType == 25">
            <h2>{{ props["name"] }}</h2>
            <p>
              面积：{{ (props["sde.sde.特色小镇.area"] * 100 * 15).toFixed(1) }}
              亩
            </p>
          </div>
          <div class="content" v-if="detailType == 26">
            <h2>{{ props["项目名称"] }}</h2>
            <p>面积：{{ (props["总用地面积"] * 0.0015).toFixed(2) }} 亩</p>
          </div>
          <div class="content" v-if="detailType == 27">
            <h2>{{ props["dkmc"] }}</h2>
            <p>面积：{{ (props["txmj"] * 0.0015).toFixed(2) }} 亩</p>
          </div>
          <div class="content" v-if="detailType == 31 || detailType == 33">
            <h2>
              {{
                props["tdqlr"] ||
                  props["BSM"] ||
                  props["项目名称"] ||
                  props["dkbh"]
              }}
            </h2>
            <p v-show="props['sjydmj']">
              面积：{{ (props["sjydmj"] * 0.0015).toFixed(2) }}亩
            </p>
            <p v-show="props['mj']">
              面积：{{ (props["mj"] * 15).toFixed(2) }}亩
            </p>
            <p v-show="props['txmj']">
              面积：{{ (props["txmj"] * 0.0015).toFixed(2) }}亩
            </p>
            <p v-show="props['总用地面积']">
              面积：{{ (props["总用地面积"] * 0.0015).toFixed(2) }}亩
            </p>
            <!--            <p>批准文号：{{ props['pzwh'] }} </p>-->
          </div>
          <div class="content" v-if="detailType == 32">
            <h2>{{ props["dkbh"] }}</h2>
            <p v-show="props['mj']">
              面积：{{ (props["mj"] * 15).toFixed(2) }}亩
            </p>
            <!--            <p>批准文号：{{ props['pzwh'] }} </p>-->
          </div>
          <div class="content" v-if="detailType === 50">
            <h2>{{ props["dlmc"] || props["dkbh"] }}</h2>
            <p>
              面积：{{
                props["tbmj"]
                  ? props["tbmj"].toFixed(2)
                  : (props["mj"] * 15).toFixed(2)
              }}
              亩
            </p>
          </div>
          <div class="content" v-if="detailType == 99">
            <h2>
              {{
                props["dkmc"] ||
                  props["tdqlr"] ||
                  props["BSM"] ||
                  props["项目名称"] ||
                  props["dkbh"] ||
                  props["xmmc"]
              }}
            </h2>
            <p v-show="props['sjydmj']">
              面积：{{ (props["sjydmj"] * 0.0015).toFixed(2) }}亩
            </p>
            <p v-show="props['mj']">
              面积：{{ (props["mj"] * 15).toFixed(2) }}亩
            </p>
            <p v-show="props['txmj']">
              面积：{{ (props["txmj"] * 0.0015).toFixed(2) }}亩
            </p>
            <p v-show="props['总用地面积']">
              面积：{{ (props["总用地面积"] * 0.0015).toFixed(2) }}亩
            </p>
            <p v-show="props['spmj']">
              面积：{{ (props["spmj"] * 0.0015).toFixed(2) }}亩
            </p>
          </div>
          <div class="content" v-if="detailType == 101">
            <p v-show="props['dymc']">单元名称：{{ props["dymc"] }}</p>
            <p v-show="props['yddm']">用地代码：{{ props["yddm"] }}</p>
            <p v-show="props['ydxz']">用地性质：{{ props["ydxz"] }}</p>
          </div>
          <div class="fixedIcon"></div>
        </div>
      </template>
    </vl-feature-overlay>
    <div class="modalBox" v-if="skybShow">
      <span class="close" @click="skybShow = false"></span>
      <div class="modalContent">
        <iframe
          id="imageTool"
          src="https://kjzl.zrzyt.zj.gov.cn/kjzlv2/blockTool"
        ></iframe>
      </div>
    </div>
  </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 VlLegend from "@/components/ol/VlLegend";
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 } 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 } 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";

export default {
  name: "BigScreenMap",
  computed: {
    ...mapState({
      xzqNameState: (state) => state.BaseData.xzqState,
      mapDataOne: (state) => state.BaseData.TDG,
    }),
    ...mapGetters({
      xzqdm: "BaseData/xzqCodeGetter",
    }),
  },
  components: {
    VlFeatureOverlay,
    VlChinaCities,
    VlMapDevInfo,
    VlLegend,
    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 {
      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,
      skybShow: false,
      geometry: ''
    };
  },
  watch: {
    GZData: {
      immediate: true,
      deep: true,
      handler: function() {
        // 迁徙图图层初始化
        this.echartsLayerLoad();
      },
    },
    visibleLayerIds: {
      immediate: true,
      deep: true,
      handler () {
        this.visibleLayerId = this.visibleLayerIds[0];
      },
    },
  },
  mounted() {
    //监听 工具发来的信息
    window.addEventListener("message", this.setBlockMessage);
    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, layerIdx } = payload;
      let params = {};
        params = {
          layers: layerIdx,
          cql_filter: 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 = {} } = payload;
      this.locationFeatureWhere(layerId, where, setting);
    });
    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: {
    //发送项目信息给遥感影像工具
    setBlockMessage: function (event) {
      //判断是否为工具加载完成消息
      if (!event.data || !event.data.loadSuccess) {
        return;
      }
      //向遥感影像工具发送信息
      let receiver = document.getElementById("imageTool").contentWindow;
      let postString = {
        areaId: this.getAreaId(),
        geometryFormat: "wkt",
      
        geometry: this.geometry,
  
      };
      receiver.postMessage(postString, "*");
    },
    getAreaId () {
      const date = new Date();
      const random = Math.random().toString().substring(2)
      return random+date.getDate().toString();
    },
    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;
      }
      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));
        });
        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 (bsm) {
        this.spinShow = true;

        if (!feature) {
          const where = `${this.layerFeatureKey} = '${bsm}'`;
          
          if (layerById.serverType === 'wms') {
            await GeoServerQuery(`${layerById.queryUrl}`, {
              typeName: layerById.params.layers,
              cql_filter: where
            }, true).then(({ features }) => {
              feature = features[0]
            })
          } else {
            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];
          const geometry = feature.getGeometry();
          const wkt = WkxGeometry.parseGeoJSON(
            new GeoJSON().writeGeometryObject(geometry)
          ).toWkt();
          feature.set("wkt", wkt);
          this.feature = feature;
        });
      }
      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;
            let 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("singleclick", (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.detailData = {}
        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(
        this.visibleLayerId,
        typeof this.visibleLayerId,
        "typeof this.visibleLayerId"
      );
      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 !== "bjq-xzq" &&
          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",
        };
        const pointWkt = `POINT(${y} ${x})`
        if (layerConfig.serverType === 'wms') {
          return 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;
            }
          })
        }
        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 pointWkt = `POINT(${y} ${x})`
        const urls = tempLayerIds.map((i) => this.getLayerConfigById(i));

        console.log("1109行----------------------------------")
        const promiseArr = urls.map(i => {
          if (i.serverType === 'wms') {
            return GeoServerQuery(`${i.queryUrl}`, {
              typeName: i.params.layers,
              cql_filter: `INTERSECTS(shape, ${pointWkt})`
            }, true)
          }
          return arcgisQuery(`${i}/0/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))
        );
        console.log(drawFeature, features, "Promise all resp");
        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(props) {
      this.skybShow = true;
      this.geometry = props.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;
        }
      }
    }
  }

  .modalBox {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    z-index: 999999999;
    background-color: rgba(0,0,0,.8);
    >.close {
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      top: 25px;
      right: 25px;
      z-index: 99999999;
      background: url("../../../assets/images/bjybz/close.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    >.modalContent {
      position: absolute;
      top: 15px;
      bottom: 15px;
      left: 15px;
      right: 15px;
      margin: auto;
      background-color: #fff;
      >iframe {
        width: 100%;
        height: 100%;
        border: 0px;
      }
    }
  }
  .ivu-spin-fix {
    z-index: 0 !important;
    background-color: unset;
    color: white;
    background-image: $mask-bgc;
  }
}
</style>