Openlayers 3 Jak renderować każdy punkt w geometrii w wysokiej (małej) rozdzielczości?

Question

Jak wymusić ol3, aby renderować każdy pojedynczy punkt w geometrii?

Mam problem z openlayerami 3, gdzie mimo tego, że wykreślam ciąg linii z 3000 punktów na odległość może 100m, renderuje się tylko około 1000.

EDIT: Teraz - OpenLayers 3 v.3.7.0

Powiększanie wystarczająco daleko na zbiorze punktów w OpenLayers 3 wynika, że ​​zaledwie kilka punktów są rysowane w strukturze siatki. Chciałbym powiększyć, aby zobaczyć sto punktów narysowanych nieco przesuniętych względem siebie na mapie w skali centymetra lub milimetra.

Czy to możliwe w przypadku openlayerów 3?

Answer 1

Renderowanie uprości geometrię. Stride jest zasadniczo jeśli masz 2, 3 lub 4 wartości we współrzędnych, np. XY, XYZ, XYZM.

Będziesz chciał spojrzeć na zmianę ol.SIMPLIFY_TOLERANCE, ale musisz utworzyć niestandardową kompilację i zmienić definicję, o ile widzę (http://openlayers.org/en/v3.5.0/doc/tutorials/custom-builds.html).

/** 
* @define {number} Tolerance for geometry simplification in device pixels. 
*/ 
ol.SIMPLIFY_TOLERANCE = 0.5; 

Spróbuj ustawić wartość 0 lub ujemną.

Answer 2

Mam taki sam problem z linią z zaledwie czterema wierzchołkami. Zmieniłem numer ol.SIMPLIFY_TOLERANCE na -1 i nie było zmian w renderowaniu tej funkcji. Jeśli wywołasz metodę geometry.getSimplifiedGeometry (0), otrzymuję wszystkie cztery wierzchołki. Jednak podczas renderowania zwracane są tylko dwa wierzchołki. Zastanawiam się, czy coś jeszcze trzeba zmienić? Wieloboki wydają się dobrze. Jestem nowy w OpenLayers 3, więc jestem pewien, że jest lepszy sposób na obejście tego.

Mogę uzyskać prawidłowe wyświetlanie linii za pomocą funkcji stylu. Poniżej przedstawiam próbkę mojego wybranego stylu. Stworzyłem również standardową funkcję stylu dla warstwy wektorowej. Jeśli nie dodałem funkcji stylu do interakcji select, moja funkcja przeskoczyłaby z linii z 4 wierzchołkami do linii z punktami początkowym i końcowym.

var selectStyleFunction = function (feature, resolution) { 
      var styles = []; 
      var white = [255, 255, 255, 1]; 
      var blue = [0, 153, 255, 1]; 
      var width = 3; 
      var geometry = feature.getGeometry(); 
      var type = geometry.getType(); 
      if (type == 'Point') { 
       styles.push(new ol.style.Style({ 
        image: new ol.style.Circle({ 
         radius: width * 2, 
         fill: new ol.style.Fill({ 
          color: blue 
         }), 
         stroke: new ol.style.Stroke({ 
          color: white, 
          width: width/2 
         }) 
        }), 
        zIndex: Infinity 
       })); 
      } 
      if (type == 'LineString') { 
       geometry.forEachSegment(function (start, end) { 
        styles.push(new ol.style.Style({ 
         geometry: new ol.geom.LineString([start, end]), 
         stroke: new ol.style.Stroke({ 
          color: white, 
          width: width + 2 
         }) 
        })); 
        styles.push(new ol.style.Style({ 
         geometry: new ol.geom.LineString([start, end]), 
         stroke: new ol.style.Stroke({ 
          color: blue, 
          width: width 
         }) 
        })); 
       }); 
      } 

      if (type == 'Polygon') { 
       styles.push(new ol.style.Style({ 
        fill: new ol.style.Fill({ 
         color: [255, 255, 255, .5] 
        }) 
       })); 
       styles.push(new ol.style.Style({ 
        stroke: new ol.style.Stroke({ 
         color: white, 
         width: width + 2 
        }) 
       })); 
       styles.push(new ol.style.Style({ 
        stroke: new ol.style.Stroke({ 
         color: blue, 
         width: width 
        }) 
       })); 
      } 
      return styles; 
     } 

Kolejny styl, który użyłem do funkcji LineString, którą dodałem do funkcji stylu używanej dla mojej warstwy wektorowej. Ten dodaje punkty do każdego wierzchołka i jest oparty na przykładzie wielokąta na stronie przykładów OpenLayers:

if (type == horizontal') { 

       var coords = geometry.getCoordinates(); 
       geometry.forEachSegment(function (start, end) { 
        styles.push(new ol.style.Style({ 
         geometry: new ol.geom.LineString([start, end]), 
         stroke: new ol.style.Stroke({ 
          color: [0, 128, 0, .9], 
          width: width + 2 
         }), 
         zIndex: 9000 
        })); 
       }); 

       styles.push(new ol.style.Style({ 
        image: new ol.style.Circle({ 
         radius: width + 2, 
         fill: new ol.style.Fill({ 
          color: [0, 128, 0, 2, 1] 
         }), 
         stroke: new ol.style.Stroke({ 
          color: [255, 255, 255, 0.75], 
          width: width 
         }) 
        }), 
        geometry: function() { 
         return new ol.geom.MultiPoint(coords); 
        }, 
        zIndex: 9000 

       })); 
      }