JavaScript API应用之个性化地图样式实现

前言介绍

个性化地图,顾名思义就是用户可对地图样式进行个性化配置。该服务允许用户将传统默认的地图样式按需配置,自由控制地图元素显隐及对应的元素样式。以很多大屏产品为例,一些监测大屏页面都用到了百度地图,当页面切换到大屏模式时,百度地图的样式也需要配合大屏风格改变成深色模式,这时候个性化地图配置就派上用场了。

传统默认的地图样式:

个性化地图样式:

个性化地图样式配置的大致流程如下:通过个性化地图样式编辑器,按需编辑地图的底图样式,再按应用端的功能要求,将个性化样式应用在JavaScript API和地图SDK中。

个性化地图样式配置流程:

以下为个性化地图在JavaScript API中应用的相关详细说明。以百度地图GL版本为例,我们需要先引入百度地图,然后就可以按照下面两种方法实现个性化地图样式的设置。

个性化地图样式实现

首先需要引入百度地图:

js 复制代码
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥"></script>

一、通过样式ID调用个性化地图样式

1、创建个性化地图样式

进入地图开放平台控制台,在我的地图中,新建一个地图样式:

2、编辑样式

点击我的地图样式,进入样式编辑器,根据需求自由编辑地图样式:

3、发布样式并获取样式ID

完成编辑后,在我的地图或者编辑器中点击发布样式,获取发布后生成的样式ID:

4、在JavaScript API中应用地图样式

将第三步中获取的样式ID作为setMapStyleV2方法的参数。(注意:发布的styleID需要与ak属于同一个用户)

相关代码如下:

js 复制代码
// 创建Map实例
const map = new BMapGL.Map(mapId, {
  enableMapClick: false,
})
map.centerAndZoom(new BMapGL.Point(116.404269, 39.914714), 11)
map.enableScrollWheelZoom(true)
map.setMapStyleV2({ styleId: 样式ID })

注意:

1.setMapStyleV2方法需要在地图初始化(centerAndZoom)完成后执行;

2.样式更新不会改变样式ID。因此如果有更新样式的需求,重新编辑发布就可以完成更新。不需要修改JavaScript API调用代码;

3.如果样式ID在控制台中被删除,但JavaScript API还在继续调用。那么将会渲染默认样式的地图;

二、通过样式JSON调用个性化地图样式

1、获取样式JSON

前序流程和样式ID调用地图样式流程一致,在我的地图中新建一个地图样式,点击进入编辑器编辑完成后,直接通过编辑器中的下载样式文件或复制所有功能获取样式JSON代码:

2、在JavaScript API中应用地图样式

将上一步中获取的样式JSON作为setMapStyleV2方法的参数。

相关代码如下:

js 复制代码
// 创建Map实例
const map = new BMapGL.Map(mapId, {
  enableMapClick: false,
})
map.centerAndZoom(new BMapGL.Point(116.404269, 39.914714), 11)
map.enableScrollWheelZoom(true)
var styleJson = [样式json]
map.setMapStyleV2({ styleJson: styleJson })

最终实现效果如下:

相关推荐
vvilkim15 分钟前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿19 分钟前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年20 分钟前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
某公司摸鱼前端6 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~6 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
wen's7 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim8 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim8 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心8 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络8 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket