我想在 html 文件中创建一个 var myGeojson ，该文件使用单独本地存储的 .geojson 或 .js 文件中的数据。我可以通过在 .geojson 文件中创建一个 var 来做到这一点，该文件可以在 html 文件中使用。但是我需要使用多个大型未更改的 geojson 文件，有没有办法在 html 中创建 var 但将数据存储在 geojson 中？
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"
}
}
最佳答案
使用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>
数据.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
但是如果 featureLayer 本身具有您需要的完整 XHR 功能，我不明白您为什么要引入另一个依赖项(例如 jQuery)。不过还好:)
关于javascript - 从本地geojson文件mapbox/leaflet创建var，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28930217/