Leaflet专题图

本例使用Leaflet API（L.geoJson）制作专题图。

制作专题图的数据，使用 GeoJson 格式存储，数据访问地址：http://leafletjs.com/examples/us-states.js

Step1 初始化地图

  //初始化地图
  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=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
      maxZoom: 18,
      attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
          '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
          'Imagery © <a href="http://mapbox.com">Mapbox</a>',
      id: 'mapbox.light'
  }).addTo(map);

Step2 并设置分段显示的颜色值及其他样式

  // 根据人口数分段并设置分段显示的颜色值及其他样式
  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 {
          weight: 2,
          opacity: 1,
          color: 'white',
          dashArray: '3',
          fillOpacity: 0.7,
          fillColor: getColor(feature.properties.density)
      };
  }

Step2 增加交互效果

设置高亮显示的要素的样式

  //设置高亮显示的要素的样式
  function highlightFeature(e) {
      var layer = e.target;

      layer.setStyle({
          weight: 5,
          color: '#666',
          dashArray: '',
          fillOpacity: 0.7
      });

      if (!L.Browser.ie && !L.Browser.opera) {
          layer.bringToFront();
      }

      info.update(layer.feature.properties);
  }

  function resetHighlight(e) {
      geojson.resetStyle(e.target);
      info.update();
  }

设置点击要素后将地图缩放至该要素

  //设置点击要素后将地图缩放至该要素
  function zoomToFeature(e) {
      map.fitBounds(e.target.getBounds());
  }

Step3 使用定义的样式和交互效果，制作专题图

  function onEachFeature(feature, layer) {
      layer.on({
          mouseover: highlightFeature,
          mouseout: resetHighlight,
          click: zoomToFeature
      });
  }

  //使用定义的样式和交互效果，制作专题图并添加到地图
  geojson = L.geoJson(statesData, {
      style: style,
      onEachFeature: onEachFeature
  }).addTo(map);

  map.attributionControl.addAttribution('Population data © <a href="http://census.gov/">US Census Bureau</a>');

Step4 定义hover时展示的信息框

  // 定义hover时展示的信息框
  var info = L.control();

  info.onAdd = function (map) {
      this._div = L.DomUtil.create('div', 'info');
      this.update();
      return this._div;
  };

  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);

Step5 定义图例，并添加到地图上

  //定义图例，并添加到地图上
  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 = [],
          from, to;

      for (var i = 0; i < grades.length; i++) {
          from = grades[i];
          to = grades[i + 1];

          labels.push(
              '<i style="background:' + getColor(from + 1) + '"></i> ' +
              from + (to ? '–' + to : '+'));
      }

      div.innerHTML = labels.join('<br>');
      return div;
  };

  legend.addTo(map);

在线演示与源码编辑

您可以在线访问完整代码、体验演示效果，也可以直接在线编辑源码并实时查看效果。

• 在线演示
• 源码编辑