﻿﻿﻿﻿﻿﻿﻿﻿<template>
  <div id="mapContent" style="height:100%;">
    <!-- 地图容器 -->
    <div id="mapNode" style="width:100%;height:100%;"></div>
    <!-- 地图小工具 -->

    <div style="position: absolute;right: 20px;top: 106px;">
      <a-radio-group v-model:value="radio4" size="small" @change="baseMapChange">
        <a-radio-button value="影像">影像</a-radio-button>
        <!-- <el-radio-button value="矢量" disabled>矢量</el-radio-button> -->
        <!-- <el-radio-button value="地形">地形</el-radio-button> -->
        <a-radio-button value="谷歌">谷歌</a-radio-button>
        <a-radio-button value="高德">高德</a-radio-button>
      </a-radio-group>
    </div>

  </div>
</template>
<script>
import * as esriLoader from 'esri-loader';
import Vue from 'vue';
import request from '../../utils/gw_ajax_request.js';
import { dateFormat } from '../../utils/gw_date.js';
// config
import {
  baseLayerOptions,
  baseLayerOptions_M,
  gaodeTileInfo,
} from '../../views/zongHeXinXiNew/config/lyrConfig.js';

// handler
import { baseMapChangeHandler } from '../../views/zongHeXinXiNew/js/baseMapChange.js';

const options = {
  url: '/arcgisApi/4.7/init.js',
}; // 底图切换

export default {
  components: {},
  props: ['gdX', 'gdY'],
  computed: {
    userId: () =>
      localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '1098101939614724096',
  },
  data() {
    return {
      loading: true,
      radio4: '影像', // 底图切换radiobutton
      mapObject: null,
      viewObject: null,
      fullExtent: '',
      initOptions: null, // 各图层option
      popupDelay: '', // 延时弹出
      currentRsCode: '1111111',
      currentStatus: '',
      currentLocation: '',
      zoomnext: '',
      currentExtent: '',
      timeInterval_people: '', // 定时刷新人员
      currentChangeGraphicLayerId: '', // 当前graphic类型变化的图层id
      currentChangeGraphicId: '',
      tileInfo: '', // 高德切片信息
      biaojiFlag: false,
      showBiaojiTable: false,
      activeName: '到这去',
      currentAdCode: '',
      leftLayersAddedList: [], // 左侧图层已经添加列表   为一张图查询做支撑
      showSearchOneMapToolTip: false, // 一张图查询开关
      showSearchOneMap: false, // 一张图空间查询结果
      mapPointObj: null,
      bufferDistance1: 10, // 缓冲距离
      showRealTimeData: false, // 水利一张图实时数据查询列表
    };
  },
  watch: {},
  mounted() {
    this.initOptions = baseLayerOptions_M;
    this.tileInfo = gaodeTileInfo;
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化地图
      esriLoader
        .loadModules(
          [
            'esri/Map',
            'esri/views/MapView',
            'esri/geometry/SpatialReference',
            'esri/geometry/Extent',
            'esri/layers/MapImageLayer',
            'esri/Basemap',
            'esri/layers/tdtLayer',
            'esri/layers/WebTileLayer',
            'esri/layers/support/TileInfo',
            'esri/geometry/Point',
            'esri/config',
            'dojo/domReady!',
          ],
          options,
        )
        .then(
          ([
            Map,
            MapView,
            SpatialReference,
            Extent,
            MapImageLayer,
            Basemap,
            tdtLayer,
            WebTileLayer,
            TileInfo,
            Point,
            esriConfig,
          ]) => {
            this.mapObject = new Map({});

            for (var i = 0; i < this.initOptions.length; i++) {
              // 加载底图服务
              if (this.initOptions[i].id == 'id_gaode') {
                var tileInfo1 = new TileInfo(this.tileInfo);
                var gaodelayer = WebTileLayer(this.initOptions[i].urlTemplate, {
                  tileInfo: tileInfo1,
                  id: this.initOptions[i].id,
                  visible: this.initOptions[i].visible,
                });
                this.mapObject.add(gaodelayer);
              } else if (this.initOptions[i].id == 'id_google') {
                var lyr = new WebTileLayer({
                  urlTemplate: this.initOptions[i].urlTemplate,
                  id: this.initOptions[i].id,
                  subDomains: this.initOptions[i].subDomains,
                  visible: this.initOptions[i].visible,
                });
                this.mapObject.add(lyr);
              } else {
                var lyr = new WebTileLayer({
                  urlTemplate: this.initOptions[i].urlTemplate,
                  id: this.initOptions[i].id,
                  subDomains: this.initOptions[i].subDomains,
                  visible: this.initOptions[i].visible,
                });
                this.mapObject.add(lyr);
              }
            }
            this.viewObject = new MapView({
              container: 'mapNode',
              map: this.mapObject,
              viewingMode: 'global',
              constraints: {
                rotationEnabled: false,
              },
            });
            this.viewObject.ui.move(['zoom'], 'bottom-right');
            this.viewObject.when(
              () => {
                var ext = new Extent({
                  xmax: 15979347.376847023,
                  xmin: 7628754.910750309,
                  ymax: 6006251.7894124305,
                  ymin: 2518277.3147041956,
                  spatialReference: new SpatialReference({ wkid: 102100 }),
                });
                this.viewObject.extent = ext;
                this.fullExtent = ext;
                this.loading = false;
                this.locationHandler(this.gdX, this.gdY);
              },
              (error) => {
                console.log("The view's resources failed to load: ", error);
              },
            );
          },
        )
        .catch((err) => {
          console.error(err);
        });
    },
    locationHandler(x, y, imgUrl) {
      this.viewObject.graphics.removeAll();
      esriLoader
        .loadModules(
          [
            'esri/Graphic',
            'esri/layers/GraphicsLayer',
            'esri/geometry/Point',
            'esri/geometry/SpatialReference',
          ],
          options,
        )
        .then(([Graphic, GraphicsLayer, Point, SpatialReference]) => {
          var pt = new Point(x, y, new SpatialReference(4326));
          if (!imgUrl) {
            var symbol = {
              type: 'picture-marker',
              url: '/src/static/location.png',
              width: '36px',
              height: '36px',
            };
            var gra = new Graphic({
              geometry: pt,
              symbol: symbol,
              attributes: {},
            });
            this.viewObject.graphics.add(gra);
          } else {
            var symbol = {
              type: 'picture-marker',
              url: imgUrl,
              width: '12px',
              height: '12px',
            };
            var gra = new Graphic({
              geometry: pt,
              symbol: symbol,
              attributes: {},
            });
            this.viewObject.graphics.add(gra);
          }
          this.viewObject
            .goTo({
              target: pt,
              zoom: 12,
            })
            .then((info) => {});
        });
    },
    baseMapChange(val) {
      // 底图切换
      this.viewObject.popup.close();
      baseMapChangeHandler(this.mapObject, val);
    },
  },
};
</script>
<style>
/* ArcGIS CSS is loaded at runtime by the esri-loader */
/* @import url('/arcgisApi/4.7/esri/css/main.css'); */

/*屏蔽esri标注*/
.esri-ui .esri-attribution {
  display: none;
}

#mapContent .esri-ui .esri-popup {
  z-index: 11111;
}

#mapContent .esri-ui-top-left esri-ui-corner {
  padding-left: 14%;
}

#mapContent .esri-view-width-xlarge .esri-popup__main-container {
  width: 310px;
  border-radius: 5px;
  /* background-color: #e2e7f1e6; */
  background-color: #ffffffe6;
  max-height: 300px;
}

#mapContent .esri-popup__button--dock {
  display: none;
}

#mapContent .esri-popup__feature-buttons,
.esri-popup__feature-buttons [role="button"] {
  display: none;
}

#mapContent .esri-popup__content {
  font-size: 14px;
  line-height: 25px;
  overflow-y: hidden;
}

#mapContent .esri-popup__position-container {
  border-radius: 13px;
}

#mapContent .esri-popup__header {
  /* background-color: #a2cae8; */
  background-color: #2a67df59;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  height: 32px;
}

#mapContent .esri-popup--aligned-top-center .esri-popup__pointer-direction {
  background-color: #e2e7f1bf;
}

#mapContent .esri-popup--aligned-bottom-center .esri-popup__pointer-direction {
  background-color: #e2e7f1bf;
}

#mapContent .esri-widget table tr td,
.esri-widget table tr th {
  padding: 0px;
  width: 50%;
}

#mapContent tr:nth-child(odd) {
  background-color: rgba(76, 76, 76, 0.1);
}

#mapContent .esri-popup__header {
  position: relative;
  font-size: 12px;
  align-items: center;
  justify-content: space-between;
  display: flex;
  flex: 0 0 auto;
}

.esri-basemap-gallery__item-thumbnail {
  height: 60px;
  width: 80px;
}
</style>
