xgis-cesium

v0.4.2

Published

24 days ago

基于@cesium/engine开发的，结合项目经验积累，进行定制的内部使用版。非商业项目免费使用！

Downloads

295

0High
0Medium
0Low

zorrowm

cesium xgis typescript

xgis-cesium

xgis-cesium是基于@cesium/engine开发的，结合项目经验积累，进行定制的内部使用版。非商业项目免费使用，商业应用请购买使用授权key。

xgis-cesium-mars3d是基于mars3d-cesium开发的，结合项目经验积累，进行定制的内部使用版。 https://www.npmjs.com/package/xgis-cesium-mars3d

注意： xgis-ceisum-mars3d 基于mars3d-cesium开发的版本，方便用于mars3d集成开发。

基于Cesium+TS+VUE的三维开发框架

更新日志

v0.4.2 更新@cesium/engine到22.0.0版,更新基础库;解决PositionStatusControl更新不及时问题;更改完善LabelGeojsonLayer;增加导出turf,取消依赖外部window.turf，删除内置turf.min.js资源;
v0.4.1 更新@cesium/engine到21.0.0版,去掉defaultValue的使用;更新基础库；完善KeyboardRoaming;
v0.4.0 调整overlay/model/Tileset加载的默认配置选项;调整XViewer的enableOfflineCache方法增加includeCallBack和excludeCallBack过滤url函数;
v0.3.9 更新@cesium/engine到18.3.0版;优化WFSLoader加载矢量图层有返回值；修改模型压平回调返回多边形；给XViewer增加getCameraFocus获取视野中心点;
v0.3.8 更新@cesium/engine到18.2.0版;更新依赖库版本;解决wmts服务范围为空时加载瓦片报错；解决椭圆绘制当长轴小于短半轴时报错的问题；
v0.3.7 解决0.3.5处理挖方分析计算高度错误时引入的逻辑判断BUG(会导致挖方分析功能无法使用);
v0.3.6 更新@cesium/engine到18.0.0版; 更新依赖库版本;优化模型裁切功能和Tileset加载的默认配置;
v0.3.5 修改在高海拔地形下级别zoom计算错误；PositionStatusControl组件显示级别错误与不更新的问题; XViewer增加fire方法，用于内部抛出错误或其他自定义事件；解决挖方分析计算高度错误，导致报“Rendering has stopped”错误，改为主动抛出ViewerEventType.ERROR错误;
v0.3.4 修改0.3.3更新问题：MouseEvent中Cesium未定义问题、将viewer错误使用为viewer.delegate；
~~v0.3.3 增加天际线效果；修改完善鼠标事件；更新依赖库版本；~~
v0.3.2 使用webworker改造模拟飞行相关方法(flightWoker，进一步降低内存占用)；增加select方法，支持拉框选择、多边形选择、点选和圆选；
v0.3.1 修改地形压平失效（0.2.8~0.3.0都存在）；修改发现多个小BUG；扩大webworker应用范围：将turf包装为turfWorker，坡度坡向分析增加两种计算方法calculateSlopeAndAspectAsync（基于turfworker）和calculateSlopeAndAspectAsyncWorker（基于webworker）,区域等高线提取增加计算方法calculateContourLinesAsync（基于turfworker）；增加EventBus3D全局事件对象，支持坡度坡向异步分析、等高线异步提取的过程进度显示；
v0.3.0 修改GameControlHelper适应移动app需求;解决飞行轨迹线点集合没清空问题；简化XViewer初始化（可以只传id）优化提升性能；开始引入webworker；增加LabelMassiveLayer支持海量标注（基于webworker实现，增加动态加减注记、注记避让，用法与LabelGeojsonLayer一样），需配合vite-plugin-xgis-cesium 0.0.4版使用；
v0.2.9 内置turf包;配合vite-plugin-xgis-cesium使用进行修改；
v0.2.8 增加矢量注记层LabelGeojsonLayer和矢量切片注记，并接入图层管理；引入多个矢量切片js库；由rollup改为vite打包；
v0.2.7 为Weather增加SnowCover类对象,实现在Model和Cesium3DTileset的积雪效果;
v0.2.6 解决打包index.js文件过大问题(分包);解决可视域计算BUG;XViewer增加setWMTSProviderFilter图层层级过滤等；更新logo图标;取消WMTSLoader加载图层默认定位; @cesium/engine更新到17.0.0版;更新其他依赖库版本;
v0.2.5 增加本地资源缓存功能，XViewer对象增加enableOfflineCache、disableOfflineCache和clearOfflineCache方法（解决0.1.6版本后CesiumOfflineCache.min.js失效无法使用问题）;
v0.2.4 修改Tiles3DLoader加载默认不贴地;再次修改模拟飞行的飞机和路径释放的问题;给Overlay增加定位;
v0.2.3 修改WFSLoader解析url错误;修改loadWMTSByCapabilities加完图层不定位问题;增加Tiles3DLoader工具类;
v0.2.2 修改XViewer释放报错问题；修改添加图层是否触发事件;flyToBounds和zoomToBounds的默认不用视角参数;utils下增加WMTSLoader和WFSLoader工具类，实现解析Capabilities XML加载地图图层；
v0.2.1 解决模拟飞行的资源释放问题；空间分析analysis中增加模型压平（createFlatTilesetHelper、flatTileset3D、clearFlatRegion等方法）;增加EnableTerrainProviderFlat方法扩展Cesium.CesiumTerrainProvider支持地形压平（需要window.turf）;更新依赖库@cesium/engine版本到16.0.0;
*v0.2.0 修改bug;增加空间分析功能：通视分析、可视域分析、坡度分析、坡度坡向反向、方量分析、缓冲区分析、淹没分析、地形挖掘、地形剖面分析、模型裁切、区域等高线、多边形叠置分析;XViewer增加了LayerManageEvent事件、onLayerAddManageHandler、onLayerRemoveManageHandler方法来对接图层管理组件;
v0.1.9 内部包含@cesium/engine导出Cesium;增加三维标绘标绘符号;
v0.1.8 补充部分说明,更新加入API开发文档支持;
v0.1.7 更新依赖库版本;增加内置global.jpg和supercluster库;增加版权声明与商业授权控制;
*v0.1.6 更新依赖库版本;同步版本;修改依赖@cesium/engine代替cesium;去掉部分对cesium依赖；
*v0.1.4 修改getHeading方法计算错误；优化getPitch获取俯仰角方法；增加getRoll获取翻滚角;FlightNaviTool里增加getDirectionAB和getDistancePositionByDirection方法，计算方向和该方向远处的点;
v0.1.3 增加设置和获取航向角，并修改相关方法;修改bindEntity方法；增加飞行轨迹墙和显示控制；
v0.1.2 增加自由飞行FreeFlyHelper; 完善GameControlHelper，增加翻转角和自动回正等
v0.1.1 给XViewer增加相机切换视角方法changeCameraFocus、godView、firstView、followView、freeView; 修改GodView跟随方向;
v0.1.0 给Transform补充transformCartesianToCartographic方法;增加Analysis的坡度分析、方量分析等;为XViewer增加CameraFocusHelper视角控制;增加flight模拟飞行控制相关的RouterTrackHelper、GameControlHelper、ViewerEntityHelper、FlightNaviTool;
v0.0.8 补充Transform的方法参数类型；为XMath的方法补充参数类型,并增加resample方法和Direction类(用于两点之间的航向、方向、朝向等相关计算);为ParsePosition增加PositionType类型；为XViewer增加拾取点方法getCatesian3ByPick;
v0.0.7 ImageType改为EnumImageType,增加EnumBasicLayerName、EnumBasicLayerName；XViewer增加appendBasicLayer方法、getBasicLayers方法，addBasicLayer、setBasicLayer方法增加ImageProviderOptions构建参数（例如：传入{maximumLevel:10}控制最大级别）
v0.0.6 解决v0.0.5版本存在问题；更新内置天地图KEY;将部分js代码改为ts
v0.0.4 解决drawTool和editTool没有绑定Viewer的问题；补充Viewer的内部Widget;增加XMath、History-Track、HeatMapLayer；
v0.0.3 给xviewer增加移除底图方法、destroy、图层容器layerContainer;修改示例编写中发现的问题

核心功能

核心的XViewer是扩展Cesium.CesiumWidget的实现，增加很多基础功能
基础图层管理，支持多种地图底图
图层树管理功能
三维标绘功能
空间分析功能（增加基于webworker的支持）
天气（积雪效果）
三维矢量注记
WebWorker应用：turfWorker等

三维图层管理

三维标绘

可视域分析

模型剖分裁切

坡度坡向计算

模型压平-大雁塔

地形压平

模型积雪效果

三维注记

矢量注记2

等高线提取过程进度

LabelGeojsonLayer

开发文档

API开发文档v0.1.9：https://zorrowm.github.io/api-doc/xgis-cesium-v0.1.9/index.html

开发示例地址：https://3d.gis.digsur.com/#/product/index

安装

npm i xgis-cesium

不用再单独安装@cesium/engine

需要引入类库样式： import 'xgis-cesium/dist/index.css'

安装vite插件

npm i vite-plugin-xgis-cesium -D

新用法

1、优先：使用vite-plugin-xgis-cesium插件（0.2.9以后版本）

不用拷贝cesium资源了，使用参考： https://www.npmjs.com/package/vite-plugin-xgis-cesium

import { defineConfig } from 'vite';
import xgisCesiumPlugin from 'vite-plugin-xgis-cesium';
export default defineConfig({
  plugins: [xgisCesiumPlugin()]
});

2、支持Webworker使用（0.3.0版以后）

方法1：使用vite-plugin-xgis-cesium插件0.0.4版
方法2：手动拷贝 xgis-cesium/dist/assets里js文件到 public/assets目录下

使用方法

1、传统：拷贝cesium资源，到public/cesium（0.2.8以前版本）

手动拷贝 ./node_modules/xgis-cesium/dist/resources/下资源
- xgis-cesium/dist/resources/Workers
- xgis-cesium/dist/resources/ThirdParty
- xgis-cesium/dist/resources/Assets
使用vite插件 rollup-plugin-copy
- vite.config.ts里配置

// vite.config.ts
import { defineConfig } from 'vite'
import copy from 'rollup-plugin-copy'

export default defineConfig({
  plugins: [copy({
           targets: [
             //下面为cesium 三维资源的拷贝
             { src: './node_modules/xgis-cesium/dist/resources/Workers', dest: 'public/cesium' }, 
             { src: './node_modules/xgis-cesium/dist/resources/ThirdParty', dest: 'public/cesium' }, 
             { src: './node_modules/xgis-cesium/dist/resources/Assets', dest: 'public/cesium' }, 
           ]
         })],
})

使用quasar.config.ts配置

import { existsSync } from 'fs';

if(!existsSync('public/cesium'))
      {
        defaultPlugins.push(     
         ['rollup-plugin-copy',{
           targets: [
             //下面为cesium 三维资源的拷贝
             { src: './node_modules/xgis-cesium/dist/resources/Workers', dest: '/public/cesium' }, 
             { src: './node_modules/xgis-cesium/dist/resources/ThirdParty', dest: '/public/cesium' }, 
             { src: './node_modules/xgis-cesium/dist/resources/Assets', dest: '/public/cesium' }, 
           ]
         }]);
      }

2、使用XViewer初始化构建球

    import {Cesium,XViewer} from 'xgis-cesium';

//初始化地球
    function initCesiumViewer() {
      //@ts-ignore
      if(!window.CESIUM_BASE_URL)
      {
        //@ts-ignore
        window.CESIUM_BASE_URL='./cesium/';
      }
      try {
        //https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html#.ConstructorOptions
        const viewer = new XViewer('cesiumContainer', {
          animation: false, //是否创建动画小器件，左下角仪表
          baseLayerPicker: false, //是否显示图层选择器
          fullscreenButton: false, //是否显示全屏按钮
          geocoder: false, //是否显示geocoder小器件，右上角查询按钮
          homeButton: false, //是否显示home按钮
          infoBox: false, //是否显示信息框
          sceneModePicker: false, //是否显示3D/2D选择器
          selectionIndicator: false, //是否显示选取指示器组件 鼠标绿色框
          timeline: false, // 是否显示时间轴
          navigationHelpButton: false, // 是否显示右上角的帮助按钮
          vrButton: false, // 是否显示双屏
          scene3DOnly: true, // 如果设置为true,则所有几何图形以3d模式绘制以节约gpu资源
          fullscreenElement: document.body, //全屏时渲染的html元素
          navigationInstructionsInitiallyVisible: false,
          contextOptions: {
            // cesium状态下允许canvas转图片convertToImage
            webgl: {
              alpha: false,
              depth: false,
              stencil: true,
              antialias: true,
              premultipliedAlpha: true,
              preserveDrawingBuffer: true, //通过canvas.toDataURL()实现截图需要将该项设置为true
              failIfMajorPerformanceCaveat: false
            },
            //https://juejin.cn/post/7265042701065437220
            // requestWebgl1: false,
          },
          //https://cesium.com/learn/cesiumjs/ref-doc/CesiumWidget.html?classFilter=CesiumWidget
          //https://cesium.com/blog/2018/01/24/cesium-scene-rendering-performance/
          requestRenderMode: true,//优化性能，需要主动触发更新   scene.requestRender();
          targetFrameRate: 60,
          orderIndependentTranslucency: true,
          automaticallyTrackDataSourceClocks: false,
          dataSources: undefined,
          terrainShadows: Cesium.ShadowMode.DISABLED,
          //是正确的
          baseLayer: false,
          // terrainProvider: await Cesium.createWorldTerrainAsync({
          //      requestVertexNormals: true,
          //      requestWaterMask: true,     // 动态水流
          // }),
          //默认地形-无地形
          terrainProvider: new Cesium.EllipsoidTerrainProvider(),
        });
        viewer.clock.currentTime = Cesium.JulianDate.fromDate(new Date());
        return viewer;
      }
      catch (error) {
        Global.Message.err('Cesium Viewer初始化失败！');
        Global.Logger().error('Cesium Viewer初始化失败', error);
      }
      return undefined;
    }

3、调用开发示例

      Global.CesiumViewer = initCesiumViewer();
      if (Global.CesiumViewer) {
        const xviewer = Global.CesiumViewer as XViewer;
      //   const terrain = TerrainFactory.createUrlTerrain({
      // url: 'http://data.marsgis.cn/terrain'
      // });
   
      //   //地形
      //   xviewer.setTerrain(terrain);
        //默认单张图片，作为底图
        xviewer.setBasicLayer('ARCGIS_IMG');
        // xviewer.flyToPosition(new Position(116.2698, 36.3475, 203,5.69,-26.2,360));
       
        // xviewer.Weather.rain.enable=true;
        // setTimeout(() => {
        //   xviewer.Weather.rain.destroy();
        //   xviewer.scene.requestRender();
        // }, 5000);
      }

4、三维应用示例

更多示例

基础示例：https://3d.gis.digsur.com/#/product/apiexamples?wid=imageBaseLayerWidget

5、空间分析—示例代码

大部分空间分析功能需要使用turf库，需要单独引用最新的 turf.min.js

初始化Analysis 对象：

if (Global.CesiumViewer) {
 viewer = Global.CesiumViewer;
 analysisHelper = new Analysis(viewer);
 }

方量分析：

analysisHelper.volumeAnalysis(res=>{
          // console.log('输出统计结果：',res)
          if(res)
          {
            planeHeightRef.value=res.planeHeight;
            wallMinHeightRef.value=res.wallMinHeight;
            wallMaxHeightRef.value=res.wallMaxHeight;
          }
        });

区域等高线

    analysisHelper.calculateContourLines(100);

缓冲区分析

function shapeChanged(value, evt) {
  switch (value) {
    case 'point':
      if (analysisHelper)
        plotHelper.draw(EnumPoltType.POINT, (data) => {
          // console.log(data,'point111111111111111')
          analysisHelper.bufferPoint(data.position, bufferRadius.value);
        }, undefined);
      break;
    case 'line':
      if (analysisHelper)
        plotHelper.draw(EnumPoltType.POLYLINE, (data) => {
          analysisHelper.bufferPolyline(data.positions, bufferRadius.value);
        }, undefined);
      break;
    case 'polygon':
      if (analysisHelper)
        plotHelper.draw(EnumPoltType.POLYGON, (data) => {
          analysisHelper.bufferPolygon(data.positions, bufferRadius.value);
        }, undefined);
      break;
  }
}

叠置分析（多边形）

/**

 * 两个面叠置分析
 * @param value 
 * @param evt 
   */
   function doTurfAnalysis() {
     if (!poly1 || !poly2) {
   Global.Message.warn('必须绘制两个面，不能为空！')
   return;
     }

  if (analysisHelper) {
    switch (turfMethod.value) {
      case 'intersect': //相交
        analysisHelper.intersectByTurf(poly1, poly2);
        break;
      case 'union':
        analysisHelper.unionByTurf(poly1, poly2);
        break;
      case 'defference':
        analysisHelper.differenceByTurf(poly1, poly2);
        break;
    }

  }
}

坡度坡向分析

function doSlopeAndAspect() {
  if (analysisHelper)
    analysisHelper.calculateSlopeAndAspect(cellWidth.value, arrowSize.value, 			maxCellSize.value);
}

可视域分析
```
    analysisHelper.viewShedAnalysis();
```

多边形裁切模型

function doPolygonClipping() {
    const targetTileset = Global.Tileset3D ?? tilesetResult;
    if (analysisHelper) {
      analysisHelper.clipTilesetByPolygon(targetTileset, innerClipRef.value);
    }
}

模型压平

const flatNumRef=ref<number>(-30);
function doFlatModel()
{
  
  if(!flatTool)
  flatTool=analysisHelper.createFlatTilesetHelper(tilesetResult,0);
    
  analysisHelper.flatTileset3D(flatNumRef.value,undefined,id=>{
      currentID=id;
  });
}
function clearFlatModel()
{
  if(currentID)
  {
      analysisHelper.clearFlatRegion(currentID);
  }
}

6、地形压平—示例代码

调用EnableTerrainProviderFlat实现扩展Cesium.CesiumTerrainProvider支持地形压平，需要window.turf对象不为空。参考实现：https://juejin.cn/post/7350624030464180234

import { XViewer, Cesium,TerrainFactory,EnableTerrainProviderFlat } from 'xgis-cesium';

//初始化地形
        EnableTerrainProviderFlat();
        const terrain = TerrainFactory.createUrlTerrain({
          url: 'http://data.marsgis.cn/terrain'
          });
      //地形
       xviewer.setTerrain(terrain);

地形压平的功能应用代码：

function doFlatModel()
{
    if(plotHelper)
    plotHelper.draw(EnumPoltType.POLYGON, (data) => {
        console.log(data.positions,'positions0000000000');
        const polygon=Parse.parsePolygonCoordToArray(data.positions, true)
         const terrainFlat= viewer.scene.terrainProvider;
        if(terrainFlat)
        {
          uid=uuid();
         terrainFlat.addTerrainEditsData(uid,polygon,0);
        }
        }, undefined);
}
function clearFlatModel()
{
  if(uid)
  {
    const terrainFlat= viewer.scene.terrainProvider;
    if(terrainFlat)
    {
      terrainFlat.removeTerrainEditsData(uid);
    }
  }
}

7、下雪积雪效果——示例代码

积雪效果是使用CustomShader
https://cesium.com/learn/cesiumjs/ref-doc/CustomShader.html
A user defined GLSL shader used with Model as well as Cesium3DTileset.

开启下雪和积雪效果：自动绑定Model和Cesium3DTileset

  viewer.Weather.snow.enable=true;//下雪
  viewer.Weather.snowCover.enable=true;//积雪

提高（降低）积雪速度：默认为1，大于0的数字

 viewer.Weather.snowCover.speed=20;

暂停积雪

 viewer.Weather.snowCover.enable=false;

释放积雪效果

viewer.Weather.snowCover.destroy();

8、三维注记——示例代码

中国省级注记：LabelGeojsonLayer

默认样式为：

  //默认样式
  private defaultStyleObject:any={
    show:false,
    minLevel:3,
    maxLevel:5,
    weight:2,
    offset:-15,
    fontColor:"#EEEEEE",
    fontAlpha:1,
    fontFamily: "黑体",
    fontSize:16,
    labelField:"tsmc",
    filterField:"tsmc",
    excludeValue:"北京,北京市,中华人民共和国",
    outlineColor:"#000000",
    outlineWidth:2,
    imgUrl:'img/style/city2.png',
    imgWidth:20,
    imgHeight:20,
    children:[
      {
        weight:5,
        offset:-15,
        fontColor:"#ff0000",
        fontSize:16,
        filterField:"tsmc",
        includeValue:'北京',
        excludeValue:undefined,
        imgUrl:'img/style/star.png',
        imgWidth:20,
        imgHeight:20,
      },
      {
        weight:3,
        offset:-15,
        fontColor:"#EEEEEE",
        fontSize:16,
        fontAlpha:1,
        fontFamily: "黑体",
        filterField:"tsmc",
        includeValue:'北京市',
        excludeValue:undefined,
        imgUrl:'img/style/city1.png',
        imgWidth:20,
        imgHeight:20,
      },
      {
        weight:5,
        offset:-15,
        fontColor:"#EEEEEE",
        fontSize:16,
        fontFamily: "黑体",
        filterField:"tsmc",
        includeValue:'中华人民共和国',
        excludeValue:undefined,
        imgUrl:'',
      },
      {
        weight:3,
        offset:-15,
        fontColor:"#EEEEEE",
        fontSize:18,
        fontAlpha:1,
        fontFamily: "黑体",
        filterField:"tsmc",
        includeValue:'北京市',
        excludeValue:undefined,
        imgUrl:'img/style/city1.png',
        imgWidth:20,
        imgHeight:20,
      },
    ]
  };

加载中国省级注记：

import { XViewer,LabelGeojsonLayer } from 'xgis-cesium'; 
//加载中国省级行政区矢量注记
const labelLayer=new LabelGeojsonLayer('chinaPlaces','https://zorrowm.github.io/data/poi/chinaProvince.json',defaultStyleObject);
        labelLayer.attr={
          type:'注记',
          layerID:'chinaPlaces',
          layerName:'中国地名',
          kind:'geojson'
        }
 xviewer.addLayer(labelLayer,true);

世界注记（mvt矢量切片）

矢量切片数据源：https://zorrowm.github.io/data/mvt3d/world/countryName/metadata.json

const vtTileView=new VTileView(viewer,"https://zorrowm.github.io/data/mvt3d/world/countryName/metadata.json",{
          "countryName":{
            show:true,
            minLevel:0,
            maxLevel:4,
            weight:10,
            offset:0,
            fontColor:"#FFFFFF",
            fontFamily: "黑体",
            fontSize:16,
            labelField:"name",
            filterField:"name",
            excludeValue:"中国",
            outlineColor:"#000000",
            outlineWidth:5,
            outlineAlpha:0.5
          }
        },"图层ID",{});//最后一个参数为图层属性，可空

打开关闭注记显示代码

根据图层ID，获取对应图层

            //获取图层ID
            const layerIDvt = layer.layerID;
            if(layerIDvt)
            {
              const lyr = xviewer.getLayer(layerIDvt);
              if (lyr){
                lyr.show = visible;
                if(lyr.delegate.imageryProvider)//layer.kind==='mvt'
                lyr.delegate.imageryProvider.show(visible)
              } 
            }

9、解决大量注记加载与显示——示例代码

LabelMassiveLayer与LabelGeojsonLayer用法相同，主要用于大量注记动态加载显示和动态移除。

const cunStyleObject:any={
        show:false,
        minLevel:14,
        maxLevel:19,
        weight:1,
        offset:-15,
        fontColor:"#f00",
        fontAlpha:1,
        fontFamily: "黑体",
        fontSize:18,
        labelField:"tsmc",
        filterField:"tsmc",
        // outlineColor:"#000000",
        // outlineWidth:2,
        imgUrl:'img/style/city2.png',
        imgWidth:20,
        imgHeight:20,
        backgroundColor:"#ff0"
      };
        const labelLayer2=new LabelMassiveLayer('testPlaces','/SampleData/out2.json',cunStyleObject);
        labelLayer2.show=true;
        labelLayer2.attr={
          type:'注记',//'model3d',
          layerID:'testPlaces',
          layerName:'测试地名',
          kind:'geojson'
        }
        xviewer.addLayer(labelLayer2,true);

10、空间分析的过程进度显示——示例代码

通过EventBus3D事件总线，支持异步空间分析方法的进度显示，例如：等高线提取的calculateContourLinesAsync、坡度坡向分析的calculateSlopeAndAspectAsyncWorker 和calculateSlopeAndAspectAsync方法。进度监听的事件名为方法名。

import { EventBus3D } from 'xgis-cesium';

等高线提取分析

    case 'DEMExtract': //等高线
      if (analysisHelper){
        EventBus3D.off('calculateContourLinesAsync', showProgressHandler);
        EventBus3D.on('calculateContourLinesAsync', showProgressHandler);
        analysisHelper.calculateContourLinesAsync(100);
      } 
      break;

坡度坡向分析，进度显示

//进行坡度坡向计算
function doSlopeAndAspect() {
  resetProgress()
  if (analysisHelper) {
    EventBus3D.off('calculateSlopeAndAspectAsyncWorker', showProgressHandler);
    EventBus3D.on('calculateSlopeAndAspectAsyncWorker', showProgressHandler);
    analysisHelper.calculateSlopeAndAspectAsyncWorker(cellWidth.value, arrowSize.value, maxCellSize.value);
  }

  // analysisHelper.calculateSlopeAndAspect(cellWidth.value, arrowSize.value, maxCellSize.value);
}

const progress = ref(0);
const label = ref('');
const error = ref('');
function showProgressHandler(data) {
  if (data) {
    if (data.progress === -1) error.value = data.info;
    else{ 
      progress.value = data.progress / 100;
      label.value = data.progress + '%'
    }
  }

  console.log(data.info, data.progress);
}

11、拉框选择——示例代码

从0.3.2版起，增加选择工具，支持拉框选择、多边形选择、点选和圆选。

拉框选择

import {
    Cesium,
    Position,
    Transform,
    Select,
    EnumSelectType,
    XViewer
} from 'xgis-cesium';

let select =new Select(viewer)

function drawFigureClickFun() {
    select.draw(EnumSelectType.POLYGON, drawCallback,
     {
        clampToGround: false,
    }
  );
 }

function drawCallback(bounds: any) {
    console.log(bounds,'框选范围结果000000000')
    if ( bounds) {
      const pts=bounds.positions as Position[];
      const pt0=pts[0]
      const pt1=pts[1];
      const rectangle=  Cesium.Rectangle.fromDegrees(pt0.lng, pt0.lat, pt1.lng, pt1.lat);
     const result=getEntitiesInRectangle(rectangle,'气象点.shp',"气温");
        
     const winPt0= Transform.transformWGS84ToWindow(pt0,viewer);
     const winPt1= Transform.transformWGS84ToWindow(pt1,viewer);
     console.log(winPt0,winPt1,'桌面坐标点111111111');
    }
  }

12、加载Geojson注记图层——示例代码

为每个注记层配置相关的样式和显示距离 near 和far

样式配置示例代码：

 {
            show: true,
            // minLevel: 3,
            // maxLevel: 7,
            near:400000, 
            far:900000,
            weight: 3,
            offset: -15,
            fontColor: "#FFD9D9",
            fontFamily: "黑体",
            fontSize: 16,
            labelField: "市",
            filterField: "市",
            outlineColor: "#000000",
            outlineWidth: 2,
            imgUrl: "/img/style/city1.png",
            imgWidth: 20,
            imgHeight: 20,
        }

完整代码：


import { onMounted, onUnmounted } from 'vue';
import { Global } from 'xframelib';
import { Cesium,LabelGeojsonLayer, XViewer } from 'xgis-cesium';

const poiList = [
    {
        id: 'city_poi',
        url: '/SampleData/cityPOI.json',
        layerName: '市名',
        styleOptions: {
            show: true,
            // minLevel: 3,
            // maxLevel: 7,
            near:400000, 
            far:900000,
            weight: 3,
            offset: -15,
            fontColor: "#FFD9D9",
            fontFamily: "黑体",
            fontSize: 16,
            labelField: "市",
            filterField: "市",
            outlineColor: "#000000",
            outlineWidth: 2,
            imgUrl: "/img/style/city1.png",
            imgWidth: 20,
            imgHeight: 20,
        },
    },
    {
        id: 'county_poi',
        url: '/SampleData/coutyPOI.json',
        layerName: '县名',
        styleOptions: {
            show: true,
            // minLevel: 7,
            // maxLevel: 10,
            near:40000, 
            far:500000,
            weight: 2,
            offset: -15,
            fontColor: "#EEE",
            fontFamily: "黑体",
            fontSize: 14,
            labelField: "NAME",
            outlineColor: "#000000",
            outlineWidth: 2
        }
    },
]

function loadLabelLayer(data:any) {
    const viewer:XViewer = Global.CesiumViewer; 
    const styleOptions = data.styleOptions;
    const labelLayer = new LabelGeojsonLayer(data.id,data.url,styleOptions);
    labelLayer.attr = {
        type: '注记',//'model3d',
        layerID: data.id,
        layerName: data.layerName,
        kind: 'geojson'
    }
    viewer.addLayer(labelLayer);
}

onMounted(() => {
    //遍历加载行政区划
    poiList.forEach(item => {
        loadLabelLayer(item);
    });

});
onUnmounted(() => {
    const viewer: XViewer = Global.CesiumViewer;
    if (viewer) {
        poiList.forEach(item => {
            viewer.removeLayerByID(item.id);
        });
    }
})

版权声明

xgis-cesium是基于@cesium/engine扩展的三维GIS开发框架库
版权所有 (c) 2025-2030 保留所有权利。
开发作者：[email protected]
NPM地址：https://www.npmjs.com/package/xgis-cesium
授权声明：
1.允许免费在非商业项目中使用，需保留授权信息输出和版权logo；
2.未经商业授权的免费使用中的出现任何问题，我方无需负责；
3.我方只对商业授权版本用户提供技术支持；
4.我方保留对此版权信息的最终解释权。
未经授权，禁止对包篡改和移除版权声明输出！

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

xgis-cesium

基于Cesium+TS+VUE的三维开发框架

更新日志

核心功能

开发文档

安装

新用法

1、优先：使用vite-plugin-xgis-cesium插件（0.2.9以后版本）

2、支持Webworker使用（0.3.0版以后）

使用方法

1、传统：拷贝cesium资源，到public/cesium（0.2.8以前版本）

2、使用XViewer初始化构建球

3、调用开发示例

4、三维应用示例

5、 空间分析—示例代码

6、 地形压平—示例代码

7、下雪积雪效果——示例代码

8、三维注记——示例代码

9、解决大量注记加载与显示——示例代码

10、空间分析的过程进度显示——示例代码

11、拉框选择——示例代码

12、加载Geojson注记图层——示例代码

版权声明

5、空间分析—示例代码

6、地形压平—示例代码