超图-SuperMap iClient3D for WebGL 用法速搜（入门级）
文章目录
-
- 一、环境依赖
-
- 1.Cesium类库整合
- 2.iClient3D for WebGL与Cesium关系
- 3.视频教程
- 二、监听
-
- 1.用户输入事件
- 2.坐标拾取
- 3.拾取实体
- 4.实体改变监听事件
- 5.双击全屏
- 6. 相机移动事件
- 三、基础
-
- 1.Cesium添加点位和名称Label
- 2.缩放限制
- 3.倾斜摄影单体化数据查询
- 4.实体属性冒泡窗口
- 5.Cartesian3 坐标转屏幕坐标
- 6.双击飞入动作
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关系
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 = Cesium.Cartographic.fromCartesian(cartesian);
//将弧度转为度的十进制度表示
var lon = Cesium.Math.toDegrees(cartographic.longitude);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
地形表面
var viewer = new Cesium.Viewer('container');
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (event) {
// 屏幕坐标转世界坐标——关键点
var ray=viewer.camera.getPickRay(event.position);
var cartesian=viewer.scene.globe.pick(ray,viewer.scene);
//将笛卡尔坐标转换为地理坐标
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
//将弧度转为度的十进制度表示
var lon = Cesium.Math.toDegrees(cartographic.longitude);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
// 获取海拔高度
var height1 = viewer.scene.globe.getHeight(cartographic);
var height2 = cartographic.height;
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
3.拾取实体
// 单击冒泡窗口
handler.setInputAction(function (e) {
let picker = viewer.scene.pick(e.position);
if (picker && picker.id && picker.id._id) {
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
4.实体改变监听事件
viewer.selectedEntityChanged.addEventListener(function (entity) {
console.log(entity);
});
5.双击全屏
//定义canvas屏幕点击事件，scene.canvas指的是HTMLCanvasElement元素，也就是屏幕画的东西
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// 双击全屏(注意iframe需额外设置allowfullscreen="true")
handler.setInputAction(function () {
if (Cesium.Fullscreen.fullscreen) {
Cesium.Fullscreen.exitFullscreen();
} else {
Cesium.Fullscreen.requestFullscreen(scene.canvas);
}
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
全屏按钮(默认显示在地图右下角)
//初始化viewer部件
var viewer = new Cesium.Viewer('cesiumContainer',{
fullscreenButton: true, //是否显示全屏按钮
});
6. 相机移动事件
viewer.scene.camera.moveStart.addEventListener(function(){
// 隐藏所有消息弹窗
$('.tip-div').hide();
});
viewer.scene.camera.moveEnd.addEventListener(function(){
//获取当前相机高度
height = Math.ceil(viewer.scene.camera.positionCartographic.height);
console.log(height);
});
三、基础
1.Cesium添加点位和名称Label
// park通过ajax获取，此处省略……
var park;
var entity = viewer.entities.add({
id: park.id,
name: park.name,
properties: new Cesium.PropertyBag(),
position: Cesium.Cartesian3.fromDegrees(park.longitude, park.latitude, 10),
// point: {
// color: Cesium.Color.RED, //点位颜色
// pixelSize: 10 //像素点大小
// },
label : {
text : '测试名称',
font : '14pt Source Han Sans CN', //字体样式
fillColor:Cesium.Color.BLACK, //字体颜色
backgroundColor:Cesium.Color.AQUA, //背景颜色
showBackground:true, //是否显示背景颜色
style: Cesium.LabelStyle.FILL, //label样式
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.CENTER,//垂直位置
horizontalOrigin :Cesium.HorizontalOrigin.LEFT,//水平位置
pixelOffset:new Cesium.Cartesian2(10,0) //偏移
}
, billboard: {
show: true,
image: '/images/marker-icon-2x.png',
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
scale: 0.5,
disableDepthTestDistance: Number.POSITIVE_INFINITY,//广告牌不进行深度检测
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
}
});
// 自定义实体属性信息
entity.properties.addProperty("myType", "park");
entity.properties.addProperty("park", park);
console.log(entity.properties._myType._value);
console.log(entity.properties._park._value);
entity.description =
'' +
'
+ park.image + '"/>' +
''
+ park.name + ':' +
''
+ park.description + '' +
'';
viewer.zoomTo(entity); //居中到该点
2.缩放限制
var controller = viewer.scene.screenSpaceCameraController;
// 缩放限制
controller.minimumZoomDistance = 500;
controller.maximumZoomDistance = 50000;
3.倾斜摄影单体化数据查询
倾斜摄影数据单体化查询依赖数据服务，若未发布数据服务，则无法使用以下拾取事件。
viewer.pickEvent.addEventListener(function(feature){
});
4.实体属性冒泡窗口
cesium中随entity动态变化的弹出框
2018 SuperMap WebGL三维常见问题解答集锦（三）
customInfobox是cesium封装的控件，只有在点击添加的s3m图层后会出现弹窗，在点击实体后不会出现弹窗事件，点击实体弹窗需要写一个自己写的div,不绑定viewer.customInfobox。（官方示例是倾斜摄影单体化查询事件）。
<blockquote id="bubble" class="bubble">
<div id="tools" style="text-align : right">
<span style="color: rgb(95, 74, 121);padding: 5px;position: absolute;left: 10px;top: 4px;">企业信息span>
<span class="fui-cross" title="关闭" id="close" style="color: darkgrey;padding:5px">span>
div>
<div style="overflow-y:auto;" id="tableContainer"><table id="tab" style="height: auto">table>div>div>
blockquote>
// 单击冒泡窗口
handler.setInputAction(function (e) {
let picker = viewer.scene.pick(e.position);
if (picker && picker.id && picker.id._id) {
$('#tab').html(
" \n" +
" 企业名称 统一社会信用编码 \n" +
" \n");
$('#bubble').css('left', e.position.x - 70);
$('#bubble').css('top', e.position.y - $('#bubble').height() - 80);
$('#bubble').show();
} else {
$('#tab').empty();
$('#bubble').hide();
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
5.Cartesian3 坐标转屏幕坐标
let cartographic = Cesium.Cartesian3.fromDegrees(park.longitude, park.latitude, 10);
let entityPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, cartographic);
6.双击飞入动作
- 方式1
// 双击飞入事件
handler.setInputAction(function (e) {
var pick = viewer.scene.pick(e.position);
if (Cesium.defined(pick) && (String(pick.id._entitiesType) === 'park')) {
//将笛卡尔坐标转换为地理坐标
var cartographic = Cesium.Cartographic.fromCartesian(viewer.scene.pickPosition(e.position));
viewer.camera.flyTo({
destination : new Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(cartographic.longitude)
,Cesium.Math.toDegrees(cartographic.latitude) - 0.022,1000)
// 方位角(0.0-正北)、俯仰角(-90)、滚动角(0.0)设置视图
,orientation : {
heading : Cesium.Math.toRadians(0.0),
pitch: -0.625007,
roll: 6.283185
}
});
// 取消跟踪目标实体
viewer.trackedEntity=undefined;
}
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
- 方式2
// 双击飞入事件
handler.setInputAction(function (e) {
var pick = viewer.scene.pick(e.position);
if (Cesium.defined(pick) && (String(pick.id._entitiesType) === 'park')) {
viewer.flyTo(viewer.selectedEntity);
}
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
viewer.flyTo会飞向实体，注意实体本身的高程（
position: Cesium.Cartesian3.fromDegrees(park.longitude, park.latitude, 500)，例如本利中高程为500），避免飞入高度过低，s3MTilesLayer瓦片加载报错问题。