自定义高德地图深色主题

本文介绍了如何使用高德地图的在线主题生成工具自定义深色地图主题。通过选择基础模板并更改底图颜色,如区域面、道路、标注和行政区名等元素,以创建独特的地图样式。示例中分享了特定颜色搭配,并提到了四维图新的深色地图作为配色灵感。
摘要由CSDN通过智能技术生成

  • 有一说一,高德地图的深色主题,是真的欣赏不来。让我们来自定义一个深色主题。
  • 高德地图官方提供了在线主题生成工具。不然我们也很难更改其主题样式,更改完的效果大概是这样。

image.png

  • 本文仅是介绍如何使用 高德地图提供的自定义工具 来自定义高德地图底图样式!
  • 自定义地图美丑与作者无关

文档

自定义地图主题

选取自定义主题模板

  • 很好理解就是以那种基础地图进行更改样式。 因为要更改其样式所以随便选择一个都可以。
  • 当然如果要改 深色主题 选择 深色的主题模板 会好一些,反之亦然。
    image.png
  • 本文选择最后一个进行自定义,点击进行更改。
  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要实现leaflet加载自定义高德地图后坐标类型为gcj02,你需要进行以下步骤: 1. 在高德开放平台上申请自定义地图服务并获取到对应的key。 2. 在Leaflet中添加高德地图服务的图层,示例代码如下: ``` L.tileLayer('https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', { attribution: '高德地图', maxZoom: 18 }).addTo(map); ``` 3. 在Leaflet中添加坐标转换插件,这里推荐使用proj4leaflet插件。在使用之前,需要将proj4库引入到项目中。示例代码如下: ``` // 添加proj4库 <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.2/proj4.js"></script> // 定义高德地图的投影坐标系 proj4.defs("EPSG:102100", "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs"); // 在Leaflet中添加坐标转换插件 L.Proj.geoJson(data, { 'pointToLayer': function(feature, latlng) { return L.marker(latlng); } }, { 'coordsToLatLng': function(coords) { var point = L.point(coords[0], coords[1]); point = L.Proj.transform(proj4.defs("EPSG:102100"), L.CRS.GCJ02.projection, point); return L.CRS.GCJ02.pointToLatLng(point); } }).addTo(map); ``` 4. 将Leaflet的坐标系设置为GCJ02,示例代码如下: ``` L.CRS.GCJ02 = L.extend({}, L.CRS.EPSG3857, { // 将EPSG3857的投影坐标系转换为GCJ02的投影坐标系 transformation: L.transformation(1 / 128, -1 / 128, -1 / 128, 1 / 128), // 将EPSG3857的地理坐标系转换为GCJ02的地理坐标系 code: 'GCJ02' }); // 将地图的坐标系设置为GCJ02 map.options.crs = L.CRS.GCJ02; ``` 通过以上步骤,你就可以实现leaflet加载自定义高德地图后坐标类型为gcj02了。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值