时间戳

首页 > 解决方案 > 如何加载本地geojson文件并将其显示在asp.net mvc的传单地图上？

javascript - 如何加载本地geojson文件并将其显示在asp.net mvc的传单地图上？

问题描述

我有一个保存在文件夹中的本地 geojson 文件。我想在地图上加载并显示带有标记的坐标。我已经成功地在我的 html 上加载了地图，但我无法将数据加载到地图上。

       var mymap = L.map('mapid').setView([1.3521, 103.8198], 13);

        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1,
            accessToken: 'pk.eyJ1IjoiaGlnaHBpZXMiLCJhIjoiY2p0Nml4NmR1MGhxajRhczA1NGFqZXV0NSJ9.c2tn1B3vCBSVni_W9dXQkQ'
        }).addTo(mymap);
        var hospitals = "~/Content/hospitals.geojson";
        var geojsonMarkerOptions = {
            radius: 8,
            fillColor: "#ff7800",
            color: "#000",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
        };
        function onEachFeature(feature, layer) {
            if (feature.properties && feature.properties.Description) {
                layer.bindPopup(feature.properties.Description);
            }
        }
        L.geoJSON(hospitals, {
            onEachFeature: onEachFeature
        }).addTo(map);

这是我收到Invalid GeoJSON object的错误

标签： javascriptasp.netmodel-view-controllerleaflet

解决方案

你不能直接加载geojson文件L.geoJSON，你可以用这个Leaflet-Ajax

L.geoJson.ajax(hospitals, {
   onEachFeature: onEachFeature
}).addTo(map);

推荐阅读