@antv/l7-layers 2.9.19 → 2.9.22-alpha.0

package/lib/point/shaders/radar/radar_vert.glsl

@@ -0,0 +1,120 @@
+attribute vec4 a_Color;
+attribute vec3 a_Position;
+attribute vec3 a_Extrude;
+attribute float a_Size;
+attribute float a_Shape;
+uniform float u_speed: 1.0;
+uniform float u_time;
+
+varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
+
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+uniform float u_isMeter;
+
+varying vec4 v_data;
+varying vec4 v_color;
+varying float v_radius;
+
+uniform float u_opacity : 1;
+uniform vec2 u_offsets;
+
+#pragma include "styleMapping"
+#pragma include "styleMappingCalOpacity"
+
+#pragma include "projection"
+#pragma include "picking"
+
+void main() {
+  vec3 extrude = a_Extrude;
+  float shape_type = a_Shape;
+  float newSize = setPickingSize(a_Size);
+
+  // cal style mapping - 数据纹理映射部分的计算
+  styleMappingMat = mat4(
+    0.0, 0.0, 0.0, 0.0, // opacity - empty - empty - empty
+    0.0, 0.0, 0.0, 0.0, // empty - empty - empty - empty
+    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1] - a_Extrude.x - a_Extrude.y
+    0.0, 0.0, 0.0, 0.0  // 
+  );
+
+  float time = u_time * u_speed;
+  mat2 rotateMatrix = mat2( 
+    cos(time), sin(time), 
+    -sin(time), cos(time)
+  );
+  styleMappingMat[2].ba = rotateMatrix * a_Extrude.xy;
+
+  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
+  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
+  float columnWidth = 1.0/columnCount;  // 列宽
+  float rowHeight = 1.0/rowCount;       // 行高
+  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
+  float id = a_vertexId; // 第n个顶点
+  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
+  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
+  
+  // cell 固定顺序 opacity -> strokeOpacity -> empty -> empty ... 
+  // 按顺序从 cell 中取值、若没有则自动往下取值
+  float textureOffset = 0.0; // 在 cell 中取值的偏移量
+
+  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
+  styleMappingMat[0][0] = opacityAndOffset.r;
+  textureOffset = opacityAndOffset.g;
+
+
+  vec2 textrueOffsets = vec2(0.0, 0.0);
+  if(hasOffsets()) {
+    vec2 valueXPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
+    textrueOffsets.r = pos2value(valueXPos, columnWidth, rowHeight); // x
+    textureOffset += 1.0;
+
+    vec2 valueYPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
+    textrueOffsets.g = pos2value(valueYPos, columnWidth, rowHeight); // x
+    textureOffset += 1.0;
+  } else {
+    textrueOffsets = u_offsets;
+  }
+
+  // cal style mapping
+
+  // unpack color(vec2)
+  v_color = a_Color;
+
+  // radius(16-bit)
+  v_radius = newSize;
+
+  // anti-alias
+  float blur = 0.0;
+  float antialiasblur = -max(2.0 / u_DevicePixelRatio / a_Size, blur);
+
+  vec2 offset = (extrude.xy * (newSize) + textrueOffsets);
+  vec3 aPosition = a_Position;
+  if(u_isMeter < 1.0) {
+    // 不以米为实际单位
+    offset = project_pixel(offset);
+  } else {
+    // 以米为实际单位
+    antialiasblur *= pow(19.0 - u_Zoom, 2.0);
+    antialiasblur = max(antialiasblur, -0.01);
+    // offset *= 0.5;
+
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+      aPosition.xy += offset;
+      offset.x = 0.0;
+      offset.y = 0.0;
+    }
+  }
+
+  v_data = vec4(extrude.x, extrude.y, antialiasblur,shape_type);
+
+  vec4 project_pos = project_position(vec4(aPosition.xy, 0.0, 1.0));
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    gl_Position = u_Mvp * vec4(project_pos.xy + offset, 0.0, 1.0);
+  } else {
+    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));
+  }
+
+  setPickingColor(a_PickingColor);
+}

package/lib/point/shaders/simplePoint_frag.glsl

@@ -0,0 +1,53 @@
+
+uniform float u_opacity : 1;
+uniform vec2 u_offsets;
+uniform float u_additive;
+
+uniform float u_stroke_opacity : 1;
+
+uniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];
+
+varying vec4 v_color;
+varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
+varying float v_blur;
+varying float v_innerRadius;
+
+#pragma include "picking"
+void main() {
+  vec2 center = vec2(0.5);
+
+  float opacity = styleMappingMat[0][0];
+  // Tip: 片元到中心点的距离 0 - 1
+  float fragmengTocenter = distance(center, gl_PointCoord) * 2.0;
+  // Tip: 片元的剪切成圆形
+  float circleClipOpacity = 1.0 - smoothstep(v_blur, 1.0, fragmengTocenter);
+
+
+  if(v_innerRadius < 0.99) {
+    // 当存在 stroke 且 stroke > 0.01
+    float blurWidth = (1.0 - v_blur)/2.0;
+    vec4 stroke = vec4(u_stroke_color.rgb, u_stroke_opacity);
+    if(fragmengTocenter > v_innerRadius + blurWidth) {
+      gl_FragColor = stroke;
+    } else if(fragmengTocenter > v_innerRadius - blurWidth){
+      float mixR = (fragmengTocenter - (v_innerRadius - blurWidth)) / (blurWidth * 2.0);
+      gl_FragColor = mix(v_color, stroke, mixR);
+    } else {
+      gl_FragColor = v_color;
+    }
+  } else {
+    // 当不存在 stroke 或 stroke <= 0.01
+    gl_FragColor = v_color;
+  }
+
+  gl_FragColor.a *= opacity;
+
+  gl_FragColor = filterColor(gl_FragColor);
+  
+  if(u_additive > 0.0) {
+    gl_FragColor *= circleClipOpacity;
+  } else {
+    gl_FragColor.a *= circleClipOpacity;
+  }
+
+}

package/lib/point/shaders/simplePoint_vert.glsl

@@ -0,0 +1,79 @@
+
+attribute vec3 a_Position;
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+attribute float a_Size;
+attribute vec4 a_Color;
+varying vec4 v_color;
+
+uniform float u_opacity : 1;
+uniform vec2 u_offsets;
+uniform float u_stroke_width;
+
+varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
+varying float v_blur;
+varying float v_innerRadius;
+
+#pragma include "styleMapping"
+#pragma include "styleMappingCalOpacity"
+
+#pragma include "projection"
+#pragma include "picking"
+#pragma include "project"
+void main() {
+  v_color = a_Color;
+  v_blur = 1.0 - max(2.0/a_Size, 0.05);
+  v_innerRadius = max((a_Size - u_stroke_width) / a_Size, 0.0);
+
+  // cal style mapping - 数据纹理映射部分的计算
+styleMappingMat = mat4(
+    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
+    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
+    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
+    0.0, 0.0, 0.0, 0.0
+  );
+
+  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
+  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
+  float columnWidth = 1.0/columnCount;  // 列宽
+  float rowHeight = 1.0/rowCount;       // 行高
+  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
+  float id = a_vertexId; // 第n个顶点
+  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
+  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
+  
+  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... 
+  // 按顺序从 cell 中取值、若没有则自动往下取值
+  float textureOffset = 0.0; // 在 cell 中取值的偏移量
+
+  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
+  styleMappingMat[0][0] = opacityAndOffset.r;
+  textureOffset = opacityAndOffset.g;
+
+  vec2 textrueOffsets = vec2(0.0, 0.0);
+  if(hasOffsets()) {
+    vec2 valueXPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
+    textrueOffsets.r = pos2value(valueXPos, columnWidth, rowHeight); // x
+    textureOffset += 1.0;
+
+    vec2 valueYPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
+    textrueOffsets.g = pos2value(valueYPos, columnWidth, rowHeight); // x
+    textureOffset += 1.0;
+  } else {
+    textrueOffsets = u_offsets;
+  }
+
+  // cal style mapping
+  
+  vec2 offset = project_pixel(textrueOffsets);
+  
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    gl_Position = u_Mvp * vec4(a_Position.xy + offset, a_Position.z, 1.0);
+  } else { // else
+    vec4 project_pos = project_position(vec4(a_Position, 1.0)) + vec4(a_Size / 2.,-a_Size /2.,0.,0.);
+    gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy+offset),project_pos.z,project_pos.w));
+  }
+
+  gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;
+  setPickingColor(a_PickingColor);
+}

package/lib/point/shaders/text_frag.glsl

@@ -0,0 +1,48 @@
+#define SDF_PX 8.0
+#define EDGE_GAMMA 0.105
+#define FONT_SIZE 48.0
+uniform sampler2D u_sdf_map;
+uniform float u_gamma_scale : 0.5;
+// uniform float u_font_size : 24.0;
+uniform float u_opacity : 1.0;
+uniform vec4 u_stroke_color : [0, 0, 0, 1];
+uniform float u_stroke_width : 2.0;
+uniform float u_halo_blur : 0.5;
+uniform float u_DevicePixelRatio;
+
+varying vec4 v_color;
+varying vec2 v_uv;
+varying float v_gamma_scale;
+varying float v_fontScale;
+
+varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
+
+#pragma include "picking"
+void main() {
+  // get style data mapping
+  float opacity = styleMappingMat[0][0];
+  float strokeWidth = styleMappingMat[0][2];
+  vec4 textrueStroke = vec4(
+    styleMappingMat[1][0],
+    styleMappingMat[1][1],
+    styleMappingMat[1][2],
+    styleMappingMat[1][3]
+  );
+
+  // get sdf from atlas
+  float dist = texture2D(u_sdf_map, v_uv).a;
+
+  // float fontScale = u_font_size / FONT_SIZE;
+
+  // lowp float buff = (6.0 - u_stroke_width / v_fontScale) / SDF_PX;
+  lowp float buff = (6.0 - strokeWidth / v_fontScale) / SDF_PX;
+  highp float gamma = (u_halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / (v_fontScale * u_gamma_scale) / 1.0;
+
+  highp float gamma_scaled = gamma * v_gamma_scale;
+
+  highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
+  // gl_FragColor = mix(vec4(v_color.rgb, v_color.a * u_opacity), vec4(u_stroke_color.rgb, u_stroke_color.a * u_opacity), smoothstep(0., 0.5, 1. - dist));
+  gl_FragColor = mix(vec4(v_color.rgb, v_color.a * opacity), vec4(textrueStroke.rgb, textrueStroke.a * opacity), smoothstep(0., 0.5, 1. - dist));
+  gl_FragColor.a= gl_FragColor.a * alpha;
+  gl_FragColor = filterColor(gl_FragColor);
+}

package/lib/point/shaders/text_vert.glsl

@@ -0,0 +1,131 @@
+#define SDF_PX 8.0
+#define EDGE_GAMMA 0.105
+#define FONT_SIZE 24.0
+attribute vec3 a_Position;
+attribute vec2 a_tex;
+attribute vec2 a_textOffsets;
+attribute vec4 a_Color;
+attribute float a_Size;
+attribute float a_Rotate;
+
+uniform vec2 u_sdf_map_size;
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+uniform float u_raisingHeight: 0.0;
+
+varying vec2 v_uv;
+varying float v_gamma_scale;
+varying vec4 v_color;
+varying float v_fontScale;
+
+varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
+
+uniform float u_opacity : 1;
+uniform float u_stroke_width : 2;
+uniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];
+
+#pragma include "styleMapping"
+#pragma include "styleMappingCalOpacity"
+#pragma include "styleMappingCalStrokeWidth"
+
+#pragma include "projection"
+#pragma include "picking"
+
+void main() {
+  // cal style mapping - 数据纹理映射部分的计算
+   styleMappingMat = mat4(
+    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
+    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
+    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
+    0.0, 0.0, 0.0, 0.0
+  );
+
+  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
+  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
+  float columnWidth = 1.0/columnCount;  // 列宽
+  float rowHeight = 1.0/rowCount;       // 行高
+  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
+  float id = a_vertexId; // 第n个顶点
+  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
+  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
+  
+  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... 
+  // 按顺序从 cell 中取值、若没有则自动往下取值
+  float textureOffset = 0.0; // 在 cell 中取值的偏移量
+
+  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
+  styleMappingMat[0][0] = opacityAndOffset.r;
+  textureOffset = opacityAndOffset.g;
+
+   vec2 strokeWidthAndOffset = calStrokeWidthAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
+  styleMappingMat[0][2] = strokeWidthAndOffset.r;
+  textureOffset = strokeWidthAndOffset.g;
+
+  vec4 textrueStroke = vec4(-1.0, -1.0, -1.0, -1.0);
+  if(hasStroke()) {
+    vec2 valueRPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
+    styleMappingMat[1][0] = pos2value(valueRPos, columnWidth, rowHeight); // R
+    textureOffset += 1.0;
+
+    vec2 valueGPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
+    styleMappingMat[1][1] = pos2value(valueGPos, columnWidth, rowHeight); // G
+    textureOffset += 1.0;
+
+    vec2 valueBPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
+    styleMappingMat[1][2] = pos2value(valueBPos, columnWidth, rowHeight); // B
+    textureOffset += 1.0;
+
+    vec2 valueAPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
+    styleMappingMat[1][3] = pos2value(valueAPos, columnWidth, rowHeight); // A
+    textureOffset += 1.0;
+  } else {
+    if(u_stroke_color == vec4(0.0)) {
+      styleMappingMat[1][0] = v_color.r;
+      styleMappingMat[1][1] = v_color.g;
+      styleMappingMat[1][2] = v_color.b;
+      styleMappingMat[1][3] = v_color.a;
+    } else {
+      styleMappingMat[1][0] = u_stroke_color.r;
+      styleMappingMat[1][1] = u_stroke_color.g;
+      styleMappingMat[1][2] = u_stroke_color.b;
+      styleMappingMat[1][3] = u_stroke_color.a;
+    }
+  }
+  
+  // cal style mapping - 数据纹理映射部分的计算
+
+  v_color = a_Color;
+  v_uv = a_tex / u_sdf_map_size;
+
+  // 文本缩放比例
+  float fontScale = a_Size / FONT_SIZE;
+  v_fontScale = fontScale;
+
+  vec4 project_pos = project_position(vec4(a_Position, 1.0));
+  // vec4 projected_position  = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
+
+  highp float angle_sin = sin(a_Rotate);
+  highp float angle_cos = cos(a_Rotate);
+  mat2 rotation_matrix = mat2(angle_cos, -1.0 * angle_sin, angle_sin, angle_cos);
+  
+  // gl_Position = vec4(projected_position.xy / projected_position.w + rotation_matrix * a_textOffsets * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0);
+
+  float raiseHeight = u_raisingHeight;
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+    float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
+    raiseHeight = u_raisingHeight * mapboxZoomScale;
+  }
+
+  vec4 projected_position;
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+   projected_position  = u_Mvp * (vec4(a_Position.xyz + vec3(0.0, 0.0, raiseHeight), 1.0));
+  } else { // else
+   projected_position  = project_common_position_to_clipspace(vec4(project_pos.xyz + vec3(0.0, 0.0, raiseHeight), 1.0));
+  }
+
+  gl_Position = vec4(
+    projected_position.xy / projected_position.w + rotation_matrix * a_textOffsets * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0);
+  v_gamma_scale = gl_Position.w;
+  setPickingColor(a_PickingColor);
+
+}

package/lib/point/shaders/tile/fill_tile_frag.glsl

@@ -0,0 +1,83 @@
+uniform float u_additive;
+varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
+
+varying vec4 v_data;
+varying vec4 v_color;
+varying float v_radius;
+
+#pragma include "sdf_2d"
+#pragma include "picking"
+
+void main() {
+  int shape = int(floor(v_data.w + 0.5));
+
+  vec4 textrueStroke = vec4(
+    styleMappingMat[1][0],
+    styleMappingMat[1][1],
+    styleMappingMat[1][2],
+    styleMappingMat[1][3]
+  );
+
+  float opacity = styleMappingMat[0][0];
+  float stroke_opacity = styleMappingMat[0][1];
+  float strokeWidth = styleMappingMat[0][2];
+  vec4 strokeColor = textrueStroke == vec4(0) ? v_color : textrueStroke;
+
+  lowp float antialiasblur = v_data.z;
+  float r = v_radius / (v_radius + strokeWidth);
+
+  float outer_df;
+  float inner_df;
+  // 'circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica'
+  if (shape == 0) {
+    outer_df = sdCircle(v_data.xy, 1.0);
+    inner_df = sdCircle(v_data.xy, r);
+  } else if (shape == 1) {
+    outer_df = sdEquilateralTriangle(1.1 * v_data.xy);
+    inner_df = sdEquilateralTriangle(1.1 / r * v_data.xy);
+  } else if (shape == 2) {
+    outer_df = sdBox(v_data.xy, vec2(1.));
+    inner_df = sdBox(v_data.xy, vec2(r));
+  } else if (shape == 3) {
+    outer_df = sdPentagon(v_data.xy, 0.8);
+    inner_df = sdPentagon(v_data.xy, r * 0.8);
+  } else if (shape == 4) {
+    outer_df = sdHexagon(v_data.xy, 0.8);
+    inner_df = sdHexagon(v_data.xy, r * 0.8);
+  } else if (shape == 5) {
+    outer_df = sdOctogon(v_data.xy, 1.0);
+    inner_df = sdOctogon(v_data.xy, r);
+  } else if (shape == 6) {
+    outer_df = sdHexagram(v_data.xy, 0.52);
+    inner_df = sdHexagram(v_data.xy, r * 0.52);
+  } else if (shape == 7) {
+    outer_df = sdRhombus(v_data.xy, vec2(1.0));
+    inner_df = sdRhombus(v_data.xy, vec2(r));
+  } else if (shape == 8) {
+    outer_df = sdVesica(v_data.xy, 1.1, 0.8);
+    inner_df = sdVesica(v_data.xy, r * 1.1, r * 0.8);
+  }
+
+
+  float opacity_t = smoothstep(0.0, antialiasblur, outer_df);
+
+  float color_t = strokeWidth < 0.01 ? 0.0 : smoothstep(
+    antialiasblur,
+    0.0,
+    inner_df
+  );
+
+  if(strokeWidth < 0.01) {
+    gl_FragColor = vec4(v_color.rgb, v_color.a * opacity);
+  } else {
+    gl_FragColor = mix(vec4(v_color.rgb, v_color.a * opacity), strokeColor * stroke_opacity, color_t);
+  }
+
+  if(u_additive > 0.0) {
+    gl_FragColor *= opacity_t;
+    gl_FragColor = filterColorAlpha(gl_FragColor, gl_FragColor.a);
+  } else {
+    gl_FragColor.a *= opacity_t;
+    gl_FragColor = filterColor(gl_FragColor);
+  }
+}

package/lib/point/shaders/tile/fill_tile_vert.glsl

@@ -0,0 +1,181 @@
+attribute vec4 a_Color;
+attribute vec3 a_Position;
+attribute vec3 a_Extrude;
+attribute float a_Size;
+attribute float a_Shape;
+
+varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
+
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+uniform float u_isMeter;
+
+uniform vec2 u_tileOrigin;
+uniform float u_coord;
+
+varying vec4 v_data;
+varying vec4 v_color;
+varying float v_radius;
+
+uniform float u_opacity : 1;
+uniform float u_stroke_opacity : 1;
+uniform float u_stroke_width : 2;
+uniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];
+uniform vec2 u_offsets;
+
+uniform float u_blur : 0.0;
+
+#pragma include "styleMapping"
+#pragma include "styleMappingCalOpacity"
+#pragma include "styleMappingCalStrokeOpacity"
+#pragma include "styleMappingCalStrokeWidth"
+
+#pragma include "projection"
+#pragma include "picking"
+
+void main() {
+  vec3 extrude = a_Extrude;
+  float shape_type = a_Shape;
+  float newSize = setPickingSize(a_Size);
+
+  // cal style mapping - 数据纹理映射部分的计算
+  styleMappingMat = mat4(
+    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
+    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
+    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
+    0.0, 0.0, 0.0, 0.0
+  );
+
+  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
+  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
+  float columnWidth = 1.0/columnCount;  // 列宽
+  float rowHeight = 1.0/rowCount;       // 行高
+  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
+  float id = a_vertexId; // 第n个顶点
+  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
+  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
+  
+  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... 
+  // 按顺序从 cell 中取值、若没有则自动往下取值
+  float textureOffset = 0.0; // 在 cell 中取值的偏移量
+
+  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
+  styleMappingMat[0][0] = opacityAndOffset.r;
+  textureOffset = opacityAndOffset.g;
+
+  vec2 strokeOpacityAndOffset = calStrokeOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
+  styleMappingMat[0][1] = strokeOpacityAndOffset.r;
+  textureOffset = strokeOpacityAndOffset.g;
+
+  vec2 strokeWidthAndOffset = calStrokeWidthAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
+  styleMappingMat[0][2] = strokeWidthAndOffset.r;
+  textureOffset = strokeWidthAndOffset.g;
+
+  vec4 textrueStroke = vec4(-1.0, -1.0, -1.0, -1.0);
+  if(hasStroke()) {
+    vec2 valueRPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
+    styleMappingMat[1][0] = pos2value(valueRPos, columnWidth, rowHeight); // R
+    textureOffset += 1.0;
+
+    vec2 valueGPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
+    styleMappingMat[1][1] = pos2value(valueGPos, columnWidth, rowHeight); // G
+    textureOffset += 1.0;
+
+    vec2 valueBPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
+    styleMappingMat[1][2] = pos2value(valueBPos, columnWidth, rowHeight); // B
+    textureOffset += 1.0;
+
+    vec2 valueAPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
+    styleMappingMat[1][3] = pos2value(valueAPos, columnWidth, rowHeight); // A
+    textureOffset += 1.0;
+  } else {
+    if(u_stroke_color == vec4(0.0)) {
+      styleMappingMat[1][0] = v_color.r;
+      styleMappingMat[1][1] = v_color.g;
+      styleMappingMat[1][2] = v_color.b;
+      styleMappingMat[1][3] = v_color.a;
+    } else {
+      styleMappingMat[1][0] = u_stroke_color.r;
+      styleMappingMat[1][1] = u_stroke_color.g;
+      styleMappingMat[1][2] = u_stroke_color.b;
+      styleMappingMat[1][3] = u_stroke_color.a;
+    }
+  }
+
+  vec2 textrueOffsets = vec2(0.0, 0.0);
+  if(hasOffsets()) {
+    vec2 valueXPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
+    textrueOffsets.r = pos2value(valueXPos, columnWidth, rowHeight); // x
+    textureOffset += 1.0;
+
+    vec2 valueYPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
+    textrueOffsets.g = pos2value(valueYPos, columnWidth, rowHeight); // x
+    textureOffset += 1.0;
+  } else {
+    textrueOffsets = u_offsets;
+  }
+
+  // cal style mapping
+
+  v_color = a_Color;
+  v_radius = newSize;
+
+  // anti-alias
+  //  float antialiased_blur = -max(u_blur, antialiasblur);
+  float antialiasblur = -max(2.0 / u_DevicePixelRatio / a_Size, u_blur);
+
+  vec2 offset = (extrude.xy * (newSize + u_stroke_width) + textrueOffsets);
+  vec3 aPosition = a_Position;
+  if(u_isMeter < 1.0) {
+    // 不以米为实际单位
+    offset = project_pixel(offset);
+  } else {
+    // 以米为实际单位
+    antialiasblur *= pow(19.0 - u_Zoom, 2.0);
+    antialiasblur = max(antialiasblur, -0.01);
+    // offset *= 0.5;
+
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+      aPosition.xy += offset;
+      offset.x = 0.0;
+      offset.y = 0.0;
+    }
+  }
+
+  v_data = vec4(extrude.x, extrude.y, antialiasblur,shape_type);
+
+  vec4 project_pos = project_position(vec4(aPosition.xy, 0.0, 1.0));
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+    float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
+  }
+
+if(u_coord > 0.0) {
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    gl_Position = u_Mvp * vec4(project_pos.xy + offset, 0.0, 1.0);
+  } else {
+    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));
+  }
+} else {
+  gl_PointSize = 24.0;
+  vec2 pointPos = a_Position.xy;
+  vec4 world = vec4(project_mvt_offset_position(vec4(u_tileOrigin, 0.0, 1.0)).xyz, 1.0); // 瓦片起始点的世界坐标
+
+  vec2 pointOffset =  pointPos *  pow(2.0, u_Zoom); // 瓦片内的点的偏移坐标
+  
+  world.xy += offset;
+  world.xy += pointOffset;
+
+  if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+    // Needs to be divided with project_uCommonUnitsPerMeter
+    world.w *= u_PixelsPerMeter.z;
+  }
+
+  gl_Position = u_ViewProjectionMatrix * world + u_ViewportCenterProjection;
+}
+
+ 
+  setPickingColor(a_PickingColor);
+
+
+}