javascript - Leaflet没有用geojsonFeatures标记点？-6ren

javascript - Leaflet没有用geojsonFeatures标记点？

转载作者：行者123 更新时间：2023-12-02 14:25:51

我开始使用 Leaflet API，希望使用 GeoJson 数据向客户 map 添加一些几何点。目前，我使用了此处提供的 geojsonFeature 类型 http://leafletjs.com/examples/quick-start.html

但是，当我按照这样的步骤添加功能时，这些功能不会出现。下面是我的 html 页面和代码。

<html><head>
    <title>Leaflet Quick Start Guide Example</title>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
</head>
<body class="">
    <div id="mapid" style="width: 600px; height: 400px; position: relative;" class="leaflet-container leaflet-fade-anim" tabindex="0"></div>

    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <script src="https://raw.github.com/calvinmetcalf/leaflet-ajax/master/dist/leaflet.ajax.min.js"></script>
    <script>

        var mymap = L.map('mapid').setView([51.505, -0.09], 13);

        L.tileLayer('https://api.mapbox.com/styles/v1/edsonbarboza/ciqb82pfe000dc1nliqy8sljp/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZWRzb25iYXJib3phIiwiYSI6ImNpbTJjMWRuczA5NGx1MGtzbmN6c3NjOHMifQ.FvAMXzmnQ0TIJDDsV6rXAw', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="http://mapbox.com">Mapbox</a>',
            id: 'mapbox.satelity'
        }).addTo(mymap);


        var myStyle = {
        "color": "#ff7800",
        "weight": 5,
        "opacity": 0.65
        };


        //L.marker([51.51, -0.09]).addTo(mymap)

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

        var myLayer = L.geoJson().addTo(mymap);
        myLayer.addData(geojsonFeature);

        <!-- var geojsonLayer = new L.GeoJSON.AJAX("geojson_data.json", {style:myStyle}); -->

        <!-- geojsonLayer.addTo(mymap); -->

        var popup = L.popup();

        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(mymap);
        }

        mymap.on('click', onMapClick);

    </script>

感谢您的帮助。

最佳答案

您必须反转几何中的坐标。

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

这是您的sample有修正

这是指定的here

关于javascript - Leaflet没有用geojsonFeatures标记点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38248689/