如何在我的传单地图中添加 geojson？在地图中看不到 json 文件

Question

我试图将 geojson 文件加载到我的地图中。我的 geojson 文件位于另一个名为 "data" 的文件夹中，geojson 的名称是 "street.json"。我想将此数据加载到我的传单地图中。怎么可能？我尝试了以下代码：

L.geoJSON('data/street.json').addTo(map);

Answer 1

如果你使用 es6 你可以使用

import street from "./data/street.json"; 街道是你的 geojson 文件

然后使用L.geoJSON(street).addTo(map)

这里有一个 es6 example 和地理 json 来观看直播。

编辑

不使用 es6 你需要做的是：

创建文件夹数据和文件 street.json 后，您需要将 json 存储在 street.json 中，并使用变量

var street = {
    "type": "FeatureCollection",
    "features": [
       {
          "type": "Feature",
          "geometry": {
          "type": "LineString",
          "coordinates": [
              [-105.00341892242432, 39.75383843460583],
              [-105.0008225440979, 39.751891803969535]
          ]
       },
       ...
}

然后在 index.html 上导入为

<script src="./data/street.json"></script>

里面 <body>。确保在项目的根目录中创建文件夹。

因此你的 body:

中会有这样的东西

<body>
    <div id="map"></div>
    <script src="./data/street.json"></script>

    <script src="script.js"></script>

</body>

然后用你在里面定义的变量 street 引用它 street.json:

L.geoJSON(street).addTo(map)

plain js demo

如何在我的传单地图中添加 geojson？在地图中看不到 json 文件

How to add geojson in my leaflet map? the json file can't be seen in map

javascript

json

geojson

leaflet