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

Question

我将 OpenLayers 与 Ionic Framework 结合使用。现在我正在尝试使用 geojson-vt使用 OL example page 提供的示例.我可以看到 GeoJSON 文件已加载到“网络”控制台选项卡中，但在缩放 0 或 1 后它没有显示在 map 中，并且在这些缩放中，它显示错位。

我想做什么:

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);
});

我试图将“格式:新 GeoJSON()”内的 dataProjection 属性更改为 EPSG:31982(我的数据投影)和 EPSG:3857，但看不到任何可见的变化。我在 tileLoadFunction 中的“格式”下方运行“console.log(features)”以查看生成的内容，这是输出:

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 变量更改为“代码:”EPSG:31982“”和“代码:”EPSG:3857“”，在这两种配置下我都可以看到一个错误放置的加载点，缩放比例为 0 和 1(显示所有 map )，但是当我靠近它时它就消失了。

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 | ionic 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) {