高德地图

11/4/2020 gaode自定义地图

# 高德地图

code
const mapOptions = {
  zoom: 11,//级别
  center: [116.397428, 39.90923],//中心点坐标
  viewMode: '3D',//使用3D视图
  // mapStyle: 'amap://styles/whitesmoke'
}


module.exports = async function (el) {
  const map = new AMap.Map(el, mapOptions)
  // setLayers(map)
  // setFeatures(map)
  setMapStyle(map)
  return () => map && map.destroy()
}




function loadPlugin(...plugins) {
  return new Promise(resolve => {
    AMap.plugin(plugins, resolve)
  })
}


function setFeatures(map) {
  // bg          区域面
  // point       兴趣点
  // road        道路及道路标注
  // building    建筑物
  map.setFeatures("bg");
}

function setMapStyle(map) {
  map.setMapStyle('amap://styles/8add3772eda16a7de5061b9bd4d763dd');
}
function setLayers(map) {
  var layers = [
    new AMap.TileLayer.Satellite(),
    new AMap.TileLayer.RoadNet()
  ]
  map.setLayers(layers);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# 自定义地图

  1. 首先,注册 成为高德地图开放平台的开发者。
  2. 然后,在 自定义地图平台 进行创建、编辑、发布后,取得 地图样式 ID

# 可自定义的类目

{
  "区域面": "绿地 教育体育 公共设施 交通枢纽 景区文化 医疗卫生 运动场所 商业场所 停车场 地铁设施",
  "道路": "高速道 路城市环线 国道省道 二级道路 三级道路 四级道路 在建道路 铁路 高铁 地铁 在建地铁 天桥 地道 其他线路 道路路牌",
  "标注":{
    "兴趣点":"住宿 餐饮 购物 风景名胜 交通设施 金融保险 科教文化 生活服务 医疗保健 休闲体育 公共设施 商务住宅 政府机构及社会团体 摩托车服务 汽车服务 通行设施 地铁站 道路附属设施 地名 其他",
    "其他""区域标注 大洲 国家 省名 城市 区县 乡镇 村庄"
  },
  "行政区域边界":"外国国界 停火线 主张线省界线",
  "其他""水、建筑、天空、大气、背景网格、路况"
}
1
2
3
4
5
6
7
8
9
10

以上类目 可以设置 显隐 颜色(底色,侧边色,背景等) 纹理

# 自定义步骤详情

可以先上传图片,根据图片会自动生成图片主题的地图模板,然后在进一步修改即可

步骤

按照此步骤操作,不需要有任何编码的专业知识, 建议可以有设计人员或者需求人员进行编辑 将最终的皮肤 id 给到开发人员即可

在进一步的 marker 样式,就需要开发人员进行编码了

自定义地图平台 (opens new window)

高德官网 高德官网 高德官网 高德官网 高德官网 高德官网

# 自定义样式

# marker/点聚合

对于 marker 由于会生成 div 之类的 dom 节点 自定义可以通过给 marker 的 content 添加特殊的节点 class 通过 css 即可完成复杂的自定义样式

对于点聚合,实际也是 marker,所以控制样式同上

<div
  class="amap-marker"
  style="top: -108px; left: -119px; z-index: 100; 
        transform: rotate(0deg); transform-origin: 17.5px 17.5px; 
        display: block;"
>
  <div class="amap-marker-content" style="opacity: 1;">
    <div
      style="background-color: rgba(255, 251, 0, 0.7); 
    height: 35px; width: 35px; border: 1px solid rgb(204, 201, 0); 
    border-radius: 17.5px; box-shadow: rgb(255, 251, 0) 0px 0px 1px; 
    line-height: 35px; color: rgb(102, 100, 0); font-size: 14px; text-align: center;"
    >
      43
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 海量点

对于海量点,高德是通过一个 canvas 图层完成渲染,所以不可直接通过 css 自定义 可以添加

var massMarks = new AMap.MassMarks({
  zIndex: 5, // 海量点图层叠加的顺序
  zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
  style: styleObjectArr, //多种样式对象的数组
})
1
2
3
4
5

styleObjectArr 可以是一个也可以是数组 需要给 data 中的数据指定样式的索引以展示对应的样式

Last Updated: 11/5/2020, 11:40:56 AM