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

Question

I am having some difficulties to render the markers in the leaflet.js map based on different zoom levels. 我在根据不同的缩放级别在leaflet.js地图中渲染标记时遇到一些困难。 I am using jquery UI to implement drag and drop features for the markers. 我正在使用jquery UI来实现标记的拖放功能。 When I am dropping the marker from an area outside the map I need to get the map zoom level and change the icon size when its dropped. 当我从地图之外的区域放下标记时，我需要获取地图缩放级别并在放下图标时更改其图标大小。 When zooming i need to resize all the markers. 缩放时，我需要调整所有标记的大小。

I am not sure on how the achieve the resize of the markers both on drop end and resize. 我不确定在下降端和调整大小时如何实现标记的调整大小。

Below is what i have achieved so far: 以下是我到目前为止所取得的成就：

<!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>

Thanks, Pawan 谢谢Pawan

Answer 1

I have a little experience with this. 我对此有一点经验。 What I did to accomplish this was to alter the size of my icon in CSS file. 我要做的是更改CSS文件中图标的大小。 I would use Map.getZoom() and depending on that go into the CSS file and change the size of icon using: 我将使用Map.getZoom（）并根据需要进入CSS文件并使用以下命令更改图标的大小：

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

This is very rough and with some things removed but I think it'll point you in the right direction 这很粗糙，并且删除了一些内容，但我认为它将为您指明正确的方向

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

问题描述

1 个解决方案

解决方案1
0 2014-11-13 16:28:37

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

问题描述

1 个解决方案

解决方案1 0 2014-11-13 16:28:37

解决方案1
0 2014-11-13 16:28:37