使用 geojson-vt 在 OpenLayers 中加载矢量切片时出现问题

Question

我在 Ionic Framework 中使用 OpenLayers。现在我正在尝试使用 geojson-vt with the example provided by OL example page。我可以看到 GeoJSON 文件已加载到“网络”控制台选项卡中，但在缩放 0 或 1 后它没有显示在地图中，并且在这些缩放中，它显示错位。

我想做什么：

var tilePixels = new Projection({
      code: "EPSG:3857"
//  code: 'TILE_PIXELS',
//  units: 'tile-pixels'
});

var url = 'assets/geojson/agriculture.geojson';
fetch(url).then(function(response) {
    return response.json();
}).then(function(json) {
    var tileIndex = geojsonvt(json, {
          maxZoom: 14,
            tolerance: 3,
            extent: 4096,
            buffer: 64,
            debug: 1,
            lineMetrics: false,
            promoteId: null,
            generateId: false,  
            indexMaxZoom: 5,
            indexMaxPoints: 100000
    });
    var vectorSource = new VectorTileSource({
        format: new GeoJSON(),
        tileLoadFunction: function(tile) {
            var format = tile.getFormat();
            var tileCoord = tile.getTileCoord();
            var data = tileIndex.getTile(tileCoord[0], tileCoord[1], -tileCoord[2] - 1);

            var features = format.readFeatures(
                JSON.stringify({
                    type: 'FeatureCollection',
                    features: data ? data.features : []
                }, replacer)
            );
            tile.setLoader(function() {
                tile.setFeatures(features);
                tile.setProjection(tilePixels);
            });
        },
        url: 'data:' // arbitrary url, we don't use it in the tileLoadFunction 
    });
    var vectorLayer = new VectorTileLayer({
        source: vectorSource
    });             
    that.map.addLayer(vectorLayer);
});

我试图将 "format: new GeoJSON()" 内的 dataProjection 属性更改为 EPSG:31982（我的数据投影）和 EPSG:3857，但看不到任何可见的变化。我运行 a "console.log(features)" 在 tileLoadFunction 内部的 "format" 下方查看生成的内容，这是输出：

0: Feature
    dispatching_: {}
    disposed_: false
    geometryChangeKey_: {bindTo: Feature, callOnce: false, listener: ƒ, target: Polygon, type:  "change", …}
    geometryName_: "geometry"
    id_: undefined
    listeners_: {change:geometry: Array(1)}
    ol_lm: {change:geometry: Array(1)}
    ol_uid: "38"
    pendingRemovals_: {}
    revision_: 2
    styleFunction_: undefined
    style_: null
    values_:
        AREA_HA: "0.53804709057583"
        CLASS: "AGRICULTURE"
        SHAPE_Area: "5380.4709057583"
        SHAPE_Length: "352.045733732799"
        geometry: Polygon
            dispatching_: {}
            disposed_: false
            ends_: [74]
            extentRevision_: -1
            extent_: (4) [Infinity, Infinity, -Infinity, -Infinity]
            flatCoordinates: (74) [5992922, 1487, 5992964, 1441, 5992982, 1378, 5992980, 1259, 5992875, 694, 5992807, 268, 5992751, 0, 5992574, 0,  5992503,    240, 5992386, 1020, 5992361, 1297, 5992373, 1462, 5992390, 1588, 5992337, 1652, 5992252, 1727, 5992156, 1781, 5992081, 1812,    5992023, 1804, 5991973, 1767, 5991896, 1604, 5991775, 1214, 5991772, 1081, 5991788, 901, 5991836, 585,  5991849, 460, 5991976, 210, 5992048, 757, 5992146, 963, 5992249, 1064, 5992375, 1105, 5992577,  1129, 5992689, 1175, 5992769, 1268, 5992848, 1392, 5992852, 1520, 5992877, 1527, 5992922, 1487]
            flatInteriorPointRevision_: -1
            flatInteriorPoint_: null
            layout: "XY"
            listeners_: {change: Array(1)}
            maxDeltaRevision_: -1
            maxDelta_: -1
            ol_lm: {change: Array(1)}
            ol_uid: "37"
            orientedFlatCoordinates_: null
            orientedRevision_: -1
            pendingRemovals_: {}
            revision_: 2
            simplifiedGeometryCache: {1531607591.9622366: Polygon}
            simplifiedGeometryMaxMinSquaredTolerance: 0
            simplifiedGeometryRevision: 2
            stride: 2
            values_: {}
            __proto__: SimpleGeometry
        __proto__: Object
    __proto__: BaseObject

然后我运行一个"console.log(format)"，这是输出：

GeoJSON {dataProjection: Projection, defaultFeatureProjection: null, geometryName_: undefined, extractGeometryName_: undefined}
    dataProjection: Projection
        axisOrientation_: "enu"
        canWrapX_: false
        code_: "EPSG:31982"
        defaultTileGrid_: null
        extent_: null
        getPointResolutionFunc_: undefined
        global_: false
        metersPerUnit_: undefined
        units_: "m"
        worldExtent_: null
    __proto__: Object
    defaultFeatureProjection: null
    extractGeometryName_: undefined
    geometryName_: undefined
    __proto__: JSONFeature

我看到很多未定义和空值，也许我必须以某种方式完成这些选项？我还尝试将 tilePixels 变量更改为 'code: "EPSG: 31982"' 和 'code: "EPSG: 3857"'，在这两种配置下，我都可以看到一个缩放为 0 和 1 的加载点错位（显示所有地图），但是当我靠近时它消失了。

geojson-vt 的调试输出：

preprocess data: 16.31201171875ms
index: maxZoom: 5, maxPoints: 100000
features: 25, points: 5731
generate tiles: 5.870849609375ms
tiles generated: 1 {"z0":1}

OpenLayers v5.3 |离子 v4 | geojson-vt v3.2.1

Answer 1

示例中 geojsonvt 使用 Lon/Lat 坐标。所以我认为您可以简单地将 EPSG:31982 数据转换为 EPSG:4326，然后再将其传递给 geojsonvt（EPSG:31982 需要在 proj4 中定义和注册）。

}).then(function(json31982) {
    var format = new GeoJSON();
    var features = format.readFeatures(json31982, {dataProjection: 'EPSG:31982', featureProjection: 'EPSG:4326'});
    var json = format.writeFeaturesObject(features);
    var tileIndex = geojsonvt(json, {

一些 geojson 的属性具有空值。这会导致在使用示例中的代码时出错，需要进行此更改

  var replacer = function(key, value) {
    if (value && value.geometry) {

使用 geojson-vt 在 OpenLayers 中加载矢量切片时出现问题

Problem loading Vector Tiles in OpenLayers using geojson-vt

javascript

openlayers

geojson

typescript

ionic-framework