官方解析

个人觉得这官方教程给得是相当的好，因为功能非常的强大，在此记录下，方便以后使用，以后肯定会经常用到！

此节将会学到从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);

在地图上画一个点

var geojsonMarkerOptions = {radius: 8,fillColor: "#ff7800",color: "#000",weight: 1,opacity: 1,fillOpacity: 0.8
};L.geoJSON(someGeojsonFeature, {pointToLayer: function (feature, latlng) {return L.circleMarker(latlng, geojsonMarkerOptions);}
}).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笔记相关推荐

Leaflet文档阅读笔记-Quick Start Guide笔记
目录网络加载JS和CSS 初始化地图在地图上做标记在地图上点击事件获得坐标个人对这篇文档的体会网络加载JS和CSS 先要加载css,然后在加载js <link rel="st ...
Leaflet文档阅读笔记- Showing video files解析
目录官方解析博主例子官方解析这里,官方首先告诉我们,当<video>这个标签还没出现的时候,在web上展示视频是很艰巨的.现在有了这个标签,只需要如下代码就能在web页面上展示视频 ...
Leaflet文档阅读笔记-Extending Leaflet: Handlers and Controls笔记
目录官方解析博主栗子官方解析 Leaflet 1.0中出现了处理者这个新概念,处理浏览器里的dom事件单击,双击,地图滑动及map状态的改变. 当处理者启动时调用addHooks()函数,未启动 ...
Leaflet文档阅读笔记-Zoom levels笔记
目录官方解析博主例子官方解析把地图放缩锁定到0级 var map = L.map('map', {minZoom: 0,maxZoom: 0 });var cartodbAttribution ...
Leaflet文档阅读笔记-Markers With Custom Icons笔记
目录官方解析博主例子官方解析这个内容主要是把自定义图片,放到地图上,并且还可以增加阴影图片,以及点击图片后的弹出事件. 官方是准备了下面这4张图片: 使用下面这种方式可以单独设置,自定义图标 ...
Leaflet文档阅读笔记-Leaflet on Mobile笔记
目录 CSS和HTML改如何设置定位功能 CSS和HTML改如何设置如下的设置: body {padding: 0;margin: 0; } html, body, #map {height: 1 ...
Qt文档阅读笔记-共享库的创建与调用
使用共享库的符号这个符号可以作用在变量.类.函数中,并且这些都可以被调用端使用. 在编译共享库中,需要使用export符号.在使用端调用的时候使用import符号. 这里是本人从文档中记录的笔记,大 ...
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图 QHeightMapSurfaceDataProxy:是Q3DSurface的一个基本代理类. 他是专门加载高度图. 高度图是没有X, ...
Qt文档阅读笔记-Rotations Example相关
Rotations Example文档阅读笔记使用这种方式,对y轴和z轴进行旋转. QQuaternion yRotation = QQuaternion::fromAxisAndAngle(0.0 ...

Leaflet文档阅读笔记-Using GeoJSON with Leaflet笔记

官方解析

博主例子

Leaflet文档阅读笔记-Using GeoJSON with Leaflet笔记相关推荐

最新文章

热门文章