时间戳

首页 > 解决方案 > 为什么 Leaflet Ajax 不处理和显示 GeoJSON 数据？

json - 为什么 Leaflet Ajax 不处理和显示 GeoJSON 数据？

问题描述

几周以来，我一直在尝试让 Leaflet Ajax 接受来自新西兰土地信息 (LINZ) API 的数据请求，但没有成功。

我有一个有效的密钥（未包含在代码段中）并尝试了几个测试来加载此数据。来自 LINZ API 的其他数据集也不值得。

我在这里做错了什么？

<html>
<head>
    <!-- Style -->
    <link rel="stylesheet" href="css/style.css">

    <!-- Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

    <!-- Leaflet Ajax -->
    <script type='text/javascript' src="./js/leaflet.ajax.js"></script>

    <div id="map"></div>
</head>
<body>
    <script>
        map = L.map('map').setView([-41.29132, 174.77931],16)
        var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
            maxZoom: 17,
            attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
        });
        OpenTopoMap.addTo(map)

        property_tiles_link = "https://data.linz.govt.nz/services/query/v1/vector.json?key=KEY_GOES_HERE&layer=50804&x=172.61706383056807&y=-43.57379489129212&max_results=3&radius=10000&geometry=true&with_field_names=true"
        geojson = new L.GeoJSON.AJAX(property_tiles_link).addTo(map)
        console.log(geojson)
        overlays = {
            "geojson": geojson
        }
        basemaps = {
            "OpenTopoMap": OpenTopoMap
        }
        L.control.layers(basemaps, overlays).addTo(map)
    </script>
</body>

代码片段导致此输出： 截屏

查看记录的 GeoJSON 对象似乎没有显示任何成功解析的数据。Firefox 中的错误消息大致翻译为“尚未声明 HTML 字符的配置。该文档将在浏览器的某些配置中显示‘垃圾’文本。”

任何想法都会非常有帮助！

响应示例：

{
  "vectorQuery": {
    "layers": {
      "50804": {
        "crs": {
          "type": "name",
          "properties": {
            "name": "EPSG:4326"
          }
        },
        "field_names": ["id", "title_no", "status", "type", "land_district", "issue_date", "guarantee_status", "estate_description", "number_owners", "spatial_extents_shared"],
        "type": "FeatureCollection",
        "features": [{
          "geometry": {
            "type": "MultiPolygon",
            "coordinates": [
              [
                [
                  [175.4776337167, -41.2221699],
                  [175.4782420833, -41.2225527833],
                  [175.4801549333, -41.2237566167],
                  [175.476269, -41.2259343],
                  [175.47357595, -41.22444375],
                  [175.4776337167, -41.2221699]
                ]
              ]
            ]
          },
          "distance": 0,
          "type": "Feature",
          "properties": {
            "id": 1468560,
            "title_no": "WN53B/277",
            "status": "LIVE",
            "type": "Freehold",
            "land_district": "Wellington",
            "issue_date": "1998-04-16 00:00:00",
            "guarantee_status": "Guarantee",
            "estate_description": "Fee Simple, 1/1, Lot 1 Deposited Plan 85426, 110,945 m2",
            "number_owners": 1,
            "spatial_extents_shared": false
          },
          "id": 1191838
        }, {
          "geometry": {
            "type": "MultiPolygon",
            "coordinates": [
              [
                [
                  [175.48005638330002, -41.2282570333],
                  [175.48105425000003, -41.2286012667],
                  [175.4789359, -41.2297867333],
                  [175.47874645, -41.2298923],
                  [175.4767530167, -41.2310074667],
                  [175.47604405, -41.2314040667],
                  [175.47550265, -41.23170695000001],
                  [175.4749415833, -41.2320208833],
                  [175.4745023167, -41.2322666333],
                  [175.474015, -41.2317699833],
                  [175.4735909, -41.23133785000001],
                  [175.4735833, -41.2313303667],
                  [175.4732046667, -41.23094425],
                  [175.4728425667, -41.2305752833],
                  [175.4725057833, -41.2302328833],
                  [175.4722412333, -41.2299625],
                  [175.4719444667, -41.2296600833],
                  [175.4715930333, -41.22930195],
                  [175.47127355, -41.2289763667],
                  [175.4712437333, -41.2289459833],
                  [175.4708617, -41.22855675],
                  [175.4704157833, -41.2281024167],
                  [175.4699766167, -41.227654983300006],
                  [175.4692410167, -41.2269055],
                  [175.4692395833, -41.2269040667],
                  [175.46921793330003, -41.2268834667],
                  [175.4718439333, -41.2254143333],
                  [175.4733724167, -41.2245578167],
                  [175.48005638330002, -41.2282570333]
                ]
              ]
            ]
          },
          "distance": 134,
          "type": "Feature",
          "properties": {
            "id": 2348803,
            "title_no": "WN103/58",
            "status": "LIVE",
            "type": "Freehold",
            "land_district": "Wellington",
            "issue_date": "1899-10-23 00:00:00",
            "guarantee_status": "Guarantee",
            "estate_description": "Fee Simple, 1/1, Lot 75 Deposited Plan 579, 409,390 m2",
            "number_owners": 1,
            "spatial_extents_shared": true
          },
          "id": 5113879
        }, {
          "geometry": {
            "type": "MultiPolygon",
            "coordinates": [
              [
                [
                  [175.48005638330002, -41.2282570333],
                  [175.48105425000003, -41.2286012667],
                  [175.4789359, -41.2297867333],
                  [175.47874645, -41.2298923],
                  [175.4767530167, -41.2310074667],
                  [175.47604405, -41.2314040667],
                  [175.47550265, -41.23170695000001],
                  [175.4749415833, -41.2320208833],
                  [175.4745023167, -41.2322666333],
                  [175.474015, -41.2317699833],
                  [175.4735909, -41.23133785000001],
                  [175.4735833, -41.2313303667],
                  [175.4732046667, -41.23094425],
                  [175.4728425667, -41.2305752833],
                  [175.4725057833, -41.2302328833],
                  [175.4722412333, -41.2299625],
                  [175.4719444667, -41.2296600833],
                  [175.4715930333, -41.22930195],
                  [175.47127355, -41.2289763667],
                  [175.4712437333, -41.2289459833],
                  [175.4708617, -41.22855675],
                  [175.4704157833, -41.2281024167],
                  [175.4699766167, -41.227654983300006],
                  [175.4692410167, -41.2269055],
                  [175.4692395833, -41.2269040667],
                  [175.46921793330003, -41.2268834667],
                  [175.4718439333, -41.2254143333],
                  [175.4733724167, -41.2245578167],
                  [175.48005638330002, -41.2282570333]
                ]
              ]
            ]
          },
          "distance": 134,
          "type": "Feature",
          "properties": {
            "id": 4177014,
            "title_no": "94991",
            "status": "LIVE",
            "type": "Leasehold",
            "land_district": "Wellington",
            "issue_date": "2003-06-10 09:00:00",
            "guarantee_status": "Guarantee",
            "estate_description": "Leasehold, 1/1, Lot 75 Deposited Plan 579, 409,390 m2",
            "number_owners": 1,
            "spatial_extents_shared": true
          },
          "id": 5116291
        }]
      }
    }
  }
}

标签： jsonajaxleafletgisgeojson

解决方案

Leaflet-ajax 插件在加载的数据中直接期望符合 GeoJSON 的对象，而在您显示的示例响应中，响应的结构是：

{
  "vectorQuery": {
    "layers": {
      [layerId]: {
        // GeoJSON FeatureCollection
      }
    }
  }
}

因此，您必须先将此数据转换为 GeoJSON 对象。在这种情况下，它看起来很简单，因为您只需要提取 FeatureCollection。您可以使用 Leaflet-ajaxmiddleware选项在数据接收和处理转换为 Leaflet 层之前执行此转换：

new L.GeoJSON.AJAX("url", {
  middleware(rawData) {
    // Extract the GeoJSON FeatureCollection
    const layerId = 50804;
    return rawData.vectorQuery.layers[layerId];
  }
});

推荐阅读