自定义高德地图深色主题

前端

2023-11-14 01:02:37

高德地图作为国内领先的导航应用，深受广大用户喜爱。但其默认的深色主题却让人难以恭维，暗淡无光，毫无美感可言。本篇文章将教大家如何自定义高德地图深色主题，打造独一无二的个性化地图体验。

自定义高德地图深色主题教程

步骤 1：进入主题生成工具

访问高德地图官方主题生成工具网站：https://lbs.amap.com/api/theme/create

步骤 2：选择底图类型

在 "选择底图类型" 下拉菜单中，选择 "矢量"。矢量底图具有更清晰的图像和更丰富的细节。

步骤 3：自定义底图颜色

在 "底图颜色" 部分，根据个人喜好调整 "基本底图颜色"、"道路颜色"、"水系颜色"、"绿地颜色"、"建筑颜色" 和 "标注颜色"。

步骤 4：设置深色模式

在 "主题模式" 下拉菜单中，选择 "深色模式"。

步骤 5：微调配色方案

在 "配色方案" 部分，可根据需要进一步调整 "主色"、"辅色"、"强调色" 和 "背景色"。

步骤 6：生成主题

完成所有设置后，点击 "生成主题" 按钮，系统将生成自定义的深色主题。

步骤 7：下载并导入主题

生成的主题会以 ZIP 文件的形式下载。解压缩 ZIP 文件，将 style.json 文件导入高德地图。

步骤 8：应用主题

导入主题后，即可在高德地图的设置中选择自定义主题并应用。

实例

以下是一个自定义深色主题的示例：

{
  "version": 8,
  "name": "自定义深色主题",
  "attribution": "高德地图",
  "layers": [
    {
      "id": "bg",
      "type": "raster",
      "source": "amap",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "background-color": "#000000"
      }
    },
    {
      "id": "road",
      "type": "line",
      "source": "amap",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "line-color": "#555555"
      }
    },
    {
      "id": "water",
      "type": "fill",
      "source": "amap",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "fill-color": "#000080"
      }
    },
    {
      "id": "green",
      "type": "fill",
      "source": "amap",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "fill-color": "#008000"
      }
    },
    {
      "id": "building",
      "type": "fill-extrusion",
      "source": "amap",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "fill-extrusion-color": "#666666"
      }
    },
    {
      "id": "label",
      "type": "symbol",
      "source": "amap",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "text-color": "#ffffff"
      }
    }
  ]
}