render3dpro

v1.0.8

Published

a month ago

Quick jump link to the English documentation address：（[render3dpro Documentation（English）](#englishDocumentation)）

0High
0Medium
0Low

tian100

Cesium render3dpro webgis 3d geojson webgl primitive AntV tianyinwei

render3dpro 文档

Quick jump link to the English documentation address：（render3dpro Documentation（English））

接口使用指南-中文

开源库地址：render3dpro - npm

通过 npm/yarn/pnpm 安装后，在 node_modules/render3dpro 下包含 examples 文件夹。该文件夹下是 render3dpro 使用的案例，可通过 index.html 查看所有示例(需要通过 vscode 的 Live Server 插件的 Open With Live Server 打开)。 API 使用示例可参考 node_modules/render3dpro/indexCN.html 或 node_modules/render3dpro/indexEN.html。(需要通过 vscode 的 Live Server 插件的 Open With Live Server 打开)

简介

render3dPro 采用 Cesium 的 Primitve 渲染方式，通过面向 GPU 渲染的底层 API，实现在 Cesium 三维场景中的高效渲染与可视化。
支持最新版的开源 Cesium 版本、超图的 SuperMap iClient3D for Cesium 版本、超图的 SuperMap iClient3D for WebGL/WebGPU 版本以及基于开源 Cesium 开发的其他厂商版本。
该可视化库除了需要传入 Cesium 的 Cesium、viewer 对象外，无任何第三方依赖，以极致的轻量化、高性能为目标。
render3dPro 的封装与使用方式参考了阿里 AntV L7 的链式调用与传参方式，兼容 AntV L7 的关键函数与语法。

在线示例：

[点数据渲染](./18 点数据渲染.html)
[线数据渲染](./19 线数据渲染.html)
[面数据渲染](./20 面数据渲染.html)
[面数据边线渲染](./21 面数据边线渲染.html)
[面数据中心点渲染](./22 面数据中心点渲染.html)
[面数据中心点圆柱渲染](./23 面数据中心点圆柱渲染.html)
[面数据立体渲染](./24 面数据立体渲染.html)
[分类渲染动态分类](./25 分类渲染动态分类.html)
[鼠标点击浦东新区行政区划下钻](./26 鼠标点击浦东新区行政区划下钻.html)
[利用弹窗实现异形渲染五角星](./27 利用弹窗实现异形渲染五角星.html)

语法示例

const layer = new PrimitiveGeoJsonLayer(option) // option - 传入构造函数的参数对象，提供 layer 的初始参数和状态 
.source(...)    // 传入图层需要的数据以及相关的解析器
.filter(...)    // 数据过滤方法
.shape(...)     // 为图层指定具体的形状、填充方式，如：fill、circle、box 等
.color(...)     // 指定图层的颜色配置
.texture(...)   // 指定图层引用的纹理（暂不支持）
.size(...)      // 设置图层元素的大小
.animate(...)   // 设置图层元素的动画模式（暂不支持）
.active(...)    // 指定图层元素是否支持划过选中
.select(...)    // 指定图层元素是否支持点击选中
.style(...)     // 指定图层自定义样式的配置
.render()       // 指定图层执行渲染并添加到地图中
.ready()        // 异步方法 调用此方法可以确定数据渲染是否全部完成
.bottomHeight(...)      // 指定图层的离地高度
.extrudedHeight(...)    // 指定图层的拉伸高度
.updateExtrudedHeight(...) // 图层渲染后动态更新拉伸高度
.show(...)      // 控制图层显隐
.visible(...)   // 控制图层显隐
.popupByMouse(...)      // 设置图层的浮窗行为的显示、触发方式
.popupByFixed(...)      // 设置图层的固定浮窗
.closePopupFixedLayers() // 关闭图层的浮窗
.locate(...)    // 设置图层定位
.flyTo(...)     // 等同于 locate
.zoomTo(...)    // 等同于 locate
.destroy()      // 图层销毁、移除
.remove()       // 等同于 destroy
.clear()        // 等同于 destroy
.close()        // 等同于 destroy

使用示例

import { PrimitiveGeoJsonLayer } from "@dist/render3dpro";

const polygonLayer = new PrimitiveGeoJsonLayer({
  Cesium: Cesium,
  viewer: viewer,
  clampToGround: true,
})
  .source({
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        properties: { name: "黄浦区" },
        geometry: {
          type: "MultiPolygon",
          coordinates: [ /* ... */ ]
        }
      }
    ]
  })
  .shape("fill")
  .color("#f00")
  .style({ opacity: 0.6 })
  .render()
  .locate();

详情

source

设置图层数据，仅支持 geojson 数据格式。

layer.source(data);

GeoJSON 数据说明

GeoJSON 是一种对各种地理数据结构进行编码的格式。支持几何类型：点、线、面、多点、多线、多面和几何集合。

The GeoJSON Format

source 支持传入 FeatureCollection 或 Feature。

FeatureCollection

一个 FeatureCollection 由多个 feature 组成。

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": { "name": "tom" },
      "geometry": { /* ... */ }
    }
  ]
}

Feature

一个 feature 有 geometry 和 properties，geometry 是必须字段。

{
  "type": "Feature",
  "properties": {},
  "geometry": {}
}

Geometry 类型示例

Point

{ "type": "Point", "coordinates": [100.0, 0.0] }

MultiPoint

{ "type": "MultiPoint", "coordinates": [[100.0, 0.0], [101.0, 1.0]] }

LineString

{ "type": "LineString", "coordinates": [[100.0, 0.0], [101.0, 1.0]] }

MultiLineString

{ "type": "MultiLineString", "coordinates": [[[100.0,0.0],[101.0,1.0]],[[102.0,2.0],[103.0,3.0]]] }

Polygon

{ "type": "Polygon", "coordinates": [[[100.0,0.0],[101.0,0.0],[101.0,1.0],[100.0,1.0],[100.0,0.0]]] }

Polygon 带孔洞

{ "type": "Polygon", "coordinates": [ [ [-170.0,10.0],[170.0,10.0],[170.0,-10.0],[-170.0,-10.0],[-170.0,10.0] ], [ [175.0,5.0],[-175.0,5.0],[-175.0,-5.0],[175.0,-5.0],[175.0,5.0] ] ] }

MultiPolygon

{ "type": "MultiPolygon", "coordinates": [ [ [[102.0,2.0],[103.0,2.0],[103.0,3.0],[102.0,3.0],[102.0,2.0]] ], [ [[100.0,0.0],[101.0,0.0],[101.0,1.0],[100.0,1.0],[100.0,0.0]], [[100.2,0.2],[100.8,0.2],[100.8,0.8],[100.2,0.8],[100.2,0.2]] ] ] }

在线示例： [01 渲染(source+render+ready+locate)](./01 渲染(source+render+ready+locate).html)

render

数据渲染的执行方法，用于将数据渲染到三维地图中。

layer.render();

在线示例： [01 渲染(source+render+ready+locate)](./01 渲染(source+render+ready+locate).html)

ready

数据是否渲染完成的判断方法，异步方法，通过获取 renderReady 判断是否全部渲染结束。

await layer.ready();
console.log("是否全部渲染结束", layer.renderReady)

在线示例： [01 渲染(source+render+ready+locate)](./01 渲染(source+render+ready+locate).html)

locate

定位到图层范围。

不传参：定位到当前图层所有显示图斑的四至范围。
```
layer.locate();
```
在线示例： [02 定位1(locate)](./02 定位1(locate).html)
传入回调函数：基于 properties 定位。
```
layer.locate((properties) => {
  return properties["name"] === "黄浦区";
});
```
在线示例： [02 定位2(locate)](./02 定位2(locate).html)
传入属性字段和回调函数。
```
layer.locate("name", (value) => value === "黄浦区" || value === "浦东新区");
```
在线示例： [02 定位3(locate)](./02 定位3(locate).html)

flyTo / zoomTo

等同于 locate 方法。

filter

数据过滤方法，支持回调函数，返回 true 时可见。

回调函数形式：
```
layer.filter((properties) => properties["weight"] >= 70);
```
在线示例： [03 过滤1(filter)](./03 过滤1(filter).html)
传入属性字段和回调函数：
```
layer.filter("weight", (value) => value >= 70);
```
在线示例： [03 过滤2(filter)](./03 过滤2(filter).html)

shape

指定图层表现形式：fill/polygon（面）、fill3D/polygon3D（立体面）、line（线）、circle（圆形面）、circle3D（圆柱体）、box（正方形面）、box3D（立方体）。
注意： 必须在 render() 之前调用；3D 类型时 clampToGround 必须为 false。

layer.shape("circle");
layer.shape("box3D");

在线示例：

[04 形态1(shape)](./04 形态1(shape).html)
[04 形态2(shape)](./04 形态2(shape).html)
[04 形态3(shape)](./04 形态3(shape).html)
[04 形态4(shape)](./04 形态4(shape).html)

color

将数据值映射到图形的颜色。

常量颜色：
```
layer.color("rgba(1, 117, 152, 0.5)");
```
在线示例： [05 颜色1(color)](./05 颜色1(color).html)
基于自然断裂法分段渲染：
```
layer.color('weight', ["rgba(1,117,152,0.8)","rgba(28,189,216,0.8)","rgba(95,249,240,0.8)"]);
```
在线示例： [05 颜色2(color)](./05 颜色2(color).html)

回调函数（基于属性值）：

layer.color("name", (value) => {
  if (value === "黄浦区") return ["rgba(1,117,152,1)", "rgba(1,117,152,1)"];
  if (value === "徐汇区") return "rgba(25,150,174,1)";
  // ...
});

在线示例： [05 颜色3(color)](./05 颜色3(color).html)

回调函数（基于完整 properties）：
```
layer.color((properties) => {
  const value = properties["name"];
  // ... 返回颜色
});
```
在线示例： [05 颜色4(color)](./05 颜色4(color).html)

style

设置图层的通用整体样式（线颜色、线宽、面颜色、透明度等）。

layer.style({
  lineColor: "rgba(255,20,255,1)",
  stroke: "rgba(255,20,255,1)",
  lineWidth: 2,
  fillColor: "rgba(0,255,0,0.1)",
  opacity: 0.5
});

在线示例： [06 样式1(style)](./06 样式1(style).html)

texture

暂不支持材质。

size

当 shape 类型为 circle、circle3D、box、box3D 时设置半径及拉伸高度。

回调函数（基于属性值）：
```
layer.size("weight", (value) => [0, value > 50 ? value * 10 : 200]);
```
在线示例： [07 尺寸大小1(size)](./07 尺寸大小1(size).html)
回调函数（基于 properties）：
```
layer.size((properties) => [0, 200]);
```
在线示例： [07 尺寸大小2(size)](./07 尺寸大小2(size).html)
直接传入数组 [高度, 宽度]（单位米）：
```
layer.size([0, 2000]);
```

animate

暂不支持动画。

active

是否支持鼠标滑过事件及高亮颜色。

layer.active(true, "rgba(255,0,0,1)");

在线示例： [08 鼠标滑过(active)](./08 鼠标滑过(active).html)

select

是否支持鼠标点击事件及高亮颜色、回调函数。回调参数包含 renderPrimitiveID 和 geojson。

layer.select(true, "rgba(255,0,255,1)", (primitiveObj) => {
  console.log(primitiveObj.renderPrimitiveID, primitiveObj.geojson);
});

在线示例： [09 鼠标点击(select)](./09 鼠标点击(select).html)

bottomHeight

图层的离地高度（需要 clampToGround: false，且 shape 不为 line）。

数值：
```
layer.bottomHeight(10000);
```
在线示例： [10 离地高度1(bottomHeight)](./10 离地高度1(bottomHeight).html)
回调函数：
```
layer.bottomHeight("weight", (value) => { /* 返回高度 */ });
```
在线示例： [10 离地高度2(bottomHeight)](./10 离地高度2(bottomHeight).html)
基于 properties 回调：
```
layer.bottomHeight((properties) => { /* 返回高度 */ });
```
在线示例： [10 离地高度3(bottomHeight)](./10 离地高度3(bottomHeight).html)

extrudedHeight

图层的拉伸高度（需要 clampToGround: false，shape 为 3D 类型，不支持 line）。

数值：
```
layer.extrudedHeight(10000);
```
在线示例： [11 拉伸高度1(extrudedHeight)](./11 拉伸高度1(extrudedHeight).html)
回调函数：
```
layer.extrudedHeight("weight", (value) => { /* 返回高度 */ });
```
在线示例： [11 拉伸高度2(extrudedHeight)](./11 拉伸高度2(extrudedHeight).html)
基于 properties 回调：
```
layer.extrudedHeight((properties) => { /* 返回高度 */ });
```
在线示例： [11 拉伸高度3(extrudedHeight)](./11 拉伸高度3(extrudedHeight).html)

updateExtrudedHeight

动态拉伸效果。参数：拉伸高度(米)、动画时长(毫秒)、离地高度(米)、防闪烁系数。

layer.updateExtrudedHeight(10000, 10000, 300, 10);

在线示例： [12 动态拉伸高度(updateExtrudedHeight)](./12 动态拉伸高度(updateExtrudedHeight).html)

popupByMouse

根据鼠标行为展示弹窗。支持 MouseOver（滑过）、MouseClick（点击）、NotShow（不显示）。

回调函数（基于 properties）：

layer.popupByMouse(PopupShowByEventTypes.MouseOver, (properties) => {
  const container = document.createElement("div");
  container.innerText = properties["name"];
  return [container];
});

在线示例： [13 弹窗1(popupByMouse)](./13 弹窗1(popupByMouse).html)

传入属性字段和回调函数：
```
layer.popupByMouse(PopupShowByEventTypes.MouseClick, "name", (value) => {
  // 返回 DOM 数组
});
```
在线示例： [13 弹窗2(popupByMouse)](./13 弹窗2(popupByMouse).html)

popupByFixed

固定弹窗。支持 AfterRendered（渲染后立即显示）、RightNow（立即显示）、NotShow。

回调函数（基于 properties）：
```
layer.popupByFixed(PopupShowByEventTypes.AfterRendered, (properties) => { /* 返回 DOM 数组 */ });
```
在线示例： [14 弹窗1(popupByFixed)](./14 弹窗1(popupByFixed).html)
传入属性字段和回调函数：
```
layer.popupByFixed(PopupShowByEventTypes.RightNow, "name", (value) => { /* 返回 DOM 数组 */ });
```
在线示例： [14 弹窗2(popupByFixed)](./14 弹窗2(popupByFixed).html)

动态显示/隐藏：

layer.popupByFixed(PopupShowByEventTypes.NotShow);  // 隐藏
layer.popupByFixed(PopupShowByEventTypes.RightNow); // 显示

在线示例： [14 弹窗3(popupByFixed)](./14 弹窗3(popupByFixed).html)

设置弹窗是否跟随地球缩放（isScaleByLevel，默认 true）：
```
layer.popupByFixed(..., (properties) => {
  const container = ...;
  container.isScaleByLevel = false;
  return [container];
});
```
在线示例： [14 弹窗4(popupByFixed)](./14 弹窗4(popupByFixed).html)

closePopupFixedLayers

销毁弹窗。

layer.closePopupFixedLayers();

在线示例： [15 弹窗(closePopupFixedLayers)](./15 弹窗(closePopupFixedLayers).html)

show / visible

控制图层和弹窗的显隐。参数1：图层显隐；参数2（可选）：弹窗显隐（默认跟随图层）。

layer.show(false);        // 隐藏图层和弹窗
layer.show(false, true);  // 隐藏图层但显示弹窗
layer.show(true);         // 显示图层和弹窗
layer.show(true, false);  // 显示图层但隐藏弹窗

在线示例： [16 显示隐藏控制(show)](./16 显示隐藏控制(show).html)

destroy / remove / clear / close

销毁图层，彻底移除。

layer.destroy(); // 等效于 remove(), clear(), close()

在线示例： [17 销毁关闭移除图层(destroy)](./17 销毁关闭移除图层(destroy).html)

render3dpro Documentation

中文说明文档地址快速跳转链接：render3dpro 文档（中文）

API User Guide-English

Open source repository address：render3dpro - npm

After installing via npm/yarn/pnpm, the node_modules/render3dpro directory contains an examples folder. This folder includes usage examples for render3dpro. You can view all examples through index.html (requires opening with "Open With Live Server" from the VSCode Live Server extension).

For API usage examples, refer to node_modules/render3dpro/indexCN.html or node_modules/render3dpro/indexEN.html. (Also requires opening with "Open With Live Server" from the VSCode Live Server extension.)

Introduction

render3dPro uses Cesium's Primitive rendering method, achieving efficient rendering and visualization in Cesium's 3D scenes through low-level GPU-oriented APIs.
It supports the latest open-source Cesium version, SuperMap iClient3D for Cesium version, SuperMap iClient3D for WebGL/WebGPU version, as well as other vendor versions developed based on open-source Cesium.
This visualization library has no third-party dependencies except for Cesium's Cesium and viewer objects, aiming for extreme lightweight and high performance.
The encapsulation and usage of render3dPro refer to Alibaba AntV L7's chain calls and parameter passing, and are compatible with AntV L7's key functions and syntax.

[Online Example: Point Data Rendering](./18 点数据渲染.html)

[Online Example: Line Data Rendering](./19 线数据渲染.html)

[Online Example: Polygon Data Rendering](./20 面数据渲染.html)

[Online Example: Polygon Edge Rendering](./21 面数据边线渲染.html)

[Online Example: Polygon Center Point Rendering](./22 面数据中心点渲染.html)
[Online Example: Polygon Center Point Cylinder Rendering](./23 面数据中心点圆柱渲染.html)

[Online Example: 3D Polygon Rendering](./24 面数据立体渲染.html)

[Online Example: Classification Rendering Dynamic Classification](./25 分类渲染动态分类.html)

[Online Example: Mouse Click to Drill Down Pudong New Area Administrative Division](./26 鼠标点击浦东新区行政区划下钻.html)

[Online Example: Using Popup to Render Special-shaped Five-pointed Star](./27 利用弹窗实现异形渲染五角星.html)

Syntax Example

const layer = new PrimitiveGeoJsonLayer(option) // option - parameter object passed to the constructor, providing initial parameters and state of the layer
  .source(...)    // Pass in the data required by the layer and related parsers
  .filter(...)    // Data filtering method
  .shape(...)     // Specify the specific shape and fill mode for the layer, such as: fill, circle, box, etc.
  .color(...)     // Specify the color configuration for the layer
  .texture(...)   // Specify the texture referenced by the layer (not supported yet)
  .size(...)      // Set the size of layer elements
  .animate(...)   // Set the animation mode for layer elements (not supported yet)
  .active(...)    // Specify whether layer elements support hover selection
  .select(...)    // Specify whether layer elements support click selection
  .style(...)     // Specify the configuration of custom styles for the layer
  .render()       // Execute layer rendering and add it to the map
  .ready()        // Asynchronous method; calling this method can determine whether data rendering is fully completed
  .bottomHeight(...) // Specify the bottom height of the layer
  .extrudedHeight(...) // Specify the extrusion height of the layer
  .updateExtrudedHeight(...) // Dynamically update the extrusion height after layer rendering
  .show(...)       // Control layer visibility
  .visible(...)    // Control layer visibility
  .popupByMouse(...) // Set the display and trigger mode of the layer's popup behavior, such as immediate display on hover, etc.
  .popupByFixed(...) // Set the display and trigger mode of the layer's popup behavior, independent of mouse movement
  .closePopupFixedLayers() // Close the layer's popup
  .locate(...)     // Set layer location
  .flyTo(...)      // Set layer location, equivalent to locate method
  .zoomTo(...)     // Set layer location, equivalent to locate method
  .destroy()       // Destroy and remove the layer
  .remove()        // Destroy and remove the layer, equivalent to destroy method
  .clear()         // Destroy and remove the layer, equivalent to destroy method
  .close()         // Destroy and remove the layer, equivalent to destroy method

Usage Example

import { PrimitiveGeoJsonLayer } from "@dist/render3dpro";
const polygonLayer = new PrimitiveGeoJsonLayer({
    Cesium: Cesium, // Cesium instance
    viewer: viewer, // Cesium viewer instance
    clampToGround: true, // Whether to clamp to ground
  })
  .source( // Pass in geojson data source
    {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          properties: {
            name: "黄浦区"
          },
          geometry: {
            type: "MultiPolygon",
            coordinates: [
              [
                [
                  [121.457689, 31.220196],
                  [121.460707, 31.213488],
                  [121.461555, 31.210194],
                  [121.462264, 31.203173],
                  [121.466449, 31.204395],
                  [121.46745, 31.203065],
                  [121.469605, 31.196404],
                  [121.470383, 31.191276],
                  [121.474944, 31.189886],
                  [121.475987, 31.187885],
                  [121.490752, 31.191467],
                  [121.494631, 31.192857],
                  [121.498066, 31.195601],
                  [121.501319, 31.199747],
                  [121.508368, 31.210158],
                  [121.509911, 31.214506],
                  [121.509397, 31.218459],
                  [121.506741, 31.223119],
                  [121.502014, 31.228018],
                  [121.495744, 31.232977],
                  [121.493491, 31.23615],
                  [121.493491, 31.240163],
                  [121.494826, 31.24221],
                  [121.487805, 31.244186],
                  [121.485969, 31.244091],
                  [121.482994, 31.241923],
                  [121.47892, 31.240294],
                  [121.474847, 31.24142],
                  [121.469563, 31.239216],
                  [121.462973, 31.241396],
                  [121.466129, 31.234917],
                  [121.467658, 31.225634],
                  [121.467464, 31.223862],
                  [121.456758, 31.223898],
                  [121.457689, 31.220196],
                ],
              ],
            ],
          },
        }
      ],
    }
  )
  .shape("fill") // Rendering type
  .color("#f00") // Custom polygon color
  .style({ opacity: 0.6 }) // Custom layer style
  .render() // Render to map
  .locate(); // Locate

Details

source

Set layer data, only supports geojson data format.

layer.source(data);

GeoJSON Data Description

GeoJSON is a format for encoding various geographic data structures. A GeoJSON object can represent a geometry, feature, or collection of features. GeoJSON supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection. Features in GeoJSON contain a geometry object and other properties, and a feature collection represents a series of features.

The GeoJSON Format

source supports passing FeatureCollection or Feature.

FeatureCollection

A FeatureCollection consists of multiple features.

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "tom"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [-2.8125, 34.59704151614417],
            [65.390625, 34.59704151614417],
            [65.390625, 61.10078883158897],
            [-2.8125, 61.10078883158897],
            [-2.8125, 34.59704151614417]
          ]
        ]
      }
    }
  ]
}

Feature

A feature has geometry (spatial information) and properties (attribute information), where geometry is required.

{
  "type": "Feature",
  "properties": {},
  "geometry": {}
}

Geometry

Geometry types supported in a feature are as follows:

Point

{
  "type": "Point",
  "coordinates": [100.0, 0.0]
}

MultiPoint

{
  "type": "MultiPoint",
  "coordinates": [
    [100.0, 0.0],
    [101.0, 1.0]
  ]
}

LineString

{
  "type": "LineString",
  "coordinates": [
    [100.0, 0.0],
    [101.0, 1.0]
  ]
}

MultiLineString

{
  "type": "MultiLineString",
  "coordinates": [
    [
      [100.0, 0.0],
      [101.0, 1.0]
    ],
    [
      [102.0, 2.0],
      [103.0, 3.0]
    ]
  ]
}

Polygon

{
  "type": "Polygon",
  "coordinates": [
    [
      [100.0, 0.0],
      [101.0, 0.0],
      [101.0, 1.0],
      [100.0, 1.0],
      [100.0, 0.0]
    ]
  ]
}

Polygon with holes

{
  "type": "Polygon",
  "coordinates": [
    [
      [-170.0, 10.0],
      [170.0, 10.0],
      [170.0, -10.0],
      [-170.0, -10.0],
      [-170.0, 10.0]
    ],
    [
      [175.0, 5.0],
      [-175.0, 5.0],
      [-175.0, -5.0],
      [175.0, -5.0],
      [175.0, 5.0]
    ]
  ]
}

MultiPolygon

{
  "type": "MultiPolygon",
  "coordinates": [
    [
      [
        [102.0, 2.0],
        [103.0, 2.0],
        [103.0, 3.0],
        [102.0, 3.0],
        [102.0, 2.0]
      ]
    ],
    [
      [
        [100.0, 0.0],
        [101.0, 0.0],
        [101.0, 1.0],
        [100.0, 1.0],
        [100.0, 0.0]
      ],
      [
        [100.2, 0.2],
        [100.8, 0.2],
        [100.8, 0.8],
        [100.2, 0.8],
        [100.2, 0.2]
      ]
    ]
  ]
}

[Online Example: 01 Rendering (source+render+ready+locate)](./01 渲染(source+render+ready+locate).html)

render

The execution method for data rendering, used to render data into the 3D map.

layer.render();

[Online Example: 01 Rendering (source+render+ready+locate)](./01 渲染(source+render+ready+locate).html)

ready

Method to determine whether data rendering is complete. This is an asynchronous method, which uses renderReady to check if all rendering is finished.

await layer.ready();
console.log("Is all rendering complete?", layer.renderReady)

[Online Example: 01 Rendering (source+render+ready+locate)](./01 渲染(source+render+ready+locate).html)

locate

When calling the locate method without parameters, it locates to the bounding box of all displayed features in the current layer.

layer.locate();

[Online Example: 02 Locate 1 (locate)](./02 定位1(locate).html)

When calling the locate method with parameters, pass a callback function to determine which area(s) to locate based on the properties values of geojson.

layer.locate((properties) => {
  const value = properties["name"];
  if (value === "黄浦区") {
    return true;
  }
  return false;
});

[Online Example: 02 Locate 2 (locate)](./02 定位2(locate).html)

When calling the locate method with parameters, pass an attribute field and a callback function to determine which area(s) to locate based on the properties values of geojson.

layer.locate("name", (value) => {
  if (value === "黄浦区" || value === "浦东新区") {
    return true;
  }
  return false;
});

[Online Example: 02 Locate 3 (locate)](./02 定位3(locate).html)

flyTo

Equivalent to the locate method.

zoomTo

Equivalent to the locate method.

filter

Data filtering method, supports callback functions, maps data to true | false; visible when result is true.

Pass a callback function to set content based on the properties values of geojson.

layer.filter((properties) => {
  if (properties["weight"] >= 70) {
    return true;
  }
  return false;
})

[Online Example: 03 Filtering 1 (filter)](./03 过滤1(filter).html)

Pass an attribute field and a callback function to set content based on the properties values of geojson.

layer.filter("weight", (value) => {
  if (value >= 70) {
    return true;
  }
  return false;
})

[Online Example: 03 Filtering 2 (filter)](./03 过滤2(filter).html)

shape

Generally, a layer can have multiple presentation forms. The shape method is used to specify the specific form: fill or polygon renders as polygons; fill3D or polygon3D renders as 3D polygons; line renders as lines; circle renders as circular polygons; circle3D renders as cylinders; box renders as square polygons; box3D renders as cubes. For circle3D and box3D types, it is recommended to use the size() method to specify width and extrusion height; for fill3D or polygon3D types, it is recommended to use extrudedHeight() to specify extrusion height.

Note: shape() can only be called before the render() method; the rendering form cannot be dynamically modified after rendering.

Note: When the shape is 3D type, clampToGround must be set to false.

layer.shape("circle"); // circle
layer.shape("box"); // square

const polygonLayer = new PrimitiveGeoJsonLayer({
  Cesium: Cesium,
  viewer: viewer,
  clampToGround: false, // When shape is 3D type, clampToGround must be false
})
  .source(geojsonData)
  .shape("circle3D") // cylinder
  .shape("box3D"); // cube

[Online Example: 04 Shape 1 (shape)](./04 形态1(shape).html)
[Online Example: 04 Shape 2 (shape)](./04 形态2(shape).html)
[Online Example: 04 Shape 3 (shape)](./04 形态3(shape).html)
[Online Example: 04 Shape 4 (shape)](./04 形态4(shape).html)

color

Method to map data values to graphic colors.

layer.color("rgba(1, 117, 152, 0.5)"); // constant color

[Online Example: 05 Color 1 (color)](./05 颜色1(color).html)

Based on the natural breaks method, using the specified numeric field value in geojson's properties and the length of the passed color array, perform segmented color rendering on the layer.

layer.color('weight',["rgba(1, 117, 152,0.8)","rgba(28, 189, 216,0.8)","rgba(95, 249, 240,0.8)"]); // Segmented rendering based on the passed color array using natural breaks

[Online Example: 05 Color 2 (color)](./05 颜色2(color).html)

Pass an attribute field and a callback function to set content based on the properties values of geojson.

layer.color("name", (value) => {
  // 黄浦区、徐汇区、长宁区、静安区、普陀区、虹口区、杨浦区、闵行区、宝山区、嘉定区、浦东新区、
  // 金山区、松江区、青浦区、奉贤区、崇明区
  // rgb(1, 117, 152)
  // rgb(25, 150, 174)
  // rgb(28, 189, 216)
  // rgb(72, 216, 218)
  // rgb(95, 249, 240)
  if (value === "黄浦区") {
    return ["rgba(1, 117, 152,1)", "rgba(1, 117, 152,1)"];
  }
  if (value === "徐汇区") {
    return "rgba(25, 150, 174,1)"; // Classification color // fill color, line color
  }
  if (value === "长宁区") {
    return ["rgba(28, 189, 216,1)", "rgba(28, 189, 216,1)"]; // Classification color // fill color, line color
  }
  if (value === "静安区") {
    return "#48d8da"; // Classification color // fill color, line color
  }
  if (value === "普陀区") {
    return ["rgba(95, 249, 240,1)", "rgba(95, 249, 240,1)"]; // Classification color // fill color, line color
  }
  return ["rgba(179,185,191,1)", "rgba(179,185,191,1)"];
})

[Online Example: 05 Color 3 (color)](./05 颜色3(color).html)

Pass a callback function to set content based on the properties values of geojson.

layer.color((properties) => {
  // 黄浦区、徐汇区、长宁区、静安区、普陀区、虹口区、杨浦区、闵行区、宝山区、嘉定区、浦东新区、
  // 金山区、松江区、青浦区、奉贤区、崇明区
  // rgb(1, 117, 152)
  // rgb(25, 150, 174)
  // rgb(28, 189, 216)
  // rgb(72, 216, 218)
  // rgb(95, 249, 240)
  const value = properties["name"];
  if (value === "黄浦区") {
    return ["rgba(1, 117, 152,1)", "rgba(1, 117, 152,1)"]; // fill color, line color
  }
  if (value === "徐汇区") {
    return "rgba(25, 150, 174,1)"; // Classification color // fill color, line color
  }
  return ["rgba(95, 249, 240,1)", "rgba(95, 249, 240,1)"]; // fill color, line color
})

[Online Example: 05 Color 4 (color)](./05 颜色4(color).html)

style

Set the general, overall style of the layer, such as overall line color, fill color, line width, opacity, etc.

Pass a style object to set basic styles, supporting line color, line width (line width cannot be adjusted after rendering), fill color, and opacity.

layer.style({
  lineColor: "rgba(255,20,255,1)", // line color
  stroke: "rgba(255,20,255,1)", // line color, equivalent to lineColor
  lineWidth: 2, // line width, only effective before render
  fillColor: "rgba(0,255,0,0.1)", // fill color
  opacity: 0.5 // opacity
})

[Online Example: 06 Style 1 (style)](./06 样式1(style).html)

texture

Textures not supported yet.

size

When the rendered shape type is circle, circle3D, box, or box3D, supports setting radius size and extrusion height.

Pass an attribute field and a callback function to set content based on the properties values of geojson.

layer.size("weight", (value) => {
  if (value === undefined || value === null || value <= 0) {
    return [0, undefined]; // height, width in meters
  }
  if (value > 50) {
    return [0, value * 10]; // height, width in meters
  }
  return [0, 200]; // height, width in meters
})

[Online Example: 07 Size 1 (size)](./07 尺寸大小1(size).html)

Pass a callback function to set content based on the properties values of geojson.

layer.size((properties) => {
  const value = properties["weight"];
  if (value === undefined || value === null || value <= 0) {
    return [100, undefined]; // height, width in meters
  }
  if (value > 50) {
    return [500, value * 20]; // height, width in meters
  }
  return [0, 200]; // height, width in meters
})

[Online Example: 07 Size 2 (size)](./07 尺寸大小2(size).html)

Pass an array of height and width values.

layer.size([0, 2000]) // height, width in meters

[Online Example: 07 Size 2 (size)](./07 尺寸大小2(size).html)

animate

Animations not supported yet.

active

Whether to support mouse hover events and the highlight color on hover.

layer.active(true, "rgba(255,0,0,1)") // First parameter true or false: true enables mouse hover events, false disables; second parameter is the highlight color on hover.

[Online Example: 08 Mouse Hover (active)](./08 鼠标滑过(active).html)

select

Whether to support mouse click events and highlight on click, and callback response event. The callback returns parameters: the rendered primitive's id (field: renderPrimitiveID) and its corresponding complete geojson information (field: geojson).

layer.select(true, "rgba(255,0,255,1)", (primitiveObj) => {
  // First parameter indicates whether to enable click response
  // Second parameter is the highlight color after click
  // Third parameter is a callback function for external handling after click selection
  console.log("ID:", primitiveObj.renderPrimitiveID);
  console.log("GeoJSON:", primitiveObj.geojson);
  setTimeout(() => {
    window.alert(primitiveObj.geojson.properties.name);
  });
})

[Online Example: 09 Mouse Click (select)](./09 鼠标点击(select).html)

bottomHeight

The layer's bottom height (elevation). Requires the layer not to be clamped to ground, i.e., clampToGround must be false when initializing the layer. Note: When rendering type is line (line layer), bottom height and extrusion height are not supported.

Pass a number to set the bottom height of the layer.

layer.bottomHeight(10000) // unit meters, note: when shape type is line, bottom height and extrusion height are not supported

[Online Example: 10 Bottom Height 1 (bottomHeight)](./10 离地高度1(bottomHeight).html)

Pass a callback function to set content based on the properties values of geojson.

layer.bottomHeight("weight", (value) => {
  if (value === undefined || value === null || value <= 0) {
    return 0; // height in meters
  }
  if (value > 80) {
    return 40000; // height in meters
  }
  if (value > 50) {
    return 4000; // height in meters
  }
  return 1000; // height in meters
}) // unit meters, note: when shape type is line, bottom height and extrusion height are not supported

[Online Example: 10 Bottom Height 2 (bottomHeight)](./10 离地高度2(bottomHeight).html)

Pass an attribute field and a callback function to set content based on the properties values of geojson.

layer.bottomHeight((properties) => {
  const value = properties["weight"];
  if (value === undefined || value === null || value <= 0) {
    return 0; // height in meters
  }
  if (value > 80) {
    return 40000; // height in meters
  }
  if (value > 50) {
    return 4000; // height in meters
  }
  return 1000; // height in meters
}) // unit meters, note: when shape type is line, bottom height and extrusion height are not supported

[Online Example: 10 Bottom Height 3 (bottomHeight)](./10 离地高度3(bottomHeight).html)

extrudedHeight

The layer's extrusion height. Requires the layer not to be clamped to ground, i.e., clampToGround must be false when initializing; the shape type must be 3D: fill3D, polygon3D, circle3D, box3D. Note: When rendering type is line (line layer), extrusion height and bottom height are not supported.

Pass a number to set the extrusion height of the layer.

layer.extrudedHeight(10000) // unit meters, note: when shape type is line, bottom height and extrusion height are not supported

[Online Example: 11 Extrusion Height 1 (extrudedHeight)](./11 拉伸高度1(extrudedHeight).html)

Pass a callback function to set content based on the properties values of geojson.

layer.extrudedHeight("weight", (value) => {
  if (value === undefined || value === null || value <= 0) {
    return 0; // height in meters
  }
  if (value > 80) {
    return 40000; // height in meters
  }
  if (value > 50) {
    return 4000; // height in meters
  }
  return 1000; // height in meters
}) // unit meters, note: when shape type is line, bottom height and extrusion height are not supported

[Online Example: 11 Extrusion Height 2 (extrudedHeight)](./11 拉伸高度2(extrudedHeight).html)

Pass an attribute field and a callback function to set content based on the properties values of geojson.

layer.extrudedHeight((properties) => {
  const value = properties["weight"];
  if (value === undefined || value === null || value <= 0) {
    return 0; // height in meters
  }
  if (value > 80) {
    return 40000; // height in meters
  }
  if (value > 50) {
    return 4000; // height in meters
  }
  return 1000; // height in meters
}) // unit meters, note: when shape type is line, bottom height and extrusion height are not supported

[Online Example: 11 Extrusion Height 3 (extrudedHeight)](./11 拉伸高度3(extrudedHeight).html')

updateExtrudedHeight

Pass extrusion height, animation duration, and bottom height to perform dynamic extrusion. Requires the layer not to be clamped to ground, i.e., clampToGround must be false when initializing; the shape type must be 3D: fill3D, polygon3D, circle3D, box3D. Note: When rendering type is line (line layer), extrusion height and bottom height are not supported. Parameter 1: extrusion height in meters; Parameter 2: time in milliseconds; Parameter 3: bottom height in meters; Parameter 4: to avoid flickering, smaller values cause more flickering; larger values significantly reduce flickering, but may cause overlapping highlight issues.

layer.updateExtrudedHeight(10000, 10000, 300, 10); // Parameter 1: extrusion height in meters; Parameter 2: time in milliseconds; Parameter 3: bottom height in meters; Parameter 4: to avoid flickering, smaller values cause more flickering; larger values significantly reduce flickering, but may cause overlapping highlight issues.

[Online Example: 12 Dynamic Extrusion Height (updateExtrudedHeight)](./12 动态拉伸高度(updateExtrudedHeight).html)

popupByMouse

Popups in the map are displayed based on mouse behavior. Two mouse behaviors are supported: MouseOver (display popup on hover) and MouseClick (display popup on click). NotShow is also supported to disable popups.

Pass a callback function to set content based on the properties values of geojson.

// Passing PopupShowByEventTypes.MouseOver is equivalent to "MouseOver"
layer.popupByMouse(
  PopupShowByEventTypes.MouseOver, // MouseClick: display on click, NotShow: do not show, MouseOver: display on hover
  (properties) => {
    const container = document.createElement("div");
    container.innerText = properties["name"];
    container.style.background = "#1890ff";
    container.style.padding = "0.4rem";
    container.style.color = "white";
    container.style.marginBottom = "4rem";
    return [container]; // Return a dom wrapped in an array
  },
)

[Online Example: 13 Popup 1 (popupByMouse)](./13 弹窗1(popupByMouse).html')

Pass an attribute field and a callback function to set content based on the properties values of geojson.

// Passing PopupShowByEventTypes.MouseClick is equivalent to "MouseClick"
layer.popupByMouse(
  PopupShowByEventTypes.MouseClick, // MouseClick: display on click, NotShow: do not show, MouseOver: display on hover
  "name",
  (value) => {
    const container = document.createElement("div");
    container.innerText = value;
    container.style.background = "#1890ff";
    container.style.padding = "0.4rem";
    container.style.color = "white";
    container.style.marginBottom = "4rem";
    return [container]; // Return a dom wrapped in an array
  },
)

[Online Example: 13 Popup 2 (popupByMouse)](./13 弹窗2(popupByMouse).html')

popupByFixed

Popups in the map are displayed based on specified behaviors. Two behaviors are supported: AfterRendered (display popup immediately after layer rendering, suitable for default popup display) and RightNow (display popup immediately when the popup method is called, suitable for dynamically modifying popups). NotShow is also supported.

Pass a callback function to set content based on the properties values of geojson.

// Passing PopupShowByEventTypes.AfterRendered is equivalent to "AfterRendered"
layer.popupByFixed(
  PopupShowByEventTypes.AfterRendered, // AfterRendered: display immediately after rendering, NotShow: do not show, RightNow: display immediately when method is called
  (properties) => {
    const container = document.createElement("div");
    container.innerText = properties["name"];
    container.style.background = "#1890ff";
    container.style.padding = "0.4rem";
    container.style.color = "white";
    container.style.marginBottom = "4rem";
    return [container]; // Return a dom wrapped in an array
  },

[Online Example: 14 Popup 1 (popupByFixed)](./14 弹窗1(popupByFixed).html)

Pass an attribute field and a callback function to set content based on the properties values of geojson.

// Passing PopupShowByEventTypes.RightNow is equivalent to "RightNow"
layer.popupByFixed(
  PopupShowByEventTypes.RightNow, // AfterRendered: display immediately after rendering, NotShow: do not show, RightNow: display immediately when method is called
  "name",
  (value) => {
    const container = document.createElement("div");
    container.innerText = value;
    container.style.background = "#1890ff";
    container.style.padding = "0.4rem";
    container.style.color = "white";
    container.style.marginBottom = "4rem";
    return [container]; // Return a dom wrapped in an array
  },
);

[Online Example: 14 Popup 2 (popupByFixed)](./14 弹窗2(popupByFixed).html)

Use "NotShow" and "RightNow" to control popup visibility.

// Hide popup
polygonLayer.popupByFixed(PopupShowByEventTypes.NotShow);
// Show popup again
polygonLayer.popupByFixed(PopupShowByEventTypes.RightNow);

[Online Example: 14 Popup 3 (popupByFixed)](./14 弹窗3(popupByFixed).html)

The isScaleByLevel property sets whether the popup scales with the earth's zoom level. It scales by default.

layer.popupByFixed(
  PopupShowByEventTypes.AfterRendered, // AfterRendered: display immediately after rendering, NotShow: do not show, RightNow: display immediately when method is called
  (properties) => {
    const container = document.createElement("div");
    container.innerText = properties["name"];
    container.style.background = "#1890ff";
    container.style.padding = "0.4rem";
    container.style.color = "white";
    container.style.marginBottom = "4rem";
    container.isScaleByLevel = false; // Whether to scale the popup with the earth's zoom level, defaults to scaling with earth
    return [container]; // Return a dom wrapped in an array
  },
)

[Online Example: 14 Popup 4 (popupByFixed)](./14 弹窗4(popupByFixed).html)

closePopupFixedLayers

Destroy popups.

layer.closePopupFixedLayers();

[Online Example: 15 Popup (closePopupFixedLayers)](./15 弹窗(closePopupFixedLayers).html)

show

Two parameters: The first parameter controls layer visibility: true shows the layer, false hides it. The second parameter controls popup visibility: true shows popups, false hides them. By default, popup visibility follows the layer visibility parameter.

Layer show/hide control.

layer.show(false); // Hide layer and hide popups
layer.show(false,false); // Hide layer and hide popups
layer.show(false,true); // Hide layer but show popups
layer.show(true); // Show layer and show popups
layer.show(true,true); // Show layer and show popups
layer.show(true,false); // Show layer but hide popups

[Online Example: 16 Show/Hide Control (show)](./16 显示隐藏控制(show).html)

visible

Equivalent to the show method.

destroy

Destroy the layer, completely close and remove the layer.

layer.destroy(); // Destroy the layer, completely close and remove the layer
// Equivalent to layer.remove()
// Equivalent to layer.clear()
// Equivalent to layer.close()

[Online Example: 17 Destroy/Close/Remove Layer (destroy)](./17 销毁关闭移除图层(destroy).html)

remove

Equivalent to the destroy method.

clear

Equivalent to the destroy method.

close

Equivalent to the destroy method.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

render3dpro 文档

接口使用指南-中文

简介

语法示例

使用示例

详情

source

GeoJSON 数据说明

FeatureCollection

Feature

Geometry 类型示例

render

ready

locate

flyTo / zoomTo

filter

shape

color

style

texture

size

animate

active

select

bottomHeight

extrudedHeight

updateExtrudedHeight

popupByMouse

popupByFixed

closePopupFixedLayers

show / visible

destroy / remove / clear / close

render3dpro Documentation

API User Guide-English

Introduction

Syntax Example

Usage Example

Details

source

GeoJSON Data Description

FeatureCollection

Feature

Geometry

render

ready

locate

flyTo

zoomTo

filter

shape

color

style

texture

size

animate

active

select

bottomHeight

extrudedHeight

updateExtrudedHeight

popupByMouse

popupByFixed

closePopupFixedLayers

show

visible

destroy

remove

clear

close