1. GeoMap
1.1. 初始化 new GeoMap(containerId, options)
BOSGeo(GeoViewer)三维引擎入口,用于创建三维地图引擎,是Viewer和LayerManager的父类。 其中,Viewer是用于构建应用程序的基础部件,它将所有标准的Cesium部件组合成一个可重复使用的包; LayerManager是图层管理类,用于图层分组,点、线、几何、模型、地形、影像、GeoJson、KML等类型图层的创建、获取和删除等操作。
Param | Type | Default | Description |
---|---|---|---|
containerId | String |
视窗的DOM元素ID; |
|
options | Object |
包含以下参数的Object对象: |
|
[options.baseMap] | ImageryMapType | BOSGeo.ImageryMapType.TDT_IMAGERY |
底图类型,可以是BOSGeo.ImageryMapType中的所有类型,如BOSGeo.ImageryMapType.TDT_IMAGERY, BOSGeo.ImageryMapType.GOOGLE_IMAGERY, BOSGeo.ImageryMapType.BING_IMAGERY, BOSGeo.ImageryMapType.MAPBOX_IMAGERY等,详见BOSGeo.ImageryMapType; |
[options.baseMapKey] | String |
影像底图类型对应的key或token,如天地图、MapBox、BIYING底图等;若不填则默认使用内置Key |
|
[options.globeCloud] | Boolean |
false |
地球云层效果; |
[options.maxLevel] | Number |
22 |
最大缩放级别; |
[options.minLevel] | Number |
1 |
最小缩放级别,如果设置成0,可以缩放到无穷小; |
[options.requestWebgl2] | Boolean |
true |
如果设置为true,则会在场景使用webgl2.0,否则使用webgl1.0; |
[options.overView] | Boolean |
false |
如果设置为true,则显示鹰眼,否则不显示; |
[options.geocoder] | Boolean |
false |
如果设置为true,则显示地名搜索框,否则不显示; |
[options.preserveDrawingBuffer] | Boolean |
true |
是否保存绘制缓冲区; |
[options.requestRenderMode] | Boolean |
true |
如果设置为true,则会在场景更新时渲染,否则实时渲染每帧; |
[options.fixedclock] | Boolean |
true |
是否固定时刻,如果设置为true,则固定住11点时的日照效果,否则会进行正常的日照效果; |
[options.enableHighlight] | Boolean |
false |
是否开启模型点击高亮的效果; |
[options.highlightColor] | String |
'#56ebfd' |
模型点高亮颜色; |
[options.showAttribute] | Boolean |
false |
是否开启模型点击时显示属性框; |
[options.date] | String |
"2020/06/22 12:00:00" |
设置日照时间,注意时间格式。默认为夏至日中午(6月22日中午12:00) |
[options.token] | String |
'' |
BOS后台接口操作的通关令牌,默认为空 |
[options.msaaLevel] | Number |
1 |
msaaLevel抗锯齿层级,默认为1则不开启抗据此,层级一般为2的幂次数,如1、2、4、8、16,requestWebgl2为true时才起效 |
[options.enableFXAA] | Boolean |
false |
是否开启enableFXAA抗锯齿 |
[options.useMRT] | Boolean |
false |
是否开启webgl2的多重渲染目标(开启自发光纹理及非后处理天气效果时用到,会一定程度上降低场景性能),requestWebgl2为true时才起效 |
[options.useImageryCache] | Boolean |
true |
影像底图是否开启缓存 |
[options.customLayerGroup] | Array.<Object> |
[] |
自定义图层分组,形如[{title: '分组名称1', id: 'customGroupId', children: []}] |
Example
var geomap = new BOSGeo.GeoMap('bosgeoContainer', {
baseMap: BOSGeo.ImageryMapType.BING_DARK, //底图类型
globeCloud: false, //云层效果
requestRenderMode: true //是否实时渲染
});
1.2. 属性
属性名 | Type | Default | ReadOnly | Description |
---|---|---|---|---|
customLayerGroup | Array.<Object> |
[] | true | 自定义图层分组 |
enableControl | Boolean | true | false | 是否禁用鼠标操作 |
requestRenderMode | Boolean | true | false | 是否允许请求重渲染 |
token | String | '' | false | 后台查询默认token |
enableFXAA | Boolean | '' | false | 是否开启FXAA抗锯齿 |
globalTriangleOf3DTiles | Number | true | 整个场景中3DTiles的三角面片数(包括显示的、隐藏的及在3DTiles缓存中的) |
|
globalTriangleSelectedOf3DTiles | Number | true | 当前视角下整个场景所有Cesium3DTile中三角网数量 |
|
globalMemoryOf3DTiles | Number | true | 整个场景中3DTiles的内存占用量,单位为MB(包括显示的、隐藏的及在3DTiles缓存中的) |
|
maxGlobalMemoryOf3DTiles | Number | 10240 |
false | 整个场景中3DTiles的最大内存占用量,单位为MB(会出现globalMemoryOf3DTiles超过场景设置的最大内存占用,该值只用于清理3DTiles的缓存) |
1.3. 方法
1.3.1. geoMap.render()
渲染当前帧 如果requestRenderMode为true,则在场景发生改变的时候,需要调用该方法
Example
geomap.render(); // 手动调用渲染当前帧
1.3.2. geoMap.requestFullscreen()
全屏模式,去除所有功能按钮
1.3.3. geoMap.fullScreen()
全屏模式,保留功能界面
1.3.4. geoMap.zoomInOut(flag)
缩放
Param | Type | Description |
---|---|---|
flag | Boolean |
为true时放大,为false时缩小 |
1.3.5. geoMap.exitFullscreen()
退出全屏
1.3.6. geoMap.restNorth()
恢复正北方向
1.3.7. geoMap.flyTo(dest, hpr, callback)
飞至指定位置
Param | Type | Default | Description |
---|---|---|---|
dest | Cartesian3 |
Rectangle |
相机三维笛卡尔坐标位置或者视图范围; |
hpr | HeadingPitchRoll |
相机方位角,单位为弧度; |
|
callback | function |
飞行到目的地后的回调函数; |
Example
//当前视角的dest和hpr可通过BOSGeo.GeoUtil.getCameraPositionOrientation2()接口获取
function completeCallback() {
alert("您已到达目的地!")
}
geoViewer.flyTo(
{x: -9439629.577977773, y: 35229177.18964299, z: 21138934.807071898},
{heading: 6.283185307179586, pitch: -1.5687578423337296, roll: 0},
completeCallback
);
1.3.8. geoMap.flyToBoundingSphere(position, distance)
通过包围盒范围飞至观察点上方
Param | Type | Description |
---|---|---|
position | Array.<Number> |
观察点的经纬度坐标; |
distance | Number |
观察距离。 |
1.3.9. geoMap.flyHome([duration])
相机飞行到主视图
Param | Type | Description |
---|---|---|
[duration] | Number |
相机飞行持续时间 |
Example
geomap.flyHome(3);
1.3.10. geoMap.setView(dest, hpr)
设置相机视角
Param | Type | Description |
---|---|---|
dest | Cartesian3 | Rectangle |
相机在三维笛卡尔坐标系中的位置或者视图范围 |
hpr | HeadingPitchRoll |
相机方位角,单位为弧度; |
Example
var dest = BOSGeo.Cartesian3.fromDegrees(114, 22.5, 10000);
var hpr = {
heading: BOSGeo.Math.toRadians(0),
pitch: BOSGeo.Math.toRadians(-45),
roll: BOSGeo.Math.toRadians(0),
};
geoViewer.setView(dest, hpr);
1.3.11. geoMap.flyToRectangle(cartesians, [heading], [pitch], [scale], [duration], [callBack])
飞行定位到一个矩形
Param | Type | Default | Description |
---|---|---|---|
cartesians | Array.<Cartesian3> |
笛卡尔坐标数组 Array. |
|
[heading] | Number |
0.0 |
偏航角,单位为度,正北,由正北向东偏向为正; |
[pitch] | Number |
-90 |
俯仰角,单位为度, ENU局部坐标系,XY平面的旋转角度,平面下为负,上为正; |
[scale] | Number |
1.0 |
范围缩放倍率; |
[duration] | Number |
3 |
持续时间,单位为秒; |
[callBack] | function |
|
回调函数,定位完成后执行。 |
1.3.12. geoMap.navigation(options) ⇒ Object
场景控制器,导航工具
Param | Type | Default | Description |
---|---|---|---|
options | Object |
||
[options.defaultResetView] | Array |
|
用于在使用重置导航重置地图视图时设置默认视图控制[最小经度,最小纬度,最大经度,最大纬度],如[70, 12, 145, 60];不设置时(null)采用flyHome显示默认范围,默认为null。 |
[options.enableCompass] | Boolean |
true |
用于启用或禁用罗盘。true是启用罗盘,false是禁用罗盘。 |
[options.enableZoomControls] | Boolean |
true |
用于启用或禁用缩放控件。true是启用,false是禁用。默认值为true。 |
[options.enableCompassOuterRing] | Boolean |
true |
用于启用或禁用指南针外环。true是启用,false是禁用。默认值为true。 |
[options.enableDistanceLegend] | Boolean |
true |
用于启用或禁用比例尺。true是启用,false是禁用,默认值为true。 |
Returns : Object
-
返回包含罗盘DIV(compassDiv)、缩放控制DIV(navigationControlsDiv)、以及导航工具对象(geoNavigation),便于调整样式。
Example
var geomap = new BOSGeo.GeoMap('bosgeoContainer');
geomap.navigation({
defaultResetView: [70, 12, 145, 60], //默认视图范围
enableCompass: true, //启用罗盘
enableZoomControls: true, //启用缩放控件
enableCompassOuterRing: true //启用指南针外环
})
var style = navigation.geoNavigation.container.style; //导航工具样式
style.right = '70px'; //导航工具样式修改
style.top = '40px';
1.3.13. geoMap.getCameraPositionOrientation() ⇒ Object
获取当前相机的坐标和方位
Returns : Object
-
posAndOri -返回相机三维笛卡尔坐标(position)和方位信息(orientation)
1.3.14. geoMap.on(eventType, callBack, wishResult)
地图事件监听
Param | Type | Description |
---|---|---|
eventType | String | MapEventType |
地图事件类型; |
callBack | function |
监听函数; |
wishResult | MapPickType | Array.<MapPickType> | null |
选填 期待返回的结果类型。 |
Example
var map = new BOSGeo.GeoMap('container');
map.on(BOSGeo.MapEventType.LEFT_CLICK, (e) => {
console.log(e.world_position);
console.log(e.feature);//获取到的原始数据
if (e.feature) {
//地图拾取的feature是模型的片段或矢量图标的片段,使用本函数获取到对应的模型和矢量元素。
const target = BOSGeo.GeoUtil.getPickTargetFeature(e.feature).target;
}
}, [BOSGeo.MapPickType.WORLD_POSITION, BOSGeo.MapPickType.FEATURE]);
1.3.15. geoMap.off(eventType, callBack)
取消地图事件的监听
Param | Type | Description |
---|---|---|
eventType | String | MapEventType |
地图事件类型; |
callBack | function |
回调函数,不设置时则会清除eventType对应的所有监听事件函数。 |
Example
var map = new BOSGeo.GeoMap('container');
map.on(BOSGeo.MapEventType.LEFT_CLICK, (e) => {
console.log(e.world_position);
console.log(e.feature);//获取到的原始数据
if (e.feature) {
//地图拾取的feature是模型的片段或矢量图标的片段,使用本函数获取到对应的模型和矢量元素。
const target = BOSGeo.GeoUtil.getPickTargetFeature(e.feature).target;
}
}, [BOSGeo.MapPickType.WORLD_POSITION, BOSGeo.MapPickType.FEATURE]);
setTimeout(()=>{
map.off(BOSGeo.MapEventType.LEFT_CLICK);
},3000)
1.3.16. geoMap.once(eventType, callBack, wishResult)
一次性地图事件监听
Param | Type | Description |
---|---|---|
eventType | String | MapEventType |
地图事件类型; |
callBack | function |
监听函数 |
wishResult | MapPickType | Array.<MapPickType> | null |
选填 期待返回的结果类型 |
Example
var map = new BOSGeo.GeoMap('container');
map.once(BOSGeo.MapEventType.LEFT_CLICK, (result) => {
console.log(result);
}, [BOSGeo.MapPickType.WORLD_POSITION, BOSGeo.MapPickType.FEATURE]);
1.3.17. geoMap.enableMoveFeature(axisFrame, callback)
启用要素按坐标轴拖拽移动功能
Param | Type | Description |
---|---|---|
axisFrame | AxisFrame |
已绑定对象的坐标轴 |
callback | function |
回调函数, 回调参数为{offset, currentPosition},其中offset为[x偏移,y偏移,z偏移],单位米,currentPosition为[经度,纬度,高度] |
Example
//创建模型图层 modelLayer
//添加模型model
const axis = new BOSGeo.AxisFrame({target: model});
geomap.enableMoveFeature(axis, (result) => console.log('每次移动变化监听:' + result.currentPosition));
1.3.18. geoMap.disableMoveFeature()
关闭要素移动功能。移除AxisFrame和GeoMap绑定的点击移动事件。
1.3.19. geoMap.show3DCoordinates(options)
在地图底部显示相机方位和鼠标位置信息(实时获取ArcGIS地形的高程信息性能较差,如有需要建议使用其他地形数据)
Param | Type | Default | Description |
---|---|---|---|
[options.isCameraInfo] | Boolean |
true |
是否展示相机信息,默认为true |
[options.isPointerInfo] | Boolean |
true |
是否展示鼠标光标处的位置信息,默认为true。 |
[options.color] | Boolean |
false |
位置信息的字体颜色,十六进制颜色字符串 |
Example
geomap.show3DCoordinates();
1.3.20. geoMap.remove3DCoordinates()
移除地图底部显示的相机方位和鼠标位置信息
Example
geomap.remove3DCoordinates();
1.3.21. geoMap.setClock(flag, [time])
设置日照时间
Param | Type | Default | Description |
---|---|---|---|
flag | Boolean |
是否固定日照时刻 |
|
[time] | String |
"2020/06/22 12:00:00" |
日期时刻 |
Example
geomap.setClock(true, '2021/03/31 12:00:00');
1.3.22. geoMap.setBaseMap(imageryMapType)
切换底图,支持底图类型有:天地图影像、天地图矢量(包含矢量注记)、高德影像、高德矢量、百度影像、百度矢量、Arcgis影像、谷歌影像、openstreet影像、openstreet矢量、MapBox影像、必应影像、必应矢量、必应暗黑风格底图
Kind : instance method of GeoMap
Param | Type | Description |
---|---|---|
imageryMapType | ImageryMapType |
底图类型 |
Example
var map = new BOSGeo.GeoMap('container');
map.setBaseMap(BOSGeo.ImageryMapType.TDT_IMAGERY);
1.3.23. geoMap.removeBaseMap()
移除底图
Example
var map = new BOSGeo.GeoMap('container');
map.removeBaseMap();
1.3.24. geoMap.destroy()
销毁