【问题标题】:Creating an OpenLayers 5 MultiPolygon feature from a turf.js MultiPolygon从 turf.js MultiPolygon 创建 OpenLayers 5 MultiPolygon 功能
【发布时间】:2019-10-13 19:49:24
【问题描述】:

在 OpenLayers 5.3.0 中,我使用 turf.js 中的“差异”工具创建了一个 MultiPolygon。当我检查 JSON 时,turf.js MultiPolygon 看起来不错,但是当我尝试使用它在 OpenLayers 中创建一个功能时,我得到“Uncaught TypeError: t.addEventListener is not a function”。

我尝试了 JSON.stringify、JSON.parse、GeoJSON.readFeatures、.getCoordinates() 的多种组合...我尝试通过 source.addFeature(multiPolygonGeometry) 直接将 turf.js MultiPolygon 添加为功能,但后来我得到了“未捕获的 TypeError:e.getId 不是函数”。我也试过source.addFeatures(multiPolygonGeometry)(注意复数'addFeatures'),这并没有给我任何错误,但似乎也没有向源添加任何内容。

我的代码中的相关行如下:

multiPolygonGeometry = turf.difference(largeArea,maskAreas);
multiPolygonFeature = new ol.Feature({
  geometry: multiPolygonGeometry,
  id: 'multiPolygonFeature1'
});

multiPolygonGeometry 在控制台中看起来像这样:

{
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "MultiPolygon",
    "coordinates": [
      [
        [
          [
            140.9716711384525,
            -36.97645228850101
          ],
          [
            140.97418321565786,
            -36.97679331852701
          ],
          [
            140.9741163253784,
            -36.97713531664132
          ],
          [
            140.9740304946899,
            -36.97903805606076
          ],
          [
            140.97437381744382,
            -36.98025509866784
          ],
          [
            140.97594864874696,
            -36.98127512642501
          ],
          [
            140.9714880598484,
            -36.9804459718428
          ],
          [
            140.9714500775476,
            -36.97642733756345
          ],
          [
            140.9716711384525,
            -36.97645228850101
          ]
        ]
      ],
      [
        [
          [
            140.97455248763328,
            -36.97684309230892
          ],
          [
            140.97751071844857,
            -36.97723786980259
          ],
          [
            140.97749308140382,
            -36.977304276099005
          ],
          [
            140.97715289421623,
            -36.97770848336402
          ],
          [
            140.97661807025068,
            -36.97969050789806
          ],
          [
            140.97628355026242,
            -36.97958658471583
          ],
          [
            140.97634792327878,
            -36.97900377288852
          ],
          [
            140.9764981269836,
            -36.97866094031662
          ],
          [
            140.97510337829587,
            -36.97727245260485
          ],
          [
            140.97455248763328,
            -36.97684309230892
          ]
        ]
      ],
      [
        [
          [
            140.97628420893903,
            -36.98092777726751
          ],
          [
            140.97617893060388,
            -36.98131793226549
          ],
          [
            140.97596635572492,
            -36.98127841787872
          ],
          [
            140.97628420893903,
            -36.98092777726751
          ]
        ]
      ]
    ]
  },
  "ol_lm": {
    "change": []
  }
}

然后我收到这条消息:

events.js:174 Uncaught TypeError: t.addEventListener is not a function
    at v (events.js:174)
    at e.handleGeometryChanged_ (Feature.js:210)
    at e (events.js:41)
    at e.dispatchEvent (Target.js:101)
    at e.notify (Object.js:151)
    at e.set (Object.js:170)
    at e.setProperties (Object.js:186)
    at new e (Feature.js:108)
    at getPolygon (maskedPolygon.js:319) <-- this is the second line in my code sample above
    at <anonymous>:1:1

我在这里做错了什么?我确定这很简单,但我似乎无法破解它。

【问题讨论】:

    标签: openlayers-5 turfjs


    【解决方案1】:

    Turf 与 GeoJSON 功能一起使用,因此您的“multiPolygonGeometry”是一个 GeoJSON 功能,可由 OpenLayers 解析,然后给定一个 Id:

    multiPolygonFeature = new ol.format.GeoJSON().readFeature(multiPolygonGeometry);
    multiPolygonFeature.setId('multiPolygonFeature1');
    

    【讨论】:

    • 太棒了。我确定我已经尝试过了,但显然没有 - 就像一个魅力。我必须添加multiPolygonFeature.getGeometry().transform('EPSG:4326','EPSG:3857'); 才能将该功能放置在应有的位置(而不是几内亚湾),但您为我解决了更难的部分。非常感谢。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-06-21
    • 1970-01-01
    • 2019-12-31
    • 2021-02-11
    • 2021-11-24
    • 1970-01-01
    相关资源
    最近更新 更多