E-commerce/src/views/page2/cmap.vue

<template>
  <div>
    <div class="input-card content-window-card" ref="infoBox" v-if="infoBoxData" v-show="infoBoxData">
      <div style="padding:7px 0px 0px 0px;">
        <h4>{{infoBoxData.properties.name}}</h4>
        <p class="input-item">完成率: {{ infoBoxData.baseItem.完成率 }}%</p>
        <p class="input-item">移栽面积 {{ infoBoxData.baseItem.面积 }}平方米 移栽数量 {{ infoBoxData.baseItem.已种植 }}</p>
      </div>
    </div>
    <div id="container" class="g-bg1"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import mapOfTongren from '@/http/mapOfTongren.json'

window.map = {}

export default {
  components: {},
  data() {
    return {
      infoBoxData: undefined,
    }
  },
  computed: {},
  async created() { },
  mounted() {
    this.initAMap()
  },
  unmounted() {
    window.map.destroy()
  },
  methods: {
    async initAMap() {
      const vm = this
      let infoWindow
      //在指定位置打开信息窗体
      function openInfo() {
        const item = vm.infoBoxData
        const { center } = item.properties
        infoWindow = new AMap.InfoWindow({
          content: vm.$refs.infoBox,
        });

        infoWindow.open(map, center || map.getCenter());
      }
      window._AMapSecurityConfig = {
        securityJsCode: `a2017cdc059be6c03b430a3185098003`,
      }
      AMapLoader.load({
        key: `6260c9b9128ad802001c8a5ff18bde16`, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: `2.0`, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [`AMap.Scale`], // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then(async (AMap) => {
          function addPolygon(data) {
            const path = data.geometry.coordinates
            let polygon = new AMap.Polygon({
              path: path,
              fillColor: `#ccebc5`,
              strokeOpacity: 1,
              fillOpacity: 0,
              strokeColor: `#2b8cbe`,
              strokeWeight: 4,
              // strokeStyle: `dashed`,
              strokeDasharray: [5, 5],
              lineJoin: `round`,
              lineCap: `round`,
            })
            polygon.on(`mouseover`, (e) => {
              // 如果缩放过大还变色, 万一人家是想看放大后的详细地点, 变色后反而不方便
              if (window.map.getZoom() <= 11) {
                vm.infoBoxData = data
                openInfo()
                polygon.setOptions({
                  fillOpacity: 0.7,
                  fillColor: `#7bccc4`,
                })
              }
            })
            polygon.on(`click`, (e) => {
              console.log(`点击了`, data.properties)
            })
            polygon.on(`mouseout`, () => {
              polygon.setOptions({
                fillOpacity: 0,
                fillColor: `#ccebc5`,
              })
            })
            window.map.add(polygon)
          }
          window.map = new AMap.Map(`container`, {
            // resizeEnable: true,
            // 设置地图容器id
            // viewMode: `2D`, // 2D视图
            // mapStyle: `amap://styles/whitesmoke`, // 卫星地图样式
            viewMode: `3D`, // 是否为3D地图模式
            // zoom: 7, // 初始化地图级别
            zoom: 9.22, // 初始化地图级别
            // center: [107.943579, 30.131735], // 初始化地图中心点位置
            center: [108.597461, 28.047503], // 初始化地图中心点位置
            resizeEnable: true,
            layers: [
              new AMap.TileLayer.Satellite(),
              new AMap.TileLayer.RoadNet(),
              // 谷歌图
              // new AMap.TileLayer({
              //   // getTileUrl: `//mt1.google.cn/vt/lyrs=s&hl=zh-CN&gl=CN&x=[x]&y=[y]&z=[z]&s=Gali`,
              //   getTileUrl: `http://mt{1,2,3,0}.google.cn/vt/lyrs=y@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil`,
              //   zIndex: 20,
              //   zoom: 17,
              // }),
              // new AMap.TileLayer({
              //   getTileUrl: `//mt1.google.cn/vt/imgtp=png32&lyrs=h@207000000&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil`,
              //   zIndex: 20,
              //   zoom: 17,
              // }),
              // 天地图
              // new AMap.TileLayer({
              //   getTileUrl: `//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727`,
              //   zIndex: 20,
              //   zoom: 17,
              // }),
              // new AMap.TileLayer({
              //   getTileUrl: `//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727`,
              //   zIndex: 20,
              //   zoom: 17,
              // }),
            ],
            // zooms: [16, 20],
          })
          window.map.setFeatures([`point`]) // 单一种类要素显示
          const baseList = await this.$http.get(`/api/base`)
          let list = mapOfTongren.features.map((item) => {
            const baseItem = baseList.find((baseItem) => String(baseItem.区域编码) === String(item.properties.adcode)) || {}
            item.baseItem = baseItem
            return item 
          })
          list.forEach((item) => {
            addPolygon(item)
          })
          const item = list[0]
          this.infoBoxData = item
          this.$nextTick(() => {
            openInfo()
          })
        })
        .catch((e) => {
          console.log(e)
        })
    },
    tabChange(val) {
      if (val === 0) {
        this.$router.push(`/page1`)
      }
      console.log(`val`, val)
    },
  },
}
</script>

<style label="less">
.custom-input-card {
  width: 18rem;
}

.custom-input-card .btn:last-child {
  margin-left: 1rem;
}

.content-window-card {
  color: #000;
  position: relative;
  width: 23rem;
  padding: 0.75rem 0 0 1.25rem;
  box-shadow: none;
  bottom: 0;
  left: 0;
}

.content-window-card p {
  height: 2rem;
}
</style>
<style lang="less" scoped>
#container {
  position: absolute;
  padding: 0px;
  margin: 0px;
  width: 1920px;
  height: 1080px;
  z-index: 8;

  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9;
    background: radial-gradient(transparent 40vh, rgba(0, 0, 0, 1));
    pointer-events: none;
  }
}
</style>