高德地图实现昼夜、卫星图切换

最新推荐文章于 2023-03-28 09:16:42 发布

kiscon

最新推荐文章于 2023-03-28 09:16:42 发布

阅读量3.8k

点赞数 6

分类专栏：前端点滴文章标签： vue 高德地图 gis

本文链接：https://blog.csdn.net/kiscon/article/details/116840661

版权

前端点滴专栏收录该内容

22 篇文章

订阅专栏

这篇博客介绍了如何使用高德地图JSAPI在移动端和PC端创建地图应用，包括加载地图、设置初始视图及切换不同地图样式（白天、极夜蓝、卫星图）的方法。通过创建和管理TileLayer，实现在不同地图样式间的平滑切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

高德地图 JS API 是一套 JavaScript 语言开发的的地图应用编程接口，移动端、PC端一体化设计，一套 API 兼容众多系统平台。

教程

效果图

在这里插入图片描述

极夜蓝，参考
在这里插入图片描述

卫星图，参考
在这里插入图片描述

实现

新建mapAk.js文件

export const amapAk = () => {
  return new Promise(function (resolve, reject) {
    let dom = document.querySelector('#xamap')
    if (dom) {
      resolve(1)
      return
    }
    dom = document.createElement('script')
    dom.setAttribute('id', 'xamap')
    dom.src = '//webapi.amap.com/maps?v=1.4.10&key=' + KEY
    dom.onerror = reject
    dom.onload = resolve
    document.head.appendChild(dom)
  })
}

新建index.vue文件

<template>
  <div class="map-box">
    <div id="container"></div>
    <div class="btns">
      <el-button
        v-for="item in btnList"
        :key="item.value"
        :label="item.value"
        :type="radio === item.value ? 'primary' : ''"
        @click="tabType(item)"
      >
        {{ item.label }}
      </el-button>
    </div>
  </div>
</template>
<script>
/* global AMap */
import { amapAk } from '@/assets/utils/mapAk'
export default {
  data() {
    return {
      map: null,
      satellite: null,
      roadNet: null,
      btnList: Object.freeze([
        { label: '白天', value: 'normal' },
        { label: '极夜蓝', value: 'darkblue' },
        { label: '卫星', value: 'tileLayer' },
      ]),
      radio: 'normal'
    }
  },
  mounted() {
    amapAk().then(() => {
      this.initMap()
    })
  },
  methods: {
    initMap() {
      const map = new AMap.Map('container', {
        zoom: 16,
        center: [121.549792, 29.868388]
      })

      // https://lbs.amap.com/api/javascript-api/reference/map-control#AMap.MapType
      // map.addControl(new AMap.MapType({
      //   defaultType: 0, //0代表默认，1代表卫星
      //   showRoad: true//显示路况（右上角也可点击）
      // }));

      this.map = map
      this.satellite = new AMap.TileLayer.Satellite()
      this.roadNet = new AMap.TileLayer.RoadNet()
    },
    tabType(item) {
      const { map, satellite, roadNet } = this
      this.radio = item.value
      const setMapStyle = v => {
        map.remove([satellite, roadNet])
        map.setMapStyle(`amap://styles/${v}`)
      }
      return {
        normal: () => setMapStyle('normal'),
        darkblue: () => setMapStyle('darkblue'),
        tileLayer: () => map.add([satellite, roadNet]),
      }[item.value]()
    }
  }
}
</script>
<style lang="less" scoped>
.map-box {
  position: relative;
  width: 100%;
  height: 100%;
}

#container {
  width: 100%;
  height: 100%;
  min-height: 500px;
}

.btns {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 20px;
  border-radius: 4px;
  background-color: #f5f5f5;
  box-shadow: 0 0 6px 0 #999;
}
</style>