ajax - Leaflet - 通过按钮单击设置 geojson 多边形数据的 choropleth

问题描述

我在这里通过失败学习，但仍然无法理解为什么下面的代码没有正确设置我的 geoJSON 图层的样式，也没有将其添加到我的地图中。

     lyrNeighbourhoods= new L.GeoJSON.AJAX("data/Neigh_Demo1.geojson",{style: {weight:1, fillOpacity:0.1},
         onEachFeature: function (feature, layer) {
         layer.bindTooltip(feature.properties.Neigh_Name, {
             direction:"center",
             permanent:true,
             className: 'labelstyle'
         });
         layer.bindPopup(feature.properties.Neigh_Name);
     }
     }).addTo(mymap);


     var lyrNeighbourhoods2020Pop = new L.geoJSON.ajax("data/Neigh_Demo1.geojson");

     var style1 ={
             weight: 2,
             opacity: 1,
             color: 'red',
             dashArray: '3',
             fillOpacity: 0.7,
             fillColor:'red'
     }   

     var geojson = L.geoJSON.ajax(lyrNeighbourhoods2020Pop, {
         style: style1,
     }).addTo(mymap);


     var tooltipThreshold = 13;
     mymap.on('zoomend', function() {
       if (mymap.getZoom() < tooltipThreshold) {
           $(".leaflet-tooltip").css("display","none")
       } else { 
           $(".leaflet-tooltip").css("display","block")

       }
     });



     // ******** Setup Layer Control **********

     objBasemaps={
         "Grey Scale Map": lyrCartoDB,
         "Satellite Aerial": lyrAerial,
     };

     objOverlays={
         "Neighbourhoods": lyrNeighbourhoods,
     };

     ctlLayers=L.control.layers(objBasemaps, objOverlays,{position:'bottomright'}).addTo(mymap);   /* add layer control to bottomright */

          $(document).ready(function() {  
            
            $('#mapid').height(window.innerHeight); //set map height to window
            $('#leftpanel').height(window.innerHeight); // set panel height to window


            $(document).on('click','#btnCustomize',function() {      /* on button click, pull out left panel or close it */
            if($('#leftpanel').hasClass('in')) {
                $('#leftpanel').removeClass('in')
            } else {
                $('#leftpanel').addClass('in')
            }
        });
        });

        $(document).on('click','#btnColor',function() {
            mymap.removeLayer(lyrNeighbourhoods)
            mymap.addLayer(lyrNeighbourhoods2020Pop)
        });
        
        function getColor(prop) {
            return prop > 40355 ? '#800026' :
                   prop > 30277  ? '#BD0026' :
                   prop > 21196  ? '#E31A1C' :
                   prop > 14407  ? '#FC4E2A' :
                   prop > 0  ? '#FD8D3C' :
                                '#FFEDA0';
        }
        
        
        function onEachFeature(feature, layer){
            if(layer instanceof lyrNeighbourhoods2020Pop){ // because markers have not the function .setStyle()
        lyrNeighbourhoods2020Pop.on('mouseover',(e)=>{
           var prop = feature.properties["Total Population 2020"];
           e.target.setStyle({color: getColor(prop)});
        });
       
        layer.on('mouseout',(e)=>{
           geojson.resetStyle(e.target)
        });
    }};
        
    var geojson = L.geoJSON.ajax(lyrNeighbourhoods2020Pop, {
     style: style1,
     onEachFeature: onEachFeature
    }).addTo(mymap);

我一直在研究通用的 Leaflet-doc Choropleth 示例，但仍然卡住了。

最后，据我所知，导入的 geoJSON 文件可以在文件名中有空格还是会产生问题？我一直在尝试使用以下属性：..feature.properties.Total Population 2020

如果这些问题过于简单，我们深表歉意。我学得很快，通常最终会解决问题，但几个小时后，我打电话给它并伸出援手。

更新：我已经用我目前所在的位置替换了原始代码。我确信我的问题是由整体脚本格式以及我如何构建我的调用引起的。

标签： ajaxleafletgeojsonchoropleth

问题是您以样式返回一个函数，但它只需要一个对象：

     var lyrNeighbourhoods2020Pop = new L.geoJSON.ajax("data/Neigh_Demo1.geojson");

     var style1 ={
             weight: 2,
             opacity: 1,
             color: 'red',
             dashArray: '3',
             fillOpacity: 0.7,
             fillColor:'red'
     } 


     var geojson = L.geoJSON.ajax(lyrNeighbourhoods2020Pop, {
         style: style1,
     }).addTo(mymap);

设置图层的样式，我添加了一个mouseover侦听器，但您可以从按钮调用它：

     var lyrNeighbourhoods2020Pop = new L.geoJSON.ajax("data/Neigh_Demo1.geojson");

     var style1 ={
             weight: 2,
             opacity: 1,
             color: 'red',
             dashArray: '3',
             fillOpacity: 0.7,
             fillColor:'red'
     } 

     function onEachFeature(feature, layer){
        if(layer instanceof L.Path){ // because markers have not the function .setStyle()
           layer.on('mouseover',(e)=>{
               var prop = feature.properties.colorprop;
               e.target.setStyle({color: getColor(prop)});
           });
           
           layer.on('mouseout',(e)=>{
               geojson.resetStyle(e.target)
           });
     }

     var geojson = L.geoJSON.ajax(lyrNeighbourhoods2020Pop, {
         style: style1,
         onEachFeature: onEachFeature
     }).addTo(mymap);

我不建议在名称中使用空格，但是它可以正常工作，您可以使用feature.properties["Total Population 2020"]

ajax - Leaflet - 通过按钮单击设置 geojson 多边形数据的 choropleth

问题描述

解决方案

推荐阅读