高德地圖筆記

版本

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根據(jù)zindex 疊加

比如行政區(qū)劃:word china province city 商區(qū)

官方圖層https://lbs.amap.com/api/javascript-api/guide/layers/official-layers

行政區(qū)圖層https://lbs.amap.com/api/javascript-api/guide/layers/districtlayer

其他

矢量圖形 Vector Overlays

點標(biāo)記 Markers

點趣效、圖形等

new Markers

如果marker都一樣睁枕, 可以考慮服用雀摘, 不用每個點都new markers 否則可能會很消耗性能始衅, 無法表達(dá)海量數(shù)據(jù)

比如圓點標(biāo)記 (CircleMarker) 摊唇、文本標(biāo)記 (Text)努潘、靈活點標(biāo)記 (ElasticMarker) 扛禽。同時我們提供了海量點(MassMarks)、點聚合(MarkerCluster)

地圖控件 Map Controls

如zoom scale

圖標(biāo)標(biāo)識

可考慮用css修改

插件

插件使用的時候需要單獨引入,https://lbs.amap.com/api/javascript-api/guide/abc/plugins

常用:標(biāo)注 Labels/

信息窗體和右鍵菜單

https://lbs.amap.com/api/javascript-api/guide/overlays/infowindow

熱力圖:

屬性:layer

接口輸入:

  • 顏色config侈净, 根據(jù)透明度的顏色config

  • 數(shù)據(jù): array of({lat, lng, value})

  • 渲染原理

  • 1 根據(jù)對value排序尊勿, value/max = opacity

  • 2 離線canvas 按照opacity從小到大以此繪制每個點的形狀(一般是circle 半徑和模糊半徑)

  • 3 canvas.getImageData 獲取每個點的透明度, 并根據(jù)這個透明度和顏色map 填充對應(yīng)的顏色畜侦, 生成新的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]);

}

怎么根據(jù)透明度和顏色map填充對應(yīng)的顏色

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

坐標(biāo)轉(zhuǎn)換

https://lbs.amap.com/api/webservice/guide/api/convert

坐標(biāo)體系說明

https://segmentfault.com/a/1190000000498434

分類

  • 按坐標(biāo)系的生成范圍分類:

  • GPS WPS-84 原始坐標(biāo)系、 GCJ-02 國家坐標(biāo)系 又稱火星坐標(biāo)系旋膳、其他坐標(biāo)系澎语;GPS坐標(biāo)系一般是不讓使用的, 在中國一般都會使用GCJ-02或者基于GCJ-02產(chǎn)生的其他偏移坐標(biāo)系

  • 谷歌 高德 騰訊都是使用的GCJ-02坐標(biāo)系

  • 百度使用的是BD-09坐標(biāo)系

  • 按坐標(biāo)系的用途分類

  • 經(jīng)緯度(球面坐標(biāo)系)验懊、墨卡托坐標(biāo)系(平面坐標(biāo)系)

經(jīng)緯度

墨卡托坐標(biāo)系

  • 概念

  • 墨卡托(Mercator)投影擅羞,又名“等角正軸圓柱投影”,荷蘭地圖學(xué)家墨卡托(Mercator)在1569年擬定义图,假設(shè)地球被圍在一個中空的圓柱里减俏,其赤道與圓柱相接觸,然后再假想地球中心有一盞燈碱工,把球面上的圖形投影到圓柱體上娃承,再把圓柱體展開奏夫,這就是一幅標(biāo)準(zhǔn)緯線為零度(即赤道)的“墨卡托投影”繪制出的世界地圖。

  • 有效維度range[-74,74]

  • 轉(zhuǎn)換公式

//經(jīng)緯度轉(zhuǎn)墨卡托

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;

}

//墨卡托轉(zhuǎn)經(jīng)緯度

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;

}

  • 特點

  • 墨卡托投影的“等角”特性草慧,保證了對象的形狀的不變行桶蛔,正方形的物體投影后不會變?yōu)殚L方形匙头÷龋“等角”也保證了方向和相互位置的正確性,因此在航海和航空中常常應(yīng)用蹂析,而Google們在計算人們查詢地物的方向時不會出錯舔示。

  • 墨卡托投影的“圓柱”特性,保證了南北(緯線)和東西(經(jīng)線)都是平行直線电抚,并且相互垂直惕稻。而且經(jīng)線間隔是相同的,緯線間隔從標(biāo)準(zhǔn)緯線(此處是赤道蝙叛,也可能是其他緯線)向兩級逐漸增大俺祠。

  • 等角”不可避免的帶來的面積的巨大變形,特別是兩極地區(qū)借帘,明顯的如格陵蘭島比實際面積擴(kuò)大了N倍蜘渣。不過要是去兩極地區(qū)探險或科考的同志們,一般有更詳細(xì)的資料肺然,不會來查看網(wǎng)絡(luò)地圖的蔫缸,這個不要緊。

地理逆編碼

地理編碼/逆地理編碼 API 是通過 HTTP/HTTPS 協(xié)議訪問遠(yuǎn)程服務(wù)的接口际起,提供結(jié)構(gòu)化地址與經(jīng)緯度之間的相互轉(zhuǎn)化的能力拾碌。

  • 結(jié)構(gòu)化地址的定義: 首先,地址肯定是一串字符街望,內(nèi)含國家校翔、省份、城市灾前、區(qū)縣防症、城鎮(zhèn)、鄉(xiāng)村豫柬、街道告希、門牌號碼、屋邨烧给、大廈等建筑物名稱燕偶。按照由大區(qū)域名稱到小區(qū)域名稱組合在一起的字符。一個有效的地址應(yīng)該是獨一無二的础嫡。注意:針對大陸指么、港酝惧、澳地區(qū)的地理編碼轉(zhuǎn)換時可以將國家信息選擇性的忽略,但省伯诬、市晚唇、城鎮(zhèn)等級別的地址構(gòu)成是不能忽略的。暫時不支持返回臺灣省的詳細(xì)地址信息
  • 地理編碼:將詳細(xì)的結(jié)構(gòu)化地址轉(zhuǎn)換為高德經(jīng)緯度坐標(biāo)盗似。
  • 逆地理編碼:將經(jīng)緯度轉(zhuǎn)換為詳細(xì)結(jié)構(gòu)化的地址
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末哩陕,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子赫舒,更是在濱河造成了極大的恐慌悍及,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件接癌,死亡現(xiàn)場離奇詭異心赶,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)缺猛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進(jìn)店門缨叫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人荔燎,你說我怎么就攤上這事耻姥。” “怎么了湖雹?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵咏闪,是天一觀的道長。 經(jīng)常有香客問我摔吏,道長鸽嫂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任征讲,我火速辦了婚禮据某,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘诗箍。我一直安慰自己癣籽,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布滤祖。 她就那樣靜靜地躺著筷狼,像睡著了一般。 火紅的嫁衣襯著肌膚如雪匠童。 梳的紋絲不亂的頭發(fā)上埂材,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天,我揣著相機(jī)與錄音汤求,去河邊找鬼俏险。 笑死严拒,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的竖独。 我是一名探鬼主播裤唠,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼莹痢!你這毒婦竟也來了种蘸?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤格二,失蹤者是張志新(化名)和其女友劉穎劈彪,沒想到半個月后竣蹦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體顶猜,經(jīng)...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年痘括,在試婚紗的時候發(fā)現(xiàn)自己被綠了长窄。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡纲菌,死狀恐怖挠日,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情翰舌,我是刑警寧澤嚣潜,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站椅贱,受9級特大地震影響懂算,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜庇麦,卻給世界環(huán)境...
    茶點故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一计技、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧山橄,春花似錦垮媒、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至饮醇,卻和暖如春它抱,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背驳阎。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工木柬, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留谭期,地道東北人用僧。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像沫屡,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子撮珠,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,864評論 2 354

推薦閱讀更多精彩內(nèi)容