版本
JSAPI 2.0 Betahttps://lbs.amap.com/home/news/jsapi2-beta
JavaScript API V1.4.15 https://lbs.amap.com/api/javascript-api/changelog
参考手册
https://lbs.amap.com/api/jsapi-v2/documentation
基本概念
地图容器 Container
layer
提供各种layer, 不同的layer根据zindex 叠加
比如行政区划:word china province city 商区
官方图层https://lbs.amap.com/api/javascript-api/guide/layers/official-layers
行政区图层https://lbs.amap.com/api/javascript-api/guide/layers/districtlayer
其他
矢量图形 Vector Overlays
点标记 Markers
点、图形等
new Markers
如果marker都一样, 可以考虑服用, 不用每个点都new markers 否则可能会很消耗性能, 无法表达海量数据
比如圆点标记 (CircleMarker) 、文本标记 (Text)、灵活点标记 (ElasticMarker) 。同时我们提供了海量点(MassMarks)、点聚合(MarkerCluster)
地图控件 Map Controls
如zoom scale
图标标识
可考虑用css修改
插件
插件使用的时候需要单独引入,https://lbs.amap.com/api/javascript-api/guide/abc/plugins
常用:标注 Labels/
信息窗体和右键菜单
https://lbs.amap.com/api/javascript-api/guide/overlays/infowindow
热力图:
属性:layer
接口输入:
颜色config, 根据透明度的颜色config
数据: array of({lat, lng, value})
渲染原理
1 根据对value排序, value/max = opacity
2 离线canvas 按照opacity从小到大以此绘制每个点的形状(一般是circle 半径和模糊半径)
3 canvas.getImageData 获取每个点的透明度, 并根据这个透明度和颜色map 填充对应的颜色, 生成新的imgData
4 canvas.clear
4 canvas.putImageData(imgData,0,0)
怎么得到颜色map:
利用canvas申请1*256像素的空间, 并且利用接口输入的颜色map和line gradient
var lineGradient=createLinearGradient(0, 0, 256, 1);
for (var opactity in opacityConfig) { lineGradient.addColorStop(parseFloat(opacity),opacityConfig[opacity]);
}
怎么根据透明度和颜色map填充对应的颜色
var max = options.max;
var min = options.min;
var diff = max - min;
var range = options.range || null;
var jMin = 0;
var jMax = 1024;//256*4
if (range && range.length === 2) {
jMin = (range[0] - min) / diff * 1024;
}
if (range && range.length === 2) {
jMax = (range[1] - min) / diff * 1024;
}
var maxOpacity = options.maxOpacity || 0.8;
var range = options.range;
for (var i = 3, len = pixels.length, j; i < len; i += 4) {
j = pixels[i] * 4; // get gradient color from opacity value
if (pixels[i] / 256 > maxOpacity) {
pixels[i] = 256 * maxOpacity;
}
if (j && j >= jMin && j <= jMax) {
pixels[i - 3] = gradient[j];
pixels[i - 2] = gradient[j + 1];
pixels[i - 1] = gradient[j + 2];
} else {
pixels[i] = 0;
}
}
return pixels
坐标转换
https://lbs.amap.com/api/webservice/guide/api/convert
坐标体系说明
https://segmentfault.com/a/1190000000498434
分类
按坐标系的生成范围分类:
GPS WPS-84 原始坐标系、 GCJ-02 国家坐标系 又称火星坐标系、其他坐标系;GPS坐标系一般是不让使用的, 在中国一般都会使用GCJ-02或者基于GCJ-02产生的其他偏移坐标系
谷歌 高德 腾讯都是使用的GCJ-02坐标系
百度使用的是BD-09坐标系
按坐标系的用途分类
经纬度(球面坐标系)、墨卡托坐标系(平面坐标系)
经纬度
墨卡托坐标系
概念
墨卡托(Mercator)投影,又名“等角正轴圆柱投影”,荷兰地图学家墨卡托(Mercator)在1569年拟定,假设地球被围在一个中空的圆柱里,其赤道与圆柱相接触,然后再假想地球中心有一盏灯,把球面上的图形投影到圆柱体上,再把圆柱体展开,这就是一幅标准纬线为零度(即赤道)的“墨卡托投影”绘制出的世界地图。
有效维度range[-74,74]
转换公式
//经纬度转墨卡托
public Vector2D lonLat2Mercator(Vector2D lonLat)
{
Vector2D mercator = new Vector2D();
double x = lonLat.X * 20037508.34 / 180;
double y = Math.Log(Math.Tan((90 + lonLat.Y) * Math.PI / 360)) / (Math.PI / 180);
y = y * 20037508.34 / 180;
mercator.X = x;
mercator.Y = y;
return mercator;
}
//墨卡托转经纬度
public Vector2D Mercator2lonLat(Vector2D mercator)
{
Vector2D lonLat = new Vector2D();
double x = mercator.X / 20037508.34 * 180;
double y = mercator.Y / 20037508.34 * 180;
y = 180 / Math.PI * (2 * Math.Atan(Math.Exp(y * Math.PI / 180)) - Math.PI / 2);
lonLat.X = x;
lonLat.Y = y;
return lonLat;
}
特点
墨卡托投影的“等角”特性,保证了对象的形状的不变行,正方形的物体投影后不会变为长方形。“等角”也保证了方向和相互位置的正确性,因此在航海和航空中常常应用,而Google们在计算人们查询地物的方向时不会出错。
墨卡托投影的“圆柱”特性,保证了南北(纬线)和东西(经线)都是平行直线,并且相互垂直。而且经线间隔是相同的,纬线间隔从标准纬线(此处是赤道,也可能是其他纬线)向两级逐渐增大。
等角”不可避免的带来的面积的巨大变形,特别是两极地区,明显的如格陵兰岛比实际面积扩大了N倍。不过要是去两极地区探险或科考的同志们,一般有更详细的资料,不会来查看网络地图的,这个不要紧。
地理逆编码
地理编码/逆地理编码 API 是通过 HTTP/HTTPS 协议访问远程服务的接口,提供结构化地址与经纬度之间的相互转化的能力。
- 结构化地址的定义: 首先,地址肯定是一串字符,内含国家、省份、城市、区县、城镇、乡村、街道、门牌号码、屋邨、大厦等建筑物名称。按照由大区域名称到小区域名称组合在一起的字符。一个有效的地址应该是独一无二的。注意:针对大陆、港、澳地区的地理编码转换时可以将国家信息选择性的忽略,但省、市、城镇等级别的地址构成是不能忽略的。暂时不支持返回台湾省的详细地址信息
- 地理编码:将详细的结构化地址转换为高德经纬度坐标。
- 逆地理编码:将经纬度转换为详细结构化的地址