高德地图 标记

雪梨muzi
4,955 阅读5分钟
  1. 关于选用SDK遇到的坑（2017年发布）

海量点绘制高德的SDK提供了海量点绘制接口。这个功能是在5.2.0版本开始的是我目前使用的绘制方式。

百度地图SDK提供了覆盖物功能，而并没有这样海量点的绘制功能，我使用百度SDK绘制到20多万坐标点数据时，界面会变得非常卡顿。移动一下都举步维艰...

百度web版提供了海量点绘制。使用oc与js交互的方式，加载web版的百度地图进行海量点绘制，我尝试过加载200多万坐标点，这种情况下界面流畅度比直接使用SDK好很多。

  • 自定义标记 承载就1000个marker，性能不好；
  • 海量点标记 MassMarks绘制点位 覆盖物绘制在一张整图层上，缩放和平移时候就用css3的transform,tranlate等去做了，还能利用系统硬件加速，效率是极高，覆盖物的事件就变成图层整的事件了，监听图层事件，然后自己再甄别，下发到具体覆盖物上。 普通的覆盖物是各个独立的，每个都是一个小图层，有自己的事件，但是无法应付大数量。

该类可同时在地图上展示万级别的点，建议超过10万的时候设置false 使用高德地图海量点，官方建议坐标点数量在10万左右。目前我认为是一个海量点对象最适宜添加10万坐标点。（实际上我最多时添加了20多万）。这里想说明的坑是，引起界面卡顿最主要的原因是由于界面上加载了太多的对象，导致帧率偏低。所以请尽量将坐标点放入一个海量点对象中。

加载数据并绘制UI的过程，是一个很吃内存的过程，需要在didReceiveMemoryWorning中做好内存释放工作。避免崩溃问题。具体实现思路 :

加载点的过程一定是要在子线程中进行。

子线程的开辟会占用一定的内存，并且需要绘制的点越多,内存占用量就越大。建议采用递归方式处理线程的开启与销毁，我的做法是通过for循环进行点的解析与加载的。

首先解析文件,将文件中的点放在一个数组中。使用for循环遍历这个数组。

设置一个循环最大次数值n，让for循环n+1次，保存每次遍历得到的点。判断当for循环达到最大次数，则将当前循环得到的点进行一次绘制。并跳出循环，并将这些绘制过的点从数组中移除。

之后将剩余点个数与最大次数进行比较，大于最大次数，开辟新的子线程，使用递归方式，开始新一轮的绘制，直到小于等于最大次数时，则将剩余点一次性添加到地图上。这样就可以有效的控制内存占用。

  • 点聚合MarkerClusterer-

【 AMap.MarkerClusterer】的点聚合通过一些简单的算法通过网格的像素大小来实现聚合，maxZoom的设置来设置最大的聚合级别，大于该级别就不进行相应的聚合（：聚合级别越小，同屏下展示的地图越大），当地图缩放的时候，重合在一起的覆盖物我给你合并了，可以写数字等等来表示，提供完全自由的自定义渲染函数。map.clearMap()文档上写是清楚所有覆盖物，但是对使用了聚合的覆盖物无效，自己先清除聚合。

  • 自定义图层 CustomLayer 图层可以是 canvas、svg、甚至可以是 dom 组成的图层。 JSAPI 能够实现自定义图层与高德地图的同步平移和缩放，并调用开发者的 render 方法进行图层的重绘。 自定义图层使用 AMap.CustomLayer 类来进行构造，构造函数接受两个参数，第一个参数是作为图层的 dom 画布，第二个参数是图层的相关属性设定，与通用图层属性相同。

用canvas的方式去绘制

ctx.font="40px Arial";

const a=900;设置横向坐标

const b=900;设置竖向坐标

ctx.fillText("Hello World",a,b);

ctx.fillStyle = '#666';//设置绘制颜色

  1. 现在之前考虑到性能问题， 采用的是Marker先加载视野内的，后加载视野外的，但是因为MassMark是一下加载出来的不支持分布加载

  2. 图层如何根据地图去变化

5.语法问题 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务,

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性

fillStyle设置或返回用于填充绘画的颜色、渐变或模式

strokeStyle设置或返回用于笔触的颜色、渐变或模式

fill()填充当前绘图（路径）

stroke()绘制已定义的路径

beginPath()起始一条路径，或重置当前路径

moveTo()把路径移动到画布中的指定点，不创建线条

closePath()创建从当前点回到起始点的路径

lineTo()添加一个新点，然后在画布中创建从该点到最后指定点的线条

clip()从原始画布剪切任意形状和尺寸的区域

font设置或返回文本内容的当前字体属性 ctx.font="40px Arial";

textAlign设置或返回文本内容的当前对齐方式

textBaseline设置或返回在绘制文本时使用的当前文本基线

context.fillText(text,x,y,maxWidth);在画布上绘制填色的文本。文本的默认颜色是黑色， x 坐标位置（相对于画布）

setMap(map:AMap.Map/null)设置图层所属的地图对象，传入null时从当前地图移除

avatar
文章
阅读
粉丝