Question

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

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

Answer 1

如果使用es6，则可以使用

import street from "./data/street.json";，其中street是您的geojson文件

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

这是一个带有geojson的es6 example，可以实时观看。

修改

不使用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>
    <div id="map"></div>
    <script src="./data/street.json"></script>

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

</body>

，然后使用您在street.json中定义的变量street引用它：

L.geoJSON(street).addTo(map)

plain js demo

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

1 个答案: