當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
Leaflet文档阅读笔记-Using GeoJSON with Leaflet笔记
生活随笔
收集整理的這篇文章主要介紹了
Leaflet文档阅读笔记-Using GeoJSON with Leaflet笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
?
?
官方解析
博主例子
?
官方解析
個人覺得這官方教程給得是相當的好，因為功能非常的強大，在此記錄下，方便以后使用，以后肯定會經常用到！
此節將會學到從GeoJson對象中創建且調用map vectors。
GeoJson對象如下：
var geojsonFeature = {"type": "Feature","properties": {"name": "Coors Field","amenity": "Baseball Stadium","popupContent": "This is where the Rockies play!"},"geometry": {"type": "Point","coordinates": [-104.99404, 39.75621]} };可以通過下面這兩種方式在地圖上添加geojson
L.geoJSON(geojsonFeature).addTo(map);或者
var myLayer = L.geoJSON().addTo(map); myLayer.addData(geojsonFeature);兩種方式設置其風格
var myLines = [{"type": "LineString","coordinates": [[-100, 40], [-105, 45], [-110, 55]] }, {"type": "LineString","coordinates": [[-105, 40], [-110, 45], [-115, 55]] }];var myStyle = {"color": "#ff7800","weight": 5,"opacity": 0.65 };L.geoJSON(myLines, {style: myStyle }).addTo(map);及
var states = [{"type": "Feature","properties": {"party": "Republican"},"geometry": {"type": "Polygon","coordinates": [[[-104.05, 48.99],[-97.22, 48.98],[-96.58, 45.94],[-104.03, 45.94],[-104.05, 48.99]]]} }, {"type": "Feature","properties": {"party": "Democrat"},"geometry": {"type": "Polygon","coordinates": [[[-109.05, 41.00],[-102.06, 40.99],[-102.03, 36.99],[-109.04, 36.99],[-109.05, 41.00]]]} }];L.geoJSON(states, {style: function(feature) {switch (feature.properties.party) {case 'Republican': return {color: "#ff0000"};case 'Democrat': return {color: "#0000ff"};}} }).addTo(map);在地圖上畫一個點
?
當選點擊點后，彈出某窗口
function onEachFeature(feature, layer) {// does this feature have a property named popupContent?if (feature.properties && feature.properties.popupContent) {layer.bindPopup(feature.properties.popupContent);} }var geojsonFeature = {"type": "Feature","properties": {"name": "Coors Field","amenity": "Baseball Stadium","popupContent": "This is where the Rockies play!"},"geometry": {"type": "Point","coordinates": [-104.99404, 39.75621]} };L.geoJSON(geojsonFeature, {onEachFeature: onEachFeature }).addTo(map);過濾
map中不顯示"Busch Field"
var someFeatures = [{"type": "Feature","properties": {"name": "Coors Field","show_on_map": true},"geometry": {"type": "Point","coordinates": [-104.99404, 39.75621]} }, {"type": "Feature","properties": {"name": "Busch Field","show_on_map": false},"geometry": {"type": "Point","coordinates": [-104.98404, 39.74621]} }];L.geoJSON(someFeatures, {filter: function(feature, layer) {return feature.properties.show_on_map;} }).addTo(map);?
博主例子
這里舉個例子，GIS為自己本地搭建的。
把南京和合肥圈了出來，如下圖所示：
當點擊某個圓后
代碼如下：
test5.html
<!DOCTYPE html> <html> <head><title>Hello Test5</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="geojson.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: 5,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 popupContent = "彈出窗口，此城市為：" + feature.geometry.properties.popupContent;layer.bindPopup(popupContent);}//新加的代碼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>geojson.js
var bicycleRental = {"type" : "FeatureConllection","features" : [{"geometry" : {"type" : "Point","coordinates" : [118.8, 32.05],"properties": {"popupContent" : "南京"}},"type" : "Feature","id" : 100},{"geometry" : {"type" : "Point","coordinates" : [117.242, 31.8],"properties": {"popupContent" : "合肥"}},"type" : "Feature","id" : 101}] };這里要注意一點！
此處的經緯度是反過來的！！！！！
總結
以上是生活随笔為你收集整理的Leaflet文档阅读笔记-Using GeoJSON with Leaflet笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C++设计模式-组合模式
- 下一篇： QML笔记-KeyNavigation的