js室内地图开发_vue加载esmap室内地图

vue加载esmap室内地图

使用 vue 开发室内地图与传统开发，有些许不同

下载vue-cli2/vue-cli3版地图示例

SDK目前不支持用require js引用，只能使用引用

Tips:使用 vue -V查看你的vue-cli版本

Tips:请一定要先下载例子来测试地图，此开发说明不包含配置package.json里面的配置，请检查

Vue-cli3加载地图

vue-cli3没有 static 文件夹，而使用 public 文件夹代替。

其余操作步骤同vue-cli2，详见如下

Vue-cli2加载地图步骤

第一步:把esmap.min.js文件、地图相应的图标、地图文件、主题文件放在根目录 /static 文件夹下。

地图和样式全部不能放置到dist/static/esmap/打包后的文件夹下，要放到根目录/static/esmap/ 文件夹下。

第二步:在 index.html 文件下引入esmap sdk

第三步:创建一个单独的地图容器组件

这里命名为 MapContainer.vue ，并创建一个id为map-container的容器

第四步:组件挂载完成后初始化地图

组件mounted时，初始化地图

map一定要设置为全局对象，window.map =这样来赋值初始化，不然其它函数报map未定义.

export default {

name: "MapContainer",

mounted() {

window.map = new esmap.ESMap({

container: document.getElementById("map-container"),

//如果地图、主题文件放在static目录下，请使用static路径

mapDataSrc: "/esmap/data",

mapThemeSrc: "/esmap/data/theme"

// themeID: defaultOpt.themeID,

// token: 'escope'

});

map.openMapById(10001);

var ctlOpt = new esmap.ESControlOptions({

position: esmap.ESControlPositon.RIGHT_TOP,

//注意：imgURL参数是static目录下图片的路径

imgURL: "static/esmap/resource/style/wedgets/img/"

});

map.on("loadComplete", function() {

//创建楼层控件

var floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt);

});

}

};

大功告成！