leaflet地图区域数据可视化

       地图上数据的展示对于一些有要求的场景里面还是很重要的，vue是前端经常使用的开发语言，leaflet与vue能够很好地进行融合使用，对于GIS相关的数据学习我也仅仅只是停留在皮毛上面，今天主要是简单地基于leaflet地图框架来对指定区域进行可视化，这个之后需要对不同的图层进行叠加处理，今天只是基于给定的经纬度数据来实现数据的可视化展示功能。

      核心代码实现如下：

<script>

        var obj = {'V': [[247.5, 0.0], [247.5, 100.0]], 'Z': [[[35.5737364828, 115.865867222], [35.5712313418, 115.86128216], [35.5781793935, 115.856731607], [35.5857191388, 115.853927041], [35.5866003546, 115.85933733], [35.5799057651, 115.861827085]], [[35.5712313418, 115.86128216], [35.5687260254, 115.856697384], [35.5764528061, 115.851636347], [35.58483768, 115.848516871], [35.5857191388, 115.853927041], [35.5781793935, 115.856731607]]]};


    //到 mapbox 官网注册并创建下面的access token都是免费的，不过有5w次的浏览限制
    var url = '你自己的url数据';
    //初始化 地图
    var leafletMap = L.map('mapDiv').setView([35.593571, 115.902191], 12);
    //将图层加载到地图上，并设置最大的聚焦还有map样式
    L.tileLayer(url, {maxZoom: 18,id: 'mapbox.streets'}).addTo(leafletMap);
    

    var myLayerGroup = new L.LayerGroup();
    leafletMap.addLayer(myLayerGroup);

    // 网格图层
    var gridLayers = new Array();

    serefresh();
    
    function serefresh(){

        var point = obj["Z"];
        var val = obj["V"];
        var color = ''
        var pointlength = point.length;
        for(var i=0; i< pointlength; i++){
            //对数据值进行判断===>转化为同等的颜色值
            if (val[i][1] >= 0 && val[i][1] <= 10) {
                    color='#FFB6C1';
                    gridLayers[i] = L.polygon(point[i],{fillColor: color,fillOpacity: 0.5 ,fill: true, opacity: 1, radius: 6,  weight:0.1});
                    myLayerGroup.addLayer(gridLayers[i]);
                   }
            if (val[i][1] >= 10 &&  val[i][1] <= 20) {
                    color='#FFB6D5';
                    gridLayers[i] = L.polygon(point[i],{fillColor: color,fillOpacity: 0.5 ,fill: true, opacity: 1, radius: 6,  weight:0.1});
                    myLayerGroup.addLayer(gridLayers[i]);
                   }
            if (val[i][1] >= 20 &&  val[i][1] <= 30) {
                    color='#FFB6F1';
                    gridLayers[i] = L.polygon(point[i],{fillColor: color,fillOpacity: 0.5 ,fill: true, opacity: 1, radius: 6,  weight:0.1});
                    myLayerGroup.addLayer(gridLayers[i]);
                   }
            if (val[i][1] >= 30 && val[i][1] <= 50) {
                    color='#FF69B4';
                    gridLayers[i] = L.polygon(point[i],{fillColor: color,fillOpacity: 0.5 ,fill: true, opacity: 1, radius: 6,  weight:0.1});
                    myLayerGroup.addLayer(gridLayers[i]);
                   }
            if (val[i][1] >= 50 &&  val[i][1] <= 100) {
                    color='#DC143C';
                    gridLayers[i] = L.polygon(point[i],{fillColor: color,fillOpacity: 0.5 ,fill: true, opacity: 1, radius: 6,  weight:0.1});
                    myLayerGroup.addLayer(gridLayers[i]);
                   }
            console.log(color)
            gridLayers[i].bindPopup("Direction: " + val[i][0] +"<br/>"+ "Value: " + val[i][1]);
        }
    }
</script>

        效果截图如下：
 

 

       简单地实现了一个基于区域数据值来自动选择不同深度颜色叠加到底图图层上面的小功能，记录一下！