deeptwins-engine-3d 0.1.65 → 0.1.66

package/dist/esm/tileLayer/MvtVectorLoad.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../typings.d.ts" />
 import * as Cesium from 'deeptwins-cesium';
 import { MapContext } from '../map/Map';
 type TileState = 'none' | 'loading' | 'loaded' | 'error';

package/dist/esm/tool/common.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../typings.d.ts" />
 import * as Cesium from 'deeptwins-cesium';
 import { Cartesian2, Cartesian3 } from 'deeptwins-cesium';
 import { MapContext } from '../map/Map';

package/dist/esm/tool/utils.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../typings.d.ts" />
 import * as Cesium from 'deeptwins-cesium';
 import { Cartesian3 } from 'deeptwins-cesium';
 export declare const loadUMDModule: (url: string, moduleName: string) => Promise<unknown>;

package/dist/esm/typings.d.ts

@@ -13,3 +13,11 @@ declare const VERSION: string;
 // 在esm中会赋值给window.CESIUM_BASE_URL 使用本地代理
 // 在umd中会使用https://unpkg.com上相应版本的地址
 declare const DEEP_TWINS_BASE_URL: string;
+declare module 'deeptwins-cesium' {
+  export const BufferUsage: any;
+  export const DrawCommand: any;
+  export const Pass: any;
+  export const RenderState: any;
+  export const ShaderProgram: any;
+  export const VertexArray: any;
+}

package/dist/esm/visualization/BaseHeatmap.d.ts

@@ -22,5 +22,10 @@ export default class BaseHeatmap {
     _translatePositions(): void;
     private _computeBound;
     private _toRectangle;
+    private _getHeatmapConfig;
+    _getHeatValueRange(): {
+        minValue: any;
+        maxValue: number;
+    };
     destroy(): void;
 }

package/dist/esm/visualization/BaseHeatmap.js

@@ -1,9 +1,15 @@
 var _excluded = ["heading", "pitch", "scale"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -39,7 +45,7 @@ var BaseHeatmap = /*#__PURE__*/function () {
       _options$style = options.style,
       style = _options$style === void 0 ? {} : _options$style;
     this.id = uuidv4();
-    this.positions = positions;
+    this.positions = positions || [];
     this.style = merge(constant.DEFAULT_HEATMAP_STYLE(), cloneDeep(style));
   }
   _createClass(BaseHeatmap, [{
@@ -54,9 +60,7 @@ var BaseHeatmap = /*#__PURE__*/function () {
         return;
       }
       heatmapContainer.appendChild(el);
-      this.heatmapInstance = h337.create(_objectSpread({
-        container: el
-      }, this.style));
+      this.heatmapInstance = h337.create(this._getHeatmapConfig(el));
       this.canvasW = this.heatmapInstance._renderer.canvas.width;
       this.canvasH = this.heatmapInstance._renderer.canvas.height;
       this._translatePositions();
@@ -106,6 +110,12 @@ var BaseHeatmap = /*#__PURE__*/function () {
   }, {
     key: "_translatePositions",
     value: function _translatePositions() {
+      var _this$positions;
+      this.boundRect = undefined;
+      this.boundBox = undefined;
+      if (!((_this$positions = this.positions) !== null && _this$positions !== void 0 && _this$positions.length)) {
+        return;
+      }
       for (var i = 0; i < this.positions.length; i++) {
         var position = utils.lngLatAltToCartesian3(this.positions[i].lng, this.positions[i].lat);
         this.hierarchy.push(position);
@@ -118,14 +128,16 @@ var BaseHeatmap = /*#__PURE__*/function () {
       y_axios = Cesium.Cartesian3.normalize(y_axios, new Cesium.Cartesian3());
       var girthX = Cesium.Cartesian3.distance(this.boundBox.rightTop, this.boundBox.leftTop);
       var girthY = Cesium.Cartesian3.distance(this.boundBox.leftBottom, this.boundBox.leftTop);
+      var safeGirthX = girthX || 1;
+      var safeGirthY = girthY || 1;
       for (var _i = 0; _i < this.hierarchy.length; _i++) {
         var p1 = this.hierarchy[_i];
         var p_origin = Cesium.Cartesian3.subtract(p1, this.boundBox.leftTop, new Cesium.Cartesian3());
         var diffX = Cesium.Cartesian3.dot(p_origin, x_axios);
         var diffY = Cesium.Cartesian3.dot(p_origin, y_axios);
         this.sources.push({
-          x: Number(diffX / girthX * this.canvasW).toFixed(0),
-          y: Number(diffY / girthY * this.canvasH).toFixed(0),
+          x: Number(diffX / safeGirthX * this.canvasW).toFixed(0),
+          y: Number(diffY / safeGirthY * this.canvasH).toFixed(0),
           value: this.positions[_i].value
         });
       }
@@ -162,11 +174,13 @@ var BaseHeatmap = /*#__PURE__*/function () {
       }
       var diff_lat = maxLat - minLat;
       var diff_lng = maxLng - minLng;
+      var latPadding = diff_lat / length || 0.0001;
+      var lngPadding = diff_lng / length || 0.0001;
       this.boundRect = {
-        minLat: minLat - diff_lat / length,
-        maxLat: maxLat + diff_lat / length,
-        minLng: minLng - diff_lng / length,
-        maxLng: maxLng + diff_lng / length
+        minLat: minLat - latPadding,
+        maxLat: maxLat + latPadding,
+        minLng: minLng - lngPadding,
+        maxLng: maxLng + lngPadding
       };
       this.boundBox = {
         leftTop: Cesium.Cartesian3.fromDegrees(this.boundRect.minLng, this.boundRect.maxLat),
@@ -198,6 +212,34 @@ var BaseHeatmap = /*#__PURE__*/function () {
       return arr;
     }
 
+    // heatmap.js配置与Cesium业务样式分离，避免height误用为canvas高度
+  }, {
+    key: "_getHeatmapConfig",
+    value: function _getHeatmapConfig(container) {
+      var heatmapStyle = _objectSpread({}, this.style);
+      delete heatmapStyle.height;
+      delete heatmapStyle.heightReference;
+      delete heatmapStyle.perPositionHeight;
+      delete heatmapStyle.stretchingHeight;
+      return _objectSpread({
+        container: container
+      }, heatmapStyle);
+    }
+  }, {
+    key: "_getHeatValueRange",
+    value: function _getHeatValueRange() {
+      var _this$style$min, _this$style$max;
+      var minValue = (_this$style$min = this.style.min) !== null && _this$style$min !== void 0 ? _this$style$min : 0;
+      var sourceMaxValue = this.sources.length ? Math.max.apply(Math, _toConsumableArray(this.sources.map(function (t) {
+        return t.value;
+      }))) : minValue;
+      var maxValue = Math.max(minValue, (_this$style$max = this.style.max) !== null && _this$style$max !== void 0 ? _this$style$max : sourceMaxValue);
+      return {
+        minValue: minValue,
+        maxValue: maxValue
+      };
+    }
+
     // 销毁
   }, {
     key: "destroy",

package/dist/esm/visualization/Heatmap2d.d.ts

@@ -4,4 +4,5 @@ export default class Heatmap2d extends BaseHeatmap {
     addToMap(map: any): void;
     private _createPolygonEntity;
     setData(positions: any[]): void;
+    private _syncHeatmapData;
 }

package/dist/esm/visualization/Heatmap2d.js

@@ -1,10 +1,4 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -37,17 +31,8 @@ var Heatmap2d = /*#__PURE__*/function (_BaseHeatmap) {
       }
       this._mapContext = map._mapContext;
       this._init();
-      if (!this.boundBox) return;
-      var _this$style = this.style,
-        min = _this$style.min,
-        max = _this$style.max;
-      this.heatmapInstance.setData({
-        min: min || 0,
-        max: max || Math.max.apply(Math, _toConsumableArray(this.sources.map(function (t) {
-          return t.value;
-        }))),
-        data: this.sources
-      });
+      this._syncHeatmapData();
+      if (!this.boundBox || !this.heatmapInstance) return;
       this._createPolygonEntity();
     }
 
@@ -67,7 +52,7 @@ var Heatmap2d = /*#__PURE__*/function (_BaseHeatmap) {
           transparent: true
         }),
         heightReference: this.style.heightReference,
-        perPositionHeight: this.style.perPositionHeight
+        perPositionHeight: false
       };
       if (this.style.heightReference === Cesium.HeightReference.NONE) {
         polygonInfo.height = this.style.height;
@@ -85,18 +70,24 @@ var Heatmap2d = /*#__PURE__*/function (_BaseHeatmap) {
       if (!this._canOperate()) {
         return;
       }
+      this.positions = positions || [];
       this.hierarchy = [];
       this.sources = [];
-      this.positions = positions;
       this._translatePositions();
-      var _this$style2 = this.style,
-        min = _this$style2.min,
-        max = _this$style2.max;
+      this._syncHeatmapData();
+    }
+  }, {
+    key: "_syncHeatmapData",
+    value: function _syncHeatmapData() {
+      if (!this.boundBox || !this.heatmapInstance) {
+        return;
+      }
+      var _this$_getHeatValueRa = this._getHeatValueRange(),
+        minValue = _this$_getHeatValueRa.minValue,
+        maxValue = _this$_getHeatValueRa.maxValue;
       this.heatmapInstance.setData({
-        min: min || 0,
-        max: max || Math.max.apply(Math, _toConsumableArray(this.sources.map(function (t) {
-          return t.value;
-        }))),
+        min: minValue,
+        max: maxValue,
         data: this.sources
       });
     }

package/dist/esm/visualization/Heatmap3d.d.ts

@@ -2,7 +2,13 @@ import BaseHeatmap from './BaseHeatmap';
 export default class Heatmap3d extends BaseHeatmap {
     constructor(options?: any);
     addToMap(map: any): void;
-    _createPolygonPrimitive(): void;
+    setData(positions: any[]): void;
+    private _syncHeatmapData;
+    private _rebuildPrimitive;
+    private _createPolygonPrimitive;
     private _generateMeshData;
-    private _getShader;
+    private _appendSideSkirt;
+    private _sampleHeatPixel;
+    private _getRendererImageData;
+    private _getSideAlpha;
 }

package/dist/esm/visualization/Heatmap3d.js

@@ -1,10 +1,4 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -18,7 +12,13 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 import * as Cesium from 'deeptwins-cesium';
+import GeometryPrimitive from "../drawCommand/volumeCloud/GeometryPrimitive";
 import BaseHeatmap from "./BaseHeatmap";
+var MAX_GRID_SIZE = 300;
+var MIN_SURFACE_ALPHA = 0.18;
+var MIN_SIDE_ALPHA = 0.08;
+var VERTEX_SHADER_SOURCE = /* glsl */"\nin vec3 position3DHigh;\nin vec3 position3DLow;\nin vec4 color;\n\nout vec4 v_color;\n\nvec4 czm_computePosition() {\n    return czm_translateRelativeToEye(position3DHigh, position3DLow);\n}\n\nvoid main() {\n    vec4 p = czm_computePosition();\n    v_color = color;\n    gl_Position = czm_modelViewProjectionRelativeToEye * p;\n}\n";
+var FRAGMENT_SHADER_SOURCE = /* glsl */"\nin vec4 v_color;\n\nvoid main() {\n    vec4 color = czm_gammaCorrect(v_color);\n    if (color.a <= 0.001) {\n        discard;\n    }\n    out_FragColor = color;\n}\n";
 var Heatmap3d = /*#__PURE__*/function (_BaseHeatmap) {
   _inherits(Heatmap3d, _BaseHeatmap);
   var _super = _createSuper(Heatmap3d);
@@ -37,107 +37,243 @@ var Heatmap3d = /*#__PURE__*/function (_BaseHeatmap) {
       }
       this._mapContext = map._mapContext;
       this._init();
-      if (!this.boundBox) return;
-      var _this$style = this.style,
-        min = _this$style.min,
-        max = _this$style.max;
+      this._syncHeatmapData();
+      this._rebuildPrimitive();
+    }
+
+    // 更新数据
+  }, {
+    key: "setData",
+    value: function setData(positions) {
+      if (!this._canOperate()) {
+        return;
+      }
+      this.positions = positions;
+      this.hierarchy = [];
+      this.sources = [];
+      this._translatePositions();
+      this._syncHeatmapData();
+      this._rebuildPrimitive();
+    }
+  }, {
+    key: "_syncHeatmapData",
+    value: function _syncHeatmapData() {
+      if (!this.boundBox || !this.heatmapInstance) {
+        return;
+      }
+      var _this$_getHeatValueRa = this._getHeatValueRange(),
+        minValue = _this$_getHeatValueRa.minValue,
+        maxValue = _this$_getHeatValueRa.maxValue;
       this.heatmapInstance.setData({
-        min: min || 0,
-        max: max || Math.max.apply(Math, _toConsumableArray(this.sources.map(function (t) {
-          return t.value;
-        }))),
+        min: minValue,
+        max: maxValue,
         data: this.sources
       });
+    }
+  }, {
+    key: "_rebuildPrimitive",
+    value: function _rebuildPrimitive() {
+      if (!this.boundBox || !this.getMap()) {
+        return;
+      }
+      if (this.heatmapPrimitive) {
+        this.getMap().scene.primitives.remove(this.heatmapPrimitive);
+        this.heatmapPrimitive = null;
+      }
       this._createPolygonPrimitive();
     }
   }, {
     key: "_createPolygonPrimitive",
     value: function _createPolygonPrimitive() {
       var meshData = this._generateMeshData();
+      if (!meshData) {
+        return;
+      }
       var attributes = new Cesium.GeometryAttributes();
       attributes.position = new Cesium.GeometryAttribute({
         componentDatatype: Cesium.ComponentDatatype.DOUBLE,
         componentsPerAttribute: 3,
-        values: meshData.positions
+        values: new Float64Array(meshData.positions)
       });
-      attributes.st = new Cesium.GeometryAttribute({
-        componentDatatype: Cesium.ComponentDatatype.FLOAT,
-        componentsPerAttribute: 2,
-        values: new Float32Array(meshData.textureCoords)
+      attributes.color = new Cesium.GeometryAttribute({
+        componentDatatype: Cesium.ComponentDatatype.UNSIGNED_BYTE,
+        componentsPerAttribute: 4,
+        normalize: true,
+        values: new Uint8Array(meshData.colors)
       });
       var geometry = new Cesium.Geometry({
         attributes: attributes,
-        indices: new Uint16Array(meshData.indices),
+        indices: meshData.vertexCount > 65535 ? new Uint32Array(meshData.indices) : new Uint16Array(meshData.indices),
         primitiveType: Cesium.PrimitiveType.TRIANGLES,
         boundingSphere: Cesium.BoundingSphere.fromVertices(meshData.positions)
       });
-      var geometryInstance = new Cesium.GeometryInstance({
-        geometry: geometry
+      var renderState = Cesium.RenderState.fromCache({
+        depthMask: false,
+        depthTest: {
+          enabled: true,
+          func: Cesium.DepthFunction.LESS_OR_EQUAL
+        },
+        blending: Cesium.BlendingState.ALPHA_BLEND,
+        cull: {
+          enabled: false
+        }
       });
-      this.heatmapPrimitive = this.getMap().scene.primitives.add(new Cesium.Primitive({
-        geometryInstances: [geometryInstance],
-        appearance: new Cesium.MaterialAppearance({
-          material: new Cesium.Material({
-            fabric: {
-              type: 'Image',
-              uniforms: {
-                image: this.heatmapInstance.getDataURL()
-              }
-            }
-          }),
-          vertexShaderSource: this._getShader(),
-          translucent: true,
-          flat: true
-        }),
-        asynchronous: false
+      this.heatmapPrimitive = this.getMap().scene.primitives.add(new GeometryPrimitive(geometry, {
+        modelMatrix: Cesium.Matrix4.IDENTITY,
+        vertexShaderSource: VERTEX_SHADER_SOURCE,
+        fragmentShaderSource: FRAGMENT_SHADER_SOURCE,
+        renderState: renderState,
+        pass: Cesium.Pass.TRANSLUCENT
       }));
       this.heatmapPrimitive.id = this.id;
     }
 
-    // 根据热力图范围生成网格数据
+    // 根据热力图范围生成曲面与侧壁
   }, {
     key: "_generateMeshData",
     value: function _generateMeshData() {
-      var gridWidth = Math.min(this.canvasW, 200);
-      var gridHeight = Math.min(this.canvasH, 200);
+      var _this$heatmapInstance;
+      if (!this.boundRect || !((_this$heatmapInstance = this.heatmapInstance) !== null && _this$heatmapInstance !== void 0 && _this$heatmapInstance._renderer)) {
+        return null;
+      }
+      var gridWidth = Math.max(2, Math.min(this.canvasW, MAX_GRID_SIZE));
+      var gridHeight = Math.max(2, Math.min(this.canvasH, MAX_GRID_SIZE));
       var _this$boundRect = this.boundRect,
         minLat = _this$boundRect.minLat,
         maxLat = _this$boundRect.maxLat,
         minLng = _this$boundRect.minLng,
         maxLng = _this$boundRect.maxLng;
-      var longitudeStep = (maxLng - minLng) / gridWidth;
-      var latitudeStep = (maxLat - minLat) / gridHeight;
+      var maxGridWidthIndex = gridWidth - 1;
+      var maxGridHeightIndex = gridHeight - 1;
+      var longitudeStep = (maxLng - minLng) / maxGridWidthIndex;
+      var latitudeStep = (maxLat - minLat) / maxGridHeightIndex;
+      var sampleMaxX = Math.max(0, this.canvasW - 1);
+      var sampleMaxY = Math.max(0, this.canvasH - 1);
+      var baseHeight = this.style.height;
+      var stretchingHeight = this.style.stretchingHeight;
+      var colorImageData = this._getRendererImageData(this.heatmapInstance._renderer.canvas);
+      var shadowImageData = this._getRendererImageData(this.heatmapInstance._renderer.shadowCanvas);
+      if (!colorImageData || !shadowImageData) {
+        return null;
+      }
       var positions = [];
-      var textureCoords = [];
+      var colors = [];
       var indices = [];
+      var topVertexInfo = [];
+      var getTopVertexIndex = function getTopVertexIndex(x, y) {
+        return x * gridHeight + y;
+      };
       for (var i = 0; i < gridWidth; i++) {
         var currentLongitude = minLng + longitudeStep * i;
+        var sampleX = Math.round(i / maxGridWidthIndex * sampleMaxX);
         for (var j = 0; j < gridHeight; j++) {
           var currentLatitude = minLat + latitudeStep * j;
-          var heatValue = this.heatmapInstance.getValueAt({
-            x: i,
-            y: j
-          });
-          var cartesian3 = Cesium.Cartesian3.fromDegrees(currentLongitude, currentLatitude, this.style.height + heatValue);
+          var sampleY = Math.round(j / maxGridHeightIndex * sampleMaxY);
+          var sample = this._sampleHeatPixel(sampleX, sampleY, colorImageData, shadowImageData);
+          var currentHeight = baseHeight + sample.intensity * stretchingHeight;
+          var cartesian3 = Cesium.Cartesian3.fromDegrees(currentLongitude, currentLatitude, currentHeight);
           positions.push(cartesian3.x, cartesian3.y, cartesian3.z);
-          textureCoords.push(i / gridWidth, j / gridHeight);
-          if (j !== gridHeight - 1 && i !== gridWidth - 1) {
-            indices.push(i * gridHeight + j, i * gridHeight + j + 1, (i + 1) * gridHeight + j);
-            indices.push((i + 1) * gridHeight + j, (i + 1) * gridHeight + j + 1, i * gridHeight + j + 1);
+          colors.push(sample.color[0], sample.color[1], sample.color[2], sample.color[3]);
+          topVertexInfo.push({
+            lng: currentLongitude,
+            lat: currentLatitude,
+            color: sample.color
+          });
+          if (i !== maxGridWidthIndex && j !== maxGridHeightIndex) {
+            indices.push(getTopVertexIndex(i, j), getTopVertexIndex(i + 1, j), getTopVertexIndex(i, j + 1));
+            indices.push(getTopVertexIndex(i + 1, j), getTopVertexIndex(i + 1, j + 1), getTopVertexIndex(i, j + 1));
           }
         }
       }
+      this._appendSideSkirt(positions, colors, indices, topVertexInfo, baseHeight, 0, gridHeight, function (step) {
+        return {
+          topAIndex: getTopVertexIndex(0, step),
+          topBIndex: getTopVertexIndex(0, step + 1)
+        };
+      });
+      this._appendSideSkirt(positions, colors, indices, topVertexInfo, baseHeight, 0, gridHeight, function (step) {
+        return {
+          topAIndex: getTopVertexIndex(maxGridWidthIndex, step + 1),
+          topBIndex: getTopVertexIndex(maxGridWidthIndex, step)
+        };
+      });
+      this._appendSideSkirt(positions, colors, indices, topVertexInfo, baseHeight, 0, gridWidth, function (step) {
+        return {
+          topAIndex: getTopVertexIndex(step + 1, 0),
+          topBIndex: getTopVertexIndex(step, 0)
+        };
+      });
+      this._appendSideSkirt(positions, colors, indices, topVertexInfo, baseHeight, 0, gridWidth, function (step) {
+        return {
+          topAIndex: getTopVertexIndex(step, maxGridHeightIndex),
+          topBIndex: getTopVertexIndex(step + 1, maxGridHeightIndex)
+        };
+      });
       return {
         positions: positions,
-        textureCoords: textureCoords,
-        indices: indices
+        colors: colors,
+        indices: indices,
+        vertexCount: positions.length / 3
+      };
+    }
+  }, {
+    key: "_appendSideSkirt",
+    value: function _appendSideSkirt(positions, colors, indices, topVertexInfo, baseHeight, start, size, getSegment) {
+      if (size < 2) {
+        return;
+      }
+      for (var _step = start; _step < size - 1; _step++) {
+        var _getSegment = getSegment(_step),
+          topAIndex = _getSegment.topAIndex,
+          topBIndex = _getSegment.topBIndex;
+        var topA = topVertexInfo[topAIndex];
+        var topB = topVertexInfo[topBIndex];
+        var bottomA = Cesium.Cartesian3.fromDegrees(topA.lng, topA.lat, baseHeight);
+        var bottomB = Cesium.Cartesian3.fromDegrees(topB.lng, topB.lat, baseHeight);
+        var bottomAIndex = positions.length / 3;
+        positions.push(bottomA.x, bottomA.y, bottomA.z);
+        colors.push(topA.color[0], topA.color[1], topA.color[2], this._getSideAlpha(topA.color[3]));
+        var bottomBIndex = positions.length / 3;
+        positions.push(bottomB.x, bottomB.y, bottomB.z);
+        colors.push(topB.color[0], topB.color[1], topB.color[2], this._getSideAlpha(topB.color[3]));
+        indices.push(topAIndex, bottomAIndex, topBIndex);
+        indices.push(topBIndex, bottomAIndex, bottomBIndex);
+      }
+    }
+  }, {
+    key: "_sampleHeatPixel",
+    value: function _sampleHeatPixel(x, y, colorImageData, shadowImageData) {
+      var index = (y * this.canvasW + x) * 4;
+      var red = colorImageData[index] || 0;
+      var green = colorImageData[index + 1] || 0;
+      var blue = colorImageData[index + 2] || 0;
+      var shadowAlpha = (shadowImageData[index + 3] || 0) / 255;
+      var alpha = shadowAlpha > 0 ? Math.round(Cesium.Math.lerp(MIN_SURFACE_ALPHA, 1, shadowAlpha) * 255) : 0;
+      return {
+        intensity: shadowAlpha,
+        color: [red, green, blue, alpha]
       };
     }
   }, {
-    key: "_getShader",
-    value: function _getShader() {
-      var glsl = "\n          in vec3 position3DHigh;\n          in vec3 position3DLow;\n          in vec2 st;\n          in float batchId;\n          uniform sampler2D image_0;\n          out vec3 v_positionEC;\n          in vec3 normal;\n          out vec3 v_normalEC;\n          out vec2 v_st;\n          void main(){\n              vec4 p = czm_computePosition();\n\n              v_normalEC = czm_normal * normal;\n              v_positionEC = (czm_modelViewRelativeToEye * p).xyz;\n              vec4 positionWC=czm_inverseModelView* vec4(v_positionEC,1.0);\n              v_st = st;\n              vec4 color = texture(image_0, v_st);\n              vec3 upDir = normalize(positionWC.xyz);\n              p += vec4(color.r * upDir * {stretchingHeight}, 0.0);\n              gl_Position = czm_modelViewProjectionRelativeToEye * p;\n          }";
-      return glsl.replace('{stretchingHeight}', this.style.stretchingHeight.toFixed(1));
+    key: "_getRendererImageData",
+    value: function _getRendererImageData(canvas) {
+      if (!canvas) {
+        return null;
+      }
+      var context = canvas.getContext('2d');
+      if (!context) {
+        return null;
+      }
+      return context.getImageData(0, 0, this.canvasW, this.canvasH).data;
+    }
+  }, {
+    key: "_getSideAlpha",
+    value: function _getSideAlpha(topAlpha) {
+      if (topAlpha <= 0) {
+        return 0;
+      }
+      var alphaRatio = topAlpha / 255;
+      return Math.round(Cesium.Math.clamp(alphaRatio * 0.5, MIN_SIDE_ALPHA, 0.5) * 255);
     }
   }]);
   return Heatmap3d;