Question

我是javascript和传单的新手。我最近一直在尝试使用传单创建交互式地图，使用此处的地图作为模板： http://palewi.re/posts/2012/03/26/leaflet-recipe-hover-events-features-and-polygons/

虽然我成功地能够导入平铺，但是我在将geojson图层导入地图时遇到了问题，并且无法让它们渲染。我在下面发布了两个脚本：

HTML：

<!DOCTYPE html>`enter code here`
<html>
<head>
    <title>Leaflet GeoJSON example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- All the stuff you need to install from Leaflet -->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" /><![endif]-->
    <script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
     <!-- My external GeoJSON file with the City Council boundaries in it -->
    <script src="geokrcs.geojson" type:"text/javascript"></script>
    <!--These are google maps extensions:-->
     <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
    <script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
    <!-- jQuery so we can easily make our popup -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body style="margin:0; padding:0;">
    <!-- The <div> where we're put the map -->
    <div id="map" style="width: 500px; height: 500px;"></div>
    <script type="text/javascript">
        // Initialize the map object
        var map = new L.Map('map', {
            // Some basic options to keep the map still and prevent 
            // the user from zooming and such.

        });
        // Prep the background tile layer graciously provided by stamen.com
        //Enter Google maps layer background tiles:
        var googleLayer = new L.Google('TERRAIN');
        //Load Google Maps Layer:
        map.addLayer(googleLayer);
        // Set the center on our city of angels
        var center = new L.LatLng(1.260912,35.07835);
        map.setView(center, 9);
        //Now, we insert our qgis layer:
        var featureLayer = new L.GeoJSON();
        // Set a default style for out the polygons will appear
        var defaultStyle = {
            color: "#2262CC",
            weight: 2,
            opacity: 0.6,
            fillOpacity: 0.1,
            fillColor: "#2262CC"
        };
        var highlightStyle = {
            color: '#2262CC', 
            weight: 3,
            opacity: 0.6,
            fillOpacity: 0.65,
            fillColor: '#2262CC'
        };

        var featureLayer = L.geoJson(aidpoints, {

        });

        map.addLayer(featureLayer);
    </script>
</body>
</html>
>

以GeoJSON：

var aidpoints = {
"type": "FeatureCollection",

"features": [
{ "type": "Feature", "properties": { "OJD": 1, "KRCS-MNCH": "Kopro", "ACTED": "Kokwotendwo", "Proposed": "Kopro ", "Partner": "ACTED\/ KRCS", "N": 1.37851, "E": 35.41787, "Elevation": 1410, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.41787, 1.37851 ] } },
{ "type": "Feature", "properties": { "OJD": 2, "KRCS-MNCH": "Nyangaita", "ACTED": "Nyangaita", "Proposed": "Nyangaita", "Partner": "ACTED\/ KRCS", "N": 1.48371, "E": 35.67432, "Elevation": 957, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.67432, 1.48371 ] } },
{ "type": "Feature", "properties": { "OJD": 3, "KRCS-MNCH": "Akiriamet", "ACTED": "Akiriamet", "Proposed": "Akiriamet", "Partner": "KRCS", "N": 1.60502, "E": 35.4913, "Elevation": 8178, "ACTED Community groups": "None ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.4913, 1.60502 ] } },
{ "type": "Feature", "properties": { "OJD": 4, "KRCS-MNCH": "Mbara", "ACTED": "Mbara", "Proposed": "Mbara", "Partner": "ACTED\/ KRCS", "N": 1.59418, "E": 35.3976, "Elevation": 2054, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.3976, 1.59418 ] } },
{ "type": "Feature", "properties": { "OJD": 5, "KRCS-MNCH": "Chepkpndol", "ACTED": "Chepkondol", "Proposed": "Chepkondol", "Partner": "ACTED\/ KRCS", "N": 1.67887, "E": 35.42537, "Elevation": 1814, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.42537, 1.67887 ] } },
{ "type": "Feature", "properties": { "OJD": 6, "KRCS-MNCH": "Sostin", "ACTED": "Sostin", "Proposed": "Sostin", "Partner": "ACTED\/ KRCS", "N": 1.59189, "E": 35.40917, "Elevation": 1967, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.40917, 1.59189 ] } },
{ "type": "Feature", "properties": { "OJD": 7, "KRCS-MNCH": "Orwa", "ACTED": "Orwa", "Proposed": "Orwa", "Partner": "ACTED\/ KRCS", "N": 1.65612, "E": 35.48684, "Elevation": 883, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.48684, 1.65612 ] } },
{ "type": "Feature", "properties": { "OJD": 8, "KRCS-MNCH": "Porkoyu", "ACTED": "Parek", "Proposed": "Porkoyu ( KRCS)", "Partner": "KRCS", "N": 1.80412, "E": 35.420852, "Elevation": null, "ACTED Community groups": "None ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.420852, 1.80412 ] } },
{ "type": "Feature", "properties": { "OJD": 9, "KRCS-MNCH": "Mosop", "ACTED": "Kokwoptorir", "Proposed": "Kokwoptorir \/Mosop", "Partner": "ACTED\/ KRCS", "N": 1.38609, "E": 35.52468, "Elevation": 1588, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.52468, 1.38609 ] } },
{ "type": "Feature", "properties": { "OJD": 10, "KRCS-MNCH": "Cheptulel", "ACTED": "Kokwositot &Lebei", "Proposed": "Kokwositot \/Cheptulel", "Partner": "ACTED\/ KRCS", "N": 1.33488, "E": 35.62769, "Elevation": 999, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.62769, 1.33488 ] } },
{ "type": "Feature", "properties": { "OJD": 11, "KRCS-MNCH": "Ptokou", "ACTED": "Ptokou", "Proposed": "Ptokou", "Partner": "ACTED\/ KRCS", "N": 1.4544, "E": 35.47972, "Elevation": 997, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.47972, 1.4544 ] } },
{ "type": "Feature", "properties": { "OJD": 12, "KRCS-MNCH": "Sangat", "ACTED": "Sangat", "Proposed": "Sangat", "Partner": "ACTED\/ KRCS", "N": 1.44543, "E": 35.4677, "Elevation": 1011, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.4677, 1.44543 ] } },
{ "type": "Feature", "properties": { "OJD": 13, "KRCS-MNCH": "Takar", "ACTED": "Takar", "Proposed": "Takar", "Partner": "ACTED\/ KRCS", "N": 1.4312, "E": 35.62, "Elevation": 1046, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.62, 1.4312 ] } }

我尝试将文件重新格式化为.js。另外，我尝试使用不同的方法加载geoson文件：http://leafletjs.com/examples/geojson.html。我也尝试在geojson文件中切换纬度和经度的位置。

但是，我似乎无法弄清楚出了什么问题。是否有人对我做错了什么有任何想法？

`

Answer 1

你的GeoJSON最后缺少两个括号。添加]}它应该工作。我建议使用http://jsonlint.com/和http://geojsonlint.com/检查geojson的有效性。

无法将GeoJSON渲染到渲染中

1 个答案: