高德地图JS API地图组成和常用名词

🤖 作者简介：水煮白菜王 ，一位资深前端劝退师 👻
👀 文章专栏： 高德AMap专栏 ，记录一下平时在博客写作中，总结出的一些开发技巧✍。
感谢支持💕💕💕

关联文章：
高德地图JS API 一些常见使用方法（急救包）
高德地图JS API 普通点标记Marker
高德地图JS API 海量点标记LabelMarker
高德地图JS API 区划浏览DistrictExplorer
高德地图JS API 加载行政区边界AMap.Polygon
高德地图JS API AMap.MouseTool绘制

地图组成和常用名词

前期一些文章主要介绍了如何使用高德地图AMap JS API的常用API方法，来针对业务进行功能性的实现。本文将简单地介绍 JS API 地图的构成要素、常用名词和一些核心术语基础知识，比如经纬度、级别、地图平面坐标等，不做深究；旨在帮助开发者理解地图的基本构成，对以后开发者进行地图的复杂功能实现以及高阶地图开发。能够对开发者有概念上的地图组成架构，更加得心应手地进行创新和实践。

地图组成结构

使用高德地图 JS API 创建的地图通常由这几部分组成：

组成部分	描述
地图容器 Container	在准备阶段所创建的指定了 id 的 <div> 对象，这个 <div> 将作为承载所有图层、点标记、矢量图形、控件的容器。
图层 Layers	图层是指能够在视觉上覆盖一定地图范围，用来描述全部或者部分现实世界区域内的地图要素的抽象概念。一幅地图通常由一个或多个图层组成。高德地图 JS API 提供了标准图层、卫星图层、路网图层、路况图层等官方标准图层接口，还支持自定义图层。
矢量图形 Vector Overlays	矢量图形覆盖于底图图层之上，通过矢量的方式（路径或实际大小）来描述其形状，用几何方式展示真实的地图要素。矢量图形会随着地图缩放而发生视觉大小的变化，但其代表的实际路径或范围不变。JS API 还提供了矩形、椭圆、贝瑟尔曲线等常用的矢量图形。
点标记 Markers	点标记用于标示某个位置点信息，覆盖于图层之上。其在屏幕上的位置会随地图缩放和中心变化而改变，但与图层内要素保持相对静止。除了普通 Marker 外，还有 CircleMarker、Text、ElasticMarker 等类型，并提供了海量点（MassMarks）、点聚合（MarkerCluster）。
地图控件 Map Controls	控件浮在所有图层和地图要素之上，用于满足交互或提示功能。一般相对于地图容器静止，不随地图缩放和中心变化而移动。例如比例尺和级别控件。

地图容器 Container

即在准备阶段所创建的指定了 id 的div对象，这个div将作为承载所有图层、点标记、矢量图形、控件的容器。

<!-- Vue 3 Code -->
<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "「你申请的安全密钥」",
  };
  AMapLoader.load({
    key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      });
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>

具体如何引入使用看这篇精讲 看引入方式

图层 Layers

图层是指能够在视觉上覆盖一定地图范围，用来描述全部或者部分现实世界区域内的地图要素的抽象概念，一幅地图通常由一个或者多个图层组成。如上图中处于整个地图容器最下方的二维矢量图层和实施交通图层。

高德地图 JS API 即提供了标准图层、卫星图层、路网图层、路况图层等官方标准图层接口，又提供了加载其他厂商发布的标准地图服务的图层接口，还提供了加载开发者自己的图片、Canvas、视频、热力数据的图层接口。同时也深度开放了可以自定义绘制方法的自定义图层接口。

矢量图形 Vector Overlays

矢量图形，一般覆盖于底图图层之上，通过矢量的方式(路径或者实际大小)来描述其形状，用几何的方式来展示真实的地图要素，会随着地图缩放而发生视觉大小的变化，但其代表的实际路径或范围不变，如上图中红框内的折线、圆、多边形等。

除了图中的折线、圆、多边形之外，JS API 还提供了矩形、椭圆、贝瑟尔曲线等常用的矢量图形。3D 视图下的立面体等可以看做是一些特殊的矢量图形。

点标记 Markers

点标记是用来标示某个位置点信息的一种地图要素，覆盖于图层之上。如图中蓝色方框中的两个点状要素。其在屏幕上的位置会随着地图的缩放和中心变化而发生改变，但是会与图层内的要素保持相对静止。

普通的点标记 (即 Marker ) ，支持将自定义图标和 DOM 元素作为展示内容。除了 Marker 之外为了满足不同的场景，JS API 另外提供了丰富的点标记类型，比如圆点标记 (CircleMarker) 、文本标记 (Text)、灵活点标记 (ElasticMarker) 。同时我们提供了海量点（MassMarks）、点聚合（MarkerCluster）来满足大量点标记的展示需求。

// 普通点标记 Marker
const content = `<div class="custom-content-marker"> baicaiKing </div>`;
const marker = new AMap.Marker({
  content: content, //自定义点标记覆盖物内容
  position: [116.397428, 39.90923], //基点位置
  offset: new AMap.Pixel(-13, -30), //相对于基点的偏移位置
});
map.add(marker);

<style>
.custom-content-marker {
  width: 25px;
  height: 34px;
}
</style>

// 海量点 LabelMarker
// LabelsLayer 图层是用于承载 LabelMarker 标记的图层，因此所有创建的 LabelMarker标记都需要添加到 LabelsLayer 图层上才能最终展示在地图上。
const labelsLayer = new AMap.LabelsLayer({
  zooms: [3, 20],
  zIndex: 1000,
  collision: true, //该层内标注是否避让
  allowCollision: true, //不同标注层之间是否避让  
});

//创建 LabelMarker
const labelMarker = new AMap.LabelMarker({
  name: "标注", //此属性非绘制文字内容，仅为标识使用
  position: [116.466994, 39.984904],
  zIndex: 16,
  rank: 1, //避让优先级
  icon: 'https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png', //标注图标，将 icon 对象传给 icon 属性
  text: 'baicaiKing ', //标注文本，将 text 对象传给 text 属性
});

对于点标记还是海量点标记，请看这两篇精讲 普通点标记 海量点标记LabelMarker

地图控件 Map Controls

控件浮在所有图层和地图要素之上，用于满足一定的交互或提示功能。一般相对于地图容器静止，不随着地图缩放和中心变化而发生位置的变化。如上图中绿色方框中的比例尺和级别控件。

常用名词

名词	描述
插件 Plugins	插件是独立于 JS API 核心模块之外的功能，如服务类、绘制工具、矢量图形编辑工具、点聚合、热力图等。插件需要提前引入，不会主动随 JS API 主体资源加载。
地图级别 ZoomLevel	级别与地图的比例尺成正比，每增大一级，地图比例尺增大一倍，显示越详细。Web 地图最小级别为 3 级，最大级别各家略有不同，高德地图 JS API 最大级别为 20 级。
经纬度 LngLat	经纬度坐标范围大致为：东西经 180 度（[-180, 180]），南北纬 85 度（[-85, 85]）。
底图 BaseLayer	严格意义上，底图指处于所有图层和图形最下方的一个图层，通常是不透明的单一图层或图层组合，如官方标准图层或卫星图层和路网图层组合。
地图要素 Map Features	指展示在地图上的地理要素，包括道路、区域面、建筑、POI 标注、路名等。开发者自定义的点标记、矢量图形也可以视为地图要素。
标注 Labels	底图上自带的文字或图标，如 POI 标注、道路名称标注等。
平面像素坐标 Plane Coordinates	投影为平面之后的地图上的像素坐标。高德地图使用 Web 墨卡托投影，在第 3 级时，平面坐标范围为 [0, 2562^3] 像素，每级别扩大一倍，即第 n 级的平面坐标范围为 [0, 2562^n] 像素。
投影 Projection	地图投影指的是将地球球面的经纬度坐标映射到地图平面坐标的变换关系。高德地图使用 Web 墨卡托投影，即采用 EPSG:3857 坐标系统。

插件 Plugins

插件是独立于 JS API 地图核心模块之外的一些功能，比如服务类、绘制工具、矢量图形编辑工具、点聚合、热力图等。

这些插件不会主动随 JS API 的主体资源的加载而下发，使用之前需要提前引入， 详见插件的使用。

import AMapLoaders from '@amap/amap-jsapi-loader';

const key = "" //  ...这里是你创建的key
const securityJsCode = "" //  ...这里是你创建的密钥
const amapConfig = {
    version: "2.0",
    plugins: [
      "AMap.LabelsLayer",
      "AMap.Autocomplete",
      "AMap.PlaceSearch",
      "AMap.Scale",
      "AMap.OverView",
      "AMap.ToolBar",
      "AMap.MapType",
      "AMap.MouseTool",
      "AMap.Polygon",
      "AMap.PolyEditor",
      "AMap.CircleEditor",
      "AMap.Geolocation",
      "AMap.MapType",
      "AMap.ControlBar",
      "AMap.MoveAnimation",
      "AMap.Weather",
      "AMap.CitySearch",
    ],
    AMapUI: {
      version: '1.1', // AMapUI 缺省 1.1
      plugins: [] // AMapUI ui插件
    }
  };
AMapLoaders.load({
   key: key, 
   ...amapConfig
}).then((AMap) => {
  // ... 
 }).catch((e) => {
});

地图级别 ZoomLevel

级别与地图的比例尺成正比，每增大一级，地图的比例尺也增大一倍，地图显示的越详细。Web地图的最小级别通常为3级，最大级别各家略有不同，高德地图 JS API 目前最大级别为 20 级。

经纬度 LngLat

坐标通常指经纬度坐标，高德地图的坐标范围大致为：东西经 180 度（[-180, 180]，西半球为负，东半球为正），南北纬 85 度（[-85, 85]，北半球为正，南半球为负）。

经纬度小数位要足够精确 正常经纬度小数位6位精度已经足够高，能够满足导航、地图标记等日常应用的需求。

底图 BaseLayer

严格意义上，底图指处于所有图层和图形最下方的一个图层，通常不透明。可以是单一图层，比如官方标准图层，也可以是图层组合，比图卫星图层和路网图层组合。

地图要素 Map Features

严格意义的地图要素指的是展示在地图上的地理要素，包括道路、区域面、建筑、POI 标注、路名等。开发者自定义的点标记、矢量图形也可以看做是一种地图要素。

标注 Labels

我们习惯将底图上自带的标示一定信息的文字或图标称为标注，比如 POI 标注，道路名称标注等

地图平面像素坐标 Plane Coordinates

地图平面像素坐标指投影为平面之后的地图上的平面像素坐标，高德地图使用的Web墨卡托投影，在 3 级时，平面坐标范围为横纵[0, 2562^3]像素，每级别扩大一倍，即第 n 级的平面坐标范围为 [0, -2562^n]像素。

投影 Projection

地图投影指的是将地球球面的经纬度坐标映射到地图平面坐标的变换和映射关系。

高德地图使用 Web 墨卡托投影，即采用 EPSG:3857 坐标系统。

如果你觉得这篇文章对你有帮助，请点赞 👍、收藏 👏 并关注我！👀