Merge branch 'master' into mvt

package.json

@@ -99,6 +99,7 @@
     "@antv/geo-coord": "^1.0.8",
     "@antv/util": "~2.0.1",
     "@mapbox/tiny-sdf": "^1.1.0",
+    "@mapbox/vector-tile": "^1.3.1",
     "@turf/bbox": "^6.0.1",
     "@turf/clean-coords": "^6.0.1",
     "@turf/invariant": "^6.1.2",
@@ -110,6 +111,7 @@
     "gl-matrix": "^2.4.1",
     "gl-vec2": "^1.3.0",
     "lodash": "^4.17.5",
+    "pbf": "^3.2.0",
     "polyline-miter-util": "^1.0.1",
     "rbush": "^2.0.2",
     "simple-statistics": "^7.0.1",

src/geom/buffer/point/circleBuffer.js

@@ -0,0 +1,25 @@
+export default function circleBuffer(layerData) {
+  const index = [];
+  const aExtrude = [];
+  const aRadius = [];
+  const aColor = [];
+  const aPickingId = [];
+  const aPosition = [];
+  layerData.forEach(({ size = 0, color, id, coordinates }, i) => {
+    // construct point coords
+    aExtrude.push(-1, -1, 1, -1, 1, 1, -1, 1);
+    aRadius.push(size, size, size, size);
+    aColor.push(...color, ...color, ...color, ...color);
+    aPickingId.push(id, id, id, id);
+    aPosition.push(...coordinates, ...coordinates, ...coordinates, ...coordinates);
+    index.push(...[ 0, 1, 2, 0, 2, 3 ].map(n => n + i * 4));
+  });
+  return {
+    aExtrude,
+    aRadius,
+    aColor,
+    aPickingId,
+    aPosition,
+    index
+  };
+}

src/geom/buffer/point/index.js

@@ -2,3 +2,4 @@ export { default as FillBuffer } from './fillBuffer';
 export { default as StrokeBuffer } from './strokeBuffer';
 export { default as ImageBuffer } from './imageBuffer';
 export { default as NormalBuffer } from './normalBuffer';
+export { default as CircleBuffer } from './circleBuffer';

src/geom/material/circleMaterial.js

@@ -0,0 +1,16 @@
+import Material from './material';
+import { getModule, wrapUniforms } from '../../util/shaderModule';
+import merge from '@antv/util/lib/deep-mix';
+
+export default class CircleMaterial extends Material {
+  constructor(_uniforms, _defines, parameters) {
+    super(parameters);
+    const { vs, fs, uniforms } = getModule('circle');
+    this.uniforms = wrapUniforms(merge(uniforms, _uniforms));
+    this.defines = _defines;
+    this.type = 'CircleMaterial';
+    this.vertexShader = vs;
+    this.fragmentShader = fs;
+    this.transparent = true;
+  }
+}

src/geom/shader/circle_frag.glsl

@@ -0,0 +1,26 @@
+uniform float u_blur : 0;
+uniform float u_opacity : 1;
+uniform float u_stroke_width : 1;
+uniform vec4 u_stroke_color : [1, 1, 1, 1];
+uniform float u_stroke_opacity : 1;
+
+varying vec3 v_data;
+varying vec4 v_color;
+varying float v_radius;
+
+void main() {
+  float extrude_length = length(v_data.xy);
+
+  lowp float antialiasblur = v_data.z;
+  float antialiased_blur = -max(u_blur, antialiasblur);
+
+  float opacity_t = smoothstep(0.0, antialiased_blur, extrude_length - 1.0);
+
+  float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep(
+    antialiased_blur,
+    0.0,
+    extrude_length - v_radius / (v_radius + u_stroke_width)
+  );
+
+  gl_FragColor = opacity_t * mix(v_color * u_opacity, u_stroke_color * u_stroke_opacity, color_t);
+}

src/geom/shader/circle_vert.glsl

@@ -0,0 +1,34 @@
+attribute float a_radius;
+attribute vec2 a_shape;
+attribute vec4 a_color;
+
+uniform float u_zoom : 1;
+uniform float u_stroke_width : 2;
+uniform float u_activeId : 0;
+uniform vec4 u_activeColor : [ 1.0, 0, 0, 1.0 ];
+
+varying vec3 v_data;
+varying vec4 v_color;
+varying float v_radius;
+
+void main() {
+  v_color = a_color;
+  v_radius = a_radius;
+
+  // extrude
+  float zoom_scale = pow(2., 20. - u_zoom);
+  vec2 offset = a_shape * (a_radius + u_stroke_width) * zoom_scale;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xy + offset, 0.0, 1.0);
+
+  // anti-alias
+  float antialiasblur = 1.0 / (a_radius + u_stroke_width);
+
+  // construct point coords
+  v_data = vec3(a_shape, antialiasblur);
+
+  // picking
+  if(pickingId == u_activeId) {
+    v_color = u_activeColor;
+  }
+  worldId = id_toPickColor(pickingId);
+}

src/geom/shader/index.js

@@ -6,6 +6,8 @@ import grid_frag from '../shader/grid_frag.glsl';
 import grid_vert from '../shader/grid_vert.glsl';
 import hexagon_frag from '../shader/hexagon_frag.glsl';
 import hexagon_vert from '../shader/hexagon_vert.glsl';
+import circle_frag from './circle_frag.glsl';
+import circle_vert from './circle_vert.glsl';
 
 // 点的边线
 import point_line_frag from '../shader/point_meshLine_frag.glsl';
@@ -53,6 +55,7 @@ export function compileBuiltinModules() {
   registerModule('point', { vs: point_vert, fs: point_frag });
   registerModule('common', { vs: common, fs: common });
   registerModule('pick_color', { vs: pick_color, fs: pick_color });
+  registerModule('circle', { vs: circle_vert, fs: circle_frag });
   registerModule('polygon', { vs: polygon_vert, fs: polygon_frag });
   registerModule('grid', { vs: grid_vert, fs: grid_frag });
   registerModule('hexagon', { vs: hexagon_vert, fs: hexagon_frag });

src/geom/shape/line.js

@@ -77,27 +77,17 @@ export function Line(path, props, positionsIndex, lengthPerDashSegment = 200) {
   const colors = [];
   const dashArray = [];
 
-  const { normals, attrIndex, attrPos } = getNormals(path, false, positionsIndex);
+  const { normals, attrIndex, attrPos, attrDistance } = getNormals(path, false, positionsIndex);
 
-  let attrDistance = [];
   const sizes = [];
   let { size, color, id } = props;
   !Array.isArray(size) && (size = [ size ]);
-  attrPos.forEach((point, pointIndex) => {
+  attrPos.forEach(point => {
     colors.push(...color);
     pickingIds.push(id);
     sizes.push(size[0]);
     point[2] = size[1] || 0;
     positions.push(...point);
-
-    if (pointIndex === 0 || pointIndex === 1) {
-      attrDistance.push(0);
-    } else if (pointIndex % 2 === 0) {
-      attrDistance.push(attrDistance[pointIndex - 2]
-        + lineSegmentDistance(attrPos[pointIndex - 2], attrPos[pointIndex]));
-    } else {
-      attrDistance.push(attrDistance[pointIndex - 1]);
-    }
   });
 
   const totalLength = attrDistance[attrDistance.length - 1];
@@ -110,9 +100,6 @@ export function Line(path, props, positionsIndex, lengthPerDashSegment = 200) {
     dashArray.push(ratio);
   });
 
-  attrDistance = attrDistance.map(d => {
-    return d / totalLength;
-  });
   return {
     positions,
     normal,
@@ -121,14 +108,10 @@ export function Line(path, props, positionsIndex, lengthPerDashSegment = 200) {
     colors,
     sizes,
     pickingIds,
-    attrDistance,
+    attrDistance: attrDistance.map(d => {
+      return d / totalLength;
+    }),
     dashArray
   };
+}
 
-}
-function lineSegmentDistance(end, start) {
-  const dx = start[0] - end[0];
-  const dy = start[1] - end[1];
-  const dz = start[2] - end[2];
-  return Math.sqrt(dx * dx + dy * dy + dz * dz);
-}

src/layer/pointLayer.js

@@ -28,6 +28,11 @@ export default class PointLayer extends Layer {
         break;
       }
     }
+
+    // 2D circle 特殊处理
+    if (shape === 'circle') {
+      return 'circle';
+    }
     if (
       pointShape['2d'].indexOf(shape) !== -1 ||
       pointShape['3d'].indexOf(shape) !== -1

src/layer/render/index.js

@@ -22,12 +22,14 @@ import DrawPointImage from './point/drawImage';
 import DrawPointNormal from './point/drawNormal';
 import DrawPointStroke from './point/drawStroke';
 import DrawPointText from './point/drawText';
+import DrawPointCircle from './point/drawCircle';
 
 registerRender('point', 'fill', DrawPointFill);
 registerRender('point', 'image', DrawPointImage);
 registerRender('point', 'normal', DrawPointNormal);
 registerRender('point', 'stroke', DrawPointStroke);
 registerRender('point', 'text', DrawPointText);
+registerRender('point', 'circle', DrawPointCircle);
 
 // heatmap
 

src/layer/render/point/drawCircle.js

@@ -0,0 +1,32 @@
+/**
+ * 针对绘制圆形的优化
+ * 手动构建点阵坐标系，便于实现描边、反走样效果
+ */
+import * as THREE from '../../../core/three';
+import * as PointBuffer from '../../../geom/buffer/point/index';
+import CircleMaterial from '../../../geom/material/circleMaterial';
+export default function drawCircle(layerData, layer) {
+  const style = layer.get('styleOptions');
+  const activeOption = layer.get('activedOptions');
+
+  const { aColor, aExtrude, aPickingId, aPosition, index, aRadius } = PointBuffer.CircleBuffer(layerData, style);
+  const geometry = new THREE.BufferGeometry();
+  geometry.setIndex(index);
+  geometry.addAttribute('position', new THREE.Float32BufferAttribute(aPosition, 3));
+  geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(aColor, 4));
+  geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(aPickingId, 1));
+  geometry.addAttribute('a_shape', new THREE.Float32BufferAttribute(aExtrude, 2));
+  geometry.addAttribute('a_radius', new THREE.Float32BufferAttribute(aRadius, 1));
+
+  const material = new CircleMaterial({
+    u_opacity: style.opacity,
+    u_activeColor: activeOption.fill,
+    u_zoom: layer.scene.getZoom(),
+    u_stroke_color: style.stroke,
+    u_stroke_width: style.strokeWidth,
+    u_stroke_opacity: style.strokeOpacity
+  });
+  material.depthTest = false;
+  const fillMesh = new THREE.Mesh(geometry, material);
+  return fillMesh;
+}

src/util/polyline-normals.js

@@ -18,6 +18,13 @@ function addNext(out, normal, length) {
   out.push([[ normal[0], normal[1] ], length ]);
 }
 
+function lineSegmentDistance(end, start) {
+  const dx = start[0] - end[0];
+  const dy = start[1] - end[1];
+  const dz = start[2] - end[2];
+  return Math.sqrt(dx * dx + dy * dy + dz * dz);
+}
+
 export default function(points, closed, indexOffset) {
   const lineA = [ 0, 0 ];
   const lineB = [ 0, 0 ];
@@ -33,7 +40,7 @@ export default function(points, closed, indexOffset) {
   const out = [];
   const attrPos = [];
   const attrIndex = [];
-  const attrCounters = [ 0, 0 ];
+  const attrDistance = [ 0, 0 ];
   if (closed) {
     points = points.slice();
     points.push(points[0]);
@@ -46,8 +53,7 @@ export default function(points, closed, indexOffset) {
     const last = points[i - 1];
     const cur = points[i];
     const next = i < points.length - 1 ? points[i + 1] : null;
-
-    attrCounters.push(i / total, i / total);
+    const d = lineSegmentDistance(cur, last) + attrDistance[attrDistance.length - 1];
 
     direction(lineA, cur, last);
 
@@ -68,6 +74,7 @@ export default function(points, closed, indexOffset) {
        // reset normal
       normal(_normal, lineA);
       extrusions(attrPos, out, cur, _normal, 1);
+      attrDistance.push(d, d);
       attrIndex.push(
         _lastFlip === 1 ? [ index + 1, index + 3, index + 2 ] : [ index, index + 2, index + 3 ]);
 
@@ -84,7 +91,6 @@ export default function(points, closed, indexOffset) {
       const bevel = miterLen > miterLimit;
       if (bevel) {
         miterLen = miterLimit;
-        attrCounters.push(i / total);
 
         // next two points in our first segment
         addNext(out, _normal, -flip);
@@ -103,12 +109,14 @@ export default function(points, closed, indexOffset) {
 
         addNext(out, _normal, -flip);
         attrPos.push(cur);
+        attrDistance.push(d, d, d);
 
         // the miter is now the normal for our next join
         count += 3;
       } else {
         // next two points for our miter join
         extrusions(attrPos, out, cur, miter, miterLen);
+        attrDistance.push(d, d);
         attrIndex.push(_lastFlip === 1
           ? [ index + 1, index + 3, index + 2 ] : [ index, index + 2, index + 3 ]);
 
@@ -126,6 +134,6 @@ export default function(points, closed, indexOffset) {
     normals: out,
     attrIndex,
     attrPos,
-    attrCounters
+    attrDistance
   };
 }