Leaflet JS + Leaflet.Deflate - 将默认标记图标更改为自定义图标

Question

在我之前的post' ' 我能够解决我在使用 leaflet JS 库时遇到的问题，并将 多边形形状 更改为 标记图标 一定的缩放级别。

'Ivan Sanchez' 建议我使用“Leaflet.Deflate”插件，这很有用，所以现在各种形状在一定的缩放级别后被转换为标记，但是现在我我正在努力将 默认传单标记 图标更改为 自定义标记 图标，所以我现在的问题是：

是否可以将默认标记图标更改为自定义标记图标 同时使用 'Leaflet.ShapeFile' 和 'Leaflet.Deflate' 插件，最好的方法是什么？

我想制作一个 JSFiddle，但我不允许 JSFiddle 允许我附加包含 shapefile 的 zip 文件，所以我将 post 到目前为止我得到的代码放在这里，谢谢你帮助、建议和支持：

<!doctype html>
<html lang="en">

<head>
    <meta charset='utf-8' />
    <title>v4</title>
    <link rel="stylesheet" type="text/css" href="lib/leaflet/leaflet.css" />
    <!--[if lte IE 8]> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" /> <![endif]-->
<link rel="stylesheet" type="text/css" href="lib/leaflet/L.Control.Sidebar.css" />
<style>
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0; }
    #map { height: 100% }
</style>
</head>

<body>
    <div id="map"></div>

    <script src="lib/jquery/jquery-3.1.1.min.js"></script>
    <script src="lib/leaflet/leaflet.js"></script>
    <script src="lib/leaflet/catiline.js"></script>
    <script src="lib/leaflet/leaflet.shpfile.js"></script>
    <script src="lib/leaflet/shp.js"></script>
    <script src="lib/leaflet/L.Control.Sidebar.js"></script>
    <script src="lib/leaflet/L.Deflate.js"></script>

    <script>
        // init map
        var m = L.map('map').setView([52.472833, 1.749609], 15);

        // clicking on the map will hide the sidebar plugin.
        m.on('click', function () {
            sidebar.hide();
        });

        // init Deflate plugin
        L.Deflate({ minSize: 10 }).addTo(m);

        // Init side bar control
        var sidebar = L.control.sidebar('sidebar', { closeButton: true, position: 'right' });
        m.addControl(sidebar);

        // Init esri shape file via leaflet.shapefile, shp.js plugin
        var businessProperties = new L.Shapefile('data/businessshapes.zip', { style: propertyStyle, onEachFeature: propertyOnEachFeature }).addTo(m);

        // create on-click Feature
        function propertyOnEachFeature(feature, layer) {
            layer.on( {
                mouseover: highlightFeature,
                mouseout: resetHighlight,
                click: function populate() {
                    sidebar.toggle();
                    document.getElementById('pinfoHeader').innerHTML = "<h2>" + feature.properties.Building + " - Detailed Information</h2><br />";
                    document.getElementById('pTitle').innerHTML = "Name: " + feature.properties.Building
                    document.getElementById('pDetails').innerHTML = "SHAPE_Leng: " + feature.properties.SHAPE_Leng + "<br/ >SHAPE_Area: " + feature.properties.SHAPE_Area
                }, highlightFeature, zoomToFeature
            });
        }

        // style the properties style
        function propertyStyle(feature) {
            return {
                fillColor: getPropertyColor(feature.properties.BusType),
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: 3,
                fillOpacity: 0.7
            }
        }

        // set color per property according to the data table of the Esri Shape file.
        function getPropertyColor(propStatus) {
            if (propStatus == 'TypeA') {
                return 'red';
            } else if (propStatus == 'TypeB') {
                return 'green';
            } else {
                return 'yellow';
            }
        }

        // set the highlighted color for polygon
        function highlightFeature(e) {
            var layer = e.target;
            layer.setStyle( {
                weight: 2,
                color: 'black',
                fillColor: 'white',
                fillOpacity: 0.2
            });

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

        // reset the highlighted color for polygon after mouse leave polygon
        function resetHighlight(e) {
            businessProperties.resetStyle(e.target);
        }


        //Extend the Default marker class to overwrite the leaflet.deflate marker icon???
        var TestIcon = L.Icon.Default.extend({
            options: {
                iconUrl: 'assets/images/markers/business.png'
            }
        });
        var testIcon = new TestIcon();

        businessProperties.addTo(m);

        // Init base maps for switch
        var grayscale = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { id: 'MapID', attribution: 'Map maintained by <a href="http://www.demo.com">Demo LTD</a>, &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>,' }).addTo(m);
        var streets = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { id: 'MapID', attribution: 'Map maintained by <a href="http://www.demo.com">Demo LTD</a>, &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>,' });

        var baseMaps = {
            "Streets": streets,
            "Grayscale": grayscale
        };

        // Init overlay map switch
        var overlayMaps = {
            "Bussines Properties": businessProperties
        };

        // Add switches to map control
        L.control.layers(baseMaps, overlayMaps).addTo(m);
    </script>
</body>
</html>

Answer 1

Is it possible to change the default marker icon to a custom marker icon while using the 'Leaflet.Deflate' plugin?

答案是：否。

Leaflet.Deflate 的当前代码仅使用默认标记和默认标记，请参阅 https://github.com/oliverroick/Leaflet.Deflate/blob/991f51ca82e7bb14a17c8d769b4c378c4ebaf700/src/L.Deflate.js#L42

您可以绕过它，但我宁愿建议在 Leaflet.Deflate 存储库中提交功能请求。应该可以修改 Leaflet.Deflate 存储库以允许 line/polygon 功能具有一些额外的属性以用作标记选项。

Leaflet JS + Leaflet.Deflate - 将默认标记图标更改为自定义图标

Leaflet JS + Leaflet.Deflate - Changing default marker icon to custom icon

esri

markers

shapefile

leaflet

leaflet.deflate