高德地图笔记

版本

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

基本概念

image

地图容器 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 协议访问远程服务的接口,提供结构化地址与经纬度之间的相互转化的能力。

  • 结构化地址的定义: 首先,地址肯定是一串字符,内含国家、省份、城市、区县、城镇、乡村、街道、门牌号码、屋邨、大厦等建筑物名称。按照由大区域名称到小区域名称组合在一起的字符。一个有效的地址应该是独一无二的。注意:针对大陆、港、澳地区的地理编码转换时可以将国家信息选择性的忽略,但省、市、城镇等级别的地址构成是不能忽略的。暂时不支持返回台湾省的详细地址信息
  • 地理编码:将详细的结构化地址转换为高德经纬度坐标。
  • 逆地理编码:将经纬度转换为详细结构化的地址
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容