首页 > Web开发 > 详细

leaflet 使用GEOJSON创建矢量图形

时间:2020-05-04 23:27:18      阅读:233      评论:0      收藏:0      [点我收藏+]

点对象:

技术分享图片
function g(feature, layer) {
            // does this feature have a property named popupContent?
            if (feature.properties && feature.properties.popupContent) {
                layer.bindPopup(feature.properties.popupContent);
            }
        }

        var geojsonFeature = {
            "type": "Feature",
            "properties": {
                "name": "Coors Field",
                "amenity": "Baseball Stadium",
                "popupContent": "This is where the Rockies play!"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [100, 31]
            }
        };

        L.geoJSON(geojsonFeature, {
            onEachFeature: g
        }).addTo(map);
技术分享图片

线要素:

技术分享图片
var draw_line = {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [110, 11],
                    [110, 49]
                ]
            },
            "properties": {
                "popupContent": "This is a free bus line that will take you across downtown.",
                "underConstruction": true
            },
            "id": 2
        };

//绑定事件
function f(feature, layer) {
    layer.bindPopup(feature.properties.popupContent);
}

//增加到地图
var ss = L.geoJson(draw_line, {
    style: {
        "color": ‘black‘,
        "weight": 1
    },
    onEachFeature: f
}).addTo(map);
技术分享图片

多边形(Polygon)

技术分享图片
var states = [{
    "type": "Feature",
    "properties": {"party": "Republican"},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-104.05, 48.99],
            [-97.22,  48.98],
            [-96.58,  45.94],
            [-104.03, 45.94],
            [-104.05, 48.99]
        ]]
    }
}, {
    "type": "Feature",
    "properties": {"party": "Democrat"},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-109.05, 41.00],
            [-102.06, 40.99],
            [-102.03, 36.99],
            [-109.04, 36.99],
            [-109.05, 41.00]
        ]]
    }
}];

L.geoJSON(states, {
    style: function(feature) {
        switch (feature.properties.party) {
            case ‘Republican‘: return {color: "#ff0000"};
            case ‘Democrat‘:   return {color: "#0000ff"};
        }
    }
}).addTo(map);
技术分享图片

 

leaflet 使用GEOJSON创建矢量图形

原文:https://www.cnblogs.com/tiandi/p/12828716.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!