無法在Leaflet地圖上繪制從geoJson獲得的點

Question

我必須實現一個Android應用程序，它在帶有Leaflet的WebView中顯示一個地圖，並使用來自JSON的數據來繪制一些點。

這是WebView中加載的HTML代碼：

<title>Leaflet example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>

<style>
    #map {
        width: 600px;
        height: 400px;
    }
</style>

</head>
<body>

<div id='map'></div>
<script src="file:///android_asset/provaquake.js" type="text/javascript">
</script>
<script src="file:///android_asset/map.js"></script>

</body>

這是使用Leaflet調用地圖的javascript文件，並繪制一行進行測試：

var map = L.map('map').setView([39.74739, -105], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    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.light'
}).addTo(map);

var myLines = [{
    "type": "LineString",
    "coordinates": [[-105, 40], [-110, 45], [-115, 55]]
}];

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

L.geoJSON(myLines, {
    style: myStyle
}).addTo(map);

provaquake.js是一個文件，其中包含一個名為“quake”的變量，該變量使用此geoJson初始化： https ：//earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson

我寫了這段代碼，將每次地震的位置添加到地圖中：

L.geoJSON(quake, {
    style: function (feature) {
        return feature.properties && feature.properties.style;
    },
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, {
            radius: 8,
            fillColor: "#ff7800",
            color: "#000",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
        });
    }
}).addTo(map);

但它似乎沒有用。

除了最后一條關於點的指令外，所有代碼都運行良好，我對Leaflet來說是全新的，我不知道它為什么不繪制它們

Answer 1

這是一個有效的例子。 我改變你的代碼的唯一方法是將fetch添加到quake json並將地圖縮放設置為3以進行演示。 仔細檢查您的quake變量是否正確填充了Quake FeatureCollection數據。

 var map = L.map('map').setView([39.74739, -105], 3); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { 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.light' }).addTo(map); var myLines = [{ "type": "LineString", "coordinates": [ [-105, 40], [-110, 45], [-115, 55] ] }]; var myStyle = { "color": "#ff7800", "weight": 5, "opacity": 0.65 }; L.geoJSON(myLines, { style: myStyle }).addTo(map); fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson') .then(function(res) { if (res.ok === true) { return res.json(); } else { alert('Geojson request failed.'); } }) .then(function(quake) { L.geoJSON(quake, { style: function(feature) { return feature.properties && feature.properties.style; }, pointToLayer: function(feature, latlng) { return L.circleMarker(latlng, { radius: 8, fillColor: "#ff7800", color: "#000", weight: 1, opacity: 1, fillOpacity: 0.8 }); } }).addTo(map); });

 <title>Leaflet example</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin="" /> <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script> <style> #map { width: 600px; height: 400px; } </style> </head> <body> <div id='map'></div> <script src="file:///android_asset/provaquake.js" type="text/javascript"> </script> <script src="file:///android_asset/map.js"></script> </body>

無法在Leaflet地圖上繪制從geoJson獲得的點

問題描述

1 個解決方案

解決方案1
0 已采納 2017-06-08 12:01:06

無法在Leaflet地圖上繪制從geoJson獲得的點

問題描述

1 個解決方案

解決方案1 0 已采納 2017-06-08 12:01:06

解決方案1
0 已采納 2017-06-08 12:01:06