LeafletJS应用 - 交互式多度分色图

Lea?etJS应用_交互式多度分色图这是一个案例研究，在GeoJSON和一些自定义控件的帮助下，创建了彩色交互式的美国各州人口密度图。 ?数据源我们让美国人口密度的数据可视化。由于数据量不是很大，所以最简便的存储和显示数据的方法是GeoJSON。我们的GeoJSON数据的每个特征将是这样的：{ ? \ ? \ ? ? ? \ ? ? ? \ ? }, ? \ ? ...} 基本状态图让我们用定制的Mapbox样式在地图上显示我们的状态数据。 var mapboxAccessToken = {your access token here};var map = L.map('map').setView([37.8, -96], 4);L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + mapboxAccessToken, { ? id: 'mapbox.light', ? attribution: ...}).addTo(map);L.geoJson(statesData).addTo(map);?添加颜色现在我们需要根据人口密度对各州进行着色。为地图选择好的颜色可能需要比较高的技巧，但有一个伟大的工具可以帮助我们---ColorBrewer。 我们创建一个函数，使用从ColorBrewer中得到的值，返回基于人口密度的颜色：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';} 接下来，我们定义GeoJSON层的样式函数，使其填充颜色取决于feature.properties.density。同时，我们还调整了外观，添加了漂亮的笔触。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);现在看起来好多了!?Adding Interaction现在让我们让鼠标经过地图上代表美国各州的色块时，该色块高亮显示。首先，我们将为层的鼠标事件定义一个事件监听器：function highlightFeature(e) { ? var layer = e.target; ? layer.setStyle({ ? ? ? weight: 5, ? ? ? color: '#666', ? ? ? dashArray: '', ? ? ? fillOpacity: 0.7 ? }); ? if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { ? ? ? layer.bringToFront(); ? }}在此我们通过e.target 获取到鼠标悬停的层，并在这个层上设置了一个宽的灰色边界作为我们的突出效果，同时将该层置于顶层， 这样边界就不会与附近的州发生冲突（而不是IE,Opera或者Edge）。接下来，我们将定义mouseout发生的事情：function resetHighlight(e) { ? geojson.resetStyle(e.target);}方便的geojson.resetStyle方法将将层的样式重置为默认状态（由我们的style函数定义）。为此，请确保我们的GeoJSON层可以被之前监听器定义的geojson变量访问，然后把这个GeoJSON层分配给geojson变量：var geojson;// ... our listenersgeojson = L.geoJson(...);让我们定义一个点击监听器控来放大状态：function zoomToFeature(e) { ? map.fitBounds(e.target.getBounds());}现在我们将使用onEachFeature选项在各州所在的层中添加监听器：function onEachFeature(feature, layer) { ? layer.on({ ? ? ? mouseover: highlightFeature, ? ? ? 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'); // create a div with a class \ ? this.update(); ? return this._div;};// method that we will use to update the control based on feature properties passedinfo.update = function (props) { ? this._div.innerHTML = '

US Population Density

' + (props ? ? ? ? '' + props.name + '
' + props.density + ' people / mi²' ? ? ? : 'Hover over a state');};info.addTo(map);当用户鼠标经过某一个州时，我们需要更新控件，所以我们修改监听器如下：function highlightFeature(e) { ? ... ? info.update(layer.feature.properties);}function resetHighlight(e) { ? ... ? info.update();}控件需要一些CSS样式使它看起来不错：.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;}自定义图例控件用图例创建控件更容易，因为它是静态的并且不会在状态悬停时改变。JavaScript代码：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 += ? ? ? ? ? '' : '+'); ? } ? return div;};legend.addTo(map);控件的CSS样式（我们也重用以前定义的info类）：.legend { ? line-height: 18px; ? color: #555;}.legend i { ? width: 18px; ? height: 18px; ? float: left; ? margin-right: 8px; ? opacity: 0.7;}?

• 1
• 2