迁移升级到3.0SDK指南-国产自主研发三维可视化引擎

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

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

更改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.focusFloorNum = 3;
map.changeFocusFloor(3);  
map.visibleFloorNums = [3];
var floor = map.getFloor(3);
map.naviData;//获取导航点线数据
navi.drawNaviLine();//画导航线
// 修改之后:
building.focusFloorNum = 3;
building.changeFocusFloor(3);  
building.visibleFloorNums = [3];
var floor = building.getFloor(3);
building.naviData;//获取导航点线数据
navi.getRouteResult({
    drawRoute: true,
  })

绘制线标注方法修改

// 修改之前：
var linemark = new esmap.ESLineMarker(1, points, linestyle);
map.drawLineMark(linemark);
            
// 修改之后:
var linemark = new esmap.ESLineMarker({
    id: 1
    points: points,
    style: lineStyle
})
map.drawLineMark(linemark);

另外，如果要在室内绘制线，则点集points需要指定bid和fnum属性

var center = map.center;
var fnum = building.focusFloorNum;
var v1 = {
    bid: building.id, // *绑定到需要显示的建筑id*
    x: center.x + 20,
    y: center.y + 20,
    fnum: fnum,
    offset: 10
}

var v2 = {
    bid: building.id, // *绑定到需要显示的建筑id*
    x: center.x - 10,
    y: center.y - 10,
    fnum: fnum,
    offset: 10
}
// 箭头导航线
var points = [v1, v2];
var linemark = new esmap.ESLineMarker({ points,style: lineStyle })
linemark.datas = {
    case: 'ffff' 
}
map.drawLineMark(linemark)

热力图方法修改

创建热力图时需要指定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,            // 设置弹框位于的楼层
    }
    ...
})

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

更改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:更多配置选项，参考初始化配置参数页面

3.三维场景API升级迁移

更改卡片标注坐标参数

// 修改之前：
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,
    ···
}