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文件夹>三维场景数据文件/主题文件夹>主题文件

注：场景初始化时无须指定主题theme文件夹路径，默认会抓取此路径下的主题文件夹

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

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

新增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/',               // 离线三维场景数据位置
    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/',               // 离线三维场景数据位置
    token: 'escope',                    // 打开三维场景对应的token
});
map.openMapById('esmapcitydemo');       // 根据三维场景ID打开三维场景

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

大功告成