javascript - 使用正方形而不是点

Question

我使用leafletjs在 map 上显示一些点。数据源是geoJSON

喜欢this他们网站上提供的简单示例。

是否可以通过样式使用方形而不是点，或者唯一的方法是使用multiPolygon而不是multiPoint？

Answer 1

我希望这有帮助:

HTML

<div id="map" style="width: 600px; height: 400px"></div>

JavaScript

var map = L.map('map').setView([40, -100], 15),
    createSquare = function (latlng, options) {
        var point = map.latLngToContainerPoint(latlng),
            size = options.radius || options.size || 10,
            point1 = L.point(point.x - size, point.y - size),
            point2 = L.point(point.x + size, point.y + size),
            latlng1 = map.containerPointToLatLng(point1),
            latlng2 = map.containerPointToLatLng(point2);
        return new L.rectangle([latlng1, latlng2], options);
    },
    points1 = {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-100, 40]
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-99.999, 40]
                }
            }
        ]
    },
    points2 = {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-100, 39.999]
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-99.999, 39.999]
                }
            }
        ]
    },    
    layer1 = L.geoJson(points1, {
        pointToLayer: function (feature, latlng) {
            return new L.CircleMarker(latlng, {
                radius: 10,
                color: "#000",
                weight: 1,
                fillColor: "#F50",
                fillOpacity: 0.75
            });
        }
    }).addTo(map),
    layer2 = L.geoJson(points2, {
        pointToLayer: function (feature, latlng) {
            return createSquare(latlng, {
                radius: 10,
                color: "#000",
                weight: 1,
                fillColor: "#0F5",
                fillOpacity: 0.75
            });
        }
    }).addTo(map);

结果

Here是jsfiddle。