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

简介

高德地图 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=' + KEYdom.onerror = rejectdom.onload = resolvedocument.head.appendChild(dom)})
}

新建index.vue文件

<template><div class="map-box"><div id="container"></div><div class="btns"><el-buttonv-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 = mapthis.satellite = new AMap.TileLayer.Satellite()this.roadNet = new AMap.TileLayer.RoadNet()},tabType(item) {const { map, satellite, roadNet } = thisthis.radio = item.valueconst 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>

高德地图实现昼夜、卫星图切换相关推荐

020：Mapbox GL加载高德地图（影像瓦片图）
第020个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中加载高德地图(影像瓦片图). 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果文章目录示例效果 ...
高德地图关于多类图标点切换问题
撒点方式:①海量撒点 ②marker撒点需要考虑的问题: 什么时候需要海量撒点?海量撒点能干啥? 什么时候需要marker撒点?marker撒点能干啥? 近期遇到一个问题把撒36种图标我第一个印象 ...
高德地图覆盖自定义瓦片图
前提:前端数据展示大屏需要展示一张1G左右的水库周边全景图(原计划20G,实际1G左右就已经够用了),此文章只作为本人项目工作经验总结.1G直接加载的话对浏览器的压力太大,而且需要缩放和拖拽,所以借鉴 ...
高德地图实现的数据统计切换街景地图
一,实现的效果 (注,点聚合功能也是可以的,只是这图片没有用后台返回的数据,所以没看到点聚合的效果,本案例的点聚合是有后台接口的,参考的朋友改成你们自己项目的接口即可) 二,项目地址 https:// ...
奥维互动地图2023全球卫星图源更新时间及图片质量对比
选取了全球精选图源进行大桥修筑过程中的对比及图片质量比较,爱好者们可以作为依据! ARCGIS 打开链接,奥维扫扫快速导入! GMAP打开链接,奥维扫一扫快速导入! MAPBOX打开链接,奥维扫一扫快 ...
Flutter学习：高德地图flutter插件增加中英文切换
高德官方已经有Flutter插件,但在使用过程中发现并没有将中英文切换接口,所以只能在本地修改插件代码. Flutter插件修改修改文件amap_flutter_map.dart,增加属性mapLa ...
高德地图学习---在高德地图图层上使用google的卫星图
公司要做一个项目要用到卫星图,但是高德地图提供的卫星图有很多地方由于权限问题还有等等一系列问题是显示不全的,拉到比较偏远的地方就显示不了了,而且清晰度也不够,研究了一下并且在网上查看了好多文章之后发现 ...
Android Google Map实例 - 在地图和卫星图之间切换(Android mapview)
之前讲述的例子中显示的为地图模式,如何你想使用类似google earth的卫星图模式显示,如何操作? 在android上将变得非常简单: 增加两个Button按钮和两个对应的Button.OnCl ...
【百度地图API】百度API卫星图使用方法和卫星图对比工具
百度地图API推出卫星图接口也有一个月啦~ 本文除了介绍如何使用百度地图API来操作卫星图外,还顺带制作了个卫星图对比工具. 一.百度地图API卫星图调用百度卫星图有两种方式,一是地图类型控件,一是 ...

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

简介

效果图

实现

高德地图实现昼夜、卫星图切换相关推荐

最新文章

热门文章