feat(tile): add tile

demos/01_point_circle.html

@@ -59,11 +59,11 @@ scene.on('loaded', () => {
     .source(data,{
        isCluster:true
     })
-    .shape('hexagon')
+    .shape('circle')
     .size('point_count', [ 5, 40]) // default 1
      //.size('value', [ 10, 300]) // default 1
     .active(true)
-    .color('point_count',colorObj.blue)
+    .color('point_count',["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
     .style({
       stroke: 'rgb(255,255,255)',
       strokeWidth: 1,

package.json

@@ -96,6 +96,7 @@
   },
   "dependencies": {
     "@antv/g": "^3.1.3",
+    "@antv/geo-coord": "^1.0.8",
     "@antv/util": "~2.0.1",
     "@mapbox/tiny-sdf": "^1.1.0",
     "@turf/bbox": "^6.0.1",

src/core/engine/picking/picking.js

@@ -87,21 +87,11 @@ class Picking {
       id = -999;
       // return;
     }
-    this._raycaster.setFromCamera(normalisedPoint, this._camera);
-
-    const intersects = this._raycaster.intersectObjects(this._pickingScene.children, true);
     const _point2d = { x: point.x, y: point.y };
-
-    let _point3d;
-    if (intersects.length > 0) {
-      _point3d = intersects[0].point;
-    }
     const item = {
       layerId,
       featureId: id,
-      point2d: _point2d,
-      point3d: _point3d,
-      intersects
+      point2d: _point2d
     };
     return item;
 

src/core/source.js

@@ -33,7 +33,7 @@ export default class Source extends Base {
     // 数据转换 统计，聚合，分类
     this._executeTrans();
     // 坐标转换
-    this._projectCoords();
+    // this._projectCoords();
   }
   setData(data, cfg = {}) {
     Object.assign(this._attrs, cfg);

src/geom/buffer/image.js

@@ -23,7 +23,7 @@ export default class ImageBuffer extends BufferBase {
     const uv = [ 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0 ];
     const texture = new THREE.Texture(image);
     texture.magFilter = THREE.LinearFilter;
-    texture.minFilter = THREE.LinearFilter;
+    texture.minFilter = THREE.LinearMipMapLinearFilter;
     texture.needsUpdate = true;
     const attributes = {
       vertices: new Float32Array(positions),

src/geom/extrude.js

@@ -19,18 +19,18 @@ export default function extrudePolygon(points, extrude) {
   const flattengeo = earcut.flatten(points);
   const positions = [];
   let cells = [];
-
+  const { dimensions } = flattengeo;
   const triangles = earcut(flattengeo.vertices, flattengeo.holes, flattengeo.dimensions);
   cells = triangles;
 
-  const pointCount = flattengeo.vertices.length / 3;
+  const pointCount = flattengeo.vertices.length / dimensions;
   const { vertices } = flattengeo;
   extrude ? full() : flat();
 
 
   function flat() {
     for (let i = 0; i < pointCount; i++) {
-      positions.push([ vertices[ i * 3 ], vertices[i * 3 + 1 ], 0 ]);
+      positions.push([ vertices[ i * dimensions ], vertices[i * dimensions + 1 ], 0 ]);
     }
   }
   function full() {
@@ -41,10 +41,10 @@ export default function extrudePolygon(points, extrude) {
     // 顶部坐标
 
     for (let i = 0; i < pointCount; i++) {
-      positions.push([ vertices[ i * 3 ], vertices[i * 3 + 1 ], 1 ]);
+      positions.push([ vertices[ i * dimensions ], vertices[i * dimensions + 1 ], 1 ]);
     }
     for (let i = 0; i < pointCount; i++) {
-      positions.push([ vertices[ i * 3 ], vertices[i * 3 + 1 ], 0 ]);
+      positions.push([ vertices[ i * dimensions ], vertices[i * dimensions + 1 ], 0 ]);
     }
     for (let i = 0; i < n; i++) {
       if (i === (n - 1)) {

src/geom/shader/index.js

@@ -41,6 +41,10 @@ import image_frag from '../shader/image_frag.glsl';
 import raster_vert from '../shader/raster_vert.glsl';
 import raster_frag from '../shader/raster_frag.glsl';
 
+// tile
+import tile_polygon_vert from '../shader/tile/polygon_vert.glsl';
+import tile_polygon_frag from '../shader/tile/polygon_frag.glsl';
+
 import common from './common.glsl';
 import { registerModule } from '../../util/shaderModule';
 import pick_color from './shaderChunks/pick_color.glsl';
@@ -60,5 +64,6 @@ export function compileBuiltinModules() {
   registerModule('text', { vs: text_vert, fs: text_frag });
   registerModule('image', { vs: image_vert, fs: image_frag });
   registerModule('raster', { vs: raster_vert, fs: raster_frag });
+  registerModule('tilepolygon', { vs: tile_polygon_vert, fs: tile_polygon_frag });
 
 }

src/geom/shader/polygon_frag.glsl

@@ -41,7 +41,12 @@ float sdRect(vec2 p, vec2 sz) {
   float inside = min(max(d.x, d.y), 0.);
   return outside + inside;
 }
-
+float circle(in vec2 _st, in float _radius){
+    vec2 dist = _st-vec2(0.5);
+	return 1.-smoothstep(_radius-(_radius*0.01),
+                         _radius+(_radius*0.01),
+                         dot(dist,dist)*4.0);
+}
 
 void main() {
    if(v_color.w == 0.0) {
@@ -106,6 +111,12 @@ void main() {
         gl_FragColor = vec4(foggedColor,1.0); 
      }
    #else
+      // #ifdef SHAPE 
+      //   vec2 st = gl_FragCoord.xy / v_size ;
+	    //   vec3 color = vec3(circle(st,0.5));
+	    //   gl_FragColor = vec4(color, 1.0 );
+      //   return;
+      //  #endif
       gl_FragColor = vec4(v_color.xyz , v_color.w);
    #endif
  

src/geom/shader/polygon_vert.glsl

@@ -30,6 +30,7 @@ void main() {
     if(pickingId == u_activeId) {
         v_color = u_activeColor;
      }
+      v_size = a_size.x * scale;
      gl_Position =  matModelViewProjection  * vec4(newposition, 1.0);
      return;
   }
@@ -49,7 +50,7 @@ void main() {
   float lightWeight = ambientRatio + diffuseRatio * lambert + specularRatio * specular;
   v_texCoord = faceUv;
   v_lightWeight = lightWeight;
-  // v_size = a_size;
+ 
   v_color =vec4(a_color.rgb*lightWeight, a_color.w); 
    if(pickingId == u_activeId) {
      v_color = u_activeColor;

src/geom/shape/path.js

@@ -16,7 +16,7 @@ function triangle() {
   return polygonPath(3);
 }
 function hexagon() {
-  return polygonPath(6);
+  return polygonPath(6, 1);
 }
 export {
   circle,
@@ -29,11 +29,11 @@ export {
   square as squareColumn
 };
 
-export function polygonPath(pointCount) {
+export function polygonPath(pointCount, start = 0) {
   const step = Math.PI * 2 / pointCount;
   const line = [];
   for (let i = 0; i < pointCount; i++) {
-    line.push(step * i - Math.PI / 12);
+    line.push(step * i - start * Math.PI / 12);
   }
   const path = line.map(t => {
     const x = Math.sin(t + Math.PI / 4),

src/layer/render/image/drawImage.js

@@ -0,0 +1,13 @@
+import * as THREE from '../../../core/three';
+import ImageMaterial from '../../../geom/material/imageMaterial';
+export default function DrawImage(attributes, style) {
+  this.geometry = new THREE.BufferGeometry();
+  this.geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
+  this.geometry.addAttribute('uv', new THREE.Float32BufferAttribute(attributes.uvs, 2));
+  const { opacity } = style;
+  const material = new ImageMaterial({
+    u_texture: attributes.texture,
+    u_opacity: opacity
+  });
+  return new THREE.Mesh(this.geometry, material);
+}

src/layer/render/polygon/drawFill.js

@@ -1,5 +1,7 @@
 import * as THREE from '../../../core/three';
-import PolygonMaterial from '../../../geom/material/polygonMaterial';
+// import PolygonMaterial from '../../../geom/material/polygonMaterial';
+import TileMaterial from '../../../geom/material/tile/polygon';
+
 export default function DrawPolygonFill(attributes, style) {
   const { opacity, activeColor } = style;
   const geometry = new THREE.BufferGeometry();
@@ -7,7 +9,13 @@ export default function DrawPolygonFill(attributes, style) {
   geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
   geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
   geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3));
-  const material = new PolygonMaterial({
+  // const material = new PolygonMaterial({
+  //   u_opacity: opacity,
+  //   u_activeColor: activeColor
+  // }, {
+  //   SHAPE: false
+  // });
+  const material = new TileMaterial({
     u_opacity: opacity,
     u_activeColor: activeColor
   }, {

src/layer/tile/imageTile.js

@@ -1,137 +1,83 @@
-// import * as THREE from '../../core/three';
-// import Tile from './tile';
-// export default class ImageTile extends Tile {
-//   constructor(layer, z, x, y) {
 
-//   }
-//   requestTileAsync() {
-//     // Making this asynchronous really speeds up the LOD framerate
-//     setTimeout(() => {
-//       if (!this._mesh) {
-//         this._mesh = this._createMesh();
-//         this._requestTile();
-//       }
-//     }, 0);
-//   }
-//   _requestTile() {
-//     const urlParams = {
-//       x: this._tile[0],
-//       y: this._tile[1],
-//       z: this._tile[2]
-//     };
+import Tile from './tile';
+import ImageBuffer from '../../geom/buffer/image';
+import DrawImage from '../render/image/drawImage';
+export default class ImageTile extends Tile {
+  requestTileAsync() {
+    // Making this asynchronous really speeds up the LOD framerate
+    setTimeout(() => {
+      if (!this._mesh) {
+        this._mesh = this._createMesh();
+        this._requestTile();
+      }
+    }, 0);
+  }
+  _requestTile() {
+    const urlParams = {
+      x: this._tile[0],
+      y: this._tile[1],
+      z: this._tile[2]
+    };
 
-//     const url = this._getTileURL(urlParams);
+    const url = this._getTileURL(urlParams);
 
-//     const image = document.createElement('img');
+    const image = document.createElement('img');
 
-//     image.addEventListener('load', event => {
-//       const texture = new THREE.Texture();
+    image.addEventListener('load', () => {
 
-//       texture.image = image;
-//       texture.needsUpdate = true;
+      this._createMesh(image);
+      this._ready = true;
+    }, false);
 
-//       // Silky smooth images when tilted
-//       texture.magFilter = THREE.LinearFilter;
-//       texture.minFilter = THREE.LinearMipMapLinearFilter;
+    // image.addEventListener('progress', event => {}, false);
+    // image.addEventListener('error', event => {}, false);
 
-//       // TODO: Set this to renderer.getMaxAnisotropy() / 4
-//       texture.anisotropy = 4;
+    image.crossOrigin = '';
 
-//       texture.needsUpdate = true;
+    // Load image
+    image.src = url;
 
-//       // Something went wrong and the tile or its material is missing
-//       //
-//       // Possibly removed by the cache before the image loaded
-//       if (!this._mesh || !this._mesh.children[0] || !this._mesh.children[0].material) {
-//         return;
-//       }
+    this._image = image;
+  }
+  _getBufferData(images) {
+    const NW = this._tileBounds.getTopLeft().to;
+    const SE = this._tileBounds.getBottomRight();
+    const coordinate = [[ NW.x, NW.y ], [ SE.x, SE.y ]];
+    return [{
+      coordinate,
+      images
+    }];
+  }
+  _createMesh(image) {
+    if (!this._center) {
+      return;
+    }
+    this._layerData = this._getBufferData(image);
+    const buffer = new ImageBuffer({
+      layerData: this._layerData
+    });
 
-//       this._mesh.children[0].material.map = texture;
-//       this._mesh.children[0].material.needsUpdate = true;
+    const style = this.get('styleOptions');
+    const mesh = DrawImage(buffer.attributes, style);
+    this.Object3D.push(mesh);
+    return this.Object3D;
+  }
+  _abortRequest() {
+    if (!this._image) {
+      return;
+    }
 
-//       this._texture = texture;
-//       this._ready = true;
-//     }, false);
+    this._image.src = '';
+  }
 
-//     // image.addEventListener('progress', event => {}, false);
-//     // image.addEventListener('error', event => {}, false);
+  destroy() {
+    // Cancel any pending requests
+    this._abortRequest();
 
-//     image.crossOrigin = '';
+    // Clear image reference
+    this._image = null;
 
-//     // Load image
-//     image.src = url;
+    super.destroy();
+  }
 
-//     this._image = image;
-//   }
-
-//   _createMesh() {
-//     // Something went wrong and the tile
-//     //
-//     // Possibly removed by the cache before loaded
-//     if (!this._center) {
-//       return;
-//     }
-
-//     const mesh = new THREE.Object3D();
-//     const geom = new THREE.PlaneBufferGeometry(this._side, this._side, 1);
-
-//     let material;
-//     if (!this._world._environment._skybox) {
-//       material = new THREE.MeshBasicMaterial({
-//         depthWrite: false
-//       });
-
-//       // const material = new THREE.MeshPhongMaterial({
-//       //   depthWrite: false
-//       // });
-//     } else {
-//       // Other MeshStandardMaterial settings
-//       //
-//       // material.envMapIntensity will change the amount of colour reflected(?)
-//       // from the environment map–can be greater than 1 for more intensity
-
-//       material = new THREE.MeshStandardMaterial({
-//         depthWrite: false
-//       });
-//       material.roughness = 1;
-//       material.metalness = 0.1;
-//       material.envMap = this._world._environment._skybox.getRenderTarget();
-//     }
-
-//     const localMesh = new THREE.Mesh(geom, material);
-//     localMesh.rotation.x = -90 * Math.PI / 180;
-
-//     localMesh.receiveShadow = true;
-
-//     mesh.add(localMesh);
-//     mesh.renderOrder = 0.1;
-
-//     mesh.position.x = this._center[0];
-//     mesh.position.z = this._center[1];
-
-//     // const box = new BoxHelper(localMesh);
-//     // mesh.add(box);
-//     //
-//     // mesh.add(this._createDebugMesh());
-
-//     return mesh;
-//   }
-//   _abortRequest() {
-//     if (!this._image) {
-//       return;
-//     }
-
-//     this._image.src = '';
-//   }
-
-//   destroy() {
-//     // Cancel any pending requests
-//     this._abortRequest();
-
-//     // Clear image reference
-//     this._image = null;
-
-//     super.destroy();
-//   }
-
-// }
+}

src/layer/tile/tile.js

@@ -1,59 +1,62 @@
-// const r2d = 180 / Math.PI;
-// const tileURLRegex = /\{([zxy])\}/g;
-// export class Tile {
-//   constructor(layer, z, x, y) {
-//     this.layer = layer;
-//     this._tile = [ z, x, y ];
+import * as THREE from '../../core/three';
+import { toLngLatBounds, toBounds } from '@antv/geo-coord';
+import { sphericalMercator } from '@antv/geo-coord/lib/geo/projection/spherical-mercator';
+const r2d = 180 / Math.PI;
+const tileURLRegex = /\{([zxy])\}/g;
 
-//   }
-//   _createMesh() {}
-//   _createDebugMesh() {}
+export class Tile {
+  constructor(layer, z, x, y) {
+    this.layer = layer;
+    this._tile = [ x, y, z ];
+    this._tileLnglatBounds = this._tileLnglatBounds(this._tile);
 
-//   _getTileURL(urlParams) {
-//     if (!urlParams.s) {
-//       // Default to a random choice of a, b or c
-//       urlParams.s = String.fromCharCode(97 + Math.floor(Math.random() * 3));
-//     }
+    this._tileBounds = this._tileBounds(this._tileLnglatBounds);
 
-//     tileURLRegex.lastIndex = 0;
-//     return this._path.replace(tileURLRegex, function(value, key) {
-//       // Replace with paramter, otherwise keep existing value
-//       return urlParams[key];
-//     });
-//   }
+    this._center = this._tileBounds.getCenter();
 
-//   _tileBoundsFromWGS84(boundsWGS84) {
-//     const sw = this._layer._world.latLonToPoint(LatLon(boundsWGS84[1], boundsWGS84[0]));
-//     const ne = this._layer._world.latLonToPoint(LatLon(boundsWGS84[3], boundsWGS84[2]));
+    this._centerLnglat = this._tileLnglatBounds.getCenter();
+    this.Object3D = new THREE.Object3D();
 
-//     return [sw.x, sw.y, ne.x, ne.y];
-//   }
 
-//   // Get tile bounds in WGS84 coordinates
-//   _tileBoundsWGS84(tile) {
-//     const e = this._tile2lon(tile[0] + 1, tile[2]);
-//     const w = this._tile2lon(tile[0], tile[2]);
-//     const s = this._tile2lat(tile[1] + 1, tile[2]);
-//     const n = this._tile2lat(tile[1], tile[2]);
-//     return [ w, s, e, n ];
-//   }
+  }
+  _createMesh() {}
+  _getTileURL(urlParams) {
+    if (!urlParams.s) {
+      // Default to a random choice of a, b or c
+      urlParams.s = String.fromCharCode(97 + Math.floor(Math.random() * 3));
+    }
 
-//   _tile2lon(x, z) {
-//     return x / Math.pow(2, z) * 360 - 180;
-//   }
+    tileURLRegex.lastIndex = 0;
+    return this._path.replace(tileURLRegex, function(value, key) {
+      return urlParams[key];
+    });
+  }
+   // 经纬度范围转瓦片范围
+  _tileBounds(lnglatBound) {
+    const nw = sphericalMercator.project(lnglatBound.getTopLeft());
+    const se = sphericalMercator.project(lnglatBound.getBottomRight());
 
-//   _tile2lat(y, z) {
-//     const n = Math.PI - 2 * Math.PI * y / Math.pow(2, z);
-//     return r2d * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
-//   }
+    return toBounds(nw, se);
+  }
 
-//   _boundsToCenter(bounds) {
-//     const x = bounds[0] + (bounds[2] - bounds[0]) / 2;
-//     const y = bounds[1] + (bounds[3] - bounds[1]) / 2;
+  // Get tile bounds in WGS84 coordinates
+  _tileLnglatBounds(tile) {
+    const e = this._tile2lon(tile[0] + 1, tile[2]);
+    const w = this._tile2lon(tile[0], tile[2]);
+    const s = this._tile2lat(tile[1] + 1, tile[2]);
+    const n = this._tile2lat(tile[1], tile[2]);
+    return toLngLatBounds([ w, n ], [ e, s ]);
+  }
 
-//     return [ x, y ];
-//   }
-//   destory() {
+  _tile2lng(x, z) {
+    return x / Math.pow(2, z) * 360 - 180;
+  }
 
-//   }
-// }
+  _tile2lat(y, z) {
+    const n = Math.PI - 2 * Math.PI * y / Math.pow(2, z);
+    return r2d * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
+  }
+  destory() {
+
+  }
+}

src/layer/tile/tileLayer.js

@@ -0,0 +1,8 @@
+import Layer from '../core/layer';
+export class TileLayer extends Layer {
+  draw() {
+  }
+  drawTile() {
+
+  }
+}