maplibre / maplibre-gl-js

MapLibre GL JS - Interactive vector tile maps in the browser
https://maplibre.org/maplibre-gl-js/docs/
Other
6.3k stars 688 forks source link

artifacts at tile borders wtih terrain 3D #2967

Open wiesehahn opened 1 year ago

wiesehahn commented 1 year ago

When vizualizing a map with terrain there are artifacts at tile borders. It looks like the terrain lays at lower elevations below the map. I guess this is just visible if we use basemaps which are not covering the entire viewport where we can look "below" the map.

While I experience this with the latest release, it seems not to be the case with maplibre gl js 2.4. (these are the only versions I tested).

Example:

With maplibre latest maplibre_error

With maplibre 2.4 maplibre_24

The purple areas in both images are due to tiny differences between terrain and vector tiles at the border I guess.

<html>
    <head>
     <meta charset="utf-8"/>
     <title> terrain test </title>
     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

     <script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
     <link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet"/>

     <!-- 
     <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
     <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
       -->

     <style>
         body { margin:0; padding:0; }
         #map { position:absolute; top:0; bottom:0; width:100%; }
     </style>
   </head>

   <body>
      <div id="map"></div> 
      <script>
          var map = (window.map = new maplibregl.Map({
            container: 'map',
            zoom: 11,
            center: [9.61,47.5761],
            pitch: 85,
            bearing: -67,
            hash: true,
            style: 'https://web3d.basemap.de/maplibre/bm_web_col.json', 
            maxZoom: 18,
            maxPitch: 85
         }));

            map.addControl(
               new maplibregl.NavigationControl({
                  visualizePitch: true,
                  showZoom: true,
                  showCompass: true
               })
            );

            map.addControl(
               new maplibregl.TerrainControl({
                  source: 'terrainSource',
                  exaggeration: 1
               })
            );
      </script>
   </body>
  </html>
HarelM commented 1 year ago

This is "by design", it was added to solve the following issue: #1602