首页 > 其他分享 >全局地图+router-view实现方式

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

时间:2024-03-08 12:22:35浏览次数:19  
标签:地图 test router 全局 view pointer 页面

框架构建:

业务需求:地图或者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

相关文章

  • ItemsControl和ListView、ListBox的区别
    1、ItemsControl用来显示一个数据项的集合,它的底层是一个列表,它可以非常灵活的展示布局和数据以下是例子<ItemsControlItemsSource="{BindingStudent}"><ItemsControl.ItemTemplate><DataTemplate> <TextBlockText="{BindingId}"/> <Tex......
  • Spring-@ControllerAdvice-全局处理注解
    1,@ControllerAdvice介绍@ControllerAdvice是Spring框架提供的一个注解,用于定义全局的异常处理器和全局数据绑定。它通常用于集中处理应用程序中的异常,并提供统一的异常处理逻辑。2,@ControllerAdvice的基本使用packageorg.springframework.web.bind.annotation;importj......
  • 向TreeView添加自定义信息
    可在Windows窗体TreeView控件中创建派生节点,或在ListView控件中创建派生项。通过派生可添加任何所需字段,以及添加处理这些字段的自定义方法和构造函数。此功能的用途之一是将Customer对象附加到每个树节点或列表项。虽然此处的示例是关于TreeView控件的,但该方法同样......
  • Java自定义异常和全局异常处理
    1、自定义异常:自定义异常类 BusinessExceptionextendsRuntimeException:RuntimeException是Java提供的一个运行时异常类。publicclassBusinessExceptionextendsRuntimeException{privateintcode;//使用枚举构造publicBusinessException(HttpCodeEn......
  • drf源码剖析----as_view()
    点击查看代码path('example/',views.ExampleView.as_view())#as_view()作为入口函数,先去类ExampleView()中找as_view()函数点击查看代码#类ExampleView()中没有找到,去父类APIView()中找as_view()函数classExampleView(APIView):defget(self,request):......
  • oracle 19c普通用户查询字典表all_views时等待row cache mutex事件
    近日,一19coraclerac测试环境,初始反馈是sys用户查询很快,cdb用户如c##any查询系统表如all_tables很慢,至少相差几十倍、有时候直接半天超时还没执行完,经查一开始发现在等待gccrmultiblockmixed事件,该事件据官方解释,该事件时提升性能用的,如下:OracleGCCRMultiBlockMixed......
  • (21)Lazarus之FilterComboBox1过滤ShellListView1的文件名
    FilterComboBox1只过滤当前目录下的文件名,不过滤目录名,也不过滤子目录名拖一个FilterComboBox1,ShellListView1到界面上1]将FilterComboBox1的ShellListView设置为ShellListView12]添加过滤文件类型 3]还须设置ShellListView1的根目录Root ......
  • lazarus在银河麒麟国产操作系统linux下,使用TListView 使用图标样式 BUG完善
    lazarus在银河麒麟国产操作系统linux下,使用TListView使用TListViewvsIcon样式,文本长了会是这样效果尝试设置OwnerDraw属性为True自己定义方法DrawItem不起效果也尝试修改TCustomListView源代码也不起效果,搞了半天,后发现坑了,没仔细看帮助WhensettoTrue,theOn......
  • Eviews回归分析股权集中度、股权制衡度与公司绩效关系:中小板上市公司数据
    全文链接:http://tecdat.cn/?p=32345原文出处:拓端数据部落公众号本文深入分析了国内外关于股权结构与公司绩效的影响因素;帮助客户运用回归分析法,以ROE作为公司绩效的度量指标,考察中小企业板上市公司股权集中度、股权制衡度对公司绩效的影响因素。为了进行实证研究,选取了部分深......
  • 详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)
    详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia):https://blog.csdn.net/qq_44423029/article/details/126378199?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170891147716800185818285%2522%252C%2522scm%2522%253A%252220140713.130102334..%2......