Question

       function addLayer(line, style) {
           var lineSource = new ol.source.Vector({
               features: [new ol.format.GeoJSON().readFeature(line)]
           });
           var lineLayer = new ol.layer.Vector({
               source: lineSource,
               opacity: 0.5,
               style: new ol.style.Style({
                   stroke: new ol.style.Stroke(style),
                   fill: new ol.style.Fill({
                       color: 'rgba(255,0,0,0.1)'
                   }),
               }),
               renderMode: 'image'
           });

           map.addLayer(lineLayer);
       }

  var polygon = {
      type: 'Feature',
      properties: {},
      geometry: {
          coordinates: [
            [
               [105.56050855965084, 30.53496986027998], [105.5618433239718, 30.535072109775644], [105.56193067697812, 30.53422094558776], [105.56193027813428, 30.534186210747627], [105.56192137137784, 30.53415242451691], [105.56190178301328, 30.53411650145307], [105.56187212492708, 30.534090976908807], [105.56184557299382, 30.534074666574], [105.56181130996714, 30.534061781038556], [105.56176928666588, 30.534058445183675], [105.56176787976942, 30.534062041262292], [105.56171966413362, 30.53405823687012], [105.56165514781011, 30.534052031172923], [105.56132704704856, 30.534039923166347], [105.56132574758904, 30.53405677838455], [105.56071849935584, 30.53403579502816], [105.56068292947468, 30.534036652490723], [105.56062036339664, 30.53407230036791], [105.56060399316434, 30.53410662024298], [105.56058015432616, 30.534327716212182], [105.56053352409234, 30.534743482720856], [105.56052214980002, 30.53484363714546], [105.56050855965084, 30.53496986027998]
            ]
          ],
          type: 'Polygon'
      }
  };
  addLayer(polygon, {
      color: 'red',
      width: 3
  });

循环添加多个Polygon    地图卡顿

Answer 1

您好，

面对象节点数比较多，绘制比较耗费性能，如果循环批量添加的面在业务上都属于同一类图层，可以考虑只使用一个Vector图层对象，循环添加features即可。这样可以有效减少地图中图层数量，减少性能开销。

此外，可以考虑为layer添加declutter、updateWhileAnimating、updateWhileInteracting等参数，可以减少渲染更新次数。参考文档：https://openlayers.org/en/latest/apidoc/module-ol_layer_Vector-VectorLayer.html。

希望能够帮助到您。