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);
});
}
};
大功告成!