超图-SuperMap iClient3D for WebGL 用法速搜（入门级）

最新推荐文章于 2024-06-13 15:59:53 发布

原创

最新推荐文章于 2024-06-13 15:59:53 发布 · 2.8k 阅读

标签

#iClient3D #web gis #超图 #cesium #gis

本文介绍了如何整合Cesium类库及iClient3DforWebGL，并详细探讨了事件监听、坐标拾取等核心功能，还提供了添加点位、限制缩放等实用技巧。

文章目录

cesium中文网

一、环境依赖

1.Cesium类库整合

从超图官网下载SuperMap_iClient3D_10i(2020)_sp1_for_WebGL_CN.zip解压后，将Build、examples目录复制到项目中，由于文件较多占用空间较大，可删除examples目录下的示例文件、images文件夹，保留css、js、fonts文件夹即可！

C:.
├─Build
│  ├─Cesium
│  │  ├─Assets
│  │  │  ├─IAU2006_XYS
│  │  │  ├─Images
│  │  │  ├─Terrain
│  │  │  │  └─0
│  │  │  │      ├─0
│  │  │  │      └─1
│  │  │  └─Textures
│  │  │      ├─LensFlare
│  │  │      ├─maki
│  │  │      ├─NaturalEarthII
│  │  │      │  ├─0
│  │  │      │  │  ├─0
│  │  │      │  │  └─1
│  │  │      │  ├─1
│  │  │      │  │  ├─0
│  │  │      │  │  ├─1
│  │  │      │  │  ├─2
│  │  │      │  │  └─3
│  │  │      │  └─2
│  │  │      │      ├─0
│  │  │      │      ├─1
│  │  │      │      ├─2
│  │  │      │      ├─3
│  │  │      │      ├─4
│  │  │      │      ├─5
│  │  │      │      ├─6
│  │  │      │      └─7
│  │  │      └─SkyBox
│  │  ├─ThirdParty
│  │  │  └─Workers
│  │  │      └─PlotAlgo
│  │  ├─Widgets
│  │  │  ├─Animation
│  │  │  ├─BaseLayerPicker
│  │  │  ├─Cesium3DTilesInspector
│  │  │  ├─CesiumInspector
│  │  │  ├─CesiumWidget
│  │  │  ├─FullscreenButton
│  │  │  ├─Geocoder
│  │  │  ├─Images
│  │  │  │  ├─cur
│  │  │  │  ├─ImageryProviders
│  │  │  │  ├─Navigation
│  │  │  │  ├─NavigationHelp
│  │  │  │  ├─PlotImages
│  │  │  │  ├─TerrainProviders
│  │  │  │  └─ZoomIndicator
│  │  │  ├─InfoBox
│  │  │  ├─Navigation
│  │  │  ├─NavigationHelpButton
│  │  │  ├─PerformanceWatchdog
│  │  │  ├─ProjectionPicker
│  │  │  ├─SceneModePicker
│  │  │  ├─SelectionIndicator
│  │  │  ├─Timeline
│  │  │  ├─Viewer
│  │  │  ├─VRButton
│  │  │  └─ZoomIndicator
│  │  └─Workers
│  └─Stubs
└─examples
    ├─css
    ├─fonts
    ├─js
    ├─locales
    │  ├─en-US
    │  └─zh-CN
    └─webgl
        ├─css
        ├─fonts
        │  ├─download
        │  ├─glyphicons
        │  ├─iconfonts
        │  └─lato
        ├─images
        │  └─cur
        └─js
            ├─components
            ├─js
            ├─plotPanelControl
            │  ├─BasicCell
            │  ├─colorpicker
            │  │  ├─css
            │  │  ├─images
            │  │  └─js
            │  ├─jquery-easyui-1.4.4
            │  │  └─css
            │  │      └─images
            │  └─zTree
            │      └─css
            │          └─img
            │              └─diy
            ├─supermap
            │  └─Lang
            └─view-design
                └─dist
                    ├─locale
                    └─styles
                        └─fonts

2.iClient3D for WebGL与Cesium关系

iClient3D for WebGL与Cesium关系

3.视频教程

三维GIS基础入门视频教程

二、监听

1.用户输入事件

		//定义canvas屏幕点击事件，scene.canvas指的是HTMLCanvasElement元素，也就是屏幕画的东西
		var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
		
			//注册鼠标事件
			handler.setInputAction(function () {
   
   
				alert("点击了左键")
			}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
			handler.setInputAction(function () {
   
   
				alert("点击了中键")
			}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
			handler.setInputAction(function () {
   
   
				alert("双击了左键")
			}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
			
			// 其他鼠标点击事件还有
			// Cesium.ScreenSpaceEventType.LEFT_CLICK 左键点击事件
			// Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK 左键双击事件
			// Cesium.ScreenSpaceEventType.LEFT_DOWN 左键按下事件
			// Cesium.ScreenSpaceEventType.LEFT_UP 左键抬起事件
			// Cesium.ScreenSpaceEventType.MIDDLE_CLICK 滚轮点击
			// Cesium.ScreenSpaceEventType.MIDDLE_DOWN 滚轮按下
			// Cesium.ScreenSpaceEventType.MIDDLE_UP 滚轮抬起
			// Cesium.ScreenSpaceEventType.MOUSE_MOVE 鼠标移动
			// Cesium.ScreenSpaceEventType.PINCH_END 两指按下结束
			// Cesium.ScreenSpaceEventType.PINCH_MOVE 两指移动
			// Cesium.ScreenSpaceEventType.PINCH_START 两指开始触碰
			
	    handler.setInputAction(function () {
   
   
			//取消所有鼠标的点击事件
			// handler.destroy()  
			//取消鼠标某个点击事件，如下是取消右键，也可以为左键或者鼠标移动事件
			handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);  
			alert("点击了右键，右键取消了，其他的还在")
		}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
		
		handler.setInputAction(function () {
   
   
			//取消所有鼠标的点击事件
			handler.destroy()  
			alert("双击了右键，取消全部事件")
		}, Cesium.ScreenSpaceEventType.RIGHT_DOUBLE_CLICK);

2.坐标拾取

椭球体表面

var viewer = new Cesium.Viewer('container');
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (event) {
   
   
    // 屏幕坐标转世界坐标——关键点
    var ellipsoid = viewer.scene.globe.ellipsoid;
    var cartesian = viewer.camera.pickEllipsoid(event.position, ellipsoid);
    //将笛卡尔坐标转换为地理坐标
    var cartographic