传单中的 geojson 样式问题答案

【问题标题】：Issue with styling geojson in leaflet传单中的 geojson 样式问题
【发布时间】：2022-07-13 22:48:35
【问题描述】：

我目前正在创建 web 地图，但在使用多边形 geojson 文件进行任何样式设置时遇到问题。我认为问题出在 L.geoJSON(counties, {... 部分，因为当我将其替换为 counties.addTo(map) 时，默认渲染效果很好。我一直在尝试不同的东西以获得更好的部分当天的，但还没有正确。有什么想法吗？

<html>
    <head>
        <title>Testing Web Mapping</title>
        <link rel="stylesheet" href="leaflet/leaflet.css" />        
    </head>
    <body>
         <script src="leaflet/leaflet.js"></script>
        <div id="map" style="width:700px; height: 850px"></div>
        <script>
            var map = L.map('map',{center:[44.4340101, -90.0139754], zoom:7});
            varusgs = L.tileLayer.wms("http://basemap.nationalmap.gov/ArcGIS/services/USGSImageryOnly/MapServer/WMSServer", {layers:'0', format: 'image/png', transparent: true, attribution: "USGS"}).addTo(map);
        </script>
        <script src="leaflet/leaflet.ajax.min.js"></script>

        <script>
            var counties = new L.geoJSON.ajax('GIS/Counties_geojson.geojson');
            
            var CountiesStyle = {
                "color": "#ffffff", 
                "fillColor": "#ffffff",
                "weight": 1,
                "opacity": 1,
                "fillOpacity": 0
            };
            
            L.geoJSON(counties, {
                style: CountiesStyle
            }).addTo(map);
            counties.on('data:loaded', function(){map.fitBounds(counties.getBounds())});
        </script>
        
    </body>

</html>

【问题讨论】：

标签： javascript leaflet geojson styling

【解决方案1】：

我通过充分的反复试验设法找出了问题所在。如果有人遇到这篇文章，希望这会有所帮助。这是我使用的代码：

var counties = L.geoJSON.ajax('GIS/Counties_geojson.geojson',
    {style: CountiesStyle}).addTo(map);
    counties.on('data:loaded', function(){
    map.fitBounds(counties.getBounds())
});

祝大家好运，编程愉快。

【讨论】：