高德地图Web端JavaScript API开发(一)---个性化展示(自定义地图)

遇到一个功能,需要使用地图功能,但是地图上不要显示太多的物体,不然会遮盖地图上的标记,因此需要自定义地图,去掉一些不需要的覆盖物。

话不多说,直接走步骤!


First. 需要登录高德开发者控制台,在地图自定义平台进行完全自主的自定义地图样式的创建、编辑、发布、删除等操作。


如上图所示,点击“创建地图样式”即可进入样式创建界面,如下所示

可以选择已经存在的几种样式,比如标准、马卡龙等,想创建自己的就点击左上角的“创建”按钮,界面如下:

可以在修改左上角“我的地图样式_2”中修改该地图样式的名称,选择页面左边的页面元素,将不需要显示的覆盖物前面√号去掉即可。

可以在页面最上方设置“地图中心点位置”,缩放等级。

操作完成以后,可点击右上角的保存或发布。保存是将样式保存到“地图自定义平台”中。


地图自定义平台中选择需要发布的样式,点击发布即可将样式发布出去(请注意①地图样式ID和开发者Key必须同属于一个开发者账号②样式的发布生效需要1分钟时间。),地图样式在“使用与分享”中查看


Second 在jsp中设置地图样式,有两种方式

⑴创建地图时直接设置

<script type="text/javascript" src = 'http://webapi.amap.com/maps?v=1.4.0&key=您的JS API开发者Key'></script>
<script type="text/javascript">
      var map = new AMap.Map('mapDiv', {
         mapStyle: 'amap://styles/地图样式ID'
     });
</script>

⑵在JavaScript中添加如下代码

 map.setMapStyle('amap://styles/地图样式ID');

这样即可完成自定义地图的添加


同时也可以直接使用自定义平台中作为模版的几个官方样式

 var map = new AMap.Map('mapDiv', {
         mapStyle: 'amap://styles/模版样式的英文名'//样式URL
 });
//map.setMapStyle('amap://styles/模版样式的英文名');


英文名称

名称

样式URL

normal

标准

amap://styles/normal

whitesmoke

远山黛

amap://styles/whitesmoke

macaron

马卡龙

amap://styles/macaron

graffiti

涂鸦

amap://styles/graffiti

darkblue

极夜蓝

amap://styles/darkblue

blue

靛青蓝

amap://styles/blue

fresh

草色青

amap://styles/fresh

dark

幻影黑

amap://styles/dark

light

月光银

amap://styles/light

grey

雅士灰

amap://styles/grey


也可以设置地图的显示内容

高德地图JavaSctipt API支持显示部分底图的构成元素类,创建特定需求下与众不同的地图,如通过隐藏某类地图元素,突出展示自己的数据。调用代码:

map.setFeatures("road");//单一种类要素显示
map.setFeatures(['road','point'])//多个种类要素显示

目前支持以下四种地图要素的选择性显示:

地图元素类型列表

名称

说明

bg

地图背景

point

兴趣点

road

道路

building

建筑物













### 如何在 Cesium 中加载高德地图底图 为了在 Cesium 应用程序中集成高德地图作为底图,开发者可以通过自定义 `ImageryProvider` 来实现这目标。具体来说,在初始化 Cesium 的 Viewer 实例之后,需要移除默认的地图影像提供者,并添加个新的基于高德地图瓦片服务的 ImageryLayer。 下面是个完整的 JavaScript 示例代码片段用于展示如何操作: ```javascript // 创建 viewer 对象时不指定 imageryProvider 参数来阻止自动加载默认底图 const viewer = new Cesium.Viewer('cesiumContainer', { imageryProvider : undefined, }); // 定义高德地图的访问令牌 (需替换为您自己的 Token) var token = 'your_gaode_map_token'; // 构建高德地图瓦片 URL 模板字符串 let urlTemplate = "https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"; // 初始化高德地图的 Tile Provider 并应用到场景中 viewer.imageryLayers.addImageryProvider( new Cesium.UrlTemplateImageryProvider({ url: urlTemplate, subdomains: ['1','2','3','4'], credit: '高德地图' }) ); // 设置相机视角至中国区域中心点附近 viewer.camera.setView({ destination : Cesium.Cartesian3.fromDegrees(104.1, 30.6), }); ``` 此段脚本首先创建了个不带任何预设图像提供商的新视窗实例;接着指定了个合法有效的高德 API 访问凭证(Token),该凭证应由用户自行申请获取[^1];随后利用 UrlTemplateImageryProvider 类构造函数传入参数配置好对应于高德在线切片服务器地址模式化的链接路径;最后步则是调整摄像机的位置以便更好地查看所加载的地图数据[^2]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值