fix: use depthTest when render height

hongfaqiu · Jan 12, 2024 · 6215682 · 6215682
1 parent 7b1f0b5
commit 6215682
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@ cesium-extends 提供了以下功能：
 - 热力图 `@cesium-extends/heat`
 - ...
 
-详细信息及 demo，请参阅 [API 文档](https://cesium-extends.pages.dev/)。
+详细信息及 demo，请参阅 [API 文档](https://extends.opendde.com/)。
 
 ## 示例
 

diff --git a/doc/.dumirc.ts b/doc/.dumirc.ts
@@ -9,7 +9,8 @@ export default defineConfig({
     name: 'cesium-extends',
     socialLinks: {
       github: 'https://github.com/hongfaqiu/cesium-extends',
-    }
+    },
+    logo: "/logo.svg"
   },
   alias: {
     '@': path.resolve(__dirname, 'src'),

diff --git a/doc/docs/doc/index.md b/doc/docs/doc/index.md
@@ -37,7 +37,7 @@ cesium-extends 提供了以下功能：
 - 热力图 `@cesium-extends/heat`
 - ...
 
-详细信息及 demo，请参阅 [API 文档](https://cesium-extends.vercel.app/)。
+详细信息及 demo，请参阅 [API 文档](https://extends.opendde.com/)。
 
 ## 示例
 

diff --git a/doc/docs/doc/primitive-geojson.md b/doc/docs/doc/primitive-geojson.md
@@ -186,6 +186,7 @@ layer.load('path/to/data.json').then(() => {
   - `fill`: 填充区域的颜色。
   - `clampToGround`: 是否贴地。
   - `credit`可选: 图层的信用信息。
+  - `depthTest`可选: 是否开启深度测试。
 
 该方法返回一个 `Promise` 对象，在 GeoJSON 加载完成时解析为当前实例。
 

diff --git a/doc/public/logo.svg b/doc/public/logo.svg
diff --git a/packages/geojson-render/src/primitiveRender.ts b/packages/geojson-render/src/primitiveRender.ts
@@ -15,6 +15,7 @@ export const primitiveGeoJsonRender = async (
   const featureItems = [...primitiveLayer.featureItems];
   primitiveLayer.removeAllPrimitive();
   const { label, paint, type, custom } = style;
+  let depthTest: undefined | boolean = undefined;
   featureItems.map((feature) => {
     const customStyle: any = {};
 
@@ -31,6 +32,7 @@ export const primitiveGeoJsonRender = async (
 
     const height = customStyle?.extrudedHeight;
     const extrudedHeight = height ? height * 1000 : undefined;
+    if (depthTest === undefined && height) depthTest = true;
 
     switch (type) {
       case 'point':
@@ -156,7 +158,7 @@ export const primitiveGeoJsonRender = async (
       });
     }
   });
-  primitiveLayer.reloadPrimitive();
+  primitiveLayer.reloadPrimitive(depthTest);
 };
 
 export const renderPrimitiveGeoJson = async (

diff --git a/packages/primitive-geojson/src/GeoJsonPrimitiveLayer.ts b/packages/primitive-geojson/src/GeoJsonPrimitiveLayer.ts
@@ -592,8 +592,17 @@ export class GeoJsonPrimitiveLayer extends BasicGraphicLayer {
     this._polylineInstances = [];
   }
 
-  reloadPrimitive() {
-    const appearance = new PerInstanceColorAppearance({
+  reloadPrimitive(depthTest: boolean = this._options.depthTest ?? false) {
+    const appearance = depthTest ? new PerInstanceColorAppearance({
+      translucent: false,
+      renderState: {
+        depthTest: {
+          enabled: true,
+        },
+        depthMask: true,
+        blending: BlendingState.PRE_MULTIPLIED_ALPHA_BLEND
+      },
+    }) : new PerInstanceColorAppearance({
       flat: true,
       translucent: false,
       closed: true,

diff --git a/packages/primitive-geojson/src/typings.ts b/packages/primitive-geojson/src/typings.ts
@@ -26,6 +26,7 @@ export type GeoJsonPrimitiveLayerOptions = {
   fill: Color;
   clampToGround: boolean;
   credit?: Credit | string;
+  depthTest?: boolean;
 };
 
 export type PrimitiveItem =