Question

我在基于不同缩放级别的leaflet.js地图中渲染标记时遇到一些困难。我正在使用jquery UI来实现标记的拖放功能。当我从地图外的区域删除标记时，我需要获取地图缩放级别并在其删除时更改图标大小。缩放时我需要调整所有标记的大小。

我不确定如何在drop end和resize上实现标记的大小调整。

以下是我迄今取得的成就：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sample Leaflet Example</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body, html {
            height: 100%;
        }

        #map {
            width: 100%;
            height: 100%;
            min-height: 100%;
        }

        * html #map {
            height: 100%;
        }

        #box {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: white;
            padding: 10px;
            z-index: 1000;
        }

            #box img {
                margin-left: 20px;
                margin-right: 5px;
                cursor: pointer;
            }
    </style>
</head>
<body>
    <div id="map"></div>

    <div id="box">
        Drag Marker on the map:
        <span class="poi-type"><img class="drag" type="tree" src="icons/tree_green.png" alt="TREE: green" />Tree</span>
        <span class="poi-type"><img class="drag" type="red" src="icons/poi_red.png" alt="POI: red" />Red</span>
        <span class="poi-type"><img class="drag" type="black" src="icons/poi_black.png" alt="POI: black" />Black</span>
    </div>

    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

    <script>
        var map, user;
        var markers = [];
        var mapMinZoom = 0;
        var mapMaxZoom = 5;

        var poiIcon = L.Icon.extend({
            options: {
                iconSize: [22, 32],
                iconAnchor: [-20, 0],
                shadowUrl: 'icons/poi_shadow.png',
                shadowSize: [22, 13],
                shadowAnchor: [-31, -19],
                popupAnchor: [32, -2]
            }
        });

        var blackIcon = new poiIcon({ iconUrl: 'icons/poi_black.png' });
        var redIcon = new poiIcon({ iconUrl: 'icons/poi_red.png' });
        var treeIcon = new poiIcon({ iconUrl: 'icons/tree_green.png', shadowUrl: 'icons/tree_shadow.png' });





        $(document).ready(function () {
            var map = L.map('map', {
                maxZoom: mapMaxZoom,
                minZoom: mapMinZoom,
                crs: L.CRS.Simple
            }).setView([0, 0], mapMaxZoom);

             var mapBounds = new L.LatLngBounds(
             map.unproject([0, 3328], mapMaxZoom),
             map.unproject([4864, 0], mapMaxZoom));

             map.fitBounds(mapBounds);

             L.tileLayer('{z}/{x}/{y}.png', {
                 minZoom: mapMinZoom, maxZoom: mapMaxZoom,
                 bounds: mapBounds,
                 attribution: 'Rendered with <a href="http://www.maptiler.com/">MapTiler</a>',
                 noWrap: true          
             }).addTo(map);


             map.on('zoomend', changeIconSize);


             //function changeIconSize(e) {
             //    var defaultIconSize = new L.point(22, 32);
             //    var defaultShadowSize = new L.point(22, 13);

             //    var transformation = new L.Transformation(1, 0, 1, 0);
             //    var currentZoom = map.getZoom();
             //    var newIconSize = transformation.transform(defaultIconSize, sizeFactor(currentZoom));
             //    var newShadowSize = transformation.transform(defaultShadowSize, sizeFactor(currentZoom));
             //    var newIconAnchor = new L.Point(Math.round(newIconSize.x / 2), newIconSize.y);

             //    var newIcon = new L.Icon.Default({
             //        iconSize: newIconSize,
             //        iconAnchor: newIconAnchor,
             //        shadowSize: newShadowSize,
             //    });

             //    return newIcon;
             //}


            // Drag & Drop
            $(".drag").draggable({
                helper: 'clone',
                containment: 'map',
                start: function(evt, ui) {
                    $('#box').fadeTo('fast', 0.6, function() {});
                },
                stop: function(evt, ui) {
                    $('#box').fadeTo('fast', 1.0, function() {});

                    var options = {
                        pid: guid(),
                        type: ui.helper.attr('type'),
                        icon: eval(ui.helper.attr('type') + 'Icon'),
                        draggable: true
                    };

                    insertPoint(
                        map.containerPointToLatLng([ui.offset.left, ui.offset.top]), options);
                }
            });

            // Create a GUID
            function S4() {
                return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            }
            function guid() {
                return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
            }



            // UPDATE point
            function updatePoint(point) {
                alert(point.getLatLng().lat + " -  " + point.getLatLng().lng);              
            }

            // DELETE point
            function deletePoint(pid) {

                for (i = 0; i < markers.length; i++) {
                    if (markers[i].options.pid === pid) {
                        map.removeLayer(markers[i]);
                        markers.splice(i, 1);
                    }
                }
            }

            // INSERT point
            function insertPoint(position, options) {

                var newIcon = changeIconSize();
                options.icon = newIcon;
                var point = L.marker(position, options).addTo(map);



                point.bindPopup(
                    '<a onClick="deletePoint(\'' + point.options.pid
                        + '\');" href="#">Remove Me!</a>',
                    {
                        closeButton: false
                    }
                );

                point.on('dragend', function (evt) {
                    updatePoint(point);
                });

                markers.push(point);
            }

            function sizeFactor(zoom) {
                if (zoom <= 8) return 0.3;
                else if (zoom == 9) return 0.4;
                else if (zoom == 10) return 0.5;
                else if (zoom == 11) return 0.7;
                else if (zoom == 12) return 0.85;
                else if (zoom == 13) return 1.0;
                else if (zoom == 14) return 1.3;
                else if (zoom == 15) return 1.6;
                else if (zoom == 16) return 1.9;
                else // zoom >= 17
                    return 2.2;
            }


        });

    </script>
</body>
</html>

谢谢， Pawan

Answer 1

我对此有一点经验。我做的是改变CSS文件中图标的大小。我会使用Map.getZoom（）并根据它进入CSS文件并使用以下方式更改图标的大小：

 $('#'+map.selector+' .leaflet-label').css('font-size', '24px');

这非常粗糙，删除了一些东西，但我认为它会指向正确的方向

根据地图缩放级别更改标记图标图像

1 个答案: