feat(tile): add tile

demos/01_point_circle.html

@@ -59,11 +59,11 @@
     .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,13 +1,21 @@
 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();
   geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
   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
   }, {