@antv/l7-layers 2.23.2 → 2.23.3-beta.0

package/es/{citybuliding → citybuilding}/models/build.js

@@ -55,8 +55,10 @@ export default class CityBuildModel extends BaseModel {
     return commonBufferInfo;
   }
   calCityGeo() {
-    // @ts-ignore
-    const [minLng, minLat, maxLng, maxLat] = this.layer.getSource().extent;
+    // 当启用 enableRelativeCoordinates 时，使用 originalExtent（原始绝对坐标范围）
+    const originalExtent = this.layer.getOriginalExtent();
+    const extent = originalExtent[0] !== 0 || originalExtent[2] !== 0 ? originalExtent : this.layer.getSource().extent;
+    const [minLng, minLat, maxLng, maxLat] = extent;
     const w = maxLng - minLng;
     const h = maxLat - minLat;
     this.cityCenter = [(maxLng + minLng) / 2, (maxLat + minLat) / 2];

package/es/core/BaseLayer.js

@@ -961,12 +961,12 @@ export default class BaseLayer extends EventEmitter {
     return this.styleAttributeService.getLayerAttributeScale(name);
   }
   getLegend(name) {
-    var _attribute$scale, _scales$, _attribute$scale2;
+    var _attribute$scale, _scales$, _scales$2;
     const attribute = this.styleAttributeService.getLayerStyleAttribute(name);
     const scales = (attribute === null || attribute === void 0 || (_attribute$scale = attribute.scale) === null || _attribute$scale === void 0 ? void 0 : _attribute$scale.scalers) || [];
     return {
       type: (_scales$ = scales[0]) === null || _scales$ === void 0 || (_scales$ = _scales$.option) === null || _scales$ === void 0 ? void 0 : _scales$.type,
-      field: attribute === null || attribute === void 0 || (_attribute$scale2 = attribute.scale) === null || _attribute$scale2 === void 0 ? void 0 : _attribute$scale2.field,
+      field: (_scales$2 = scales[0]) === null || _scales$2 === void 0 ? void 0 : _scales$2.field,
       items: this.getLegendItems(name)
     };
   }
@@ -1210,7 +1210,7 @@ export default class BaseLayer extends EventEmitter {
    * 继承空方法
    * @param time
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   setEarthTime(time) {
     console.warn('empty fn');
   }

package/es/core/LayerPickService.js

@@ -39,7 +39,9 @@ export default class BaseLayerPickService {
     const container = this.layer.getContainer();
     const pickingService = container.pickingService;
     const mapService = container.mapService;
-    const extent = this.layer.getSource().extent;
+    // 当启用 enableRelativeCoordinates 时，使用 originalExtent 判断绝对坐标是否在范围内
+    const originalExtent = this.layer.getOriginalExtent();
+    const extent = originalExtent[0] !== 0 || originalExtent[2] !== 0 ? originalExtent : this.layer.getSource().extent;
     const isPick = lngLatInExtent(target.lngLat, extent);
     const layerTarget = {
       x: target.x,

package/es/core/shape/Path.d.ts

@@ -18,8 +18,9 @@ export declare enum ShapeType2D {
  * 生成规则多边形顶点个数
  * @param pointCount  顶点个数 3 => 三角形
  * @param start 顶点起始角度 调整图形的方向
+ * @param angleOffset 额外的角度偏移，用于调整六边形方向
  */
-export declare function polygonPath(pointCount: number, start?: number): IPath;
+export declare function polygonPath(pointCount: number, start?: number, angleOffset?: number): IPath;
 export declare function circle(): IPath;
 export declare function square(): IPath;
 export declare function triangle(): IPath;

package/es/core/shape/Path.js

@@ -19,16 +19,17 @@ export let ShapeType2D = /*#__PURE__*/function (ShapeType2D) {
  * 生成规则多边形顶点个数
  * @param pointCount  顶点个数 3 => 三角形
  * @param start 顶点起始角度 调整图形的方向
+ * @param angleOffset 额外的角度偏移，用于调整六边形方向
  */
-export function polygonPath(pointCount, start = 0) {
+export function polygonPath(pointCount, start = 0, angleOffset = Math.PI / 4) {
   const step = Math.PI * 2 / pointCount;
   const line = [];
   for (let i = 0; i < pointCount; i++) {
     line.push(step * i + start * Math.PI / 12);
   }
   const path = line.map(t => {
-    const x = Math.sin(t + Math.PI / 4);
-    const y = Math.cos(t + Math.PI / 4);
+    const x = Math.sin(t + angleOffset);
+    const y = Math.cos(t + angleOffset);
     return [x, y, 0];
   });
   // path.push(path[0]);
@@ -44,7 +45,12 @@ export function triangle() {
   return polygonPath(3);
 }
 export function hexagon() {
-  return polygonPath(6, 1);
+  // 生成 pointy-top 六边形（尖角朝上）
+  // 使用 angleOffset = 0 并翻转 y 方向，以匹配 d3-hexbin 的方向
+  // d3-hexbin 在屏幕坐标系中 y 向下为正，使用 y = -cos(angle)
+  // 我们需要翻转 y 坐标以确保蜂窝网格闭合
+  const path = polygonPath(6, 0, 0);
+  return path.map(p => [p[0], -p[1], p[2]]);
 }
 export function pentagon() {
   return polygonPath(5);

package/es/core/triangulation.js

@@ -7,6 +7,56 @@ import ExtrudePolyline from "../utils/extrude_polyline";
 import { geometryShape } from "./shape/Path";
 import extrudePolygon, { extrude_PolygonNormal, fillPolygon } from "./shape/extrude";
 import { getPolygonSurfaceIndices } from "./utils";
+
+/**
+ * 质心计算缓存
+ * 避免对相同坐标的重复计算
+ */
+
+const centroidCache = {};
+const CENTROID_CACHE_MAX_SIZE = 500;
+
+/**
+ * 生成坐标的缓存键
+ */
+function getCoordinateKey(coordinates) {
+  if (typeof coordinates === 'number') {
+    return String(coordinates);
+  }
+  if (Array.isArray(coordinates)) {
+    if (typeof coordinates[0] === 'number') {
+      return coordinates.slice(0, 2).join(',');
+    }
+    // 对于嵌套数组，取第一个点
+    return getCoordinateKey(coordinates[0]);
+  }
+  return '';
+}
+
+/**
+ * 带缓存的质心计算
+ */
+function cachedCalculateCentroid(coordinates) {
+  const key = getCoordinateKey(coordinates);
+  if (key && centroidCache[key]) {
+    return centroidCache[key].slice();
+  }
+  const centroid = calculateCentroid(coordinates);
+
+  // 限制缓存大小
+  const keys = Object.keys(centroidCache);
+  if (keys.length >= CENTROID_CACHE_MAX_SIZE) {
+    // 删除一半的缓存
+    const deleteCount = Math.floor(CENTROID_CACHE_MAX_SIZE / 2);
+    for (let i = 0; i < deleteCount; i++) {
+      delete centroidCache[keys[i]];
+    }
+  }
+  if (key) {
+    centroidCache[key] = centroid.slice();
+  }
+  return centroid;
+}
 const GeometryCache = {};
 
 /**
@@ -15,7 +65,7 @@ const GeometryCache = {};
  */
 
 export function PointFillTriangulation(feature) {
-  const coordinates = calculateCentroid(feature.coordinates);
+  const coordinates = cachedCalculateCentroid(feature.coordinates);
   return {
     vertices: [...coordinates, ...coordinates, ...coordinates, ...coordinates],
     indices: [0, 1, 2, 2, 3, 0],

package/es/earth/index.js

@@ -44,9 +44,8 @@ export default class EarthLayer extends BaseLayer {
     }
   }
   getModelType() {
-    var _shapeAttribute$scale;
-    const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute('shape');
-    let shape = (shapeAttribute === null || shapeAttribute === void 0 || (_shapeAttribute$scale = shapeAttribute.scale) === null || _shapeAttribute$scale === void 0 ? void 0 : _shapeAttribute$scale.field) || 'base';
+    var _this$shapeOption;
+    let shape = ((_this$shapeOption = this.shapeOption) === null || _this$shapeOption === void 0 ? void 0 : _this$shapeOption.field) || 'base';
     if (earthLayerTypes.indexOf(shape) < 0) {
       shape = 'base';
     }

package/es/geometry/index.js

@@ -38,9 +38,8 @@ export default class GeometryLayer extends BaseLayer {
     return defaultConfig[type];
   }
   getModelType() {
-    var _shapeAttribute$scale;
-    const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute('shape');
-    const shape = shapeAttribute === null || shapeAttribute === void 0 || (_shapeAttribute$scale = shapeAttribute.scale) === null || _shapeAttribute$scale === void 0 ? void 0 : _shapeAttribute$scale.field;
+    var _this$shapeOption;
+    const shape = (_this$shapeOption = this.shapeOption) === null || _this$shapeOption === void 0 ? void 0 : _this$shapeOption.field;
     if (shape === 'plane') {
       return 'plane';
     } else if (shape === 'sprite') {

package/es/heatmap/index.js

@@ -52,22 +52,22 @@ export default class HeatMapLayer extends BaseLayer {
     }
   }
   getModelType() {
-    var _shapeAttribute$scale;
-    const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute('shape');
+    var _source$data, _this$shapeOption;
     const {
       shape3d
     } = this.getLayerConfig();
     const source = this.getSource();
-    const sourceType = source.data.type;
-    const shape = (shapeAttribute === null || shapeAttribute === void 0 || (_shapeAttribute$scale = shapeAttribute.scale) === null || _shapeAttribute$scale === void 0 ? void 0 : _shapeAttribute$scale.field) || 'heatmap';
+    const sourceType = source === null || source === void 0 || (_source$data = source.data) === null || _source$data === void 0 ? void 0 : _source$data.type;
+    const shape = ((_this$shapeOption = this.shapeOption) === null || _this$shapeOption === void 0 ? void 0 : _this$shapeOption.field) || 'heatmap';
+    const isShape3D = Array.isArray(shape3d) && shape3d.includes(shape);
     if (shape === 'heatmap' || shape === 'heatmap3d') {
       return 'heatmap';
     }
     if (sourceType === 'hexagon') {
-      return (shape3d === null || shape3d === void 0 ? void 0 : shape3d.indexOf(shape)) === -1 ? 'hexagon' : 'grid3d';
+      return isShape3D ? 'grid3d' : 'hexagon';
     }
     if (sourceType === 'grid') {
-      return (shape3d === null || shape3d === void 0 ? void 0 : shape3d.indexOf(shape)) === -1 ? 'grid' : 'grid3d';
+      return isShape3D ? 'grid3d' : 'grid';
     }
     return 'heatmap';
   }

package/es/heatmap/models/heatmap.js

@@ -75,14 +75,13 @@ export default class HeatMapModel extends BaseModel {
   initModels() {
     var _this = this;
     return _asyncToGenerator(function* () {
-      var _shapeAttr$scale;
+      var _this$layer$shapeOpti;
       const {
         createFramebuffer,
         getViewportSize,
         createTexture2D
       } = _this.rendererService;
-      const shapeAttr = _this.styleAttributeService.getLayerStyleAttribute('shape');
-      const shapeType = (shapeAttr === null || shapeAttr === void 0 || (_shapeAttr$scale = shapeAttr.scale) === null || _shapeAttr$scale === void 0 ? void 0 : _shapeAttr$scale.field) || 'heatmap';
+      const shapeType = ((_this$layer$shapeOpti = _this.layer.shapeOption) === null || _this$layer$shapeOpti === void 0 ? void 0 : _this$layer$shapeOpti.field) || 'heatmap';
       _this.shapeType = shapeType;
       // 生成热力图密度图
       _this.intensityModel = yield _this.buildHeatMapIntensity();

package/es/index.d.ts

@@ -1,5 +1,5 @@
 import CanvasLayer from './canvas';
-import CityBuildingLayer from './citybuliding/building';
+import CityBuildingLayer from './citybuilding/building';
 import BaseLayer from './core/BaseLayer';
 import BaseModel from './core/BaseModel';
 import GeometryLayer from './geometry';

package/es/index.js

@@ -1,5 +1,5 @@
 import CanvasLayer from "./canvas";
-import CityBuildingLayer from "./citybuliding/building";
+import CityBuildingLayer from "./citybuilding/building";
 import BaseLayer from "./core/BaseLayer";
 import BaseModel from "./core/BaseModel";
 import GeometryLayer from "./geometry"; // 逐步替换为 Geometry

package/es/line/index.js

@@ -60,12 +60,11 @@ export default class LineLayer extends BaseLayer {
     return defaultConfig[type];
   }
   getModelType() {
-    var _shapeAttribute$scale;
+    var _this$shapeOption;
     if (this.layerType) {
       return this.layerType;
     }
-    const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute('shape');
-    const shape = shapeAttribute === null || shapeAttribute === void 0 || (_shapeAttribute$scale = shapeAttribute.scale) === null || _shapeAttribute$scale === void 0 ? void 0 : _shapeAttribute$scale.field;
+    const shape = (_this$shapeOption = this.shapeOption) === null || _this$shapeOption === void 0 ? void 0 : _this$shapeOption.field;
     return shape || 'line';
   }
   processData(filterData) {

package/es/plugins/DataMappingPlugin.js

@@ -85,19 +85,39 @@ export default class DataMappingPlugin {
     const {
       dataArray
     } = layer.getSource().data;
-    let filterData = dataArray;
-    // 数据过滤完 再执行数据映射
-    if (filter !== null && filter !== void 0 && filter.scale) {
-      filterData = dataArray.filter(record => {
-        return this.applyAttributeMapping(filter, record)[0];
-      });
+
+    // 优化：合并过滤和准备阶段为单次遍历
+    const usedAttributes = attributes.filter(attribute => attribute.scale !== undefined).filter(attribute => attribute.name !== 'filter');
+    const hasFilter = filter === null || filter === void 0 ? void 0 : filter.scale;
+
+    // 第一阶段：过滤原始数据（需要在 processData 之前）
+    let filterData = [];
+    if (hasFilter) {
+      for (let i = 0; i < dataArray.length; i++) {
+        const record = dataArray[i];
+        const filterResult = this.applyAttributeMapping(filter, record);
+        if (filterResult[0]) {
+          filterData.push(record);
+        }
+      }
+    } else {
+      filterData = dataArray;
     }
-    // Tip: layer 对数据做处理
+
+    // Tip: layer 对数据做处理（需要处理原始数据格式）
     // 数据处理 在数据进行 mapping 生成 encodeData 之前对数据进行处理
-    // 在各个 layer 中继承
+    const processedFilterData = layer.processData(filterData);
+
+    // 第二阶段：数据映射
+    const encodeData = this.mapping(layer, usedAttributes, processedFilterData, undefined);
 
-    filterData = layer.processData(filterData); // 目前只有简单线需要处理
-    const encodeData = this.mapping(layer, attributes, filterData, undefined);
+    // 重置属性状态
+    attributes.forEach(attribute => {
+      attribute.needRemapping = false;
+    });
+
+    // 调整数据兼容 SimpleCoordinates
+    this.adjustData2SimpleCoordinates(encodeData);
     layer.setEncodedData(encodeData);
 
     // 对外暴露事件

package/es/plugins/FeatureScalePlugin.js

@@ -2,29 +2,28 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { IDebugLog, ILayerStage, ScaleTypes, StyleScaleType } from '@antv/l7-core';
-import { lodashUtil } from '@antv/l7-utils';
-import { extent } from 'd3-array';
-import * as d3interpolate from 'd3-interpolate';
-import * as d3 from 'd3-scale';
+import { interpolateRgbBasis, lodashUtil } from '@antv/l7-utils';
 import identity from "../utils/identityScale";
+import { scaleDiverging, scaleLinear, scaleLog, scaleOrdinal, scalePow, scaleQuantile, scaleQuantize, scaleSequential, scaleThreshold, scaleTime } from "../utils/scale";
 const {
   isNil,
   isString,
-  uniq
+  uniq,
+  extent
 } = lodashUtil;
 const dateRegex = /^(?:(?!0000)[0-9]{4}([-/.]+)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-/.]?)0?2\2(?:29))(\s+([01]|([01][0-9]|2[0-3])):([0-9]|[0-5][0-9]):([0-9]|[0-5][0-9]))?$/;
 const scaleMap = {
-  [ScaleTypes.LINEAR]: d3.scaleLinear,
-  [ScaleTypes.POWER]: d3.scalePow,
-  [ScaleTypes.LOG]: d3.scaleLog,
+  [ScaleTypes.LINEAR]: scaleLinear,
+  [ScaleTypes.POWER]: scalePow,
+  [ScaleTypes.LOG]: scaleLog,
   [ScaleTypes.IDENTITY]: identity,
-  [ScaleTypes.SEQUENTIAL]: d3.scaleSequential,
-  [ScaleTypes.TIME]: d3.scaleTime,
-  [ScaleTypes.QUANTILE]: d3.scaleQuantile,
-  [ScaleTypes.QUANTIZE]: d3.scaleQuantize,
-  [ScaleTypes.THRESHOLD]: d3.scaleThreshold,
-  [ScaleTypes.CAT]: d3.scaleOrdinal,
-  [ScaleTypes.DIVERGING]: d3.scaleDiverging
+  [ScaleTypes.SEQUENTIAL]: scaleSequential,
+  [ScaleTypes.TIME]: scaleTime,
+  [ScaleTypes.QUANTILE]: scaleQuantile,
+  [ScaleTypes.QUANTIZE]: scaleQuantize,
+  [ScaleTypes.THRESHOLD]: scaleThreshold,
+  [ScaleTypes.CAT]: scaleOrdinal,
+  [ScaleTypes.DIVERGING]: scaleDiverging
 };
 /**
  * 根据 Source 原始数据为指定字段创建 Scale，保存在 StyleAttribute 上，供下游插件使用
@@ -99,7 +98,6 @@ export default class FeatureScalePlugin {
       if (attribute.scale) {
         // 创建Scale
         const attributeScale = attribute.scale;
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const fieldValue = attribute.scale.field;
         attributeScale.names = this.parseFields(isNil(fieldValue) ? [] : fieldValue);
         const scales = [];
@@ -141,7 +139,7 @@ export default class FeatureScalePlugin {
                 case ScaleTypes.SEQUENTIAL:
                   scale.scale.interpolator(
                   // @ts-ignore
-                  d3interpolate.interpolateRgbBasis(attributeScale.values));
+                  interpolateRgbBasis(attributeScale.values));
                   break;
               }
             }
@@ -198,16 +196,15 @@ export default class FeatureScalePlugin {
       if (scaleOption && scaleOption.type) {
         styleScale.scale = this.createDefaultScale(scaleOption);
       } else {
-        styleScale.scale = d3.scaleOrdinal([field]);
+        styleScale.scale = scaleOrdinal([field]);
         styleScale.type = StyleScaleType.CONSTANT;
       }
       return styleScale;
     }
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const firstValue = (_find = data.find(d => !isNil(d[field]))) === null || _find === void 0 ? void 0 : _find[field];
     // 常量 Scale
     if (this.isNumber(field) || isNil(firstValue) && !scaleOption) {
-      styleScale.scale = d3.scaleOrdinal([field]);
+      styleScale.scale = scaleOrdinal([field]);
       styleScale.type = StyleScaleType.CONSTANT;
     } else {
       // 根据数据类型判断 默认等分位，时间，和枚举类型
@@ -219,6 +216,10 @@ export default class FeatureScalePlugin {
       if (values === undefined) {
         type = ScaleTypes.IDENTITY;
       }
+      if (name === 'color' && Array.isArray(values) && values.length && values.every(value => isString(value)) && (type === ScaleTypes.LINEAR || type === ScaleTypes.POWER || type === ScaleTypes.LOG)) {
+        // Color ramps should use interpolated scales to avoid numeric-only ranges.
+        type = ScaleTypes.SEQUENTIAL;
+      }
       const cfg = this.createScaleConfig(type, field, scaleOption, data);
       styleScale.scale = this.createDefaultScale(cfg);
       styleScale.option = cfg;

package/es/plugins/ShaderUniformPlugin.js

@@ -32,7 +32,7 @@ export default class ShaderUniformPlugin {
     let uniformBuffer;
     if (!this.rendererService.uniformBuffers[0]) {
       // Create a Uniform Buffer Object(UBO).
-      // Size calculation: 4 mat4 (64) + 1 vec4 (4) + 4 vec3->vec4 (16) + 3 vec4 packed (12) = 96 floats
+      // Total size: 93 floats, round up to 96 for safety
       uniformBuffer = this.rendererService.createBuffer({
         data: new Float32Array(96),
         isUBO: true,
@@ -105,34 +105,67 @@ export default class ShaderUniformPlugin {
     const u_ViewportSize = [width, height];
     const u_FocalDistance = this.cameraService.getFocalDistance();
     const u_RelativeOrigin = offset && offset.length >= 2 ? [offset[0], offset[1]] : [0, 0];
-    const data = [...u_ViewMatrix,
-    // 16
-    ...u_ProjectionMatrix,
-    // 16
-    ...u_ViewProjectionMatrix,
-    // 16
-    ...u_ModelMatrix,
-    // 16
-    ...u_ViewportCenterProjection,
-    // 4
-    ...u_PixelsPerDegree,
-    // 4
-    u_Zoom, ...u_PixelsPerDegree2,
-    // 4
-    u_ZoomScale, ...u_PixelsPerMeter,
-    // 4
-    u_CoordinateSystem, ...u_CameraPosition,
-    // 4
-    u_DevicePixelRatio,
-    // 4
-    ...u_ViewportCenter, ...u_ViewportSize,
-    // 4
-    u_FocalDistance,
-    // 1
-    ...u_RelativeOrigin,
-    // 2
-    0 // padding
-    ];
+
+    // Build UBO data array matching GLSL std140 layout
+    // std140 rules:
+    // - mat4: 16-byte aligned, size 64 bytes (16 floats)
+    // - vec4: 16-byte aligned, size 16 bytes (4 floats)
+    // - vec3: 16-byte aligned, size 12 bytes (3 floats) - next member can follow if aligned
+    // - vec2: 8-byte aligned, size 8 bytes (2 floats)
+    // - float: 4-byte aligned, size 4 bytes (1 float)
+    // Key: vec3 only occupies 3 floats, NOT 4. The alignment requirement is for START position.
+    const floats = [];
+
+    // mat4 x 4: each 16 floats, all start at multiples of 4 floats (16-byte aligned)
+    floats.push(...u_ViewMatrix); // floats 0-15
+    floats.push(...u_ProjectionMatrix); // floats 16-31
+    floats.push(...u_ViewProjectionMatrix); // floats 32-47
+    floats.push(...u_ModelMatrix); // floats 48-63
+
+    // vec4: 4 floats, starts at float 64 (64 % 4 = 0 ✓)
+    floats.push(...u_ViewportCenterProjection); // floats 64-67
+
+    // vec3: 3 floats only, starts at float 68 (68 % 4 = 0 ✓)
+    floats.push(...u_PixelsPerDegree); // floats 68-70 (NOT 68-71!)
+
+    // float: starts at float 71, any position is fine for 4-byte alignment
+    floats.push(u_Zoom); // float 71
+
+    // vec3: needs 4-float alignment, 72 % 4 = 0 ✓
+    floats.push(...u_PixelsPerDegree2); // floats 72-74
+
+    // float: starts at float 75
+    floats.push(u_ZoomScale); // float 75
+
+    // vec3: needs 4-float alignment, 76 % 4 = 0 ✓
+    floats.push(...u_PixelsPerMeter); // floats 76-78
+
+    // float: starts at float 79
+    floats.push(u_CoordinateSystem); // float 79
+
+    // vec3: needs 4-float alignment, 80 % 4 = 0 ✓
+    floats.push(...u_CameraPosition); // floats 80-82
+
+    // float: starts at float 83
+    floats.push(u_DevicePixelRatio); // float 83
+
+    // vec2: needs 2-float alignment, 84 % 2 = 0 ✓
+    floats.push(...u_ViewportCenter); // floats 84-85
+
+    // vec2: needs 2-float alignment, 86 % 2 = 0 ✓
+    floats.push(...u_ViewportSize); // floats 86-87
+
+    // float: starts at float 88
+    floats.push(u_FocalDistance); // float 88
+
+    // vec2: needs 2-float alignment, 89 % 2 = 1, NOT aligned!
+    floats.push(0); // padding float 89
+    floats.push(...u_RelativeOrigin); // floats 90-91
+
+    // float u_Reserved3
+    floats.push(0); // float 92
+
+    const data = floats;
     return {
       data,
       uniforms: {

package/es/polygon/index.js

@@ -19,9 +19,8 @@ export default class PolygonLayer extends BaseLayer {
     })();
   }
   getModelType() {
-    var _shapeAttribute$scale;
-    const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute('shape');
-    const shape = shapeAttribute === null || shapeAttribute === void 0 || (_shapeAttribute$scale = shapeAttribute.scale) === null || _shapeAttribute$scale === void 0 ? void 0 : _shapeAttribute$scale.field;
+    var _this$shapeOption;
+    const shape = (_this$shapeOption = this.shapeOption) === null || _this$shapeOption === void 0 ? void 0 : _this$shapeOption.field;
     if (shape === 'fill' || !shape) {
       return 'fill';
     } else if (shape === 'extrude') {

package/es/polygon/models/extrude.js

@@ -137,10 +137,6 @@ export default class ExtrudeModel extends BaseModel {
     this.textures = [];
   }
   registerBuiltinAttributes() {
-    const bounds = this.layer.getSource().extent;
-    const lngLen = bounds[2] - bounds[0];
-    const latLen = bounds[3] - bounds[1];
-
     // 注册 Position 属性 64 位地位部分，经纬度数据开启双精度，避免大于 22 层级以上出现数据偏移
     this.registerPosition64LowAttribute();
     this.styleAttributeService.registerStyleAttribute({
@@ -157,10 +153,29 @@ export default class ExtrudeModel extends BaseModel {
         },
         size: 3,
         update: (feature, featureIdx, vertex) => {
-          const lng = vertex[0];
-          const lat = vertex[1];
+          // 当启用 enableRelativeCoordinates 时：
+          // - vertex 是相对坐标（相对于 relativeOrigin 的偏移）
+          // - 需要将相对坐标转换回绝对坐标后，用 originalExtent 计算 UV
+          const originalExtent = this.layer.getOriginalExtent();
+          const relativeOrigin = this.layer.getRelativeOrigin();
+          const isRelativeCoordinates = originalExtent[0] !== 0 || originalExtent[2] !== 0;
+          let lng, lat;
+          let minLng, minLat, maxLng, maxLat;
+          if (isRelativeCoordinates && relativeOrigin) {
+            // 相对坐标模式：转换回绝对坐标
+            lng = vertex[0] + relativeOrigin[0];
+            lat = vertex[1] + relativeOrigin[1];
+            [minLng, minLat, maxLng, maxLat] = originalExtent;
+          } else {
+            // 绝对坐标模式
+            lng = vertex[0];
+            lat = vertex[1];
+            [minLng, minLat, maxLng, maxLat] = this.layer.getSource().extent;
+          }
+          const lngLen = maxLng - minLng;
+          const latLen = maxLat - minLat;
           // 临时 兼容高德V2
-          return [(lng - bounds[0]) / lngLen, (lat - bounds[1]) / latLen, vertex[4]];
+          return [(lng - minLng) / lngLen, (lat - minLat) / latLen, vertex[4]];
         }
       }
     });

package/es/polygon/models/ocean.js

@@ -85,10 +85,6 @@ export default class OceanModel extends BaseModel {
     (_this$texture3 = this.texture3) === null || _this$texture3 === void 0 || _this$texture3.destroy();
   }
   registerBuiltinAttributes() {
-    const bbox = this.layer.getSource().extent;
-    const [minLng, minLat, maxLng, maxLat] = bbox;
-    const lngLen = maxLng - minLng;
-    const latLen = maxLat - minLat;
     this.styleAttributeService.registerStyleAttribute({
       name: 'oceanUv',
       type: AttributeType.Attribute,
@@ -96,14 +92,29 @@ export default class OceanModel extends BaseModel {
         name: 'a_uv',
         shaderLocation: this.attributeLocation.UV,
         buffer: {
-          // give the WebGL driver a hint that this buffer may change
           usage: gl.STATIC_DRAW,
           data: [],
           type: gl.FLOAT
         },
         size: 2,
         update: (feature, featureIdx, vertex) => {
-          const [lng, lat] = vertex;
+          // 当启用 enableRelativeCoordinates 时：需要将相对坐标转换回绝对坐标
+          const originalExtent = this.layer.getOriginalExtent();
+          const relativeOrigin = this.layer.getRelativeOrigin();
+          const isRelativeCoordinates = originalExtent[0] !== 0 || originalExtent[2] !== 0;
+          let lng, lat;
+          let minLng, minLat, maxLng, maxLat;
+          if (isRelativeCoordinates && relativeOrigin) {
+            lng = vertex[0] + relativeOrigin[0];
+            lat = vertex[1] + relativeOrigin[1];
+            [minLng, minLat, maxLng, maxLat] = originalExtent;
+          } else {
+            lng = vertex[0];
+            lat = vertex[1];
+            [minLng, minLat, maxLng, maxLat] = this.layer.getSource().extent;
+          }
+          const lngLen = maxLng - minLng;
+          const latLen = maxLat - minLat;
           return [(lng - minLng) / lngLen, (lat - minLat) / latLen];
         }
       }