
Security News
Research
Destructive npm Packages Disguised as Utilities Enable Remote System Wipe
Socket uncovered two npm packages that register hidden HTTP endpoints to delete all files on command.
xgis-cesium
Advanced tools
xgis-cesium
是基于@cesium/engine开发的,结合项目经验积累,进行定制的内部使用版。 非商业项目免费使用,商业应用请购买使用授权key。
xgis-cesium-mars3d
是基于mars3d-cesium开发的,结合项目经验积累,进行定制的内部使用版。 https://www.npmjs.com/package/xgis-cesium-mars3d
注意:xgis-ceisum-mars3d 基于mars3d-cesium开发的版本,方便用于mars3d集成开发。
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
不用拷贝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()]
});
方法1:使用vite-plugin-xgis-cesium插件0.0.4版
方法2:手动拷贝 xgis-cesium/dist/assets里js文件到 public/assets目录下
手动拷贝 ./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
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' },
]
})],
})
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' },
]
}]);
}
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;
}
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);
}
基础示例:https://3d.gis.digsur.com/#/product/apiexamples?wid=imageBaseLayerWidget
大部分空间分析功能需要使用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);
}
}
调用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);
}
}
}
积雪效果是使用CustomShader
https://cesium.com/learn/cesiumjs/ref-doc/CustomShader.html
A user defined GLSL shader used with
Model
as well asCesium3DTileset
.
开启下雪和积雪效果:自动绑定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();
默认样式为:
//默认样式
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);
矢量切片数据源: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)
}
}
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);
通过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);
}
从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.我方保留对此版权信息的最终解释权。
未经授权,禁止对包篡改和移除版权声明输出!
FAQs
基于@cesium/engine开发的,结合项目经验积累,进行定制的内部使用版。非商业项目免费使用!
The npm package xgis-cesium receives a total of 212 weekly downloads. As such, xgis-cesium popularity was classified as not popular.
We found that xgis-cesium demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Research
Socket uncovered two npm packages that register hidden HTTP endpoints to delete all files on command.
Research
Security News
Malicious Ruby gems typosquat Fastlane plugins to steal Telegram bot tokens, messages, and files, exploiting demand after Vietnam’s Telegram ban.
Research
Security News
Socket uncovered four malicious npm packages that exfiltrate up to 85% of a victim’s Ethereum or BSC wallet using obfuscated JavaScript.