[{"id":"840f0737-df1d-47ae-bb0a-359b01fe0608","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"d5d9cdef-8854-4505-89be-a2bbc3cb4482","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3dc3dd55-35b0-4d23-bf62-47bc3650e4ee","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"80d84fbc-d0f8-4e4a-947f-e3e4de9b49b2","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"9152b7ca-0186-4fe3-a26f-5a05f322db07","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]}]
        
(Showing Draft Content)

自定义底图样式

应用地图组件时可用的地图样式默认已有标准,幻影黑,月光银等等。如不能满足使用场景需求,还可以自定义地图样式,也就是底图。

下面左图是标准底图,右图是自定义底图,将城市的文字改为玫红色,并放大了字体。

image

创建自定义底图样式

1. 创建应用和Key

登录高德开放平台,在我的应用中创建应用并添加Key(如果之前已有应用和Key,则不需要重复创建)。

image


添加Key时请注意服务平台勾选“Web端(JS API)”。

image

后续在Wyn 中需要使用的是Key 和安全密钥。

image



2. 自定义地图

进入GeoHUB定制地图

image


在左侧选择自定义地图,然后选择一个模板。比如示例中我们选择了标准模板。

image


进入自定义界面进行定制。

示例中我们将城市的名称颜色改为了玫红色,字体调大。

image

保存并发布地图。

image

分享地图,获取到样式ID。下一步中将使用这个ID。

image

image


3. 在Wyn 后台管理中添加自定义信息

管理员登录后台管理,进入系统设置>仪表板设置>地图。

打开使用自定义高德账号.

添加高德账号Key安全密钥。这里的Key和安全密钥就是第1步中获取的Key和密钥。

点击+新增地图样式,为样式命名,并填入样式ID。样式ID即第2步中获取到的样式ID。

最后保存更改。

image


在仪表板中应用自定义地图样式

在仪表板的地图组件中选择自定义底图即可应用。

image

预览可见应用效果。

image