2.3 三维地图初始化

本章节将详细介绍如何使用 CooWasm API 完成三维地图的初始化。

编写Hello CooWasm

1.引入cooWasmApi.js

在工程中使用 CooWasm，需先将 CooWasm 目录下的所有文件复制到工程的任意目录，然后在页面中引入cooWasmApi.js文件。

<script type="text/javascript" src="cooWasmApi.js"></script>

2.创建canvas画布

在页面中创建<canvas>元素作为三维地图的显示区域，并设置唯一的id属性：

<canvas id="canvas"></canvas>

3.实现初始化代码

通过CooWasm.Map构造函数完成地图初始化，传入的id需与<canvas>元素的id保持一致。所有 CooWasm API 对象均需添加 CooWasm前缀。

地图初始化完毕，会调用initCallback函数告知：

var map = new CooWasm.Map("canvas",{
    initCallback:() => {
        console.log("初始化完成！");
    }
});

4.进行授权

在初始化时加上对应的授权ip与端口：

var map = new CooWasm.Map("canvas",{
    licIp:127.0.0.1,//授权服务ip
    licPort:8088,//授权服务端口
    initCallback:() => {
        console.log("初始化完成！");
    }
});

5.进度条禁用或修改

如果不喜欢地图自带的等待进度条，想实现自己的进度条，可设置bProgress为false，关闭默认进度条：

var map = new CooWasm.Map("canvas",{
    licIp:127.0.0.1,//授权服务ip
    licPort:8088,//授权服务端口
    initCallback:() => {
        console.log("初始化完成！");
    }
});

5.初始化动画禁用或修改

如果不喜欢地图自带的初始化动画，想实现自己的初始化动画，可设置bProgress为false，关闭默认动画：

var map = new CooWasm.Map("canvas",{
    bProgress: false,
    initCallback:() => {
        console.log("初始化完成！");
    }
});

实现自己进度条时，需要注意的是，不要使用地图正在使用的canvas，会导致地图图形环境初始化异常！

6.三维地图隐藏

在业务场景中如需临时隐藏三维地图，可调用visible()方法：

map.visible(false);

7.三维地图销毁

调用方法destroy():

map = map.destroy();

8.三维地图WASM模块缓存机制

考虑到WASM模块占用空间较大，在浏览器访问时，会消耗很多时间在下载、编译上，因此引入了缓存机制，通过bCache控制缓存开启与否。

默认情况下，缓存机制默认开启，用于提高WASM的初始化速度，减少时间消耗，优化用户的使用体验。

当bCache设置为false时，会主动在初始化时强制清除当前缓存，也就意味着每次启动都会从服务器端拉取最新代码，此种方式不太推荐。

如果因为版本更新，或者排查问题，想主动清理WASM模块缓存，有两种方式。

API接口清除

map.clearCache();

通过调用该接口，可强制清理当前WASM模块缓存，仅生效一次。

Chrome调试控制台手动清除

通过F12打开Chrome调试控制台，按照如图所示选择、操作：

还有一种常规网页缓存，只需要在Chrome调试控制台开启时，如图所示选择、操作，即可快速清理：

现在你已经学会使用CooWasm API创建、显隐、销毁三维地图应用。如果想要继续开发更多功能，请继续后面几个章节的学习。