最近，在學習地圖可視化是基於公司的項目。但公司在項目上居然用圖片來代替。無語~~~項目效果圖（第一版）如下：
突發奇想，2016年自己就接觸過地圖可視化。但那是沒有深入研究。只會用R語言來實現點基礎。很無語，自己沒有堅持下去學習。又被其他事情耽擱了。好了，廢話不多說。
leaflet 官網直接給出：https://leafletjs.com/reference-1.3.0.html#path
但，有小白說，這不會啊。稍等。介紹官網是為了你以后自己學習使用的。
今天主要講：
1.如何引進leaflet.js。
2.在上面如何引進其他地圖。
3.如何畫點。
4.如何畫形狀圖（如多邊形）
5.如何結合echarts.
好了。直接進行正題。
一、.如何引進leaflet.js
先引入css
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
再引入js
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""> </script>
這些都是在線的。主要是先不要卡在下載js這里。先體會下leaflet js而已，熟練了還是要下載引入自己的項目的。
二、如何引進其他地圖。
其實已經有前輩寫好了。我就不多說了直接文件leaflet.ChineseTmsProviders.js的源碼放上。
L.TileLayer.ChinaProvider = L.TileLayer.extend({ initialize: function(type, options) { // (type, Object) var providers = L.TileLayer.ChinaProvider.providers; var parts = type.split('.'); var providerName = parts[0]; var mapName = parts[1]; var mapType = parts[2]; var url = providers[providerName][mapName][mapType]; options.subdomains = providers[providerName].Subdomains; L.TileLayer.prototype.initialize.call(this, url, options); } }); L.TileLayer.ChinaProvider.providers = { TianDiTu: { Normal: { Map: "http://t{s}.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}", Annotion: "http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}" }, Satellite: { Map: "http://t{s}.tianditu.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}", Annotion: "http://t{s}.tianditu.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}" }, Terrain: { Map: "http://t{s}.tianditu.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}", Annotion: "http://t{s}.tianditu.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}" }, Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }, GaoDe: { Normal: { Map: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}' }, Satellite: { Map: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', Annotion: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}' }, Subdomains: ["1", "2", "3", "4"] }, Google: { Normal: { Map: "http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}" }, Satellite: { Map: "http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}" }, Subdomains: [] }, Geoq: { Normal: { Map: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}", Color: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetColor/MapServer/tile/{z}/{y}/{x}", PurplishBlue: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}", Gray: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}", Warm: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}", Cold: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetCold/MapServer/tile/{z}/{y}/{x}" }, Subdomains: [] } }; L.tileLayer.chinaProvider = function(type, options) { return new L.TileLayer.ChinaProvider(type, options); };
接着我們就可以利用了。
<script src="leaflet.ChineseTmsProviders.js"></script>
做一個小測試。文件test.html
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset='utf-8'>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<link rel="stylesheet" href="leaflet.awesome-markers.css">
<link href='http://fonts.googleapis.com/css?family=Dancing+Script:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="map" style="height: 100%;width:100%">
</div>
<script src="jquery-1.9.1.min.js"></script>
<script src="echarts.min.js"></script>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""> </script>
<script src="leaflet.ChineseTmsProviders.js"></script>
<script >
/**
* 智圖地圖內容
*/
var normalm1 = L.tileLayer.chinaProvider('Geoq.Normal.Map', {
maxZoom: 18,
minZoom: 5
});
var normalm2 = L.tileLayer.chinaProvider('Geoq.Normal.Color', {
maxZoom: 18,
minZoom: 5
});
var normalm3 = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {
maxZoom: 18,
minZoom: 5
});
var normalm4 = L.tileLayer.chinaProvider('Geoq.Normal.Gray', {
maxZoom: 18,
minZoom: 5
});
var normalm5 = L.tileLayer.chinaProvider('Geoq.Normal.Warm', {
maxZoom: 18,
minZoom: 5
});
var normalm6 = L.tileLayer.chinaProvider('Geoq.Normal.Cold', {
maxZoom: 18,
minZoom: 5
});
/**
* 天地圖內容
*/
var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
maxZoom: 18,
minZoom: 5
}),
normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
maxZoom: 18,
minZoom: 5
}),
imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
maxZoom: 18,
minZoom: 5
}),
imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
maxZoom: 18,
minZoom: 5
});
var normal = L.layerGroup([normalm, normala]),
image = L.layerGroup([imgm, imga]);
/**
* 谷歌
*/
var normalMap = L.tileLayer.chinaProvider('Google.Normal.Map', {
maxZoom: 18,
minZoom: 5
}),
satelliteMap = L.tileLayer.chinaProvider('Google.Satellite.Map', {
maxZoom: 18,
minZoom: 5
});
/**
* 高德地圖
*/
var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
maxZoom: 18,
minZoom: 5
});
var Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
maxZoom: 18,
minZoom: 5
});
var Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
maxZoom: 18,
minZoom: 5
});
var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga]);
var baseLayers = {
/* */
"智圖地圖": normalm1,
"智圖多彩": normalm2,
"智圖午夜藍": normalm3,
"智圖灰色": normalm4,
"智圖暖色": normalm5,
"智圖冷色": normalm6,
"天地圖": normal,
"天地圖影像": image,
"谷歌地圖": normalMap,
"谷歌影像": satelliteMap,
"高德地圖": Gaode,
"高德影像": Gaodimage,
}
var map = L.map("map", {
center: [22,107],
zoom: 5,
layers: [normalm3],
zoomControl: false
});
L.control.layers(baseLayers, null).addTo(map);
L.control.zoom({
zoomInTitle: '放大',
zoomOutTitle: '縮小'
}).addTo(map);
</script>
</body>
</html>
效果：
三、如何畫點。
冒着被打死的風險。把部分數據拿出來做講解吧。首先准備json數據
datajson=[{ "課題組": "冬瓜團隊", "合作方式": "技術指導、節瓜新品種示范", "轉化、示范點（包括科研基地）": "供港蔬菜新品種示范基地", "合作單位": " 賀州市宸耀種養專業合作社", "地點": "賀州八步區輔門鎮興華村", "面積": 120.0, "示范技術與品種": "供港瓜菜新品種引進示范、蔬菜周年栽培技術", "經度": 111.748509, "緯度": 23.892472 }, { "課題組": "冬瓜團隊", "合作方式": "技術指導、冬瓜新品種示范", "轉化、示范點（包括科研基地）": "黑皮冬瓜高產栽培示范基地", "合作單位": "廣西秋碧生態農業有限公司", "地點": "南寧市南曉鎮", "面積": 400.0, "示范技術與品種": "育苗技術，嫁接栽培技術，桂蔬6號和桂蔬8號新品種", "經度": 108.425122, "緯度": 22.309673 }, { "課題組": "辣椒團隊", "合作方式": "項目合作、技術指導、辣椒新品種示范", "轉化、示范點（包括科研基地）": "五彩椒高產栽培與加工", "合作單位": "柳江區農業局", "地點": "柳江區土博鎮", "面積": 100.0, "示范技術與品種": "桂椒12號示范", "經度": 109.020376, "緯度": 24.308409 }, { "課題組": "葯用真菌團隊", "合作方式": "技術指導、項目合作", "轉化、示范點（包括科研基地）": "工廠化自動種植基地", "合作單位": "廣西龍州北部灣現代農業有限公司", "地點": "龍州縣下凍鎮", "面積": 50.0, "示范技術與品種": "開展銀耳、秀珍菇等食用菌栽培技術研究", "經度": 106.708401, "緯度": 22.397519 }, { "課題組": "葯用真菌團隊", "合作方式": "技術指導、項目合作", "轉化、示范點（包括科研基地）": "自治區“貧困地區食用菌新品種新技術轉化集成示范”", "合作單位": "天峨縣臘八鄉小寨食用菌專業種養合作社", "地點": "金秀縣長垌村", "面積": 15.0, "示范技術與品種": "香菇新品種新技術栽培", "經度": 110.112109, "緯度": 24.074532 }, { "課題組": "葯用真菌團隊", "合作方式": "技術指導、項目合作", "轉化、示范點（包括科研基地）": "靈芝孢子粉高產優質栽培示范基地", "合作單位": "廣西壽菌園食品有限公司", "地點": "河池市天峨縣八臘鄉", "面積": 70.0, "示范技術與品種": "靈芝孢子粉仿野生栽培，靈芝破壁孢子粉研發", "經度": 107.058438, "緯度": 24.954797 }, { "課題組": "葯用真菌團隊", "合作方式": "技術指導、項目合作", "轉化、示范點（包括科研基地）": "紫靈芝生態高產優質栽培基地", "合作單位": "廣西融水縣山源農業綜合開發有限公司", "地點": "柳州市融水縣懷寶鎮", "面積": 300.0, "示范技術與品種": "紫靈芝生態高效栽培，靈芝生產專用APP軟件開發", "經度": 109.038672, "緯度": 25.254229 }, { "課題組": "食用菌選育種團隊", "合作方式": "技術指導、品種試驗", "轉化、示范點（包括科研基地）": "食用菌栽培示范基地", "合作單位": "靈川縣金晨菌業有限公司", "地點": "桂林市靈川縣正義村", "面積": 30.0, "示范技術與品種": "雲耳新品種（菌株）TY026等的試驗試種", "經度": 110.474816, "緯度": 25.453063 }, { "課題組": "食用菌選育種團隊", "合作方式": "技術指導、品種試驗", "轉化、示范點（包括科研基地）": "柳州市融水縣竹韻蓀香現代特色農業核心示范園", "合作單位": "融水縣永富生態農業有限公司", "地點": "融水縣香粉鄉古都村", "面積": 50.0, "示范技術與品種": "林下套種食用菌技術，竹蓀、木耳、靈芝等食用菌品種。", "經度": 109.209511, "緯度": 25.29067 }, { "課題組": "食用菌液體菌種團隊", "合作方式": "技術指導", "轉化、示范點（包括科研基地）": "高海拔山區紫靈芝仿野生林下栽培示范", "合作單位": "田林農科所，合作社", "地點": "田林縣樂里鎮那光村", "面積": 5.0, "示范技術與品種": "紫靈芝仿野生林下栽培", "經度": 106.219104, "緯度": 24.365194 }, { "課題組": "食用菌液體菌種團隊", "合作方式": "技術指導", "轉化、示范點（包括科研基地）": "高海拔山區紫靈芝仿野生林下栽培示范", "合作單位": "灌陽縣桂灌食用菌種植合作社", "地點": "灌陽縣北江村", "面積": 12.0, "示范技術與品種": "紫靈芝與香菇仿野生林下栽培", "經度": 110.985369, "緯度": 25.451346 }, { "課題組": "食用菌栽培團隊", "合作方式": "技術指導", "轉化、示范點（包括科研基地）": "邕寧區扶持村級集體經濟發展項目（試點）--新樂村食用菌產業示范基地", "合作單位": "南寧市寶盈食用菌專業合作社", "地點": "南寧市邕寧縣新江鎮新樂村", "面積": 6.8, "示范技術與品種": "主要種植榆黃蘑、秀珍菇、毛木耳等食用菌及生產菌包。", "經度": 108.547264, "緯度": 22.605306 }, { "課題組": "曾黎明", "合作方式": "技術指導、項目合作", "轉化、示范點（包括科研基地）": "廣西堅果派農業科技有限公司澳洲堅果示范基地", "合作單位": "廣西堅果派農業科技有限公司", "地點": "百色市右江區陽圩鎮", "面積": 3000.0, "示范技術與品種": "開展澳洲堅果山地栽培示范", "經度": 106.467326, "緯度": 23.915572 }, { "課題組": "曾黎明", "合作方式": "技術指導、項目合作", "轉化、示范點（包括科研基地）": "河池市滿山堅果開發有限公司澳洲堅果示范基地", "合作單位": "河池市滿山堅果開發有限公司", "地點": "河池市都安縣", "面積": 300.0, "示范技術與品種": "開展澳洲堅果山地栽培示范基地", "經度": 108.120078, "緯度": 23.944994 }, { "課題組": "曾黎明", "合作方式": "技術指導、項目合作", "轉化、示范點（包括科研基地）": "廣西扶綏夏果種植有限責任公司澳洲堅果示范基地", "合作單位": "廣西扶綏夏果種植有限責任公司", "地點": "崇左市扶綏縣", "面積": 5000.0, "示范技術與品種": "開展澳洲堅果平地栽培和種苗繁育示范", "經度": 107.902418, "緯度": 22.643499 }, { "課題組": "鄭文武", "合作方式": "技術指導、項目合作", "轉化、示范點（包括科研基地）": "岑溪市信暢堅果開發有限公司澳洲堅果示范基地", "合作單位": "岑溪市信暢堅果開發有限公司", "地點": "梧州市岑溪市南渡鎮", "面積": 300.0, "示范技術與品種": "開展澳洲堅果豐產栽培、種苗繁育示范", "經度": 110.837109, "緯度": 22.854779 }]
for(i=0;i<datajson.length;i++){
html_str= "<h1 ><span>課題組:</span>"+datajson[i]["課題組"]+"</h1><p><strong>合作方式:</strong>"+datajson[i]['合作方式']+"</p><p><strong>科研基地:</strong>"+datajson[i]['轉化、示范點（包括科研基地）']+"</p><p><strong>合作單位:</strong>"+datajson[i]['合作單位']+"</p><p> <strong>地點:</strong>"+datajson[i]['地點']+"</p><p><strong>面積：</strong>"+datajson[i]['面積']+"畝</p><p><strong>示范技術與品種:</strong>"+datajson[i]['示范技術與品種']+"</p>"
L.marker([datajson[i]["緯度"],datajson[i]["經度"]]).addTo(map).bindPopup(html_str).openPopup();
}
接着講下，畫點其實就是一個函數：L.marker(緯度,經度)。添加到map：addTo(map)。有同學說 你還沒講test.html的map呢？通同學不用急。
創建基礎圖層就是：
var map = L.map("map", {
center: [22,107],//設置中心點 zoom: 5,//初始的zoom層級 layers: [normalm3],//初始的使用地圖 這里normalm3是智圖午夜藍 zoomControl: false });
這樣就創建最底層的基礎地圖。之后就是各種在上面畫東西了，為什么是畫？因為我們在基礎圖層是做不了改動的，只能自己用一張透明的圖層在上面操作而已。
- 點的畫法：這里的bindPopup()是要加載的點想說的話；openPopup()是自動點擊打開，其實也可以不用這函數。
for(i=0;i<datajson.length;i++){
html_str= "<h1 ><span>課題組:</span>"+datajson[i]["課題組"]+"</h1><p><strong>合作方式:</strong>"+datajson[i]['合作方式']+"</p><p><strong>科研基地:</strong>"+datajson[i]['轉化、示范點（包括科研基地）']+"</p><p><strong>合作單位:</strong>"+datajson[i]['合作單位']+"</p><p> <strong>地點:</strong>"+datajson[i]['地點']+"</p><p><strong>面積：</strong>"+datajson[i]['面積']+"畝</p><p><strong>示范技術與品種:</strong>"+datajson[i]['示范技術與品種']+"</p>" L.marker([datajson[i]["緯度"],datajson[i]["經度"]]).addTo(map).bindPopup(html_str).openPopup(); }
四、多邊形如何畫
畫圖的准備數據。先上個圓吧
- 圓
-
//畫圓 L.circle//畫圓
L.circle([23.09, 113.23], 500, {//[23.09, 113.23] 中心點 500半徑（單位應該是米吧 ，這個倒是沒有核對過）
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map).bindPopup("廣州大廈歡迎你");
- 多邊形
//畫多邊形
L.polygon([
[22.92096, 113.38591],
[22.91079, 113.38676],
[22.91118, 113.3962],
[22.92014, 113.39482]]
).addTo(map).bindPopup("故宮");
五、結合echart畫圖
畫echart圖 當然要引入echarts.js
<script src="jquery-1.9.1.min.js">//</script> <script src="echarts.min.js"></script>
//結合echats
var marker2 = L.marker([23.09,114.23]).addTo(map);
var content = '<div style="width: 220px; height: 220px;" id="marker' + 2 + '"></div>';
marker2.bindPopup(content, {});
marker2.on('popupopen', function(e) {
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('marker' + 2));
// 指定圖表的配置項和數據
option = {
tooltip: {
trigger: 'axis'
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月']
}],
yAxis: [{
type: 'value',
name: '水量',
min: 0,
max: 50,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
}, {
type: 'value',
name: '溫度',
min: 0,
max: 10,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}],
series: [{
name: '蒸發量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2]
}, {
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4]
}, {
name: '平均溫度',
type: 'line',
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
});
