0

I want to upgrade my system from openlayers v3 to openlayers v5, but I'm facing a problem.

On openlayers v3, GeoJSON strokes are connected perfectly. But on openlayers v5, GeoJSON strokes aren't connected ideally on edges of tiles.

Are there specification changes related to this problem between openlayers v3 and v5? Or did I miss something important?

Any help and comment would be greatly appreciated.

    <html>
      <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="http://openlayers.org/en/v3.8.2/css/ol.css" type="text/css">
        <script src="http://openlayers.org/en/v3.8.2/build/ol.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
        <title>vector tile sample on openlayers3</title>
      </head>
      <body>
        <h2>vector tile sample on openlayers3</h2>
        <div id="map" class="map" style="width: 400px; height: 400px;"></div>
        <script type="text/javascript">
          var map = new ol.Map({
            target: 'map',
            controls: [],
            layers: [
              new ol.layer.Vector({
                source: new ol.source.TileVector({
                  format: new ol.format.GeoJSON(),
                  tileGrid: ol.tilegrid.createXYZ({minZoom: 16, maxZoom: 16}),
                  url: 'http://cyberjapandata.gsi.go.jp/xyz/experimental_railcl/{z}/{x}/{y}.geojson'
                }),
                style: new ol.style.Style({
                  stroke: new ol.style.Stroke({
                    color: 'green',
                    width: 7
                  })
                })
              }),
              new ol.layer.Tile({
                source: new ol.source.TileDebug({
                  projection: 'EPSG:3857',
                  tileGrid: (new ol.source.OSM()).getTileGrid()
                })
              }),
            ],
            view: new ol.View({
              center: ol.proj.transform([139.76, 35.682], 'EPSG:4326', 'EPSG:3857'),
              zoom: 16, maxZoom: 16, minZoom: 16
            })
          });
        </script>
      </body>
    </html>

    <html>
      <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="http://openlayers.org/en/v5.2.0/css/ol.css" type="text/css">
        <script src="http://openlayers.org/en/v5.2.0/build/ol.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
        <title>vector tile sample on openlayers5</title>
      </head>
      <body>
        <h2>vector tile sample on openlayers5</h2>
        <div id="map" class="map" style="width: 400px; height: 400px;"></div>
        <script type="text/javascript">
          var map = new ol.Map({
            target: 'map',
            controls: [],
            layers: [
              new ol.layer.VectorTile({
                source: new ol.source.VectorTile({
                  format: new ol.format.GeoJSON(),
                  tileGrid: ol.tilegrid.createXYZ({minZoom: 16, maxZoom: 16}),
                  url: 'http://cyberjapandata.gsi.go.jp/xyz/experimental_railcl/{z}/{x}/{y}.geojson'
                }),
                style: new ol.style.Style({
                  stroke: new ol.style.Stroke({
                    color: 'green',
                    width: 7
                  })
                })
              }),
              new ol.layer.Tile({
                source: new ol.source.TileDebug({
                  projection: 'EPSG:3857',
                  tileGrid: (new ol.source.OSM()).getTileGrid()
                })
              })
            ],
            view: new ol.View({
              center: ol.proj.transform([139.76, 35.682], 'EPSG:4326', 'EPSG:3857'),
              zoom: 16, maxZoom: 16, minZoom: 16
            })
          });
        </script>
      </body>
    </html>
starfield
  • 1
  • Possibly related to a what seems to be a change in the buffering requirements somewhere between versions 3.9.0 and 3.12.1 which affected some older tiles e.g. https://stackoverflow.com/questions/34719478/vector-labels-get-cutted-since-new-ol-version-3-12-1-and-vectortile-layer It may be worth testing with later versions of OL3 or OL4 to confirm. – Mike Sep 23 '18 at 22:58
  • Thank you for your comment, Mike! I was able to reproduce the problem on OL 3.12.1. But I cannot find out how to fix this... – starfield Sep 24 '18 at 05:24
  • I've found more questions on the same issue, e.g.https://stackoverflow.com/questions/40466547/vector-tiles-buffer The problem seems most obvious when relatively wide lines meet tile edges at a particularly acute angle. Setting the renderBuffer property in ol.layer.VectorTile above ts default value might fix the problem in some cases, but only if the tiles have sufficient buffer. – Mike Sep 25 '18 at 14:35
  • Thank you for your comment again, Mike! I set the renderBuffer to 1000000... but nothing changed unfortunatelly. Anyway, I think your comment seems to be reasonable. Thanks again! – starfield Sep 26 '18 at 09:43

0 Answers0