当我显示2000多个多边形和/或线串时，地图的平移和缩放会变慢，osm瓦片的加载也会变慢。当视口中可见的要素较少(放大或平移要素(时，问题就消失了。我不认为这是一个造型问题，因为它也发生在标准的openlayers造型中。
由于代码片段的限制，我只能将真实数据的一些特性添加到映射中，不幸的是，对于如此多的数据，问题并不明显。但是，也许有人可以发现代码有问题，或者有更好的方法在矢量图层上显示大量多边形/线串。
<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>我使用VectorImageLayer修复了它，它似乎比普通的VectorLayer 快得多
对于海量数据，应该使用tilelayer。如果你没有geoserver等，geojsonvt插件可以创建动态瓦片。GeojsonVT可以很容易地渲染150k+个具有大量属性值的特征。