介绍
本文会使用GeoJSON数据创建一个可交互式的地图，在本文中可以学习到图层事件、图层渲染、以及自定义控件等内容
照例贴出官方链接以及本文将要使用到的GeoJSON文件
leaflet官方：leaflet
GeoJSON数据：数据
交互式地图
我们首先来看一下数据是什么样子的
{
"type": "Feature",
"properties": {
"name": "Alabama",
"density": 94.65
},
"geometry": ...
...
}
很显然，提供的数据是一个FeatureCollection，包含美国全部的州。而内含的多个Feature，这些Feature就是美国各个州了。
需要注意的是属性中的name和density，这些属性对于我们如何渲染图层也会有很大的帮助。
将GeoJSON数据加载到地图中
var map = L.map('map').setView([37.8, -96], 4);
var tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
L.geoJson(statesData).addTo(map);
注意这里的statesData，这就是上面的数据里面所定义的一个变量了，如果你报错了，检查一下是否成功导入了提供的js文件。
效果如下
现在只有这些简单的图形，没有分级或者什么信息，将鼠标放到每个feature上或者点击feature也不会有什么反应。
这是你想要的吗？当然不是！
先给每个feature上个色
function getColor(d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
}
function style(feature) {
return {
fillColor: getColor(feature.properties.density),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
L.geoJson(statesData, {style: style}).addTo(map);
所谓上色，自然不是简单的全部上统一的颜色，我们利用geoJSON的style属性，传入feature的density属性来为每个feature定制颜色，也就是分等定级了。
效果如下
现在好看多了，但是还是没有交互的效果，下面我们为图层添加一个高亮和缩放到的效果
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
layer.bringToFront();
}
var geojson//这里定义的geojson会在后面得到
function resetHighlight(e) {
geojson.resetStyle(e.target);
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
geojson = L.geoJson(statesData, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
如上，我们定义了highlightFeature、resetHighlight和zoomToFeature三个方法，分别对应了当鼠标移动到要素，鼠标利尻要素和鼠标点击要素时所触发的事件，然后使用onEachFeature将这些事件绑定到图层的各个要素上。
具体看一下各个方法：highlightFeature中首先通过e.target获得对应的layer，然后为其设定style，最后为了避免重设的边界和原有的地图发生冲突，使用bringToFeature方法将其前推展示。在resetHighLight方法中使用了resetStyle方法，可以让feature恢复到style所设定的样式。zoomToFeature则是为map重新设定了显示的边界为所点击的feature的边界。
效果如下
这里对于geiJSON图层的设定基本已经完成了。下面我们就要为地图添加图例和点击时展示要素density值得面板，我们也将接触到leaflet框架的强大组件control
首先把信息显示的控件做出来
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
// method that we will use to update the control based on feature properties passed
info.update = function (props) {
this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
: 'Hover over a state');
};
info.addTo(map);
可以看到这里首先定义了一个control，然后通过它的onAdd方法，封装了一个class为info的div进去，又封装了一个update的方法进去。onAdd方法的定义是这样的
可以返回一个DOM元素并且在相关的地图事件上添加监听器，可以看到我们上面所写的this._div和this.update就分别是添加的DOM元素和监听器。
再定义info.update这个方法，每次调用的时候都修改this._div.innerHTML的内容（向div其中添加内容）。
当然，这样还不够，我们想要的是每点击一个要素，显示这个要素的值。这需要我们修改之前的方法
function highlightFeature(e) {
...
info.update(layer.feature.properties);
}
function resetHighlight(e) {
...
info.update();
}
这样，在我们移到某个要素时，就会将要素的属性传递给info的update方法，从而实现动态展示info控件上的信息。
再为info控件添加一些css样式，记住我们是添加了一个class为info的div控件
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
效果如下
最后我们要添加的就是图例了
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 10, 20, 50, 100, 200, 500, 1000],
labels = [];
// loop through our density intervals and generate a label with a colored square for each interval
for (var i = 0; i < grades.length; i++) {
div.innerHTML +=
'<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
}
return div;
};
legend.addTo(map);
同样是L.control，只不过这次传了参数position，将生成的控件位置放在右下角。
再为控件定义一下样式
.legend {
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
效果如下：
最后照旧，贴上全部代码和效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<script src="./json/us-state.js"></script>
<style>
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.legend {
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
<title>InteractMap</title>
</head>
<body>
<div id="map" style="height: 600px;"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 3)
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attrubution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
function getColor(d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
}
function style(feature) {
return {
fillColor: getColor(feature.properties.density),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
}
}
function hithLightFeature(e) {
var layer = e.target
layer.setStyle({
weight: 5,
color: "#666",
dashArray: '',
fillOpacity: 0.7
});
layer.bringToFront()
info.update(layer.feature.properties)
}
var geojson
function resetHighlight(e) {
geojson.resetStyle(e.target)
info.update()
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds())
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: hithLightFeature,
mouseout: resetHighlight,
click: zoomToFeature
})
}
geojson = L.geoJSON(statesData, { style: style, onEachFeature: onEachFeature }).addTo(map)
var info = L.control()
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
}
info.addTo(map)
info.update = function (props) {
this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
: 'Hover over a state');
};
var legend = L.control({ position: "bottomright" })
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 10, 20, 50, 100, 200, 500, 1000],
labels = [];
for (var i = 0; i < grades.length; i++) {
div.innerHTML += '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
}
return div;
};
legend.addTo(map)
</script>
</body>
</html>
结语
这节我们学了如何在leaflet中创建一个可交互的地图，其中涉及到了control和DomUtil的内容，这两个功能属于leaflet中可拓展性比较强的模块，要讲的内容可能很多，就不在这里展开了，后续会专门写一篇来介绍。
1144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
