全局地图+router-view实现方式

框架构建：

业务需求：地图或者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，测试调用