fix bitmap layer auto highlight

visgl · Mar 25, 2019 · d45ec7e · d45ec7e
1 parent 4616d21
commit d45ec7e
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 34 deletions.
diff --git a/examples/website/openstreet-map/app.js b/examples/website/openstreet-map/app.js
@@ -7,15 +7,12 @@ export const INITIAL_VIEW_STATE = {
   latitude: 47.65,
   longitude: 7,
   zoom: 4.5,
-  // https://wiki.openstreetmap.org/wiki/Zoom_levels
   maxZoom: 20,
-  pitch: 50,
   bearing: 0
 };
 
 // https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Tile_servers
-// `s` represents sub-domain of tile servers
-const s = 'c';
+const tileServer = 'https://c.tile.openstreetmap.org/';
 
 export class App extends PureComponent {
   constructor(props) {
@@ -37,23 +34,7 @@ export class App extends PureComponent {
       tile && (
         <div className="tooltip" style={{left: x, top: y}}>
           <div className="tooltip-item">
-            <div>tile:</div>
-            <div>
-              x: {tile.x}, y: {tile.y}, z: {tile.z}
-            </div>
-          </div>
-          <div className="tooltip-item">
-            <div>boundary:</div>
-            <div>
-              north: {sourceLayer.props.bounds[3].toFixed(4)}, west:{' '}
-              {sourceLayer.props.bounds[0].toFixed(4)}
-            </div>
-          </div>
-          <div className="tooltip-item">
-            <div>coordinates:</div>
-            <div>
-              x: {x.toFixed(4)}, y: {y.toFixed(4)}
-            </div>
+            tile: x: {tile.x}, y: {tile.y}, z: {tile.z}
           </div>
         </div>
       )
@@ -65,17 +46,20 @@ export class App extends PureComponent {
       new TileLayer({
         pickable: true,
         onHover: this._onHover,
+        autoHighlight: true,
+        highlightColor: [60, 60, 60, 40],
+        opacity: 1,
+        // https://wiki.openstreetmap.org/wiki/Zoom_levels
+        minZoom: 0,
+        maxZoom: 19,
+
         renderSubLayers: props => {
           const {x, y, z, bbox} = props.tile;
           const {west, south, east, north} = bbox;
 
-          return new BitmapLayer({
-            id: `bitmap-${props.id}`,
-            image: `https://${s}.tile.openstreetmap.org/${z}/${x}/${y}.png`,
-            bounds: [west, south, east, north],
-
-            pickable: true,
-            tile: props.tile
+          return new BitmapLayer(props, {
+            image: `${tileServer}/${z}/${x}/${y}.png`,
+            bounds: [west, south, east, north]
           });
         }
       })

diff --git a/modules/core/src/lib/picking/pick-info.js b/modules/core/src/lib/picking/pick-info.js
@@ -114,6 +114,8 @@ export function processPickInfo({
     layer.setModuleParameters({
       pickingSelectedColor
     });
+
+    layer.setNeedsRedraw();
   });
 
   return infos;

diff --git a/modules/geo-layers/src/tile-layer/tile-layer.js b/modules/geo-layers/src/tile-layer/tile-layer.js
@@ -91,7 +91,7 @@ export default class TileLayer extends CompositeLayer {
         Object.assign({}, this.props, {
           id: `${this.id}-${tile.x}-${tile.y}-${tile.z}`,
           data: tile.data,
-          visible: visible && (this.state.isLoaded || tile.z === z),
+          visible: visible && (!this.state.isLoaded || tile.z === z),
           tile
         })
       );

diff --git a/modules/layers/src/bitmap-layer/bitmap-layer-fragment.js b/modules/layers/src/bitmap-layer/bitmap-layer-fragment.js
@@ -33,10 +33,6 @@ vec4 apply_opacity(vec3 color, float alpha) {
 void main(void) {
   vec4 bitmapColor = texture2D(bitmapTexture, vTexCoord);
 
-  if (bitmapColor == vec4(0., 0., 0., 1.)) {
-    discard;
-  }
-
   gl_FragColor = apply_opacity(color_tint(color_desaturate(bitmapColor.rgb)), bitmapColor.a * opacity);
 
   // use highlight color if this fragment belongs to the selected object.

diff --git a/modules/layers/src/bitmap-layer/bitmap-layer-vertex.js b/modules/layers/src/bitmap-layer/bitmap-layer-vertex.js
@@ -4,6 +4,7 @@ export default `
 attribute vec2 texCoords;
 attribute vec3 positions;
 attribute vec2 positions64xyLow;
+attribute vec3 instancePickingColors;
 
 varying vec2 vTexCoord;
 
@@ -12,6 +13,6 @@ void main(void) {
  
   vTexCoord = texCoords;
  
-  picking_setPickingColor(vec3(0., 0., 1.));
+  picking_setPickingColor(instancePickingColors);
 }
 `;
diff --git a/modules/layers/src/bitmap-layer/bitmap-layer.js b/modules/layers/src/bitmap-layer/bitmap-layer.js
@@ -81,6 +81,8 @@ export default class BitmapLayer extends Layer {
         value: new Float32Array(positions)
       }
     });
+
+    this.setState({numInstances: 1});
   }
 
   updateState({props, oldProps, changeFlags}) {