三维场景配置参数开发支持-室内园区城市三维可视化引擎室内导航及制作|易景空间三维可视化云平台ESMap

迁移升级到3.0SDK指南

前往旧版本ESMap1.6版本的在线示例代码 ESMap1.6旧版本应用开发指南

三维场景室内模式升级迁移

室内模式-更改SDK文件引入

引入室内模式和城市模式统一的SDK文件。

<script src='./esmap-3.0.min.js'></script>

室内模式-更改初始化配置

1.统一使用new esmap.ESMap创建map实例。

2.新增mode参数区分模式，esmap.MapMode.Building为室内模式，esmap.MapMode.City为城市模式。

3.初始化三维场景时center中心点参数格式从数组更改为对象。

4.取消之前在初始化里传入cids的方式，打开三维场景需要调用openMapById()。

5.图片标注ESImageMarker已经被功能强大的图文标注ESTextMarker代替。

//*标星内容为3.0版本SDK改动
var map = new esmap.ESMap({             // *使用new esmap.ESMap创建map实例*
    mode: esmap.MapMode.Building,       // *添加配置室内三维场景模式*
    container: document.getElementById('map-container'),  // 三维场景显示容器
    mapDataSrc: './data/',               // 离线室内三维场景数据位置
    token: 'escope',                    // 打开室内三维场景对应的token
    center:{                            // *若需要指定中心值则传入对象格式*
        x:123456.111,
        y:123456.111
    }
    ...
});
map.openMapById('test666');             // *根据室内三维场景ID打开三维场景*

Tips:更多配置选项，参考初始化配置参数页面

室内模式-室内对象由Building对象取代map对象

所有室内场景相关的属性和方法，都改为Building对象所有

// 获取Building对象
var building;//定义全局变量
map.on('loadComplete',function(){
    building = map.getBuildingById('test666'); 
}
        
// 例如: 改变聚焦楼层和可见楼层

// 修改之前: 通过map获取建筑对象数据
map.changeFocusFloor(3);  
var floor = map.getFloor(3);

map.naviData;//获取导航点线数据
navi.drawNaviLine();//画导航线

// 修改之后:通过building获取数据
building.changeFocusFloor(3);  
var floor = building.getFloor(3);

building.naviData;//获取导航点线数据
navi.getRouteResult({
    drawRoute: true,
})

三维场景城市模式升级迁移

城市模式-更改SDK文件引入

1.引入室内模式和城市模式统一使用的SDK文件。

2.城市模型下须再引入瓦片底图插件esplugin-tile-3.0.min.js，室内模式则不需要。

// 引入统一SDk文件
<script src='./esmap-3.0.min.js'></script>   

// 需使用城市三维场景的瓦片底图功能，添加引入以下文件
<script src='./esplugin-tile-3.0.min.js'></script>

城市模式-更改初始化配置

1.统一使用new esmap.ESMap创建map实例。

2.新增mode参数区分模式，esmap.MapMode.Building为室内模式，esmap.MapMode.City为城市模式。

3.初始化城市三维场景时center中心点参数格式从数组更改为对象。

4.取消之前在初始化里传入cids的方式，打开城市三维场景需要调用openMapById()。

//*标星内容为3.0版本SDK改动
var map = new esmap.ESMap({             // *使用new esmap.ESMap创建map实例*
    mode: esmap.MapMode.City,           // *添加配置三维场景模式*
    container: document.getElementById('map-container'),  // 三维场景显示容器
    mapDataSrc: './data/',               // 离线三维场景数据位置
    token: 'escope',                    // 打开三维场景对应的token
    center:{                            // *若需要指定中心值则传入对象格式*
        x:123456.111,
        y:123456.111
    }
    ...
});
map.openMapById('esmapcitydemo');       // *根据城市三维场景ID打开三维场景*

Tips:更多配置选项，参考初始化配置参数页面

三维场景API升级迁移

升级迁移-更改卡片标注坐标参数

修改总结: 传递xy坐标的参数格式，修改为直接传入xy坐标

// 修改之前：
var config = {
    id: 1,                  // 标注id
    name: "myCardMarker",   // 标注名称
    coord: {                // 标注坐标(使用三维场景墨卡托坐标)
        x:122465.123,
        y:12345.123,
    },
    ···
}
                
// 修改之后:
var config = {
    id: 1,                  // 标注id
    name: "myCardMarker",   // 标注名称
    x:122465.123,           // *坐标参数更换，可直接赋值X坐标和Y坐标*
    y:12345.123,
    ···
}

升级迁移-绘制线标注方法修改

修改总结: 线段数据可传入bid绑定对应场景，而且在创建实例的传参上统一为传递对象

// 修改之前：
var points = [      // 线段数据
    { x: map.center.x, y: map.center.y, fnum: 1, offset: 5 } ,
    { x: map.center.x + 10, y: map.center.y + 10, fnum: 1, offset: 5 },
]                                             
var lineMarker = new esmap.ESLineMarker(1, points, linestyle); // 直接传参
map.drawLineMark(lineMarker);
            
// 修改之后:
var points = [      // 修改为线段数据可传入bid，实现跨地图楼层绘制线 (室内模式可忽略bid属性)
    { bid: building.id, x: map.center.x, y: map.center.y, fnum: 1, offset: 5 } ,
    { bid: building.id, x: map.center.x + 10, y: map.center.y + 10, fnum: 1, offset: 5 },
]
var lineMarker = new esmap.ESLineMarker({     // 修改为传递对象
    id: 1,
    points: points,
    style: lineStyle
})
map.drawLineMark(lineMarker);

升级迁移-热力图方法修改

修改总结: 创建热力图时需要指定bid

esmap.ESHeatMap.create(map,{
    bid: building.id,        // *绑定到需要显示的场景id*(室内模式下可忽略)
    radius: 20,              // 热点半径
    opacity: 1,              // 热力图透明度
    mapOpacity: 0.2,         // 设置三维场景楼层整体透明度
    backgroundColor:#FFFFFF, // 热力图背景颜色，默认白色
    max: 100                 // 热力点value的最大值
})

升级迁移-气泡标注方法修改

修改总结: 如果需要指定室内场景，则需要在mapCoord属性里传入bid

//添加气泡标注
var popMarker = new esmap.ESPopMarker({
    mapCoord:{
        bid: building.id,   // *绑定到需要显示的场景id*
        x: map.center.x,    // 设置弹框的x轴
        y: map.center.y,    // 设置弹框的y轴
        height: 1,          // 控制信息窗的高度
        fnum: 3,            // 设置弹框位于的楼层
    }
    ...
})