Hello,ESMap3.0 SDK三维可视化引擎开发指南

ESMap3.0版本SDK升级了多项功能,并且集合室内三维场景和城市三维场景于一体。

只需四步,从零开始在浏览器中显示一个炫酷的三维可视化场景!

SDK目前不支持用require js引用,只能使用<script>标签引用

如果浏览器运行不流畅,请参考《浏览器如何配置使用独立显卡》



室内三维场景部署方式

第一步:引入esmap SDK

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

第二步:创建三维场景容器

<div id='map-container'> </div>

第三步:拷贝三维场景数据和主题数据到您的项目中

如果您还未创建任何三维场景,您也可以访问我们的demo下载页面直接下载示例

推荐拷贝路径为:根目录>data文件夹>三维场景数据文件/主题文件夹>主题文件

第四步:配置初始化参数,并创建三维场景

更多配置选项,参考初始化配置参数页面

新增mode参数,esmap.MapMode.Building为室内模式,esmap.MapMode.City为城市模式
//*标星内容为3.0版本SDK新增属性
var map = new esmap.ESMap({
    mode: esmap.MapMode.Building,       // *配置三维场景模式* Building为室内模式,City为城市模式
    container: document.getElementById('map-container'),  // 三维场景显示容器
    mapDataSrc: '/data/',               // 离线三维场景数据位置
    mapThemeSrc: '/data/theme/',        // 离线主题数据位置
    token: 'escope',                    // 打开三维场景对应的token
});
map.openMapById('test666');             // 根据三维场景ID打开三维场景

请放到IIS、Tomcat、NodeJs等服务器目录下,通过浏览器访问http:// ip或者网址来查看,直接双击网页文件是查看不了的!!!

大功告成







城市三维场景部署方式

第一步:引入esmap SDK

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

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

第二步:创建三维场景容器

<div id='map-container'> </div>

第三步:拷贝三维场景数据和主题数据到您的项目中

推荐拷贝路径为:根目录>data文件夹>三维场景数据文件/主题文件夹>主题文件

第四步:配置初始化参数,并创建三维场景

更多配置选项,参考初始化配置参数页面

新增mode参数,esmap.MapMode.Building为室内模式,esmap.MapMode.City为城市模式
//*标星内容为3.0版本SDK新增属性
var map = new esmap.ESMap({
    mode: esmap.MapMode.City,       // *配置三维场景模式* Building为室内模式,City为城市模式
    container: document.getElementById('map-container'),  // 三维场景显示容器
    mapDataSrc: '/data/',               // 离线三维场景数据位置
    mapThemeSrc: '/data/theme/',        // 离线主题数据位置
    token: 'escope',                    // 打开三维场景对应的token
});
map.openMapById('esmapcitydemo');       // 根据三维场景ID打开三维场景

请放到IIS、Tomcat、NodeJs等服务器目录下,通过浏览器访问http:// ip或者网址来查看,直接双击网页文件是查看不了的!!!

大功告成