提高geoJSON在OpenLayers3中的性能

Question

我正在使用geom在https://gis.stackexchange.com/questions/216792/is-there-an-easy-way-to-use-postgis-geojson-in-openlayers-3上回答的代码将PostGIS层加载到我的OL3映射应用程序中。

问题是:使用大(原始) geojson数据集呈现性能不是最优的，所以我想使用如下内容：

new ol.layer.Image({
            source: new ol.source.ImageVector({
              source: new ol.source.Vector({
                url: 'https://openlayers.org/en/v4.2.0/examples/data/geojson/countries.geojson',
                format: new ol.format.GeoJSON()
              }),
              style: new ol.style.Style({
                fill: new ol.style.Fill({
                  color: 'rgba(255, 255, 255, 0.6)'
                }),
                stroke: new ol.style.Stroke({
                  color: '#319FD3',
                  width: 1
                })
              })
            })
          })

我的当前构造函数如下所示：

ol3Vector = function(options) {

var options = {
    title: options.title,
    visible: false,
    geotable: options.geotable,  // table name in PostGis-database
    fields: options.fields,      // field-names
    where: options.where,        // where-string passed to PostGis
    source: new ol.source.Vector({
        projection: "EPSG:4326",
        attributions: [new ol.Attribution({
            html: options.attribution
        })],
        strategy: ol.loadingstrategy.bbox,   //load only data off the visible map
        loader: function(extent, resolution, projection) {
            var extent = ol.proj.transformExtent(extent, projection.getCode(), ol.proj.get('EPSG:4326').getCode());
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "../map/php/get_geojson.php?" +     // define path to the get_geojson.php script
                    "geotable=" + options.geotable +
                    "&fields=" + options.fields +
                    "&where=" + options.where +
                    "&bbox=" + extent.join(","),
                context: this
            }).done(function(data) {
                var format = new ol.format.GeoJSON();
                this.addFeatures(format.readFeatures(data, {
                    dataProjection: "EPSG:4326",
                    featureProjection: "EPSG:3857"
                }));

            });

        }
    }),
    minResolution: options.minResolution,
    maxResolution: options.maxResolution,
    content: options.content,
    symbology: options.symbology,
    showLabels: options.showLabels,
    label: options.label,

}

ol.layer.Vector.call(this, options);

};

ol.inherits(ol3Vector, ol.layer.Vector);

此外：

var landkreise = new ol3Vector({
    title: "Landkreise in Niedersachsen",   // name of the layer to show up in the layerswitcher
    geotable: "tbl_landkreise_geb_f",
    fields: "KRS,sumarea",
    where: "KRS IS NOT NULL",    // You can use all the PostgreSQL or PostGis features here
    minResolution: 0.01,
    maxResolution: 50000,
    content: " ",
    showLabels: false,    // show labels on map
    label: "KRS"    // field used for labeling
});
baselayersArray=[OSM, landkreise];
baselayers.setLayers(new ol.Collection(baselayersArray));
landkreise.setVisible(true);

如何将ol.layer.Image() (第一个代码示例)包装器包含到构造函数中？

Answer 1

看起来您可以执行以下操作：

• 从ol.layer.Image而不是ol.layer.Vector派生您的ol.layer.Vector
• 将您的ol.source.Vector (在options对象中)包装为一个ol.source.ImageVector (如您所引用的示例所示)