官方解析

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

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