了解一下其中的一些API接口翼抠。經(jīng)過(guò)了解才知道這只是一大個(gè)地圖包漆撞，并沒(méi)有提供現(xiàn)實(shí)的離線地圖的方案振亮。帶我的師傅說(shuō)可以了解一下openlayers凤类，使用openlayers也加載了一個(gè)離線地圖瓦片進(jìn)來(lái)映挂。團(tuán)隊(duì)中的大神建議使用leaflet來(lái)做離線地圖瓦片的加載泽篮，因?yàn)橄鄬?duì)簡(jiǎn)單，不需要像openlayers那樣加載太多依賴柑船。
先上代碼：
先加載：leaflet.js和leaflet.css,以及heatmap.js和heatmap-leaflet.js文件帽撑。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>leaflet</title>
<link rel="stylesheet" href="./leaflet.css" type="text/css">
<style>
#map{
height: 360px;
width: 600px;
}
</style>
</head>
<body>
<div id = 'map'></div>
<script type="text/javascript" src="./leafletsrc.js"></script>
<script type="text/javascript" src="./heatmap.js"></script>
<script type="text/javascript" src="./heatmap-leaflet.js"></script>
<script type="text/javascript" src="./test.js"></script>
</body>
</html>
css文件是leaflet提供的CSS默認(rèn)樣式，包括里邊氣泡的樣式等鞍时，如果需要修改亏拉，可以單獨(dú)寫CSS樣式進(jìn)行覆蓋。
leaflet.css和leaflet.js可以用：
<link rel="stylesheet" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
接下來(lái)就是具體的加載離線瓦片的方式逆巍，離線地圖是使用太樂(lè)地圖下載器下載的地圖瓦片及塘，由于需要的地圖是比較簡(jiǎn)潔的地圖，所以就選擇了openstreetmap的地圖锐极，這里使用谷歌地圖的規(guī)則進(jìn)行下載（不同的地圖規(guī)則需要轉(zhuǎn)換笙僚，谷歌地圖規(guī)則最接近原始規(guī)則，所以下載的地圖一般都用谷歌地圖規(guī)則進(jìn)行下載）灵再。
var url = "http://localhost:8080/mapTest/offlineMapTiles/{z}/{x}/{y}";
//z表示地圖的縮放級(jí)別
//x表示地圖瓦片的橫向坐標(biāo)
//y表示地圖瓦片的縱向坐標(biāo)
//其中的路徑就是保存地圖瓦片的的路徑
var tilemap = new L.TileLayer(url);
//加載地圖的底層對(duì)象
var mapcenter = new L.latLng(21.5,67.89);
//地圖的中心點(diǎn)的對(duì)象
創(chuàng)建一個(gè)地圖對(duì)象Map肋层，將地圖瓦片等對(duì)象添加進(jìn)這個(gè)對(duì)象：
map = new L.Map("map", { //"map"為需要插入地圖的div的id
CRS:'Simple', //離線地圖加載規(guī)則
center:mapcenter, //地圖中心點(diǎn)
zoom: 12, //默認(rèn)展示的縮放級(jí)別
layers: [tilemap], //插入的地圖的圖層
minZoom: 0, //最小縮放級(jí)別
maxZoom: 15, //最大縮放級(jí)別
opacity: 0.1, //圖層的不透明度
maxBounds: [ //地圖的東西南北最大邊界，
//在縮放級(jí)別和是的情況下翎迁，地圖只會(huì)展示在當(dāng)前的區(qū)域內(nèi)
//south west
[34.6, 113.4],
//north east
[34.9, 113.98]
]
});
離線地圖瓦片加載成功后槽驶，就需要?jiǎng)?chuàng)建熱力圖圖層：
function setHeatMap(heatmapData){
/**
* 創(chuàng)建熱力圖的方法
* 傳一個(gè)參數(shù)，從后臺(tái)獲取到的熱力圖的點(diǎn)的數(shù)據(jù)
* 數(shù)據(jù)結(jié)構(gòu)
var heatmapData={
max: 1000,
data: [
{lngField:67.89,latitude:21.5,count:100,radius:0.002},
{lngField:67.869,latitude:21.551,count:19,radius:0.002}
]
};
/
if(heatmapLayer != null){鸳兽、
/這個(gè)方法是在每一次刷新熱力圖之前把前一次創(chuàng)建的熱力圖對(duì)象清除,
*如果不對(duì)這個(gè)對(duì)象進(jìn)行重置掂铐，會(huì)在每一刷新的時(shí)候給這個(gè)對(duì)象添加數(shù)據(jù)上去，
*會(huì)導(dǎo)致這個(gè)對(duì)象內(nèi)存增長(zhǎng)
/
map.removeLayer(heatmapLayer);
}
var config = { //熱力圖的配置項(xiàng)
radius: 'radius', //設(shè)置每一個(gè)熱力點(diǎn)的半徑
maxOpacity: 0.9, //設(shè)置最大的不透明度
// minOpacity: 0.3, //設(shè)置最小的不透明度
scaleRadius: true, //設(shè)置熱力點(diǎn)是否平滑過(guò)渡
blur: 0.95, //系數(shù)越高揍异，漸變?cè)狡交桑J(rèn)是0.85,
//濾鏡系數(shù)將應(yīng)用于所有熱點(diǎn)數(shù)據(jù)。
useLocalExtrema: true, //使用局部極值
latField: 'latitude', //維度
lngField: 'longitude', //經(jīng)度
valueField: 'count', //熱力點(diǎn)的值
gradient: { "0.99": "rgba(255,0,0,1)",
"0.9": "rgba(255,255,0,1)",
"0.8": "rgba(0,255,0,1)",
"0.5": "rgba(0,255,255,1)",
"0": "rgba(0,0,255,1)"
},
//過(guò)渡衷掷，顏色過(guò)渡和過(guò)渡比例,范例：
/
{ "0.99": "rgba(255,0,0,1)",
"0.9": "rgba(255,255,0,1)",
"0.8": "rgba(0,255,0,1)",
"0.5": "rgba(0,255,255,1)",
"0": "rgba(0,0,255,1)"
}
*/
// backgroundColor: 'rgba(27,34,44,0.5)' //熱力圖Canvas背景
};
heatmapLayer = null; //重置熱力圖對(duì)象為null
heatmapLayer = new HeatmapOverlay(config); //重新創(chuàng)建熱力圖對(duì)象
$(".leaflet-overlay-pane").empty(); //清空熱力圖的空間
map.addLayer(heatmapLayer); //將熱力圖圖層添加在地圖map對(duì)象上
heatmapLayer.setData(heatmapData); //設(shè)置熱力圖的的數(shù)據(jù)
}
通過(guò)以上的方法辱姨，基本可以實(shí)現(xiàn)離線加載瓦片地圖，然后添加熱力圖圖層的功能戚嗅。
Leaflet+heatmap實(shí)現(xiàn)離線地圖加載和熱力圖應(yīng)用
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門颅拦，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蒂誉，“玉大人，你說(shuō)我怎么就攤上這事距帅∮蚁牵” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵碌秸，是天一觀的道長(zhǎng)绍移。 經(jīng)常有香客問(wèn)我，道長(zhǎng)哮肚，這世上最難降的妖魔是什么登夫？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮允趟，結(jié)果婚禮上恼策，老公的妹妹穿的比我還像新娘。我一直安慰自己潮剪，他們只是感情好涣楷，可當(dāng)我...
- 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著抗碰，像睡著了一般狮斗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上弧蝇，一...
- 那天碳褒，我揣著相機(jī)與錄音，去河邊找鬼看疗。 笑死沙峻，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的两芳。 我是一名探鬼主播摔寨，決...
- 文/蒼蘭香墨 我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼怖辆！你這毒婦竟也來(lái)了是复？” 一聲冷哼從身側(cè)響起删顶，我...
- 序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎淑廊，沒(méi)想到半個(gè)月后逗余，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡蒋纬，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年猎荠，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了坚弱。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蜀备。...
- 正文 年R本政府宣布脂凶，位于F島的核電站，受9級(jí)特大地震影響愁茁，放射性物質(zhì)發(fā)生泄漏蚕钦。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒙蒙 一鹅很、第九天 我趴在偏房一處隱蔽的房頂上張望嘶居。 院中可真熱鬧，春花似錦促煮、人聲如沸邮屁。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)佑吝。三九已至，卻和暖如春绳匀，著一層夾襖步出監(jiān)牢的瞬間芋忿，已是汗流浹背。 一陣腳步聲響...
- 正文 我出身青樓陋桂，卻偏偏與公主長(zhǎng)得像逆趣，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子嗜历，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 基礎(chǔ)地圖 開(kāi)發(fā)者可利用SDK提供的接口宣渗，使用百度提供的基礎(chǔ)地圖數(shù)據(jù)抖所。目前百度地圖SDK所提供的地圖等級(jí)為19級(jí)，所...
- 各位小伙伴們大家好痕囱，今天我向大家介紹一下蘋果百度地圖的使用方法田轧，因?yàn)樽鲞^(guò)一些想關(guān)的APP，感覺(jué)百度地圖還是挺方便的...
- 作者：孟令文 百度地圖iOS SDK v3.0.0 Sample共有24個(gè)Demo,每個(gè)Demo的說(shuō)明如下： --...
- Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具（例如配置管理鞍恢，服務(wù)發(fā)現(xiàn)傻粘，斷路器，智...
- 因?yàn)橐鲆粋€(gè)地圖操作的項(xiàng)目帮掉，需要用到這個(gè)地圖庫(kù)弦悉，但是查詢官方API麻煩，而且這個(gè)地圖框架的API做的用起來(lái)確實(shí)太麻...
