YZT_YUHANG/YHYZT/client/src/views/DataCenter.vue

<template>
  <div class="page">
    <div class="menus">
      <div
        v-for="item in menusData"
        :key="item.name"
        :class="item.bagC == isComponent ? 'selected' : ''"
        class="items"
        @click="ComponentChange(item)"
      >
        <div class="icon" :class="item.bagC">
          <i class="iconfont" :class="item.icon" />
        </div>
        <p class="text">{{ item.name }}</p>
      </div>
    </div>
    <transition name="fade">
      <div class="page-left" v-show="leftBoxClose">
        <div class="condition">
          <div class="panel flex-1">
            <Cascader
              :data="xzqOptions"
              v-model="query.xzqdm"
              change-on-select
              :clearable="false"
              @on-change="cascaderChange"
            />
          </div>
          <!--          <div class="panel flex-1" style="margin-left: 20px">
            <el-input v-model="input" placeholder="输入关键词进行搜索" style="width: 90%"  class="base"/>
            <i class="iconfont yh-sousuo"/>
          </div>-->
        </div>
        <div v-show="isComponent === 'zyml'" class="contents">
          <div class="title">
            <div
              style="
                width: 6px;
                height: 20px;
                background: #5988ff;
                border-radius: 1px 1px 1px 1px;
                margin-right: 8px;
              "
            />
            <p>{{ nameComp }}</p>
          </div>
          <vl-tool-bar class="data-c" height="0" :radius="0">
            <vl-layer-tree :enabled-layers="enabledLayersConfig" />
          </vl-tool-bar>
        </div>
        <div v-show="isComponent === 'sxsb'" class="contents">
          <div class="title">
            <div
              style="
                width: 6px;
                height: 20px;
                background: #5988ff;
                border-radius: 1px 1px 1px 1px;
                margin-right: 8px;
              "
            />
            <p>{{ nameComp }}</p>
          </div>
          <div class="sxsb btn-groups">
            <div
              v-for="item in zycxBtnData"
              :key="item.value"
              class="btn"
              :class="zycx == item.value ? 'selected' : ''"
              @click="
                () => {
                  zycx = item.value;
                  zycxData.show = false;
                  drawShapeJson = null; //清除图形
                  zycxData.query.layersName = []; //清除空间查询条件
                  zycxData.query.layerName = '';
                  zycxData.query.layerFieldName = '';
                  zycxData.query.fieldValue = ''; //清除属性查询条件
                  zycxData.table = [];
                  zycxData.tables = [];
                }
              "
            >
              {{ item.name }}
            </div>
          </div>
          <div v-if="zycx == 'sx'" class="sxsb_contents">
            <div class="panels">
              <span>业务图层:</span>
              <el-select
                placeholder="请选择"
                class="select"
                v-model="zycxData.query.layerName"
                clearable
                @change="handleSxChange"
              >
                <el-option
                  v-for="item in zycxData.query.layersData"
                  :key="item.value"
                  :value="item.value"
                  :label="item.name"
                />
              </el-select>
            </div>
            <div class="panels">
              <span>查询字段:</span>
              <el-select
                placeholder="请选择"
                class="select"
                v-model="zycxData.query.layerFieldName"
                clearable
              >
                <el-option
                  v-for="item in zycxData.query.layerFieldData[
                    zycxData.query.layerName
                  ]"
                  :key="item.name"
                  :value="item.name"
                  :label="item.aliasname"
                />
              </el-select>
            </div>
            <div class="panels">
              <span>属性值:</span>
              <el-input
                v-model="zycxData.query.fieldValue"
                placeholder="请输入..."
                class="select"
                clearable
              />
            </div>
            <div class="serach" @click="sxsbSearch()">查询</div>
          </div>
          <div v-if="zycx == 'kj'" class="sxsb_contents">
            <div class="panels">
              <span>业务图层:</span>
              <el-select
                placeholder="请选择"
                class="select"
                v-model="zycxData.query.layersName"
                multiple
                @change="
                  (v) => {
                    zycxData.query.layersData.filter((item) => {
                      if (v === item.value) {
                        zycxData.query.currLayerConfig = item;
                      }
                    });
                  }
                "
                clearable
              >
                <el-option
                  v-for="item in zycxData.query.layersData"
                  :key="item.value"
                  :value="item.value"
                  :label="item.name"
                />
              </el-select>
            </div>
            <div class="panels">
              <span>绘制范围:</span>
              <div class="conditions">
                <div>
                  <div class="panel" @click="createBoxEvent">
                    <img src="@/assets/images/datacenter/zbx.png" />
                  </div>
                  <div class="panel" @click="drawInteractionEvent()">
                    <img src="@/assets/images/datacenter/dbx.png" />
                  </div>
                  <div
                    class="panel"
                    @click="cleanLayer()"
                    style="cursor: pointer"
                  >
                    清除
                  </div>
                </div>
                <div class="panel_serach" @click="openCoordinate">
                  <i class="iconfont yh-daoru" />
                  导入
                </div>
              </div>
            </div>
            <div class="panels">
              <span>缓冲距离:</span>
              <el-input
                placeholder="请输入内容"
                v-model="zycxData.query.distance"
                class="select"
              >
                <template slot="append">米</template>
              </el-input>
            </div>
            <div class="serach" @click="sxsbSearch()">查询</div>
          </div>
          <div v-if="zycxData.show" class="tableList">
            <div class="title">
              <p style="font-family: AlibabaPuHuiTiM; font-size: 14px">
                查询结果
              </p>
              <i
                class="iconfont yh-fanhui"
                @click="
                  () => {
                    zycxData.show = false;
                  }
                "
                title="返回上一级"
              />
            </div>
            <div v-if="zycx == 'sx'" class="tables">
              <div
                class="item"
                v-for="(item, index) in zycxData.table"
                :key="index"
                :class="zycxData.tableId == index ? 'selected' : ''"
                @click="sxsbTableSerach(index, item)"
              >
                <div class="xh">
                  <div>
                    {{ index + 1 }}
                  </div>
                </div>
                <div class="title">
                  <p class="name">
                    {{ item.dk_mc || item.xmmc || item.xm_mc }}
                  </p>
                  <p>
                    <span class="span_wh">批准文号：</span>
                    <span class="span_wh_v">{{ item.dk_bh || item.pzwh }}</span>
                  </p>
                </div>
                <i class="iconfont yh-dingwei" />
              </div>
            </div>
            <div v-if="zycx == 'sx'" style="position: absolute; bottom: 0px">
              <Page
                :total="zycxData.total"
                show-total
                @on-change="
                  (page) => {
                    zycxData.page = page;
                    sxsbSearch();
                  }
                "
              />
            </div>
            <div v-if="zycx == 'kj'" class="tables">
              <div v-for="(item, index) in zycxData.tables" :key="index">
                <p>
                  <el-tag
                    type="warning"
                    style="font-size: 16px; font-weight: bold"
                    >{{ item.name }}</el-tag
                  >
                </p>
                <div
                  class="item"
                  v-for="(item1, index1) in item.data"
                  :key="index1"
                  :class="
                    zycxData.tableId == index1 + item.name ? 'selected' : ''
                  "
                  @click="sxsbTableSerach(index1 + item.name, item1)"
                >
                  <div class="xh">
                    <div>
                      {{ index1 + 1 }}
                    </div>
                  </div>
                  <div class="title">
                    <p class="name">
                      {{ item1.dk_mc || item1.xmmc || item1.xm_mc }}
                    </p>
                    <p>
                      <span class="span_wh">批准文号：</span>
                      <span class="span_wh_v">{{
                        item1.dk_bh || item1.pzwh
                      }}</span>
                    </p>
                  </div>
                  <i class="iconfont yh-dingwei" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-show="isComponent === 'kjfx'" class="contents">
          <div class="title">
            <div
              style="
                width: 6px;
                height: 20px;
                background: #5988ff;
                border-radius: 1px 1px 1px 1px;
                margin-right: 8px;
              "
            />
            <p class="flex-1">{{ nameComp }}</p>
            <i
              v-show="kjfxData.fxType != -1"
              class="iconfont yh-fanhui"
              @click="
                () => {
                  kjfxData.fxType = -1;
                }
              "
              title="返回"
            />
          </div>
          <div class="sxsb_contents">
            <div class="panel_box">
              <div @click="drawInteractionEvent()">
                <i class="iconfont yh-huizhi" style="color: #5b89ff" />
                绘制
              </div>
              <div @click="openCoordinate">
                <i class="iconfont yh-daoru" style="color: #f0a123" />
                导入
              </div>
              <div @click="sqFeatrue">
                <i class="iconfont yh-shiqu" style="color: #1abfbf" />
                拾取
              </div>
              <div @click="cleanLayer()">
                <i class="iconfont yh-qingchu" style="color: #e7891a" />
                清除
              </div>
            </div>
            <div class="panels">
              <span>缓冲距离:</span>
              <el-input
                placeholder="请输入内容"
                v-model="input2"
                class="select"
                disabled
              >
                <template slot="append">米</template>
              </el-input>
            </div>
            <div class="panels">
              <span>分析类型:</span>
              <el-select
                v-model="kjfxData.analysisType"
                placeholder="请选择"
                class="select"
              >
                <el-option value="报部" label="报部" />
                <el-option value="报省" label="报省" />
              </el-select>
            </div>
            <div class="btn-groups" style="flex-flow: column; margin-top: 0px">
              <div
                class="btn"
                style="margin-bottom: 10px"
                v-for="(item, index) in kjfxData.data"
                @click="
                  () => {
                    kjfxData.fxType = index;
                    // if(item.value=='yf'){openYfkAnalyies()}else{kjfxData.yfkData.show=false}
                    //  if(item.value=='dz'){openDzAnalyies()}
                  }
                "
                :class="{ selected: kjfxData.fxType == index }"
                :key="item.value"
              >
                {{ item.name }}分析
              </div>
            </div>
          </div>
          <!-- <div v-if="kjfxData.fxType == 0" class="kjfx_contents">
            <gh-a-xz-analysis
              :kjxx="kjfxData.data[kjfxData.fxType]"
              :analysisType="kjfxData.analysisType"
            />
          </div>
          <div v-if="kjfxData.fxType == 1" class="kjfx_contents">
            <gh-a-xz-analysis
              :kjxx="kjfxData.data[kjfxData.fxType]"
              analysisType=""
            />
          </div> -->
          <div v-if="kjfxData.fxType == 0" class="kjfx_yfk_contents">
            <yfk-analysis />
          </div>
          <div v-if="kjfxData.fxType == 1" class="kjfx_yfk_contents">
            <dz-analysis />
          </div>
        </div>
      </div>
    </transition>
    <vl-map
      class-name="base-map flex-2"
      :map.sync="map"
      projection="EPSG:4490"
      @loaded="mapLoaded"
    >
      <!-- 图层配置 -->
      <vl-config-layers
        ref="configLayer"
        :layers-config="layersConfig"
        :visible-layer-ids="visibleLayerIds"
        @loaded="configLayerLoaded"
      />
      <!-- 工具栏 -->
      <vl-tool-bar :height="32" :radius="4">
        <vl-tool-bar-item
          no-padding
          style="width: 32px"
          @click="resetMapView"
          title="还原"
        >
          <svg
            t="1639635589124"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6660"
            width="21"
            height="21"
          >
            <path
              d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m325.248-631.936c0 1.152-11.84 13.44 0 13.44 0 6.72 14.464 9.6 15.424 18.432 0.768 6.592-11.2 14.976 11.328 17.664 3.072 6.784 25.984 9.216 29.44 2.048-14.528 0 0.256-11.264-8.064-11.264 0-3.712-4.736-3.712-5.376-7.808 1.792-0.704 11.648 0.32 16 0-0.704-4.16-10.624-7.04-10.624-10.624-3.648 0-12.8 5.44-12.16-0.448 0.64-6.528-2.368-3.648-7.872-8-1.536 0-7.744-7.552-5.376-9.216 6.208 0 5.76 0.832 13.376-0.768 1.152 0 18.368-2.816 10.688-2.816-8.96-4.8-2.56-10.88-20.928-7.936-9.856 1.536-14.72 6.912-25.856 7.296z m38.784 380.544a445.248 445.248 0 0 0 82.24-298.048 49.536 49.536 0 0 1-16.768-2.368c-14.592 0-26.944-13.888-41.6-9.536 0.256-0.64 0-0.96-0.64-0.64 1.152-3.648-11.008-24.96-16.192-15.552-1.408 2.56 4.288 11.712 6.656 13.312 0 1.92 1.28 6.336 2.944 7.936 4.224 4.16-0.96 5.504 0 8.128 5.376 0 4.544-1.024 5.824-8.768 0.64 0.512 0.576 0.704 1.472 0.704a9.92 9.92 0 0 0 1.28 8.064c5.44 8.32-1.216 0.512 0.896 6.592 7.424 0 14.592-4.096 18.24-13.184 2.816 2.112-0.576 5.184 2.176 6.592 2.432 2.816 4.8 4.16 3.2 7.552-1.024 2.24 6.208 6.656 4.8-1.728 8 2.304 6.656 12.16 0.768 16.064 0 3.84-3.648 4.16-3.648 9.152 0 3.2-2.368 8.832-5.12 9.792 0 1.92-21.76 11.392-20.48 15.36-3.776 0-17.152 3.84-19.648 8.768-2.688 0-13.632 3.84-14.592 5.76-13.568 0-11.008-16-17.536-16 0.576-2.688-1.28-3.84-2.88-6.528 4.16 0-13.12-32.256-13.12-37.248-2.624-1.28-6.08-10.56-6.592-13.888-3.584-2.368-7.296-10.176-8.768-14.592a53.248 53.248 0 0 1-13.888-18.24c5.248 0.576 13.12 1.6 13.12-5.12-3.52 0-4.032-4.352-0.64-4.352-1.152-4.48 2.304-7.68 3.072-11.2 0.896-4.224 2.688-10.752 2.688-15.808-5.056 0-6.208 0.832-10.24 2.176 0 2.944-8.896-0.704-10.24-0.704-1.92-3.84-15.68 4.992-19.648-2.944-6.272-5.76-4.608-10.112-6.592-18.176-1.024-4.096-6.592-4.288-9.92-4.992-9.6-1.856-2.688 11.392-3.2 14.4 5.824 0-3.648 7.296-3.648 10.944-9.856-2.112-6.592-13.12-12.416-16-1.664-2.944-0.256-5.12-4.352-5.12 0-3.968 2.112-11.008-2.24-12.416 0-1.92-8.192-2.688-9.472-5.12-5.184 0-17.344-19.84-21.056-13.184-2.368 4.288 1.92 5.376 2.816 8.768 7.552-1.472 6.784 12.544 16.064 10.944 0 1.984 0.256 3.968 0.704 5.888 6.848-1.6 6.08 5.12 9.536 5.12-2.56 3.328-10.432-5.312-8.32 1.92 1.28 4.224 0.64 7.808-4.864 11.904 0-4.48-0.32-16.768-5.12-16.768-3.2-6.464-12.736-4.928-16.768-10.944-3.264 0-4.544-10.24-10.24-10.944-1.024 1.472-4.992 2.88-6.528 2.88-3.072 6.208-20.416 0.64-20.416 1.472-3.84 8.576-7.232 17.344-10.24 26.24-1.088 6.592-6.4 6.72-7.936 12.928-0.768 3.072-19.84 1.6-19.84 3.904-8.128-2.752-15.296-8.512-15.296-17.472-0.64 0 1.536-22.976 2.944-26.304 1.664 0.448 1.984 1.024 2.944 2.88 5.056-1.792 16.768 1.28 16.768-4.352 4.864 0.128 6.4 2.112 4.352 5.824 4.544 0.896 12.416 2.048 12.416-4.352-2.624 0-2.944-0.256-2.944-2.944 8.768-9.088-6.528-17.28-6.528-21.888-3.072-1.024-9.408-7.744-4.928-5.248 3.84 2.112 17.664 6.464 12.16-2.752a1.152 1.152 0 0 0 0.768-0.768c1.536 1.152 8.064 7.872 8.064 1.472 1.792 0 8.704-4.352 2.88-4.352 0.576-3.264 0.448-6.016 0.768-8.064 9.216 4.992 4.032-3.392 8.768-6.528 0 6.016 4.992-2.944 8-2.944 3.584-5.376 11.84-1.216 13.824-7.296-4.48-1.472-3.584-12.672-3.584-16.768 5.312 0.896 11.328-7.296 12.16-1.664 0.32 2.112 0.576 8.128 1.664 8.96 7.936 4.16 5.888-2.432 5.888-6.592-2.688 0-6.208-9.344-6.592-13.888-2.176 0.32-5.76 1.28-6.592 2.944-8 0-13.376-2.944-19.712-2.944-0.448-0.96-8.064-9.536-7.296-9.536-4.416-7.68 4.48-5.376 5.888-5.76 0-7.232 30.08-5.952 31.36-17.536-9.856 0 10.24-16.832 10.24-16.768 6.656-5.76 10.24-10.688 18.56-11.328 3.584-0.256 42.752-11.072 42.752-6.208 3.84 0.128 28.48 0.064 28.48 2.944 3.904 0 12.608 4.352 15.424 2.816 4.8-2.624 24.704 5.76 24.704 12.48-9.344 0-22.208 2.176-34.304 2.176 0 2.752 1.28 0.32 0 2.944 4.16 0 11.648 10.88 10.944 14.592 5.888 0.128 8.32-4.352 12.352-4.352 0 4.992 5.824 5.824 7.296 0-4.48 0-2.24-6.592-1.472-6.592 3.072-5.568 9.6 0.384 12.224-6.848a447.104 447.104 0 0 0-647.872-39.04c0.64 1.536 7.936-3.456 9.216-3.776 0 4.608-1.024 4.864 0.768 10.24 0.832 0 5.12 7.104 5.12 10.24 3.904-0.32 9.6-2.88 10.88 2.176a23.808 23.808 0 0 1-5.76-0.768c1.344 11.328-4.992 4.416-10.24 4.416 0-0.704-16-7.168-9.536 3.648 1.728 0 0.832 2.688 5.632 4.288 5.696 1.92 11.84 3.008 17.728 3.84 4.8 0.832 7.616-0.832 11.712-0.832 0-0.64 9.984-5.12 2.88-5.12 1.024-3.968-0.768-4.992-5.12-5.056 0.384-4.288 10.496-1.472 14.656-1.472 3.136-5.312 0.064-4.736 2.816-9.6 3.392-5.888 7.36-0.768 9.6-6.464 3.2 1.28 6.208 3.072 7.232 7.296 2.624 2.176 16.064 22.08 16.064 8 4.8 1.664 7.232 10.624 7.296 15.36 8.768-1.28 9.536-7.808 9.536-14.592 1.984 0-0.768-3.328-0.768-4.416 3.2-1.216 7.296 3.136 7.296-1.472 1.408 0 1.472 1.408 1.472 2.944 4.544 0.896 7.424-0.512 10.24 0.448 1.92 0.704 0.896 10.624 0 14.144-1.088 4.48-9.536 4.544-9.536 6.592-9.6 7.168 11.328 10.88 14.656 15.36a38.208 38.208 0 0 1-9.536-1.472c-4.736 0-16.192 4.992-20.416 1.408 5.888 0 7.872-7.04 8.768-13.824a10.496 10.496 0 0 0-13.376 6.72c-2.56 8.96-8.448-0.384-11.456 5.696-1.152 0.384-11.648 5.248-11.648 3.648-11.84 1.664-8.768 11.712-8.768 22.592 4.672 2.816 14.272 10.88 13.824 15.36 10.688 1.856 14.528 2.944 24.128 4.352 0.768 1.6 3.904 3.008 5.824 3.648 0 6.272 5.76 5.12 10.944 5.12 0-8 9.28 6.656 10.24 9.472-1.28 0 2.176 8.192 2.88 11.008-1.408-0.576-1.92 0-1.408 1.408 4.608 1.728 11.904 1.28 13.12-3.648-4.48 0-2.944-5.12-2.944-8.064-4.608-3.008-3.84-8.896 0.768-10.176 0 4.16 15.04-2.56 6.528-5.824 2.112-4.672 3.456-11.84 0.128-15.872-2.176-2.56-4.864 0-5.952-3.84 5.76-1.472 1.536-12.416 1.472-17.536 1.792-0.64 6.528 1.216 6.528 0 5.632 0 14.976 7.168 18.24-1.472 9.408 4.288 1.92 8.32 11.712 5.12 0 2.304 11.008 13.184 12.416 13.184 0 0.448-0.256 3.584 2.176 3.584 0 2.368-1.472-1.344-1.472 2.944 1.408 0.128 8.768 1.472 8.768-1.472 4.736 0 8.064-5.76 8.064-10.24 2.944-1.92 8.064 16.064 11.648 16.064 2.56 4.096 10.944 10.048 10.944 13.888 1.792 1.792 3.648 1.28 3.648 6.592 2.24 0 6.592-8.768 6.592-0.704 2.048 0 8.064 4.416 8.768 8-5.248 0-0.256 5.12-2.944 5.12 0 4.992-11.264 1.024-13.824 0.64-3.52 15.744-24.576 4.48-37.312 8.576-6.72 2.112-19.648 16.96-20.416 24.32 8.192 0.128 11.712-7.04 19.008-9.472 5.888 0 7.04-3.648 12.416-5.12 0 1.472 1.472 0.704 1.472 2.176-10.432 0-4.096 6.784-1.088 11.648 2.944 4.736 6.272 6.4 10.56 6.592-1.088 3.328-6.528 0.64-6.528 4.416-1.984 0.64-5.888 2.112-6.656 3.648-11.712 1.28-5.952 0.512-5.12-2.304 0.384 1.024 4.608 0.064 4.48 0.128-0.768-3.52-1.792-3.072-0.768-5.12-6.4 0-9.472 2.944-14.592 2.944-0.896 1.728-5.312 5.76-7.296 5.76-1.472 4.544-4.864 12.8-8.768 15.36 0-1.152-10.432 6.592-9.536 6.592-2.304 3.712-4.8 3.584-5.824 9.472a50.368 50.368 0 0 0-3.648 11.648c-4.48 3.072-6.208 15.36-13.824 15.36-4.736 9.408-13.12 8.128-13.12 20.48 2.816 2.944 3.904 15.808 4.8 19.968 1.088 5.184 2.816 10.496-4.096 10.688-0.448-0.832-5.248-8.064-4.352-8.064a45.888 45.888 0 0 0-5.888-15.68c-2.88-4.032-8.192 0.64-12.416-1.088-1.792-3.584-13.888-4.416-18.24-4.416 0.704 2.688 2.688 3.584 2.944 6.592-3.584 1.472-5.632 3.072-9.344 2.56-6.4-0.896-5.568-5.824-12.544-5.12a21.12 21.12 0 0 0-19.008 21.504c-1.216 0-1.216 21.888 0 21.888 0 6.208 5.12 10.688 5.12 15.36 4.928 0 10.496 10.88 15.36 10.88 0.512 3.904-2.432 4.48 5.76 4.48 0-0.448 4.544-2.88 5.12-5.888-5.696-1.408 0-8.768 3.648-10.24 0 5.248 7.296-1.728 7.296-2.176l8.064-2.88c0-5.888 5.504 0.576 1.472 2.88-3.968 0-3.648 6.592-5.824 6.592-0.96 4.672-2.816 8.768-3.904 13.312-1.408 5.632 3.2 6.208 1.664 11.52 5.824 1.024 11.648 0 17.536 0a5.504 5.504 0 0 0-0.704-2.944c8.448 0 0.704 16 5.76 16 0 6.144 3.008 10.88 3.008 14.72 3.84 2.56 6.272 6.08 5.12 10.88 4.8 0.64 15.296 1.92 15.296-4.352 7.36 0 7.872 5.056 7.296 10.24 14.72 0 5.504-14.656 11.648-14.656 0.64-2.368 1.6-2.816 3.008-1.28 3.008 1.664 5.312-3.008 7.68-4.48a19.904 19.904 0 0 1 3.904-2.048c2.112 1.28 2.24 0.896 3.2 2.304a21.76 21.76 0 0 0 11.456-4.736c5.248 0.704 3.52 11.968 13.376 12.672 3.968 0.32 13.12 1.408 16.512-0.96 0.832-0.576 3.968 1.92 4.352 3.072 3.2 0 2.944 2.88 4.416 2.816 0.32 0.64 0.768 0.832 1.472 0.704 0.384 1.28 3.008 1.6 4.352 5.12 0 3.136 6.592 3.712 6.592 5.76 4.672 2.432-1.6 3.072 5.568 5.248 4.032 1.28 7.68 3.2 11.968 3.52 1.28-5.12 5.76 0.768 8 0.768 1.152 2.368 1.728 0.576 2.88 2.944 6.784 5.632 2.304 3.456 5.12 9.472 3.2 2.112 4.224 9.6 5.12 13.824-2.56 0-0.768 10.048-0.768 10.944-3.136 0 8.064 6.08 8.064-1.408 4.608 0.768 7.68 5.76 10.944 5.76-1.92 4.48 5.12 7.744 5.12 0.832 6.912 0.64 5.12 11.072 4.416 14.592 5.76 0 6.4-4.032 12.288-3.84 3.392 0 6.848 2.56 8.128-1.28 6.4 1.984 12.288 5.568 17.088 10.304 9.408 8.32 10.88 29.824 1.152 37.12 0 1.344-10.624 13.12-10.88 13.12 0 1.472-0.384 16-0.832 16 0 2.944-2.24 19.072-4.352 19.072 0 8.192-5.376 9.728-7.296 17.472-4.416 3.328-16.448 8.768-18.24 12.416-3.456 0-6.016 2.944-9.472 2.944-0.512 1.024-8 8-6.592 8-0.576 5.184 0.384 17.344-2.432 20.8-1.92 2.24-4.544 1.984-3.392 5.504-4.096 0 0.256 2.88-6.208 2.88-4.096 0-11.328 5.888-11.52 10.752-0.32 6.08-1.92 10.432-7.104 14.08 0 2.048-9.472 2.688-9.472 8 0.896 0 0 9.92 0 11.008-2.816-0.128-9.792 2.752-10.944 5.12-9.6 0-8.384 0.896-14.592 5.12 0 1.28-0.896 5.76-2.176 5.76 0 7.424-5.248 0.704-9.536 4.416 1.664 0 3.84 7.296 2.944 7.296 0 6.4-3.968 6.976-8 11.712-1.92 1.28-3.776 6.528-5.12 6.528 0 4.352-2.176 8.32-2.176 12.416 0.896 0 0 1.92 0.64 3.648 2.112-0.64 2.112-2.944 3.008-2.944 0-3.648 5.76 2.176 2.176 2.176-3.072 4.544-6.272 4.672-8.064 11.008-5.184 0-9.984 13.12-5.12 13.12a12.8 12.8 0 0 0 2.496 7.168 447.36 447.36 0 0 1-35.584-11.456c-0.448-12.8-0.192-48.96 4.608-48.96 0-2.24 1.92-11.712 3.648-11.712 0-5.76 0.768-12.8 0-19.712-2.176-4.352 2.88-9.92 4.48-16.768 8.32-4.224 2.368-46.72 8.704-46.72 0-21.248 4.736-33.6 1.408-53.312 1.664 0-9.6-11.904-9.472-11.648-10.688 0-18.24-17.28-18.24-24.768-1.024-3.392-3.648-8.32-3.648-12.48 2.496 0-15.36-26.112-15.36-25.536-9.344-5.184 0.64-12.544 1.536-21.12-8.192-2.752 0.064-24.832 3.648-24.832a6.912 6.912 0 0 1 4.352-5.888c1.856 7.296 10.304-3.584 3.648-3.584 0-4.864-0.512-15.168 0-17.536 0-7.424-6.592-22.016-11.648-6.592-5.504-2.688-19.264-2.24-20.48-10.944 0.896-4.288-7.808-13.056-10.88-14.592 2.816-7.488-14.848-17.536-21.248-17.536 0-1.6-3.328-0.832-4.352-2.88-6.464 0-8-8.768-15.36-8.768-8.448 0-16.96-5.888-24.768-5.888-2.624-5.184-14.72-3.2-17.536-8.704-6.336 0-8.832-12.096-8.96-16.576-0.256-5.376-4.608-24.32-12.16-24.32 0-4.608-10.496-12.416-13.184-12.416 0-0.832-4.224-10.24-5.824-10.24 0-3.136-11.072-17.344-12.864-11.136-1.152 4.032 8.512 9.408 8.512 14.08 1.728 0 9.28 14.336 10.816 16.832 16.384 27.904-12.288 8.832-12.288-2.944-3.712-1.856-9.536-15.872-9.536-19.712a62.08 62.08 0 0 1-8-15.36c0-8.896-4.864-13.12-14.592-13.12a288 288 0 0 0-8.768-12.416c0-3.648-6.592-14.976-10.24-16.768 0-7.552-3.84-16.96-2.112-24.832 0-13.888-0.256-31.232-13.184-41.6l-0.128-0.256A443.84 443.84 0 0 0 64 512c0 247.04 200.96 448 448 448 147.2 0 278.016-71.36 359.744-181.376-19.392 4.224-12.672-46.592-9.728-55.36 2.944 2.176 5.12 6.272 7.296 0-5.248-1.088-3.968-2.88-2.176-7.296 3.52 2.176 13.888 5.76 13.888-2.176-8.448 0 1.408-13.952 1.408-5.12 7.424 0 2.688-9.28 5.824-12.416 0 3.712 1.92 14.528 4.416 15.36 5.76 5.248-4.416 7.04-4.416 10.88-2.56 1.28-2.176 6.528-2.176 8.064h-3.648c-0.384 7.232-3.648 15.296-3.648 21.12-3.52 0-2.176 13.184-2.752 20.928z m-107.904-403.84c3.392 1.28 2.816 2.56 2.112 8.384 4.48 0.384 31.808-2.368 31.808-7.232 0.96 0 5.696 16.64 5.696 2.368 3.84 0 5.76 15.36 14.784 10.88 0 3.136 15.168-10.88 7.04-10.88 0.512-21.76-10.56-18.112-14.08-30.208-3.648 0-4.928-4.8-9.856-4.8-3.2-1.92-5.76-0.64-7.68 3.84-7.488 4.992-2.88-6.336-8.576-6.336 0.192-12.48-2.624-15.872-10.624-14.528-4.672 17.792-11.712 28.48-10.624 48.448v0.064zM574.08 252.352c0 3.52 5.12 3.264-1.664 5.952a46.208 46.208 0 0 1-19.2 3.456c-2.496 0-20.928 2.048-20.928 0.64-6.848 0-12.224-2.112-20.352-2.688 0-1.92 11.52-7.36 1.088-7.36 0 0 12.224-3.392 13.888-3.392 0 1.344-2.368 0.768 1.088 1.344 0.576 1.28-0.192 4.736 0 4.736 0 1.6 16.448-1.92 18.816-2.112 12.928-1.152 16.448-6.528 16.448 2.112 7.168 1.664 5.632-1.152 10.816-2.688z m7.168 31.424c0-7.616-3.392-7.04-5.12-15.36-2.24-12.224 12.544 0.896 17.216-12.48 10.88 0 1.408 6.208-1.024 6.208 1.856 0.576-0.32 5.568-0.32 7.232 9.984-0.128 10.24-4.864 17.408-6.208-1.536 6.912-11.52 8.32-1.728 14.208 5.248 3.2 10.56 6.848 8.448 11.584 12.8 0 14.72 9.472 12.16 20.672 7.04 0 6.656 0.256 6.656-5.184 6.912 1.472 6.4 6.208 0 6.208-6.4 9.664-23.04 9.28-34.88 9.28-0.064-7.552-1.984-8-10.944-5.888-12.288 2.88-2.752-7.488-2.56-12.672 1.408 0 27.904 0.896 12.16-3.136-0.832-11.072-4.096-14.464-17.472-14.464z m51.392 46.016c-3.584-3.648-0.128-5.568 0.704-9.408-6.656-1.728 6.784-3.712 7.36-5.376-2.176 0-3.776-2.304-2.88-4.288 0.96-2.304 2.624 2.752 4.928 1.6 2.688-0.32 8.064-4.352 5.312 3.52-2.752 7.936-5.376 13.76-15.36 13.952h-0.064z m3.648-10.944c1.216 0.832 1.664 0 1.152-2.56h6.144c0 6.4-6.144 11.392-7.296 2.56z m-192 68.736c5.056-0.384 7.296-1.856 7.296-7.296-4.672 3.072-6.208 2.176-7.296 7.296z m261.12-7.36c5.312 1.344-0.64 4.288-1.728 7.424-2.56-2.112-1.792-2.816-3.392-6.08 4.032 1.344 5.76 0.896 5.12-1.28v-0.064z m0-1.472c3.072 0 3.968 12.352-4.544 10.048 0-3.008-2.304-8.704 2.304-8.704 1.28 4.8 2.24 2.816 2.24-1.28v-0.064z m4.928 1.536c-3.84 2.24-2.048 4.544-7.168 2.368-2.24-0.896-4.608-4.992-5.632 0.256 6.528 0.832 12.8 11.648 12.8-2.624z m156.544 210.368c1.088 0.064 8-0.064 8-1.216 6.336 0 14.848-0.768 21.056-2.56 0 8.32-7.872 13.056-6.528 21.44-5.248 0-2.944 4.8-2.944 6.464-3.392 1.92-3.84 5.312-7.936 7.168 0 3.776-9.408 9.984-12.16 13.248-3.2 3.584-12.608 9.856-13.888 14.464 0.384-1.088-17.28 16.512-13.12 16.512 0 3.264-4.928 29.248 1.472 29.248 0 2.304 5.44 24.064 2.112 24.064 0 7.04-4.992 11.264-4.992 16.832-2.496 1.536-6.08 2.368-7.296 4.608-4.48 0-6.592 8.448-8.704 8.448 0 9.024-2.88 15.744-2.88 25.984 0.768 0-5.824 14.656-5.824 15.616-5.312 3.2-18.816 14.784-18.816 20.8l-10.88 13.632c-2.816 0-24.704 3.712-24.704 5.248-4.672 0-16.64 3.328-19.584-0.64 0-4.16-2.56-9.344-2.88-14.976-2.24 0-2.56-8.448-5.12-8.448 0-1.792-13.76-26.688-11.52-26.688a39.232 39.232 0 0 0-2.944-11.008c0-8.96-7.232-16.448-7.232-24.704-2.176 0-6.528-18.24-4.352-18.24 0-9.536 3.712-15.808 5.248-26.368 1.728-11.648-0.832-18.752-3.072-26.944-1.28 0-5.376-6.208-5.76-7.808-5.888-3.456-8-10.368-8-16.896 3.84-3.84 5.312-18.56 4.352-23.424-7.296-3.136-10.24-1.92-18.112-1.92-4.736-8.448-36.096-3.2-45.056-3.2 0 4.544-21.824-0.96-23.872-4.608-5.376 0-16-10.24-16-14.976-5.76-3.456-15.168-20.864-15.168-26.624-5.056-2.304-3.52-11.072-0.768-11.072 0.704-2.432-1.728-10.112-2.944-13.76-0.832-2.752 2.944-5.76 2.944-8.96 0-9.088 0.256-13.248 5.888-22.912 1.792-3.072 4.032-5.888 5.76-9.728 3.008-6.784 3.84-0.32 7.936-6.4 3.904-1.728 6.208-7.552 10.24-10.368 1.664-2.112 1.728-3.008 0-4.608a36.48 36.48 0 0 0 4.992-12.288c5.632-7.04 1.664-3.84 7.296-3.264 2.048-2.048 5.376-7.168 8.64-7.168 1.408-2.56 4.992-3.904 8-3.904 0 3.84 11.84-1.28 13.056-1.28 2.048-3.648 15.04-7.808 18.112-7.808 0-4.48 25.664 1.28 29.76 0.64v-1.92c5.44 1.152 15.488 20.928 14.528 25.344 4.16 0 8.064-0.64 10.88 0 0 4.224 8.768 5.248 12.8 5.376 5.568 0.256 21.952-0.448 21.952-7.36 4.288 0 8.128 2.688 7.296 7.168 4.864 0.448 33.92 0.96 31.872 6.464 4.224 0 5.312 6.528 9.408 6.528-0.832 4.48 5.12 16.256 9.472 16.256 0 3.904 2.688 11.136 6.528 13.632 2.048 5.568 8.832 17.408 15.232 20.8-2.752 4.608 4.096 8.448 5.76 13.056-0.384 0 1.472 6.784 3.648 7.744 0 4.672 10.816 23.424 16.64 23.424 0.448 2.304-5.504 3.392 2.176 3.84zM318.784 509.44l-2.048-1.088c-2.368 10.304 6.912 8.448 6.912 2.176-2.048 1.6-3.904 4.288-4.864-1.088z m59.264-4.928c8.448 0.896 9.216 6.784 16.128 6.784 1.28 2.24 8.576 7.424 1.536 8.128-5.376 0.512-12.16-2.368-14.336-6.848-3.392 0-10.048-2.944-12.096-6.08 3.328 0.192 6.656 1.536 8.768-1.984z m11.968 3.392c2.176 0.576 7.168 5.376 7.424 7.424-7.36-0.832-7.68-0.64-15.488-0.64-1.088 2.112-10.176 1.728-11.392-0.704 3.328 0 5.952 1.344 9.408 0 0-1.856-1.536-3.328-2.688-5.376 3.648 0 7.808 2.816 12.8 2.688 0-3.136-1.408 0.64 0-3.392h-0.064z m-8.96 0.448c-2.688 9.088 3.072 7.168 6.592 7.168 0.256-3.968-1.92-6.4-6.592-7.168z m-0.704 7.296c0.64-5.824 6.016-12.416 7.296-1.28-2.368 0.512-4.928 0.896-7.296 1.28z m0.64-7.296c-2.56 11.584 2.688 5.952 6.656 5.952 0-4.16-3.584-5.952-6.656-5.952z m-0.64 0c3.072 0 7.296 1.728 7.296 4.864-3.008 0-4.288 1.536-7.296 2.432v-7.296z m0 71.296c6.08 0 5.888-0.32 7.296-5.44a112.384 112.384 0 0 0-5.504-1.92l-1.792 7.36z m448 127.168c9.6 2.112 7.68 0.256 5.76-6.464-4.48 2.368-5.76 1.792-5.76 6.464z"
              p-id="6661"
            />
          </svg>
        </vl-tool-bar-item>
        <vl-tool-bar-item
          no-padding
          style="width: 32px"
          @click="sqFeatrue"
          title="属性识别"
        >
          <i class="iconfont yh-sxsb" style="font-size: 26px" />
        </vl-tool-bar-item>
        <vl-tool-bar-item
          no-padding
          style="width: 26px"
          @click="openCoordinate"
          title="坐标导入"
        >
          <i class="iconfont yh-daoru" style="font-size: 22px" />
        </vl-tool-bar-item>
        <vl-tool-bar-item
          no-padding
          style="width: 32px"
          @click="cleanLayer"
          title="清除"
        >
          <i class="iconfont yh-qingchu" style="font-size: 26px" />
        </vl-tool-bar-item>
        <vl-tool-bar-item
          no-padding
          style="width: 26px"
          @click="cleanLayer"
          title="地图量算"
        >
          <vl-tool-box :height="26" />
        </vl-tool-bar-item>
      </vl-tool-bar>
      <!-- 图例 -->
      <vl-legend
        v-show="legendShow"
        :size="40"
        :legend-fill="0.4"
        :enabled-layers="enabledLayersConfig"
        :default-expand="true"
        @closeLayer="closeLayer"
      />
      <!-- 闪烁 -->
      <vl-feature-flicker
        :feature="feature"
        new-layer
        :duration="2400"
        :interval="100"
        :padding-bottom="paddingBottom"
      />
      <!-- 详情 -->
      <vl-feature-overlay
        v-show="overlayShow"
        :feature="feature"
        :use-centroid="false"
        no-styled
      >
        <template slot-scope="{ props }">
          <div class="feature-overlay">
            <p
              class="title text-ellipsis title-opt"
              title="featureOverlayData.layerName"
            >
              123
            </p>
            <div class="section5 section5-opt" style="padding: 0 4px">
              <table>
                <tr>
                  <th>123</th>
                  <td>123</td>
                </tr>
              </table>
            </div>
          </div>
        </template>
      </vl-feature-overlay>
    </vl-map>
    <!--    <div id="description" class="description" ref="description">这里是描述文字</div>-->
    <div v-show="sxsbData.show" class="oepnLayerFeature">
      <div class="contents">
        <div class="select_box">
          <Select
            v-model="layIndex"
            style="width: 200px"
            @on-change="selectChange"
          >
            <Option
              v-for="(item, index) in sxsbData.layerData"
              :value="index"
              :key="index"
              >{{ item.layerName }}</Option
            >
          </Select>
          <p class="desc">
            已识别<span>{{ sxsbData.layerData.length }}</span
            >个图层
          </p>
        </div>
        <table v-if="sxsbData.layerData.length > 0 && layIndex >= 0">
          <tr
            v-for="(item, index) in sxsbData.layerData[layIndex]
              .featureOverlayTable"
            :key="index"
          >
            <th>{{ item.name }}</th>
            <td>{{ item.value }}</td>
          </tr>
        </table>
      </div>
    </div>
    <el-dialog
      title="导入坐标文件"
      :visible.sync="coordinateDialogShow"
      custom-class="dialogClass"
      width="30%"
    >
      <read-coordinates />
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
    <read-coordinates ref="read-coordinates" style="display: none" />
    <!--    <Spin fix v-show="spin"   :show="spinShow">分析中...</Spin>-->
    <Spin fix v-show="spin">
      <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
      <div>分析中</div>
    </Spin>
  </div>
</template>
<script>
import "ol/ol.css";
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 { arcgisQuery } from "@/utils/arcgis-map-server-query";
import VlToolBox from "@/components/ol/VlToolBox";
import { getSrid } from "@/utils/arcgis-utils";
import TABLE_COMP_MAPPING from "@/components/common/mapping";
import { GeoJSON } from "ol/format";
import { Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer } from "ol/layer";
import { Fill, Stroke, Style, Icon, Text } from "ol/style";
import { convertRingsToGeoJSON } from "@/utils/ArcGISGeoJSONConvertTool.js";
import MapUtils from "@/utils/MapUtils";
import Draw from "ol/interaction/Draw";
import { Overlay } from "ol";
import { fromLonLat } from "ol/proj";
import readCoordinates from "./DataCenter/ReadCoordinates";
import GhAXzAnalysis from "./DataCenter/GhAXzAnalysis";
import YfkAnalysis from "./DataCenter/YfkAnalysis";
import dzAnalysis from "./DataCenter/dzAnalysis";

// import fields from '@/assets/json/fields.json'
import ZoomSlider from "ol/control/ZoomSlider";
import FullScreen from "ol/control/FullScreen";
import { Polygon, Point, LineString } from "ol/geom";
import { saveAs } from "file-saver";
import { jsPDF } from "jspdf";
import OlExtPrintDialog from "ol-ext/control/PrintDialog";
import CanvasTitle from "ol-ext/control/CanvasTitle";
import Legend from "ol-ext/legend/Legend";
import LegendCtrl from "ol-ext/control/Legend";
import CanvasAttribution from "ol-ext/control/CanvasAttribution";
import control from "ol/control";
import CanvasScaleLine from "ol-ext/control/CanvasScaleLine";
export default {
  name: "DataCenter",
  data() {
    return {
      regionCode: JSON.parse(window.sessionStorage.getItem("yzt-user"))
        .userInfo,
      fields: window.ApplicationConfig.mapFieldConfig,
      spin: false,
      view: {
        viewWidth: 0,
        viewHeight: 0,
      },
      isComponent: "zyml",
      nameComp: "资源目录",
      leftBoxClose: true,
      menusData: [
        { name: "资源目录", bagC: "zyml", icon: "yh-ziyuanmulu" },
        { name: "资源查询", bagC: "sxsb", icon: "yh-xinxichaxun" },
        { name: "空间分析", bagC: "kjfx", icon: "yh-kongjianfenxi" },
      ],
      query: {
        xzqdm: [],
      },
      xzqOptions: [],
      titleBtns: [
        { name: "基础分类", value: "jc", className: "jc_b" },
        { name: "专题分类", value: "zt", className: "zt_b" },
      ],
      tcName: "jc",
      map: undefined,
      layerFeatureKey: undefined,
      viewInfo: {
        x: 120,
        y: 30,
        center: [0, 0],
        zoom: 0,
        extent: [0, 0, 0, 0],
        scale: 1,
      },
      fullScreen: false,
      layersConfig: getMapLayerConfig(), // getMapLayerConfig 获取的是 config.js 配置的克隆
      enabledLayersConfig: [], // 启用的图层配置，来源于 vl-config-layers 的loaded事件回调
      feature: undefined, // 闪烁和气泡的 特征
      visibleLayerId: "",
      drawShapeJson: null,
      draw: null,
      polygonLayer: null,
      mapEvent: {
        singleclick: null,
        moveend: null,
      },
      kjfxData: {
        analysisType: "报省",
        data: [
          // { name: "土地利用规划", value: "gh" },
          // { name: "土地利用现状", value: "xz" },
          // { name: "区域一键", value: "yj" },
          { name: "压覆矿", value: "yf" },
          { name: "地灾", value: "dz" },
        ],
        fxType: -1,
      },
      zycxBtnData: [
        { name: "属性查询", value: "sx" },
        { name: "空间查询", value: "kj" },
      ],
      zycx: "sx",
      featureOverlayData: {
        show: false,
        layerName: "",
        featureOverlayTable: [
          { name: "地块名称", value: "名称1" },
          { name: "地块名称", value: "名称1" },
        ],
      },
      layIndex: 0,
      sxsbData: {
        show: false,
        layerData: [],
      },
      layerGeometryMap: {},
      zycxData: {
        show: false,
        tableId: 0,
        total: 0,
        page: 1,
        table: [],
        tables: [],
        query: {
          distance: 0,
          layerName: "",
          layersName: [],
          currLayerConfig: {},
          layersData: [
            { name: "供地地块", value: "st_gddk" },
            { name: "农转用地块", value: "st_nzydk" },
            { name: "批而未供", value: "pewg" },
          ],
          layerFieldName: "",
          layerFieldData: {
            st_gddk: [
              { field: "地块名称", value: "dk_mc" },
              { field: "地块编号", value: "dk_bh" },
            ],
            nzydk: [
              { field: "项目名称", value: "xmmc" },
              { field: "批准文号", value: "pzwh" },
            ],
            pewg: [
              { field: "项目名称", value: "xmmc" },
              { field: "批准文号", value: "pzwh" },
            ],
          },
          fieldValue: "",
        },
      },
      coordinateDialogShow: false,
      sketch: undefined,
      helpTooltip: undefined,
      measureTooltip: undefined,
      continuePolygonMsg: "单击以继续绘制多边形",
      continueLineMsg: "单击以继续绘制线条",
      printInfo: {
        exportMapTitle: "专题图",
      },
      selectValue: null,
    };
  },
  mounted() {
    this.initStaticData();
    this.initQuery();
    this.getMapSources();
  },
  components: {
    VlFeatureOverlay,
    VlToolBox,
    VlLegend,
    VlLayerTree,
    VlFeatureFlicker,
    VlToolBarItem,
    VlToolBar,
    VlConfigLayers,
    VlMap,
    readCoordinates,
    GhAXzAnalysis,
    YfkAnalysis,
    dzAnalysis,
  },
  props: {
    visibleLayerIds: {
      type: Array,
      default: () => [""],
    },
    fixed: {
      type: Number,
      default: -1,
    },
    legendShow: {
      type: Boolean,
      default: true,
    },
    overlayShow: {
      type: Boolean,
      default: false,
    },
    paddingBottom: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    visibleLayerIds: {
      deep: true,
      immediate: true,
      handler: function () {
        this.feature = undefined;
        this.visibleLayerId =
          this.visibleLayerIds[this.visibleLayerIds.length - 1];
      },
    },
    query: {
      deep: true,
      immediate: true,
      handler: function () {},
    },
  },
  methods: {
    openDzAnalyies() {
      let printBtn = document.querySelector(".ol-print button");
      printBtn.click();
    },
    //地图打印（报告分析）
    printMap() {
      const printControl = new OlExtPrintDialog({
        lang: "zh",
        pdf: true,
        openWindow: false,
        quality: 1,
        title: "打印地图",
      });
      printControl.setSize("A4");
      this.map.addControl(printControl);
      this.map.addControl(new CanvasAttribution({ canvas: true }));
      this.map.addControl(
        new CanvasTitle({
          title: this.printInfo.exportMapTitle,
          visible: false,
          style: new Style({
            text: new Text({
              font: '50px"Lucida Grande",Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif',
              fill: new Fill({
                color: `#333`,
                crossOrigin: "anonymous", // Enable print
              }),
            }),
          }),
        })
      );
      //this.createDesc();
      // Add a legend to the print
      var legend = new Legend({
        title: "可利用资源",
        margin: 5,
        items: [
          {
            title: "产业用地",
            typeGeom: "Polygon",
            style: new Style({
              stroke: new Stroke({
                width: 2,
                color: "red",
                crossOrigin: "anonymous", // Enable print
              }),
              fill: new Fill({
                color: `#FECC68`,
                crossOrigin: "anonymous", // Enable print
              }),
            }),
          },
          {
            title: "商业用地",
            typeGeom: "Polygon",
            style: new Style({
              stroke: new Stroke({
                width: 2,
                color: "red",
                crossOrigin: "anonymous", // Enable print
              }),
              fill: new Fill({
                color: `#00B5FA`,
                crossOrigin: "anonymous", // Enable print
              }),
            }),
          },
          {
            title: "居住用地",
            typeGeom: "Polygon",
            style: new Style({
              stroke: new Stroke({
                width: 2,
                color: "red",
                crossOrigin: "anonymous", // Enable print
              }),
              fill: new Fill({
                color: `#1EB289`,
                crossOrigin: "anonymous", // Enable print
              }),
            }),
          },
        ],
      });
      var legendCtrl = new LegendCtrl({ legend: legend });
      printControl.on(["print", "error"], function (e) {
        document
          .querySelector(".ol-control-title")
          .setAttribute("display", "none");
        document.querySelector(".description").setAttribute("display", "none");
        document.querySelector(".zbz").setAttribute("display", "none");
        if (e.image) {
          if (e.pdf) {
            // 导出PDF
            const pdf = new jsPDF({
              orientation: e.print.orientation,
              unit: e.print.unit,
              format: e.print.size,
            });
            pdf.addImage(
              e.image,
              "JPEG",
              e.print.position[0],
              e.print.position[0],
              e.print.imageWidth,
              e.print.imageHeight
            );
            pdf.save(e.print.legend ? "legend.pdf" : "map.pdf");
          } else {
            // 导出图片
            e.canvas.toBlob(
              function (blob) {
                const name =
                  (e.print.legend ? "legend." : "map.") +
                  e.imageType.replace("image/", "");
                saveAs(blob, name);
              },
              e.imageType,
              e.quality
            );
          }
        } else {
          console.warn("No canvas to export");
        }
      });
      printControl.on(["show"], function (e) {
        //打开小标题
        var element = document.querySelector(".ol-control-title");
        element.setAttribute(
          "style",
          "visibility:none;background-color:#fff;height:46px;line-height: 46px;font-size:28px;font-weight:bold;color:#333;text-align:center"
        );
        //隐藏大标题
        var overlayTitle = document.querySelector(".ol-fixedoverlay");
        overlayTitle.setAttribute("style", "display:none");
        //在大标题下添加同级元素description
        var newDiv = document.createElement("div");
        newDiv.setAttribute("class", "description");
        element.parentElement.appendChild(newDiv);
        //添加指北针
        var newDiv = document.createElement("img");
        newDiv.setAttribute("class", "zbz");
        newDiv.setAttribute("src", require("@/assets/images/zbz.png"));
        newDiv.setAttribute(
          "style",
          "width: 48px;position: absolute;right: 0;top: 60px;right:50px"
        );
        element.parentElement.appendChild(newDiv);
      });

      //隐藏地图打印按钮（绑定到地灾分析按钮上）

      document.querySelector(".ol-print").setAttribute("style", "display:none");
      //绑定关闭弹框事件
      var closeIcon = document.querySelector(".ol-closebox");
      closeIcon.addEventListener("click", function (e) {
        document
          .querySelector(".ol-control-title")
          .setAttribute("style", "display:none");
        document
          .querySelector(".description")
          .setAttribute("style", "display:none");
        document.querySelector(".zbz").setAttribute("style", "display:none");
      });
    },
    //加载静态资源
    initStaticData() {
      if (this.fields != null) {
        this.zycxData.query.layersData = this.fields.layersData.filter(
          (item) => {
            return item.isAnal;
          }
        );
        this.zycxData.query.layerFieldData = this.fields.layerFieldData;
        this.zycxData.query.currLayerConfig = this.fields.layersData.filter(
          (item) => {
            return item.isAnal;
          }
        )[0];
      }
    },
    //打开导入坐标文件弹框
    openCoordinate() {
      this.coordinateDialogShow = true;
    },
    selectChange(index) {
      const layer = this.sxsbData.layerData[index];
      console.log("layer");
      console.log(layer);
      console.log(this.layerGeometryMap);
      if (!layer || !layer.layerName || !this.layerGeometryMap) {
        return;
      }
      console.log("layername:" + layer.layerName);
      this.feature = this.layerGeometryMap[layer.layerName];
    },
    //数据详情加定位查询（详情数据绑定）
    sxsbTableSerach(index, item) {
      this.zycxData.tableId = index;
      let currLayerConfig = this.zycxData.query.layersData.filter((i) => {
        return i.serverId == item.layerId;
      })[0]; //获取图层配置
      let fieldConfig =
        this.zycxData.query.layerFieldData[currLayerConfig.value]; //获取当前图层的属性配置
      this.featureOverlayData.layerName = currLayerConfig.name;
      this.featureOverlayData.show = true;
      //判断图层是否开启
      let layerConfing = this.getLayerConfigById(currLayerConfig.serverId);

      if (!layerConfing.visible) {
        this.openLayer(currLayerConfig.serverId);
      }
      this.locationGlobal(layerConfing.id, "objectid =" + item.objectid);
      let layerField = fieldConfig; //读取需要展示的属性字段
      this.featureOverlayData.featureOverlayTable = [];
      layerField.map((i) => {
        this.featureOverlayData.featureOverlayTable.push({
          name: i.aliasname,
          value: item[i.name],
        });
      });
    },
    //属性和空间查询
    sxsbSearch() {
      
      if (this.zycx == "sx") {
        this.closeAllLayersExceptBaseLayers(this.zycxData.query.layerName);
        let params = new FormData();
        if (this.validateField_sxquery()) return;
        params.append("tableName", this.zycxData.query.layerName);
        params.append("fieldName", this.zycxData.query.layerFieldName);
        params.append("fieldValue", this.zycxData.query.fieldValue);
        params.append("type", "sx");
        params.append("page", this.zycxData.page);
        params.append("size", 10);
        //加载等待
        let loading = this.$loading({
          lock: true,
          text: "",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        let _this = this;
        this.$ajax
          .post("/api/data/center/getFiledList", params, this, true)
          .then((res) => {
            loading.close();
            _this.zycxData.table = [];
            _this.zycxData.total = 0;
            const { success, data } = res;
            if (success && data.total > 0) {
              let row = data.rows;
              let layername = "",
                name = "";
              _this.zycxData.query.layersData.map((item) => {
                if (this.zycxData.query.layerName === item.value) {
                  name = item.serverId;
                  layername = item.name;
                }
              });
              //_this.zycxData.table = data.rows;
              row = row.filter((i) => {
                i.layerId = name;
                return i;
              });
              _this.zycxData.table = row;
              _this.zycxData.total = data.total;
              _this.zycxData.show = true;
            } else {
              this.$message.warning("暂无结果");
            }
          });
      } else {
        this.closeAllLayersExceptBaseLayers(this.zycxData.query.layersName);
        let params = new FormData();
        if (this.validataField_kj_sx_sxquery()) return;
        params.append("tableName", this.zycxData.query.layersName.join(","));
        params.append("shapes", JSON.stringify(this.drawShapeJson));
        params.append("type", "kj");
        params.append("page", this.zycxData.page);
        params.append("size", 100);
        let _this = this;
        this.$ajax
          .post("/api/data/center/getFiledList", params, this, true)
          .then((res) => {
            // loading.close();
            const { success, data } = res;
            if (success) {
              _this.zycxData.tables = [];
              Object.keys(data).forEach(function (key) {
                if (data[key].total < 1) return;
                let row = data[key].rows;
                let name = "";
                let layername = "";
                _this.zycxData.query.layersData.map((item) => {
                  if (key === item.value) {
                    name = item.serverId;
                    layername = item.name;
                  }
                });
                row = row.filter((i) => {
                  i.layerId = name;
                  //i.layName = layername;
                  return i;
                });
                _this.zycxData.tables.push({
                  name: layername,
                  data: row,
                });
              });
              if (_this.zycxData.tables.length > 0) {
                _this.zycxData.show = true;
              } else {
                this.$message.warning("暂无结果");
              }
            }
          });
      }
    },
    //查询字段非空校验
    validateField_sxquery() {
      if (
        this.zycxData.query.layerName == "" ||
        this.zycxData.query.layerName == undefined
      ) {
        this.$message.warning("请选择业务图层");
        return true;
      }
      if (
        this.zycxData.query.layerFieldName == "" ||
        this.zycxData.query.layerFieldName == undefined
      ) {
        this.$message.warning("请选择查询字段");
        return true;
      }
      if (
        this.zycxData.query.fieldValue == "" ||
        this.zycxData.query.fieldValue == undefined
      ) {
        this.$message.warning("请输入属性值");
        return true;
      }
    },
    validataField_kj_sx_sxquery() {
      if (this.zycxData.query.layersName.length == 0) {
        this.$message.warning("请至少选择一个业务图层");
        return true;
      } else if (
        this.drawShapeJson == "" ||
        this.drawShapeJson == null ||
        this.drawShapeJson == undefined
      ) {
        this.$message.warning("请绘制分析范围");
        return true;
      }
    },
    //二级菜单切换事件
    ComponentChange(item) {
      this.isComponent = item.bagC;
      this.nameComp = item.name;
      this.view.viewWidth = 570;
      this.leftBoxClose = true;
      if (this.draw != null) {
        this.map.removeInteraction(this.draw);
        this.draw = null;
      }
    },

    mapLoaded(map) {
      let _this = this;
      if (map) {
        this.map = map;
        window.map = map;
      } else {
        map = this.map;
      }
      // 图斑拾取黑名单
      this.mapEvent.singleclick = function (e) {
        _this.feature = undefined;
        _this.visibleLayerIds = [];
        _this.visibleLayerId = "";
        _this.readVisibleLayer();
        _this.pickServerFeature(e);
      };
      this.printMap();
      //图形拖动事件
      this.mapEvent.moveend = function (e) {
        const view = map.getView(); // 获取当前地图的缩放级别
        console.log(
          `范围：${view.calculateExtent()}`,
          `缩放级别：${view.getZoom()}`,
          `中心点：${view.getCenter()}`
        );
      };

      // 创建缩放控件
      var zoomControl = new ZoomSlider();
      var fullScreen = new FullScreen();
      // 将控件添加到地图中
      //map.addControl(zoomControl);
      //map.addControl(fullScreen);
      map.on("moveend", this.mapEvent.moveend);
      //this.createDesc();
      // 根据用户定位行政区
      let code = null;
      let id = "yhzq2024";
      let layers = 0;
      if (this.query.xzqdm.length > 0) {
        code = this.query.xzqdm[this.query.xzqdm.length - 1];
      } else {
        code = this.regionCode["regionCode"];
      }
      if (code.length === 6) {
        layers = 0;
      } else if (code.length === 9) {
        layers = 1;
      } else {
        layers = 2;
      }
      let where = "1=1 and XZQDM ='" + code + "'";
      this.locationMaskFeatureWhere(id, where, layers);
      //this.printMap();
    },
    handleSxChange(v) {
      this.zycxData.query.layersData.filter((item) => {
        if (v === item.value) {
          this.zycxData.query.currLayerConfig = item;
        }
      });
      this.zycxData.query.layerFieldName = "";
    },
    mapReLoaded() {
      let map = null;
      if (map) {
        this.map = map;
        window.map = map;
      } else {
        map = this.map;
      }
      // 根据用户定位行政区
      let code = null;
      let id = "yhzq2024";
      let layers = 0;
      if (this.query.xzqdm.length > 0) {
        code = this.query.xzqdm[this.query.xzqdm.length - 1];
      } else {
        code = this.regionCode["regionCode"];
      }
      if (code.length === 6) {
        layers = 0;
      } else if (code.length === 9) {
        layers = 1;
      } else {
        layers = 2;
      }
      let where = "1=1 and XZQDM ='" + code + "'";
      this.locationMaskFeatureWhere(id, where, layers);
    },
    resetMapView() {
      this.query.xzqdm = [this.regionCode["regionCode"]];
      this.mapReLoaded();
    },
    configLayerLoaded(enabledLayersConfig) {
      this.enabledLayersConfig = enabledLayersConfig;
    },
    //开启属性识别功能
    sqFeatrue() {
      this.CursorPointer();
      this.map.on("singleclick", this.mapEvent.singleclick);
    },
    /**
     * 拾取点击图层属性
     * @param e
     * @returns {Promise<void>}
     */
    async pickServerFeature(e, layerId) {
      this.layerGeometryMap = {};
      // 带上图层显示参数，只拾取显示的图斑
      let 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",
      };
      console.log("this.visibleLayerIds:");
      console.log(this.visibleLayerIds);
      this.sxsbData.layerData = [];
      this.sxsbData.show = false;
      for (const item of this.visibleLayerIds) {
        let feature = null;
        if (item == "") return;
        const layerConfig = this.$refs.configLayer.getLayerConfigById(item);
        if (layerConfig.serverType == "dynamic") {
          feature = await arcgisQuery(
            `${layerConfig.url}/0/query`,
            param,
            true
          ).then(({ features }) => {
            return features[0];
          });
        }
        if (feature != null) {
          // this.feature = feature;
          this.bindingFeatureValues(item, feature);
          // break;
        }
      }
      if (this.sxsbData.layerData.length) {
        const layer = this.sxsbData.layerData[0];
        if (!layer) {
          return;
        }
        const layerName = layer.layerName;
        if (!layerName) {
          return;
        }
        this.feature = this.layerGeometryMap[layerName];
      }
    },
    bindingFeatureValues(id, feature) {
      let layer = {};
      if (!feature) return;
      let layerId = null;
      if (id) {
        layerId = id;
      } else {
        layerId = this.visibleLayerId;
      }
      const layerConfig = this.$refs.configLayer.getLayerConfigById(layerId);
      layer.layerName = layerConfig.name;

      layer.featureOverlayTable = [];
      const values = feature.values_;
      //读取配置文件信息
      let layerData = this.fields.layersData.filter((item) => {
        return layerId == item.serverId;
      });
      if (layerData.length > 0) {
        let fieldsData = this.fields.layerFieldData[layerData[0].value];
        fieldsData.map((item) => {
          layer.featureOverlayTable.push({
            name: item.aliasname,
            value: values[item.name],
          });
        });
      } else {
        Object.keys(values).forEach((i) => {
          if (
            i === "geometry" ||
            i === "objectid" ||
            i === "st_area(shape)" ||
            i === "st_length(shape)"
          )
            return;
          layer.featureOverlayTable.push({
            name: i,
            value: values[i],
          });
        });
      }
      this.layIndex = 0;
      this.sxsbData.show = true;
      this.sxsbData.layerData.push(layer);
      this.layerGeometryMap[layer.layerName] = feature;
    },
    readVisibleLayer(children) {
      if (children) {
        children.filter((item) => {
          if (item.url && item.visible) {
            this.visibleLayerId = item.id;
            this.visibleLayerIds.push(item.id);
          }
          if (item.children) {
            this.readVisibleLayer(item.children);
          }
        });
      } else {
        this.enabledLayersConfig.filter((item) => {
          if (item.url && item.visible) {
            this.visibleLayerId = item.id;
            this.visibleLayerIds.push(item.id);
          }
          if (item.children) {
            this.readVisibleLayer(item.children);
          }
        });
      }
    },
    async locationFeature(
      bsm,
      layerId,
      { feature = undefined, row = undefined } = {}
    ) {
      this.layerFeatureKey = TABLE_COMP_MAPPING[layerId].layerField;
      layerId ||= this.visibleLayerId;
      const layerById = this.$refs.configLayer.getLayerConfigById(layerId);

      if (!layerById) {
        console.error(`no layer id`);
        return;
      }

      if (bsm) {
        if (!feature) {
          const where = `${this.layerFeatureKey} = '${bsm}'`;
          await arcgisQuery(
            `${layerById.url}/0/query`,
            {
              outSR: getSrid(this.map),
              where,
            },
            true
          ).then(({ features }) => {
            feature = features[0];
          });
        }
        if (row) {
          feature && feature.setProperties({ ...row });
        } else {
          // 后台请求详情
          const par = {
            ...TABLE_COMP_MAPPING[layerById.id],
            value: bsm,
          };
        }
      }
      // const geometry = feature.getGeometry()
      // const wkt = WkxGeometry.parseGeoJSON(
      //   new GeoJSON().writeGeometryObject(geometry)
      // ).toWkt()
      // feature.set('wkt', wkt)
      this.feature = feature;
    },
    async locationMaskFeatureWhere(layerId, where, layers) {
      const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
      if (!layerById) {
        console.error(`no layer id`);
        return;
      }
      this.spinShow = true;
      await arcgisQuery(
        `${layerById.url}/${layers}/query`,
        {
          outSR: getSrid(this.map),
          where,
        },
        false
      ).then((resp) => {
        const { features } = resp;
        const json = { type: "FeatureCollection", features: [] };
        if (features.length == 0) return;
        json.features.push(convertRingsToGeoJSON(features[0].geometry.rings));
        MapUtils.drawMapByJson(
          this.map,
          json,
          "rgba(228, 239 ,255,0.2)",
          "#e4185f"
        );
      });
      this.spinShow = false;
    },
    getLayerConfigById(layerId) {
      return this.$refs.configLayer.getLayerConfigById(layerId);
    },
    //定位图斑
    async locationGlobal(layerId, where) {
      if (!this.$refs.configLayer) return;
      const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
      if (!layerById) {
        console.error(`no layer id`);
        return;
      }
      await arcgisQuery(
        `${layerById.url}/0/query`,
        {
          outSR: getSrid(this.map),
          where,
        },
        true
      ).then(({ features }) => {
        if (features.length > 0) {
          let f = features[0];
          f.values_.featuresArr = features;
          this.feature = f;
        }
      });
    },
    async locationByGeoJson(layerId) {
      if (!this.$refs.configLayer) return;
      const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
      if (!layerById) {
        console.error(`no layer id`);
        return;
      }
      const param = {
        where: "1=1",
        f: "json",
        inSR: getSrid(this.map),
        outFields: "*",
        returnGeometry: "true",
        geometry: `{"rings" : ${JSON.stringify(
          this.drawShapeJson
        )},"spatialReference" : {"wkid" : 4490}}`,
        geometryType: "esriGeometryPolygon",
        spatialRel: "esriSpatialRelIntersects",
      };
      await arcgisQuery(`${layerById.url}/0/query`, param, true).then(
        ({ features }) => {
          if (features.length > 0) {
            let f = features[0];
            f.values_.featuresArr = features;
            //this.feature = f;
          }
        }
      );
    },
    async drawByGeoJson(json) {
      if (this.polygonLayer != null) {
        this.polygonLayer.getSource().clear();
        this.polygonLayer = null;
      }
      if (!json) {
        return;
      }
      //使用GeoJSON构建source
      const source = new VectorSource({
        features: new GeoJSON().readFeatures(json),
      });
      this.polygonLayer = new VectorLayer({
        source: source,
        style: new Style({
          fill: new Fill({
            color: "rgba(252,97,133,0.2)",
          }),
          stroke: new Stroke({
            color: "rgb(252,97,133)",
            width: 2,
            lineDash: [4, 4],
          }),
        }),
        zIndex: 99,
      });
      this.map.addLayer(this.polygonLayer);
      this.map.getView().fit(source.getExtent(), {
        duration: 500,
        maxZoom: 17,
      });
    },
    closeAllLayersExceptBaseLayers(layerName) {
      if(!layerName){
        return;
      }
      let layerGroup = [];
      if (!Array.isArray(layerName)) {
        layerGroup.push(layerName);
      } else {
        layerGroup = layerName;
      }
      let dict = this.zycxData.query.layersData;
      if(!dict || !layerGroup.length){
        return;
      }
      let newLayerGroup = layerGroup.map((val) => {
        let find = dict.find((item) => item.value == val);
        if (find) {
          return find.serverId;
        }
        return null;
      });
      this.enabledLayersConfig[1].children.forEach((it) => {
        if (!newLayerGroup.includes(it["id"])) {
          it.visible = false;
        } else {
          if (!it.visible) {
            it.visible = true;
          }
        }
      });
    },
    /**
     * 关闭配置图层 隐藏
     * @param id
     */
    closeLayer(id) {
      this.enabledLayersConfig[1].children.forEach((it) => {
        if (it["id"] === id) {
          //it.visible = !it.visible
          it.visible = false;
        }
      });
    },
    /**
     * 打开图层 隐藏
     * @param id
     */
    openLayer(id) {
      this.enabledLayersConfig[1].children.forEach((it) => {
        if (it["id"] === id) {
          it.visible = true;
        }
      });
    },
    //清除绘制的矢量图层
    cleanLayer() {
      this.feature = undefined; //清除定位图斑
      this.map.un("singleclick", this.mapEvent.singleclick); //移除图斑拾取事件

      this.polygonLayer ? this.polygonLayer.getSource().clear() : null;
      this.closeDrawInteraction(); //移除多边形绘制
      this.featureOverlayData.show = false;
      this.sxsbData.show = false;
      this.drawShapeJson = null;
      this.CursorDefault();
    },
    initQuery() {
      let code = this.regionCode["regionCode"];
      let name = this.regionCode["regionName"];
      this.xzqOptions.push({
        value: code,
        label: name,
        children: [],
      });
      let params = {
        code: code,
        type: "q",
      };
      this.$ajax.get("/api/area/tree", params, this).then((res) => {
        let { data, success } = res;
        if (data) {
          this.xzqOptions[0].children = data.map((item) => {
            return {
              value: item.regionCode,
              label: item.regionName,
              children: item.children ? this.getCzQuery(item.children) : [],
            };
          });
          this.query.xzqdm = code;
        }
      });
    },
    getCzQuery(children) {
      let queryData = [];
      queryData = children.map((item) => {
        return { value: item.regionCode, label: item.regionName };
      });
      return queryData;
    },
    //行政区切换查询范围线
    cascaderChange(value, selectedData) {
      this.query.xzqdm = value;
      this.mapReLoaded();
    },

    // 函数：获取地图上所有图层使用的数据源
    getMapSources() {
      const layers = this.map.getLayers().getArray();
      const sources = layers.map((layer) => {
        let layerName = layer.get("name");
      });
      return sources;
    },
    /**
     * 框选绘制分析
     */
    pointerMoveHandler(evt) {
      const { sketch, continuePolygonMsg, continueLineMsg, helpTooltip } = this;
      if (evt.dragging) {
        return;
      }
      /** @type {string} */
      let helpMsg = "点击开始绘图";

      if (sketch) {
        const geom = sketch.getGeometry();
        if (geom instanceof Polygon) {
          helpMsg = continuePolygonMsg;
        } else if (geom instanceof LineString) {
          helpMsg = continueLineMsg;
        }
      }

      const element = helpTooltip.getElement();
      element.innerHTML = helpMsg;
      element.classList.remove("hidden");
      helpTooltip.setPosition(evt.coordinate);
    },

    /**
     * 绘制多边形分析
     */
    // 创建一个矩形
    createBox(coordinates, geometry) {
      if (!geometry) {
        geometry = new Polygon([]);
      }
      const start = coordinates[0];
      const end = coordinates[1];
      geometry.setCoordinates([
        [
          [start[0], start[1]],
          [end[0], start[1]],
          [end[0], end[1]],
          [start[0], end[1]],
          [start[0], start[1]],
        ],
      ]);
      return geometry;
    },
    createBoxEvent() {
      let _this = this;
      //this.map.set('drawing', true)
      //this.map.on('pointermove', this.pointerMoveHandler)
      let sourse = this.careateInteractionLayer();
      // 绘制交互
      if (this.draw != null) {
        this.map.removeInteraction(this.draw);
        this.draw = null;
      }
      this.draw = new Draw({
        source: sourse,
        type: "Circle",
        geometryFunction: this.createBox,
      });

      this.map.addInteraction(this.draw);

      this.draw.on("drawend", function (event) {
        //this.map.removeInteraction(this.draw);

        _this.closeDrawInteraction();
        //_this.map.un('pointermove', this.pointerMoveHandler);
        var feature = event.feature;
        var geometry = feature.getGeometry();
        const extent = geometry.getExtent();
        // 进行分析
        _this.polygonLayer.getSource().addFeature(feature);
        _this.CursorDefault();
        const geoJSONFormat = new GeoJSON();
        const intersectedFeatures = _this.polygonLayer
          .getSource()
          .getFeatures(); //存在复核图斑
        _this.drawShapeJson = _this.$refs["read-coordinates"].shpConvert(
          geoJSONFormat.writeFeaturesObject(intersectedFeatures),
          "CGCS2000_3_Degree_GK_Zone_40",
          "4528"
        );
      });
    },
    //创建绘制矢量图层
    careateInteractionLayer() {
      let sourse = null;
      if (this.polygonLayer == null) {
        sourse = new VectorSource();
        this.polygonLayer = new VectorLayer({
          source: sourse,
          style: new Style({
            fill: new Fill({
              color: "rgba(252,97,133,0.2)",
            }),
            stroke: new Stroke({
              color: "rgb(252,97,133)",
              width: 3,
              lineDash: [4, 4],
            }),
          }),
          zIndex: 99,
        });
        this.map.addLayer(this.polygonLayer);
      } else {
        sourse = this.polygonLayer.getSource();
      }
      return sourse;
    },
    //开启绘制
    drawInteractionEvent() {
      let _this = this;
      this.CursorCrosshair();
      let sourse = this.careateInteractionLayer();
      // 绘制交互
      if (this.draw != null) {
        this.map.removeInteraction(this.draw);
        this.draw = null;
      }
      const style = new Style({
        fill: new Fill({
          color: "rgba(0,0,0,0)",
        }),
        stroke: new Stroke({
          color: "rgb(252,97,133)",
          width: 3,
          lineDash: [4, 4],
        }),
      });
      this.draw = new Draw({
        source: sourse,
        type: "Polygon", // 绘制多边形
        style: null,
        zIndex: 99,
      });
      this.map.addInteraction(this.draw);
      this.draw.on("drawend", (event) => {
        this.closeDrawInteraction();
        var feature = event.feature;
        var geometry = feature.getGeometry();
        const extent = geometry.getExtent();

        if (this.zycxData.query.distance > 0) {
          _this.polygonLayer.getSource().getFeature().clear();
        }
        // 进行分析
        _this.polygonLayer.getSource().addFeature(feature);
        _this.CursorDefault();
        const geoJSONFormat = new GeoJSON();
        const intersectedFeatures = this.polygonLayer.getSource().getFeatures(); //存在复核图斑
        _this.drawShapeJson = _this.$refs["read-coordinates"].shpConvert(
          geoJSONFormat.writeFeaturesObject(intersectedFeatures),
          "CGCS2000_3_Degree_GK_Zone_40",
          "4528"
        );
      });
    },
    //关闭绘制
    closeDrawInteraction() {
      this.map.removeInteraction(this.draw);
    },
    CursorDefault() {
      this.map.getTargetElement().style.cursor = "default";
    },
    CursorHelp() {
      this.map.getTargetElement().style.cursor = "help";
    },
    CursorCopy() {
      this.map.getTargetElement().style.cursor = "copy";
    },
    CursorPointer() {
      this.map.getTargetElement().style.cursor = "pointer";
    },
    CursorPan() {
      this.map.getTargetElement().style.cursor = "-webkit-grab";
    },
    CursorMove() {
      this.map.getTargetElement().style.cursor = "move";
    },
    CursorCrosshair() {
      this.map.getTargetElement().style.cursor = "crosshair";
    },
  },
};
</script>

<style scoped lang="scss">
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
.ol-ext-dialog {
  z-index: 9999 !important;
}
.page {
  display: flex;
  .menus {
    z-index: 2;
    width: 90px;
    height: 100%;
    background: #e5f0ff;
    box-shadow: 1px 0px 2px 0px rgba(101, 98, 98, 0.15);
    border-radius: 0px 0px 0px 0px;
    .items {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 100%;
      height: 90px;
      cursor: pointer;
      .icon {
        width: 42px;
        height: 42px;
        border-radius: 6px 6px 6px 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        i {
          color: #fff;
          font-size: 24px;
        }
      }
      .zyml {
        background: #30aeef;
      }
      .sxsb {
        background: #f0a123;
      }
      .kjfx {
        background: #35d173;
      }
      .text {
        margin-top: 6px;
        font-family: AlibabaPuHuiTiM;
        font-size: 16px;
        color: #585757;
        line-height: 20px;
        text-align: center;
        font-style: normal;
      }
      &.selected {
        background: #f3fbff;
        .text {
          font-family: Alibaba PuHuiTi-Bold;
          color: #172339;
        }
      }
    }
  }
  .page-left {
    z-index: 1;
    height: 100%;
    width: 480px;
    background: #ededed;
    //border-right: 1px solid #d3e3fd;
    padding: 20px 10px 0px 10px;
    .condition {
      display: flex;
      justify-content: space-around;
      .panel {
        background: #ffffff;
        border-radius: 4px 4px 4px 4px;
        display: inline-block;
        height: 42px;
        padding: 0px 12px;
        border: 1px solid #d6d6d6;
        img {
          position: relative;
          top: 5px;
          width: 20px;
        }
        .iconfont {
          color: #91969b;
        }
      }
    }
    .contents {
      position: relative;
      height: calc(100% - 60px);
      margin-top: 8px;
      background: #ffffff;
      border-radius: 4px 4px 4px 4px;
      padding: 20px;
      .btn-groups {
        height: 38px;
        background: linear-gradient(to bottom, #e9f6ff, #ffffff);
        display: flex;
        margin-top: 15px;
        .btn {
          flex: 1;
          font-family: Alibaba PuHuiTiR;
          font-weight: normal;
          font-size: 16px;
          color: #446ae7;
          text-align: center;
          font-style: normal;
          height: 100%;
          line-height: 38px;
          cursor: pointer;
          background: #e9f0ff;
          &.selected {
            color: #fff;
            background: #5988ff;
          }
        }
      }
      .sxsb_contents {
        height: calc(100% - 60px);
        position: relative;
        .panels {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          margin: 10px 10px;
          font-family: AlibabaPuHuiTiM;
          color: #404a5b;
          font-size: 14px;
          .select {
            width: 80%;
            margin-left: 8px;
            z-index: 0;
          }
          .conditions {
            width: 80%;
            margin-left: 8px;
            display: flex;
            justify-content: space-between;
            > div {
              display: flex;
            }
            div.panel {
              width: 36px;
              height: 36px;
              background: #ffffff;
              border-radius: 4px 4px 4px 4px;
              border: 1px solid #ccd1dc;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 8px;
              color: #446ae7;
            }
            div.panel_serach {
              background: #e8f0ff;
              border-radius: 5px 5px 5px 5px;
              border: 1px solid #c2d8ff;

              width: 85px;
              height: 36px;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
              i {
                color: #f0a123;
              }
            }
          }
        }
        .serach {
          background: #5988ff;
          border-radius: 5px 5px 5px 5px;
          height: 40px;
          line-height: 40px;
          color: #fff;
          font-size: 18px;
          font-family: AlibabaPuHuiTiM;
          text-align: center;
          position: absolute;
          width: calc(100% - 20px);
          margin: 0px 10px;
          bottom: 30px;
          cursor: pointer;
        }
        .panel_box {
          display: flex;
          justify-content: space-between;
          > div {
            width: 100px;
            height: 42px;
            background: #e8f0ff;
            border-radius: 5px 5px 5px 5px;
            border: 1px solid #c2d8ff;
            font-family: AlibabaPuHuiTiM;
            font-weight: normal;
            font-size: 15px;
            color: #333333;
            display: flex;
            justify-content: center;
            align-items: center;
            .iconfont {
              margin-right: 2px;
              font-size: 18px;
            }
          }
        }
        > div {
          margin: 15px 0px;
        }
      }
      .tableList {
        height: calc(100% - 60px);
        position: absolute;
        width: 100%;
        background: #fff;
        top: 50px;
        padding: 20px;
        left: 0px;
        .title {
          display: flex;
          justify-content: space-between;
          height: 36px;
          p {
            font-family: Alibaba PuHuiTiM;
            font-weight: normal;
            font-size: 14px;
            color: #5b5f63;
          }
        }
        .tables {
          height: calc(100% - 60px);
          overflow-y: auto;
          .item {
            padding: 20px;
            height: 90px;
            background: #f1f7fb;
            margin: 10px 0px;
            flex-direction: row;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            cursor: pointer;
            .title {
              display: flex;
              height: 28px;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              flex: 12;
              .name {
                font-family: AlibabaPuHuiTiM;
                color: #172339;
                font-size: 15px;
              }
              .span_wh {
                font-family: AlibabaPuHuiTiR;
                font-weight: normal;
                font-size: 14px;
              }
              .span_wh_v {
                font-family: AlibabaPuHuiTiR;
                font-weight: normal;
                font-size: 14px;
              }
            }
            .xh {
              flex: 1;
              div {
                background: linear-gradient(to right, #5988ff, #44cae7);
                width: 20px;
                height: 20px;
                text-align: center;
                border-radius: 50%;
                color: #fff;
                font-weight: bold;
                line-height: 20px;
              }
            }
            .iconfont {
              flex: 1;
              color: #f08523;
              font-size: 24px;
            }
            &.selected {
              background: #e3eeff;
              .title .name {
                color: #3764d6;
              }
            }
          }
        }
      }
      .kjfx_contents {
        height: calc(100% - 60px);
        width: 100%;
        position: absolute;
        top: 60px;
        left: 0px;
        background: #fff;
        overflow-y: auto;
      }
      .kjfx_yfk_contents {
        height: calc(100% - 120px);
        width: 100%;
        position: absolute;
        top: 120px;
        left: 0px;
        background: #fff;
        overflow-y: auto;
      }
    }
    .title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-family: AlibabaPuHuiTiM;
      font-weight: normal;
      font-size: 18px;
      color: #16191d;
      i {
        font-size: 18px;
        cursor: pointer;
        color: #807d7d;
      }
      .el-tag {
        color: #fff;
        font-family: AlibabaPuHuiTiM;
        font-weight: 500;
        font-size: 12px;
        margin-left: 6px;
      }
    }
  }
  .base-map {
    //@import "~@/components/ol/theme-dark.scss";
    position: absolute;
    top: 65px;
    left: 570px;
    width: calc(100% - 570px);
    height: calc(100% - 65px);
    overflow: hidden;
    background: url("~@/assets/ol/map-bg.png") round;
    border-radius: 5px;
    // z-index: -1;

    $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;
    }

    ::v-deep .vl-tool-bar {
      top: 15px;
      right: 15px;
      .vl-tool-bar-item {
        & + .vl-tool-bar-item {
          margin-left: 0px !important;
          margin-top: 0px !important;
        }
      }
      .vl-layer-tree {
        position: absolute;
        left: 0px !important;
      }
    }
    .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-family: Microsoft YaHei;
      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: $bgc;
          margin-bottom: 8px;
        }
      }

      .vl-legend {
        left: 0px;
        bottom: 0px;
        .legend-btn {
          //background: $bgc;
        }

        .legend-panel {
          background: $bgc;

          .legend-title {
            background-color: rgba(35, 144, 238, 0.9);
          }
        }
      }

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

      .vl-tool-box {
        .tool-box-title {
          svg {
            width: 22px;
            height: 22px;
          }
        }
      }
    }

    .feature-overlay {
      z-index: 999;
      width: 331px;
      color: white;
      z-index: 999;

      .title {
        font-size: 18px;
        line-height: 30px;
        background: linear-gradient(270deg, #47c4fa 0%, #2390ee 100%);

        &.title-opt {
          height: 38px;
          background: linear-gradient(
            270deg,
            rgba(71, 196, 250, 0.8) 0%,
            rgba(35, 144, 238, 0.8) 100%
          );
        }

        padding: 5px 55px 5px 16px;
        margin: 0 4px;
        font-weight: normal;
        position: relative;

        > span {
          position: absolute;
          top: 6px;
          right: 5px;
          color: #6fffc0;
        }

        .subtitle {
          font-weight: normal;
          cursor: pointer;
          float: right;

          &.selected {
            font-weight: bold;
          }
        }

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

      .section5 {
        height: 176px;
        background: url(~@/assets/ol/map-overlay-white.png) 100% 100%;

        &.section5-opt {
          opacity: 0.8;
        }

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

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

    .ivu-spin-fix {
      z-index: 0 !important;
      background-color: unset;
      color: white;
      background-image: $mask-bgc;
    }
  }
  .description {
    position: absolute;
    background-color: white;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: red;
    z-index: 2;
  }
  ::v-deep {
    .base {
      &.el-select {
        .el-input__inner {
          height: 40px;
          border-color: transparent !important;
          font-size: 15px;
          color: #333333;
        }
      }
      &.el-input {
        .el-input__inner {
          border: none !important;
        }
      }
    }
    .dialogClass {
      border-radius: 12px 12px 12px 12px;
      .el-dialog__header {
        border-radius: 12px 12px 12px 12px;
        background: linear-gradient(180deg, #deebff 0%, #ffffff 100%);
        font-family: AlibabaPuHuiTiM;
        font-weight: normal;
        font-size: 17px;
        color: #181b1f;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: #333;
        font-weight: bold;
        font-size: 20px;
      }
    }
    .ivu-cascader {
      .ivu-select-dropdown {
        z-index: 999;
      }
      .ivu-cascader-rel {
        .ivu-input {
          height: 40px;
          border-color: transparent;
        }
      }
    }
    .el-tabs__content {
      .title {
        height: 48px;
        line-height: 48px;
        font-weight: bold;
        font-size: 16px;
        color: #333;
      }
      table {
        width: 100%;
        font-size: 15px;
        line-height: 15px;
        border-collapse: collapse; /* 合并表格边框 */
        td,
        th {
          padding: 2px 0;
          border: 1px solid #dfe7f0; /* 设置表格边框样式和颜色 */
          text-align: center;
          height: 32px;
          font-family: "Alibaba PuHuiTiR";
          font-weight: normal;
          font-size: 14px;
          color: #3c4859;
        }
        th {
          padding-right: 0.5em;
          word-break: keep-all;
          font-weight: normal;
          color: #000;
          width: 25%;
          background: rgba(237, 246, 255, 1);
        }

        td {
          min-width: 3em;
          color: #000;
          width: 25%;
          padding: 10px;
        }

        td + th {
          padding-left: 0.5em;
        }
      }
    }
  }
  ::v-deep .data-c {
    position: relative !important;
    left: 0px;
    .vl-layer-tree .layer-dropdown {
      left: 0px;
      right: revert;
      border-radius: 0px;
      background: none;
      box-shadow: none;
    }
  }
  .oepnLayerFeature {
    position: absolute;
    right: 60px;
    top: 80px;
    width: 400px;
    height: 600px;
    z-index: 9999;
    background: rgb(255, 255, 255);
    border-radius: 4px;
    .title {
      width: 100%;
      height: 38px;
      font-family: "Alibaba PuHuiTi-Bold";
      font-weight: 500;
      font-size: 16px;
      color: #1f2f47;
      line-height: 19px;
      text-align: center;
      padding: 0px 10px;

      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .contents {
      width: 100%;
      height: calc(100% - 38px);
      overflow-y: auto;
      padding: 10px 10px;
      > .select_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        > .desc {
          font-family: AlibabaPuHuiTiM;
          font-size: 14px;
          display: flex;
          align-items: center;
          > span {
            display: inline-block;
            margin: 0px 5px;
            // font-size: 22px;
          }
        }
      }
      table {
        width: 100%;
        font-size: 15px;
        line-height: 15px;
        border-collapse: collapse; /* 合并表格边框 */
        border-radius: 8px 8px 8px 8px;
        font-family: AlibabaPuHuiTiM;
        font-size: 14px;
        margin-top: 15px;
        td,
        th {
          padding: 2px 0;
          border: 1px solid #d6d6d6; /* 设置表格边框样式和颜色 */
          border-radius: 8px 8px 8px 8px;
          text-align: center;
          height: 32px;
        }
        th {
          padding-right: 0.5em;
          word-break: keep-all;
          font-weight: normal;
          color: #000;
          width: 40%;
          background: #f4f6f8;
        }
        td {
          min-width: 3em;
          color: #000;
          width: 60%;
          padding: 5px 10px;
        }

        td + th {
          padding-left: 0.5em;
        }
      }
    }
  }
}
</style>