從本地geojson文件mapbox/leaflet創建var

我想在使用單獨的本地存儲的.geojson或.js文件中的數據的html文件中創建var myGeojson。我可以通過在.geojson文件中創建一個var來做到這一點，它可以在html文件中使用。然而，我需要使用多個大型未改變的geojson文件，有沒有辦法在html中創建var，但將數據存儲在geojson中？從本地geojson文件mapbox/leaflet創建var

的index.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script> 
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' /> 
<style> 
    body { margin:0; padding:0; } 
    #map { position:absolute; top:0; bottom:0; width:100%; } 
</style> 

     <script src='data/example.geojson'></script> 
</head> 
<body> 
<div id='map'></div> 
<script> 
L.mapbox.accessToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; 


L.mapbox.map('map', 'examples.map-xxxxxxxx') 
    .setView([37.8, -96], 4) 
     .featureLayer.setGeoJSON(myGeojson); 

</script> 
</body> 
</html>

數據/ example.geojson

var myGeojson = 
{ 
    "type": "Feature", 
    "geometry": { 
    "type": "Point", 
    "coordinates": [125.6, 10.1] 
    }, 
    "properties": { 
    "name": "Dinagat Islands" 
    } 
}

來源

2015-03-08 user3617971

怎麼樣使用已經包含在L.mapbox.featureLayer的XHR功能？

的index.html：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset=utf-8 /> 
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 
     <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script> 
     <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' /> 
     <style> 
      body { margin:0; padding:0; } 
      #map { position:absolute; top:0; bottom:0; width:100%; } 
     </style> 
    </head> 
    <body> 
     <div id='map'></div> 
     <script> 
      L.mapbox.accessToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; 
      var map = L.mapbox.map('map', 'examples.map-xxxxxxxx').setView([37.8, -96], 4); 
      var layer1 = L.mapbox.featureLayer('data.geo.json').addTo(map); 
      // You could add as much layers as you want 
      // var layer2 = L.mapbox.featureLayer('moredata.geo.json').addTo(map); 
      // Or you could load new data into an existing layer: 
      //layer1.loadURL('newdata.geo.json'); 
     </script> 
    </body> 
</html>

data.geo.json：

{ 
    "type": "Feature", 
    "geometry": { 
     "type": "Point", 
     "coordinates": [125.6, 10.1] 
    }, 
    "properties": { 
     "name": "Dinagat Islands" 
    } 
}

這裏有Plunker工作的例子：在評論中說：http://plnkr.co/edit/jAkQ7v9XVIDCDnQQzpWK?p=preview

但作爲，如果你」如果你真的需要額外的功能（在我的眼中不需要），那麼你可以使用XHR選擇庫並獲取文件並將其分配給一個變量（在這裏使用jQuery的$ .getJSON）：

// Empty featureLayer 
var featureLayer = L.mapbox.featureLayer().addTo(map); 

// Variable for your data 
var geojsonData; 

// Fetch the file 
$.getJSON('data.geo.json', function (results) { 
    // Assign the results to the geojsonData variable 
    geojsonData = results; 
    // Assign the data to the layer 
    featureLayer.setGeoJSON(geojsonData); 
});

這裏的工作例如在Plunker：http://plnkr.co/edit/ayYgF5fi1MKgTRBg3YAt?p=preview

但我不明白你爲什麼要拉在像jQuery另一個依賴，如果featureLayer本身有你需要的完整XHR功能。但確定:)

來源

2015-03-08 20:24:46 iH8

謝謝，但嘗試.loadURL（）似乎沒有工作。解決方法是將var myGeojson =添加到geojson文件的開頭，然後使用L.geoJson（myGeojson）;它的工作原理，但仍然需要我編輯它我想要避免的原始geojson文件。理想情況下，我想從geojson文件中提取文本，並將其分配爲html中的變量。 – user3617971 2015-03-09 21:22:02

'loadURL' _does_ work，以下是使用您自己的GeoJSON功能的示例：http://plnkr.co/edit/jAkQ7v9XVIDCDnQQzpWK?p=preview – iH8 2015-03-09 21:33:37

我已將上面的示例添加到了我的答案中，並且包含了實際首次加載的另一個解決方案該文件，然後將其分配給一個變量。更麻煩，並使用其他依賴項，但如果這就是你想要的，那麼你得到它:) – iH8 2015-03-09 21:47:25

從本地geojson文件mapbox/leaflet創建var

回答

相關問題