利用Leftlet加载json数据层

利用Leftlet加载json数据层

业务需求：在地图上面，加载一组json数据。json数据带有地理的经纬度数据和其他指标的数值。

数据格式如下：
 var data = [
    {
          "ID": "6",
          "Year": "1990",
          "Latitude": "35.87",
          "Longitude": "46.87",
          "Radius": "150",
          "Conflict area": "62678",
          "Conflict site": "630",
          "Conflict territory": "Iran",
          "Version": "4-2010",
          "": ""
      },
      {
          "ID": "6",
          "Year": "1993",
          "Latitude": "35.60",
          "Longitude": "45.92",
          "Radius": "100",
          "Conflict area": "17650",
          "Conflict site": "630",
          "Conflict territory": "Iran",
          "Version": "4-2010",
          "": ""
      }
]

实现效果图：

实现过程

1、首先在页面上设置一个地图容器
<div id="map"></div>
2、设置地图的中心点
map = L.map('map').setView([37.550339, 104.114129], 4);
3、设置底层的瓦片地图数据，这里借用ArcGIS的地图数据
L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}').addTo(map);
4、数据层配置项的设置

var dataLayer = new L.DataLayer(data,{
        recordsField: null,
        latitudeField: 'Latitude',
        longitudeField: 'Longitude',
        displayOptions: {
            Radius: {
                radius: new L.LinearFunction([50, 10], [2000, 30]),
            },
            Year: {
                fillColor: new L.HSLHueFunction([1989, 75], [2008, 0])
            }
        },
        layerOptions: {
            numberOfSides: 50,
            color: '#000000',
            fillOpacity: 0.7,
            opacity: 1,
            weight: 0.4,
            gradient: true,
            dropShadow: false
        }
        ,
        tooltipOptions: {
            iconSize: new L.Point(100, 80),
            iconAnchor: new L.Point(-5, 100)
        }
    });

5、在地图map层上面加载数据层
map.addLayer(dataLayer);
即可。
详细代码移步可见：https://download.csdn.net/download/u012832088/10603251

转载自：https://blog.csdn.net/u012832088/article/details/81668224