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

<template>
  <div>
    <div id="container" class="g-bg1"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

window.map = {}

export default {
  components: {},
  data() {
    return {}
  },
  computed: {},
  async created() {},
  mounted() {
    this.initAMap()
  },
  unmounted() {
    window.map.destroy()
  },
  methods: {
    async initAMap() {
      const json = await this.$http.get(
        `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=520600_full`
      )
      window._AMapSecurityConfig = {
        securityJsCode: `a2017cdc059be6c03b430a3185098003`,
      }
      AMapLoader.load({
        key: `6260c9b9128ad802001c8a5ff18bde16`, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: `2.0`, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [`AMap.Scale`], // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          let content = [
            `<div class='info_box_contant'> ` + `vo.aname` + ` </div>`,
          ]
          function addPolygon(data) {
            const { name, center } = data.properties
            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) => {
              console.log(`mouseover`)
              // 如果缩放过大还变色, 万一人家是想看放大后的详细地点, 变色后反而不方便
              if (window.map.getZoom() <= 11) {
                // infoWindow.open(window.map, [e.lnglat.lng, e.lnglat.lat]) // 后面的参数指的是经纬度，在此显示窗口
                infoWindow.open(window.map, center) // 后面的参数指的是经纬度，在此显示窗口
                polygon.setOptions({
                  fillOpacity: 0.7,
                  fillColor: `#7bccc4`,
                })
              }
            })
            polygon.on(`click`, (e) => {
              console.log(`点击了`, data.properties)
            })
            polygon.on(`mouseout`, () => {
              polygon.setOptions({
                fillOpacity: 0,
                fillColor: `#ccebc5`,
              })
              infoWindow.close()
            })
            window.map.add(polygon)
          }
          const infoWindow = new AMap.InfoWindow({
            isCustom: true, // 使用自定义窗体
            content: content.join(`<br>`),
            offset: new AMap.Pixel(-15, -25),
          })
          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`]) // 单一种类要素显示
          let list = json.features.map((item) => item)
          list.forEach((item) => {
            addPolygon(item)
          })
        })
        .catch((e) => {
          console.log(e)
        })
    },
    tabChange(val) {
      if (val === 0) {
        this.$router.push(`/page1`)
      }
      console.log(`val`, val)
    },
  },
}
</script>

<style lang="less" scoped>
#container {
  position: absolute;
  padding: 0px;
  margin: 0px;
  width: 100vw;
  height: 100vh;
  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>