Vue 引入 ol(openlayers) 使用问题

vue 引入 ol(openlayers) 并创建地图对象,使用ol-hashed 来维持页面刷新时 地图的 状态,但是,可以看到在操作地图放大缩小的时候,地图中心发生了变化在url上体现了出来,但是刷新页面后,由于vue-router的关系,url发生了变化,定位不到页面,如何解决


下边是刚开始加载出来的地图

下边是进行移动后的地图,可以看到url地址发生了变化

当再次刷新的时候,页面显示空白,控制台提示vue-router.esm-bundler.js?6c02:71 [Vue Router warn]: No match found for location with path “/center/-47.54,27.106/zoom/4”
image
可以看出,是由于地图位置变化引起的路由识别不了url,导致页面不显示,那么vue 中是不是不能 使用 ol-hashed 来保持地图的状态

看你的描述,最明显的是 参数的传递是通过 路由进行的,将参数传递方式由路由传参改为 vuex 方式应该会解决掉该问题 你可以仔细查看一下 该文档的具体api 及示例 该插件之前没有使用过

您好,感谢您的回复,但是应该不是这个问题,您说的传参的问题,应该是组件跳转的时候选择路由传参,或者是在子组件中使用vuex获取参数对吗,但是我这个并不是进行页面跳转,而是使用了ol-hashed这个插件在点击地图的某个位置的时候,会获取这个点的坐标,将其置为地图的中心,所以会看到/center/-47.54,27.106/zoom/4,在html 中直接使用 是没有问题的,就是在vue 中,放大地图后,重新刷新,加载不出来页面了,我觉得应该是刷新页面后路由中没有匹配的地址。而在地图中放大和缩小的url的改变也不应该去走路由,具体的还没研究出来,感谢您的回复

通过进一步的查看是由于,在点击地图的时候,返回的坐标位置信息以路径的形式出现在url中覆盖了路由地址信息,如果返回的坐标信息以参数的形式追加到路由地址后边是没有问题可以保持地图状态的。

这个问题,目前已解决,出现问题是,ol-hashed 通过location.path 将vue-router的路径覆盖变成了地图信息,通过修改其改变path的方法,这个问题得到解决,地图状态在刷新时保持稳定