框架构建:
业务需求:地图或者cesium为项目基本组件,且公用,在各个页面中开发对应功能方法
实现:
1,构建layout
//原则上我们使用router-view控制页面,即使用路由调用各个页面 //在layout中我们需要给一个div挂载对应的地图实例 //将router-view覆盖于实例之上 //注意 //router-view的transform组件存在事件阻断机制,在该层级中设置pointer-event:none; //此时 地图放大缩小及点击事件正常使用,但router-view中的各类事件被拦截失效 //在router-view外包裹一层div 在div层设置pointer-event:none,在router-view层设置pointer-event:auto,地图交互可用,页面交互可用 //当页面内部采用div等块级结构,会产生隐藏的宽度,导致鼠标在移动到该块及结构时事件被阻断,无法触发地图交互 //此处 还是采用router-view设置css->pointer-event:none,而具体页面的卡片面板中(卡片包裹层),设置pointer-event:auto,这样路由可以用,地图也能用
2,全局挂载地图
//挂载地图实例到window,如window.地图 //这样每个页面中 可直接通过window.地图.api操作地图交互
//注意
//外部引入地图js问题
//在vue中 我们希望地图为包或者插件的形式存在,即能切实看到相应的实体构建代码,但实际情况中,我们会遇到地球只是一个外部js的情况
//此时 在vue的public公共文件下的index.html中,我们可以以标签的形式引入地图
//<script src="http://xxxxxxxxxxx/test.js"><script>
//此时 相当于把test.js下所有内如引入到了vue中
//使用时 只需要this.test(自定义变量) = new test(参数)->这里的new test(参数)就是test.js中提供的方法/类
//这样其实也可以引入大多数类库,只是命名空间上可能会冲突导致不知道具体找的是哪一个
3,测试调用
标签:地图,test,router,全局,view,pointer,页面 From: https://www.cnblogs.com/Itsparkle/p/18060722