城市模式初始化配置

//*标星内容为3.0版本SDK新增属性
var map = new esmap.ESMap({
    mode: esmap.MapMode.City,            // *配置三维场景模式为城市模式*
    container: document.getElementById('map-container'),  // 三维场景显示容器
    mapDataSrc: './data/',                // 离线三维场景数据位置
    center:{x:12683644,y:2574283},      // 手工配置指定地图中心点坐标，可缺省；
    token:'escope'                       // 打开三维场景对应的token
});

城市模式-特殊配置属性

名称	类型	默认值	详情
tileType	String	'autonavi'	瓦片底图类型
showTapTip	Boolean	true	矢量建筑/模型默认点击选中后的名称气泡提示
loadRoads	Number	true	默认是否加载路网
tileShowLevel	Number	12.5	瓦片底图显示级别
maximumTiles	Number	25	最大瓦片数量
maximumBuildings	Number	1	同时显示的最大建筑数量
showBuildingMode	Symbol	esmap.ShowBuildingMode.PLANISH	打开室内建筑展示方式 可选值：NONE(无聚焦效果),SINGLE(只显示该建筑),PLANISH(压平周边建筑)

三维场景模式共同配置属性

名称	类型	默认值	详情
container	HTMLElement	document.body	三维场景容器Dom元素
mode	esmap.MapMode.Building | esmap.MapMode.City	esmap.MapMode.Building	三维场景模式 (Building为室内模式,City为城市模式)
mapDataSrc	String	'data/'	离线三维场景数据文件位置
token	String	-	三维场景对应的token
logotoken	String	-	用于取消logo的token授权
center	Object	{x:中心点,y:中心点}	三维场景初始化中心点
modelSelectedEffect	Boolean	true	矢量物体选中是否变色
model3DSelectedEffect	Boolean	true	3D模型选中是否变色
useCache	Boolean	true	是否开启缓存
clickHold	Boolean	false	是否开启长按事件
hoverMode	Boolean	false	是否开启hover模式
hoverTypes	Array	[ ]	hover模式识别的元素类型 例如:esmap.ESLayerType.TEXT_MARKER
viewMode	esmap.ESViewMode.MODE_2D | esmap.ESViewMode.MODE_3D	esmap.ESViewMode.MODE_3D	配置场景开启2D/3D视角
defaultAngle	Number	-	默认角度
defaultTiltAngle	Number	-	默认倾斜角度
zoomLevel	Number	15	三维场景缩放级别
minZoomLevel	Number	-	三维场景最小缩放级别
maxZoomLevel	Number	-	三维场景最大缩放级别
scalerWidth	Number	60	比例尺宽度
scalerOffet	Array	[10,20]	比例尺位置偏移量
scalerBgColor	String	'firebrick'	比例尺背景色
compassPointerUrl	String	-	指南针图片地址
compassBackgroundUrl	String	-	指南针背景图片地址

三维可视化场景特效主题初始化和开发

三维可视化场景特效主题文件常用配置示例: 三维场景特效主题E001配置说明

全屏特效特效引擎目前不支持IE浏览器， 支持Edge,chrome,firefox,微信,手机等

esmap.ESEffectTool.init({
    effectThemeSrc: './data/effects',       // 文件路径         *忽略该参数时，SDK会在地图数据读取指定路径
    effectThemeId: 'E001',                  // 特效主题编号     *忽略该参数时，SDK会在地图数据读取指定路径
    isSetRoomEffect: true,                  // 是否应用特效配置中的建筑特效样式
    loadRoads: true,                        // 是否加载配置中的路网特效
    isShowSkybox: true,                     // 是否使用天空盒
    isShowWater: true,                      // 是否应用配置中的水面特效
    isSetModelEffect: true,                 // 是否应用配置中的模型特效
    isShowGround: true,                     // 是否应用配置中的地板样式
    isOpenScreenEffect: true,               // 是否应用配置中的全屏特效样式
    isShowBuildingTip: true,                // 是否在可打开室内地图的建筑上方标注菱形方块动效
    // 开启全屏特效后,特效画质设定：(高：high;中：medium;低：low), 默认自动根据设备性能设定画质高低
    // effectQuality: 'high' 
});

特效主题初始化-基本配置属性

序号	属性名称	数据格式	默认值	是否必填
1	effectThemeSrc(文件路径)	String	null	是
2	effectThemeId (特效主题编号)	String	null	是
3	isSetRoomEffect (是否应用特效配置中的建筑特效样式)	Boolean	false	否
4	loadRoads (是否加载配置中的路网特效)	Boolean	false	否
5	isShowSkybox (是否使用天空盒)	Boolean	false	否
6	isShowWater (是否应用配置中的水面特效)	Boolean	false	否
7	isSetModelEffect (是否应用配置中的模型特效)	Boolean	false	否

特效主题初始化-高级配置属性

序号	属性名称	数据格式	默认值	是否必填
1	roadsDataSrc (外部路网数据文件地址)	String	null	否
2	isShowGround (是否应用配置中的地板样式)	Boolean	false	否
3	isOpenScreenEffect (是否应用配置中的全屏特效样式)	Boolean	false	否
4	effectQuality (开启全屏特效后，是否设置特效画质等级)	String	null	否

三维可视化场景添加控件

大部分控件通常在三维场景加载完成后，才能与三维场景有交互。

楼层控制控件

// 1.声明楼层控件配置参数
var ctlOpt = new esmap.ESControlOptions({
    // LEFT_TOP: 左上方, LEFT_BOTTOM: 左下方, RIGHT_TOP: 右上方, RIGHT_BOTTOM: 右下方
    position: esmap.ESControlPositon.RIGHT_TOP, // 控件放置位置
    // 位置x,y的偏移量
    offset: {
        x: 0,
        y: 0
    },
    textColor:'#000',       // 字体颜色
    toggleColor:'#1F6ED4',  // 单层多层按钮和2d3d按钮颜色
    bgColor:'#FFF',         // 背景颜色
    borderRadius:5,         // 圆角
    focusTextColor:'#FFF',  // 聚焦楼层字体颜色
    focusBgColor:'#1F6ED4', // 聚焦楼层背景颜色
    scale:1,                // 放大比例
    showBtnCount: 3,        // 显示按钮个数
    expandBtn: true,        // 显示楼层展开按钮
    expandSpan: 20,         // 楼层展开高度
    viewModeBtn: true,      // 显示2D/3D切换按钮
    fnumToggleBtn: true     // 显示多楼层切换按钮
});

// 2.在三维场景加载完成事件中新建楼层控制控件对象
map.on('loadComplete', function () {
    floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt);
});

// 动态设置控件位置
floorControl.x = 0
floorControl.y = 0

三维场景比例尺控件

map.showScaler = true;     // 显示三维场景比例尺

指南针控件

// 添加指南针非常简单，只需要在三维场景初始化时声明以下属性即可
map.showCompass = true;     // 显示指南针

// 三维场景初始化时配置指南针样式配置:
var map = new esmap.ESMap({
    // ...
    // compassPosition 参数选择： LEFT_TOP: 左上方, LEFT_BOTTOM: 左下方, RIGHT_TOP: 右上方, RIGHT_BOTTOM: 右下方
    compassPosition: esmap.ESControlPositon.LEFT_TOP,  // 默认根据左上方偏移xy坐标
    compassOffset: [50, 50],       // 根据指定方向偏移的x,y屏幕坐标
    compassSize:30,                // 指南针大小
    compassBackgroundUrl: bgUrl,   // 自定义指南针背景图片地址
    compassPointerUrl: pointerUrl  // 自定义指南针指针图片地址
})

// 在初始化后更新指南针位置
map.on('loadComplete', () => {
  map.compassOffset = [100, 100]   // 实时更新x,y的屏幕坐标
})

// 也可以动态修改指南针图片样式:
// 动态修改指南针背景图片:
map.setCompassBgUrl(bgUrl);        // bgUrl:自定义指南针背景图片地址

// 动态修改指南针指针图片:
map.setCompassPointerUrl(pointerUrl);  // pointerUrl:自定义指南针指针图片地址