Leaflet笔记-Leaflet与echarts结合使用（在地图上绘图表）
生活随笔
收集整理的這篇文章主要介紹了
Leaflet笔记-Leaflet与echarts结合使用（在地图上绘图表）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
?
基本概念
代碼與實例
?
基本概念
在本地地圖上繪制圖表，圖表經過響應彈出來。
想想真是令人興奮的事情，到時候用Qt的Widget和QGraphicsView結合QWebEngine搞一層。來一個科技感十足的魔幻頁面。
下面來說明下這個邏輯。
使用Leaflet的WMTS接口請求本地Geoserver服務，從而獲取數據。然后再把echarts放到Leaflet的響應事件里面。比如框。彈框的時候構造圖表。通過這樣的方式，即可完成地圖上顯示圖標。
?
?
代碼與實例
程序運行截圖如下：
當選中某一個城市后！
源碼如下：
test8.html
<!DOCTYPE html> <html> <head><title>Hello World</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /><link rel="stylesheet" href="leaflet.css" /><script src="leaflet.js"></script> <script src="leaflet-tilelayer-wmts-src.js"></script><script src="echarts.js"></script><style>html, body {height: 100%;margin: 0;}#map {width: 100%;height: 100%;}.chart{width: 600px;height: 300px;background-color: #fff;}</style></head> <body> <script src="test6.js" type="text/javascript"></script> <div id='map'></div> <script type="text/javascript">var ign = new L.TileLayer.WMTS( "http://XXX.XXX.XXX.XXX:8080/geoserver/gwc/service/wmts" ,{layer: 'GG_9:gg_9',tilematrixset: "EPSG:900913",Format : 'image/png',TileMatrix: 'EPSG:900913:8'});var map = L.map('map', {minZoom: 4,maxZoom: 7}).setView([32, 118], 7);L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);map.addLayer(ign);map.invalidateSize(true);//添加的數據function onEachFeature(feature, layer){var idStr = feature.geometry.properties.idStr.toString() ;var popupContent = '<div style="width:350px;height:300px" id="' + idStr + '"></div>';layer.bindPopup(popupContent, {});layer.on('popupopen', function(e){var myChart = echarts.init(document.getElementById(idStr));// 指定圖表的配置項和數據var option = {title: {text: '測試'},tooltip: {},legend: {data:['銷量']},xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子"]},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10]}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);});}L.geoJSON([bicycleRental], {onEachFeature: onEachFeature,pointToLayer: function (feature, latlng) {return L.circleMarker(latlng, {radius: 8,fillColor: "#ff7800",color: "#000",weight: 1,opacity: 1,fillOpacity: 0.8});}}).addTo(map)//添加的數據</script></body> </html>test6.js
var bicycleRental = {"type" : "FeatureConllection","features" : [{"geometry" : {"type" : "Point","coordinates" : [118.8, 32.05],"properties" : {"popupContent" : "南京","idStr" : "njChart"}},"type" : "Feature","id" : 100},{"geometry" : {"type" : "Point","coordinates" : [119.2, 34.55],"properties" : {"popupContent" : "連云港","idStr" : "lygChart"}},"type" : "Feature","id" : 101},{"geometry" : {"type" : "Point","coordinates" : [118.26, 33.94],"properties" : {"popupContent" : "宿遷","idStr" : "sqChart"}},"type" : "Feature","id" : 102},{"geometry" : {"type" : "Point","coordinates" : [119.12, 33.53],"properties" : {"popupContent" : "淮安","idStr" : "haChart"}},"type" : "Feature","id" : 103},{"geometry" : {"type" : "Point","coordinates" : [120.15, 33.32],"properties" : {"popupContent" : "鹽城","idStr" : "ycChart"}},"type" : "Feature","id" : 104},{"geometry" : {"type" : "Point","coordinates" : [119.95, 32.40],"properties" : {"popupContent" : "泰州","idStr" : "tzChart"}},"type" : "Feature","id" : 105},{"geometry" : {"type" : "Point","coordinates" : [119.41, 32.35],"properties" : {"popupContent" : "揚州","idStr" : "yzChart"}},"type" : "Feature","id" : 106},{"geometry" : {"type" : "Point","coordinates" : [120.92, 31.94],"properties" : {"popupContent" : "南通","idStr" : "ntChart"}},"type" : "Feature","id" : 107},{"geometry" : {"type" : "Point","coordinates" : [119.99, 31.755],"properties" : {"popupContent" : "常州","idStr" : "czChart"}},"type" : "Feature","id" : 108},{"geometry" : {"type" : "Point","coordinates" : [120.33, 31.44],"properties" : {"popupContent" : "無錫","idStr" : "wxChart"}},"type" : "Feature","id" : 109},{"geometry" : {"type" : "Point","coordinates" : [120.61, 31.26],"properties" : {"popupContent" : "蘇州","idStr" : "szChart"}},"type" : "Feature","id" : 110}] }這里有一個要注意的地方！
echarts他加載的時候需要一個div，并且還得知道這個div的id，如果沒有這個將會報錯，說dom找不到這個div
這個彈出的點擊小點彈出的功能，是在點擊后才創建div的，所以沒有點擊前相關的dom樹如下，當點擊后，可以看到此處的結構如下！
?
?
總結
以上是生活随笔為你收集整理的Leaflet笔记-Leaflet与echarts结合使用（在地图上绘图表）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Qt文档阅读笔记-Fortune Cli
- 下一篇： Spring Boot笔记-404错误统