🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

xgis-cesium

Package Overview
Dependencies
Maintainers
1
Versions
33
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

xgis-cesium

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

0.3.4
latest
npm
Version published
Weekly downloads
222
63.24%
Maintainers
1
Weekly downloads
 
Created
Source

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.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

等高线提取过程进度

开发文档

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目录下 拷贝webworkerjs文件

使用方法

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');
    }
  }

版权声明

xgis-cesium是基于@cesium/engine扩展的三维GIS开发框架库

版权所有 (c) 2025-2030 保留所有权利。

开发作者:zorrowm@126.com

NPM地址:https://www.npmjs.com/package/xgis-cesium

授权声明:

1.允许免费在非商业项目中使用,需保留授权信息输出和版权logo;

2.未经商业授权的免费使用中的出现任何问题,我方无需负责;

3.我方只对商业授权版本用户提供技术支持;

4.我方保留对此版权信息的最终解释权。

未经授权,禁止对包篡改和移除版权声明输出!

Keywords

cesium

FAQs

Package last updated on 03 Jun 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts