从本地 geojson 文件地图框/传单创建 var

create var from local geojson file mapbox/leaflet

本文关键字：单创建 创建 var geojson 文件 地图      更新时间：2023-09-26

我想在 html 文件中创建一个 var myGeojson，该文件使用单独本地存储的 .geojson 或.js文件中的数据。我可以通过在 .geojson 文件中创建一个 var 来做到这一点，该文件可以在 html 文件中使用。但是我需要使用多个未更改的大型 geojson 文件，有没有办法在 html 中创建变量但将数据存储在 geojson 中？

索引.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>

data/example.geojson

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

使用L.mapbox.featureLayer中已经包含的 XHR 功能怎么样？

索引.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，如果功能层本身具有您需要的完整XHR功能。但还好:)

相关文章：