三维可视化场景特效配置和开发

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

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

esmap.ESEffectTool.init({
    effectThemeSrc: './data/effects',       // 文件路径
    effectThemeId: 'E001',                  // 特效主题编号
    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 否

三维可视化场景特效标注的开发使用流程

第一步:新建一个特效标注图层 （以下代码都要在三维场景特效初始化完成后调用） 

// 三维场景特效包初始化完成回调事件
map.on('effectsInitComplete',function(){
    // 创建用于管理特效标注的层对象
    var layer = new esmap.ESEffectTool.EffectLayer('myEffectLayer', esmap.ESLayer.EFFECT_MARKER);
    // 添加该层至三维场景（默认1层）
    esmap.ESEffectTool.addLayerToMap(layer);
    // 添加该层至三维场景的指定楼层（室内三维场景）
    esmap.ESEffectTool.addLayerToMap(layer, fnum);
    // 若需要指定三维场景ID和楼层层数（用于园区三维场景和城市三维场景）
    esmap.ESEffectTool.addLayerToMap(layer, bid, fnum);
    // 支持新版写法：
    esmap.ESEffectTool.addLayer(layer, { bid, fnum });
})

第二步:创建一个特效圆圈标注实例 

// 创建一个特效标注
var marker = new esmap.ESEffectTool.EffectMarker(esmap.ESMarkerType.CIRCLE_ROTATE, {
    x: 12629907.4, 
    y: 2580180.5,
    height: 50,
    callback: function(){ // 创建成功后的回调
        // marker.visible = false; 标注的显隐控制
    }
});

第三步:添加特效标注至特效层

layer.addMarker(marker);   // 将特效marker添加到图层

删除标注

您可以删除一整个特效标注图层:

// 从三维场景上直接删除特效图层
esmap.ESEffectTool.removeLayer(layer);

也可以从图片标注图层中删除图片标注：

layer.remove(marker);   // 删除某一个标注
layer.removeAll();      // 删除所有标注

部分普通标注应用特效方法

// 创建线标注
var linemark = new esmap.ESLineMarker({...});
map.drawLineMark(linemark);
// 设置线标注发光
linemark.setBloomLight(0.7); // 默认最高亮度为1，可以向下调节亮度，范围为（0~1）

// ------- 

// 创建多边形标注
var polygon = new esmap.ESPolygonMarker({...});
// 设置多边形标注发光
polygon.setBloomLight(0.7); // 默认最高亮度为1，可以向下调节亮度，范围为（0~1）
// 设置多边形边缘发光
polygon.setOutline();
// 移除多边形边缘发光
polygon.removeOutline();

// ------- 

// 创建模型标注
var marker3d = new esmap.ES3DMarker({...});
// 设置模型边缘发光
marker3d.setOutline();
// 移除模型边缘发光
marker3d.removeOutline();