Floris de Leeuw
Reputation: 21
OpenLayers 6 bad performance vectorlayer containing polygons and linestrings
The problem occurs when I'm displaying more than 2000 polygons and/or linestrings, the map's panning and zooming gets slow, also the loading of the osm tiles gets slow. The problem is gone when there are less features visible in the viewport(zooming in or panning away from features). I don't think it's an styling issue because it also occurs with the standard openlayers styling.
Because of the code snippet's limitations I could only add a few features of the real data to the map, unfortunately the problem isn't visible with this amount of data. But maybe someone can spot something wrong with the code or has a better way of displaying lots of polygons/linestrings on a vectorlayer.
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
<style>
.map {
height: 95vh;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var geoJsonData = {
"crs": {
"type": "name",
"properties": {
"name": "EPSG:28992"
}
},
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
685441.262918955,
7022605.59
],
[
685441.039740355,
7022586.08
],
[
685438.582036506,
7022584.54
],
[
685436.865980189,
7022584.1
],
[
685434.284371417,
7022583.44
],
[
685434.261433221,
7022585.66
],
[
685435.181676638,
7022586.01
],
[
685436.736225901,
7022587.56
],
[
685436.7100026,
7022588.07
],
[
685436.571626044,
7022589.15
],
[
685436.530014489,
7022589.94
],
[
685436.323742369,
7022590.91
],
[
685436.103124509,
7022592.1
],
[
685435.779683307,
7022593.02
],
[
685435.386742883,
7022593.68
],
[
685435.074618194,
7022594.1
],
[
685434.412768294,
7022594.54
],
[
685433.80001363,
7022594.9
],
[
685432.853304886,
7022595.19
],
[
685431.872737418,
7022595.44
],
[
685429.855558338,
7022595.36
],
[
685429.073510219,
7022595.47
],
[
685428.626841421,
7022595.77
],
[
685428.399095635,
7022596.29
],
[
685428.254838334,
7022596.83
],
[
685428.115213326,
7022597.8
],
[
685428.370541637,
7022654.54
],
[
685428.382657063,
7022655.68
],
[
685428.405020634,
7022656.21
],
[
685428.376684955,
7022656.68
],
[
685428.365367803,
7022657.18
],
[
685428.005926213,
7022657.85
],
[
685427.608527838,
7022658.09
],
[
685425.602559711,
7022658.13
],
[
685425.55793753,
7022664.88
],
[
685426.897739616,
7022664.88
],
[
685427.332560588,
7022665.02
],
[
685427.605391799,
7022665.61
],
[
685428.206939893,
7022901.65
],
[
685425.646257605,
7022901.4
],
[
685425.73507516,
7022909.73
],
[
685428.225456642,
7022909.64
],
[
685428.78013709,
7022910.08
],
[
685428.937050443,
7022910.73
],
[
685428.103531107,
7022956.32
],
[
685441.139919701,
7022956.91
],
[
685441.139394247,
7022956.39
],
[
685441.523807046,
7022936.19
],
[
685441.875336024,
7022920.72
],
[
685441.748992747,
7022902.63
],
[
685441.799700934,
7022887.07
],
[
685441.678791454,
7022874.18
],
[
685441.678177743,
7022853.82
],
[
685441.695029443,
7022831.97
],
[
685441.799738679,
7022808.98
],
[
685441.509185026,
7022780.18
],
[
685441.507866647,
7022747.26
],
[
685441.511628204,
7022713.25
],
[
685441.428954069,
7022689.88
],
[
685441.289877033,
7022669.03
],
[
685441.130931211,
7022647.89
],
[
685441.138783873,
7022629.88
],
[
685441.262918955,
7022605.59
]
]
]
}
},
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
685444.18869203,
7022248.82
],
[
685441.789495138,
7022246.66
],
[
685437.679498426,
7022246.43
],
[
685437.60881564,
7022247.46
],
[
685437.875308075,
7022247.45
],
[
685438.308503048,
7022247.44
],
[
685438.708375331,
7022247.44
],
[
685439.242607448,
7022247.53
],
[
685439.316379993,
7022248.2
],
[
685439.3274271,
7022249.23
],
[
685439.127222011,
7022250.77
],
[
685438.707830507,
7022256.76
],
[
685437.974723061,
7022263.01
],
[
685437.591056324,
7022270.78
],
[
685437.007543071,
7022277
],
[
685436.713774353,
7022285.39
],
[
685436.499661796,
7022291.88
],
[
685436.116170517,
7022299.66
],
[
685436.065799784,
7022301.97
],
[
685435.925219719,
7022308.32
],
[
685435.562847544,
7022313.4
],
[
685435.623426476,
7022319.08
],
[
685435.462060736,
7022324.26
],
[
685435.363777394,
7022329.1
],
[
685435.418924352,
7022332.71
],
[
685435.653602019,
7022339.09
],
[
685435.737165769,
7022346.92
],
[
685435.694194389,
7022364.76
],
[
685435.652735202,
7022384.31
],
[
685435.738598215,
7022404.85
],
[
685436.174618787,
7022430.1
],
[
685436.565281653,
7022462.04
],
[
685436.303682025,
7022462.51
],
[
685435.811668127,
7022463.25
],
[
685435.548821173,
7022463.6
],
[
685435.017960082,
7022463.82
],
[
685434.52042255,
7022464.05
],
[
685433.922023352,
7022464.19
],
[
685433.322555095,
7022464.23
],
[
685432.32320376,
7022464.27
],
[
685431.523437613,
7022464.28
],
[
685430.75548063,
7022464.14
],
[
685430.756104216,
7022464.2
],
[
685430.30406814,
7022465.41
],
[
685434.412778199,
7022465.36
],
[
685434.802664246,
7022465.35
],
[
685440.96330826,
7022461.77
],
[
685440.944375385,
7022448.44
],
[
685440.744843742,
7022391.78
],
[
685440.542264941,
7022350.61
],
[
685440.607276516,
7022344.83
],
[
685440.617500947,
7022339.08
],
[
685440.514106814,
7022332.66
],
[
685440.476373562,
7022321.94
],
[
685443.22555292,
7022277.4
],
[
685444.038219756,
7022256.58
],
[
685444.06842619,
7022251.61
],
[
685444.18869203,
7022248.82
]
]
]
}
},
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
683165.662570441,
7015140
],
[
683159.556028829,
7015136.33
],
[
683153.814366729,
7015132.68
],
[
683148.441811934,
7015129.3
],
[
683105.779833152,
7015101.19
],
[
683093.267616621,
7015092.59
],
[
683045.441787788,
7015058.55
],
[
683038.326329378,
7015053.26
],
[
682987.278433276,
7015015.57
],
[
682986.479404425,
7015015.58
],
[
682985.814065691,
7015015.64
],
[
682984.967863592,
7015015.91
],
[
682984.203856349,
7015016.09
],
[
682983.146609611,
7015016.88
],
[
682982.008896435,
7015017.95
],
[
682980.774761716,
7015019.34
],
[
682979.626278948,
7015020.98
],
[
682979.056964096,
7015022.27
],
[
682996.353278818,
7015035
],
[
683004.203313017,
7015040.66
],
[
683078.560699547,
7015094.55
],
[
683104.80319641,
7015112.96
],
[
683127.116142841,
7015127.47
],
[
683151.031686673,
7015142.39
],
[
683171.566943387,
7015154.99
],
[
683188.691917144,
7015164.96
],
[
683204.651059709,
7015173.28
],
[
683229.647312627,
7015186.75
],
[
683253.803814151,
7015198.7
],
[
683256.589226861,
7015193.27
],
[
683255.109922996,
7015188.86
],
[
683254.512580149,
7015188.57
],
[
683240.266187512,
7015181.18
],
[
683226.541141671,
7015173.97
],
[
683214.07242753,
7015167.34
],
[
683201.799055975,
7015160.61
],
[
683171.278563805,
7015143.25
],
[
683165.662570441,
7015140
]
]
]
}
},
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
684660.95933256,
7015711.04
],
[
684666.608045845,
7015714.3
],
[
684669.26033297,
7015707.52
],
[
684670.215927562,
7015704.36
],
[
684666.845479509,
7015704.63
],
[
684663.977347483,
7015705
],
[
684662.697910324,
7015707.45
],
[
684660.95933256,
7015711.04
]
]
]
}
},
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
682431.836984001,
7012425.64
],
[
682434.633878801,
7012426.86
],
[
682463.295256523,
7012440.03
],
[
682480.651505168,
7012449.02
],
[
682507.099398825,
7012462.01
],
[
682524.597749389,
7012470.4
],
[
682547.925858517,
7012481.36
],
[
682559.251616914,
7012487.35
],
[
682571.561922136,
7012494.24
],
[
682590.325470721,
7012503.31
],
[
682602.510595235,
7012509.19
],
[
682621.087917921,
7012517.13
],
[
682623.782350992,
7012518.42
],
[
682624.996075483,
7012517.01
],
[
682623.449307545,
7012516.3
],
[
682613.387180935,
7012511.97
],
[
682601.016930779,
7012506.05
],
[
682587.141936656,
7012498.81
],
[
682571.003352629,
7012490.27
],
[
682557.337232595,
7012483.76
],
[
682547.793982125,
7012478.9
],
[
682542.430572947,
7012476.21
],
[
682543.956786679,
7012473.31
],
[
682536.684620611,
7012469.67
],
[
682535.225261859,
7012472.6
],
[
682530.040866919,
7012470
],
[
682515.165440386,
7012463.06
],
[
682495.26944715,
7012453.1
],
[
682479.821651433,
7012445.36
],
[
682459.928235473,
7012435.65
],
[
682446.418342533,
7012428.61
],
[
682430.377348588,
7012421.76
],
[
682428.527227827,
7012420.03
],
[
682428.740911885,
7012418.64
],
[
682426.296639922,
7012417.4
],
[
682426.839445803,
7012420.18
],
[
682429.029804245,
7012422.78
],
[
682431.836984001,
7012425.64
]
]
]
}
}
]
}
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures(JSON.stringify(geoJsonData)),
})
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
view: new ol.View({
center: [vectorLayer.getSource().getExtent()[0], vectorLayer.getSource().getExtent()[1]],
zoom: 13
})
});
</script>
</body>
</html>Upvotes: 1
Views: 1914
Answers (2)
Berkay Oruç
Reputation: 95
You should use tilelayer for massive data. If you don't have geoserver or etc, geojsonvt plugin create on-the-fly tile. GeojsonVT can easily render 150k+ features which have lots of attribute value.
Upvotes: 0
Floris de Leeuw
Reputation: 21
I fixed it by using a VectorImageLayer, seems to be a lot faster than a normal VectorLayer
Upvotes: 1
Related Questions
- Openlayers slow performance with 140k features
- Openlayers 6.3.1 - rendering tilelayers
- openlayers web application runs very slow from mobile (Android Chrome)
- Performance limitations with OpenLayers 4.6.5 using several layers
- Slow performance in OpenLayers 3 when panning with 500 features
- Openlayers 3 improving vector layer performance
- Leaflet.js with a vector layer is very slow
- Openlayer is very slow when using WKT Multipolygon with a large number of Points
- HTML canvas performance when drawing lots of lines
- Layer.Text vs Layer.Vector. Performance question