mapbox怎么控制地图的旋转行为
Posted 北风几吹夏
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了mapbox怎么控制地图的旋转行为相关的知识,希望对你有一定的参考价值。
可以在 Mapbox GL JS 中使用 scrollZoom
, dragRotate
, touchRotate
属性来控制地图的旋转行为。
scrollZoom
: 是否支持滚轮缩放,默认为true
。dragRotate
: 是否支持平移拖拽旋转地图,默认为true
。touchRotate
: 是否支持触摸缩放旋转地图,默认为true
。
如果想禁止地图旋转,可以将 dragRotate
和 touchRotate
设置为 false
。
// 创建地图
var map = new mapboxgl.Map(
container: \'map\',
style: \'mapbox://styles/mapbox/streets-v11\',
center: [116.4074, 39.9042],
zoom: 12,
dragRotate: false,
touchRotate: false
);
// 禁止地图旋转
在上面的示例中,创建地图时将 dragRotate
和 touchRotate
属性设置为 false
,从而禁止了地图的旋转行为。
除了以上属性外,Mapbox GL JS 还提供了其他一些属性来控制地图的交互行为,可以根据自己的需求进行设置。例如,scrollZoomSpeed
属性可以用来控制鼠标滚轮缩放的速度,dragPan
属性可以用来控制地图平移的方式,doubleClickZoom
属性可以控制地图双击缩放的行为等。
箴言:因为这些东西是非常简单的。不要抱怨自己学不会,那是因为你没有足够用心。
如何在 Vuex 中为 mapbox 地图设置集中状态?
【中文标题】如何在 Vuex 中为 mapbox 地图设置集中状态?【英文标题】:How to setup a centralized state for a mapbox map in Vuex? 【发布时间】:2017-05-09 13:21:51 【问题描述】:我刚开始使用 vuex 和 vue。我确实(大致)了解文档。我有一个具体的问题,我不确定是否应该使用 vuex,如果可以,该怎么做。
我有一个应用程序,其中 mapbox 地图在各种布局和组件等中无处不在。因为我将制作几个 vue 单文件组件,但正在使用同一个 mapbox 地图实例,我认为这样做是有意义的在 vuex 商店中启动和管理 mapbox 地图。所以例如当我更改地图布局或其他内容时,它将反映在所有组件中。
当我继续朝这个方向前进时,我对一些事情感到困惑:
-
地图不仅仅是一个变量/数组,而是一个mapbox类地图的实例。所以我想初始状态是一个空对象,然后它需要被初始化。正确吗?
我想初始化是异步的,只能在页面加载后发生。这可能就是我下面的代码不起作用的原因!?
我尝试了以下操作:
制作了一个mapboxmap模块,用
mapboxmap.js
import simple from '../../components/simplestyle'
let mapboxgl = require('mapbox-gl/dist/mapbox-gl.js')
// initial state
const state =
myMap: ,
mapLoaded: false
const mutations =
loadMap (state, myMap)
state.myMap = myMap
state.mapLoaded = true
const actions =
loadMap (context)
'use strict'
mapboxgl.accessToken = 'mysecretmapboxcode'
let myMap = new mapboxgl.Map(
container: 'map',
style: simple,
hash: true,
center: [-74.0073, 40.7124],
zoom: 16
)
context.commit('loadMap', myMap)
export default
state,
mutations,
actions
作为组件:
Mapoutout.vue
<template>
<div>
<div id='map' class='map'>
</div>
</div>
</template>
<script type='text/babel'>
export default
mounted ()
this.computed.myMapForView.set().then(() => this.computed.myMapForView.get())
,
computed:
myMapForView:
// getter
get: function ()
return this.$store.state.myMap
,
// setter
set: function ()
this.$store.dispatch('loadMap')
</script>
这不起作用。非常感谢有关解决方案方法和具体方法的任何建议。
我在浏览器中收到的错误消息:
vue.runtime.common.js?d43f:433 TypeError: Cannot read property 'myMapForView' of undefined
at VueComponent.mounted (eval at 162 (0.ce2d9bf….js:21), <anonymous>:8:18)
at callHook (eval at <anonymous> (app.js:794), <anonymous>:2335:19)
at Object.insert (eval at <anonymous> (app.js:794), <anonymous>:2525:5)
at invokeInsertHook (eval at <anonymous> (app.js:794), <anonymous>:4352:28)
at VueComponent.patch [as __patch__] (eval at <anonymous> (app.js:794), <anonymous>:4508:5)
at VueComponent.Vue._update (eval at <anonymous> (app.js:794), <anonymous>:2222:19)
at VueComponent.eval (eval at <anonymous> (app.js:794), <anonymous>:2189:10)
at Watcher.get (eval at <anonymous> (app.js:794), <anonymous>:1652:27)
at Watcher.run (eval at <anonymous> (app.js:794), <anonymous>:1721:22)
at flushSchedulerQueue (eval at <anonymous> (app.js:794), <anonymous>:1539:13)
logError @ vue.runtime.common.js?d43f:433
编辑:
从this.computed.myMapForView
更改为this.myMapForView
后,我在浏览器中收到以下错误消息:
vue.runtime.common.js?d43f:433
TypeError: Cannot read property 'set' of undefined
at VueComponent.mounted (eval at 162 (0.85b2be9….js:21), <anonymous>:6:22)
at callHook (eval at <anonymous> (app.js:794), <anonymous>:2335:19)
at Object.insert (eval at <anonymous> (app.js:794), <anonymous>:2525:5)
at invokeInsertHook (eval at <anonymous> (app.js:794), <anonymous>:4352:28)
at VueComponent.patch [as __patch__] (eval at <anonymous> (app.js:794), <anonymous>:4508:5)
at VueComponent.Vue._update (eval at <anonymous> (app.js:794), <anonymous>:2222:19)
at VueComponent.eval (eval at <anonymous> (app.js:794), <anonymous>:2189:10)
at Watcher.get (eval at <anonymous> (app.js:794), <anonymous>:1652:27)
at Watcher.run (eval at <anonymous> (app.js:794), <anonymous>:1721:22)
at flushSchedulerQueue (eval at <anonymous> (app.js:794), <anonymous>:1539:13)
logError @ vue.runtime.common.js?d43f:433
【问题讨论】:
【参考方案1】:在我看来new mapboxgl.Map()
是一个异步函数,在vuex 中Actions 可以包含任意异步操作,而不是来自mutations 的突变。 变异处理函数必须是同步的。
因此,您应该在以下操作中执行new mapboxgl.Map()
:
import simple from '../../components/simplestyle'
let mapboxgl = require('mapbox-gl/dist/mapbox-gl.js')
// initial state
const state =
myMap: ,
mapLoaded: false
const mutations =
loadMap (state, myMap)
state.myMap = myMap
const actions =
loadMap (context)
'use strict'
mapboxgl.accessToken = 'mysecretmapboxkey'
var myMap = new mapboxgl.Map(
container: 'map',
style: simple,
hash: true,
center: [-74.0073, 40.7124],
zoom: 16
)
context.commit('loadMap', myMap)
export default
state,
mutations,
actions
编辑:
鉴于您的鼠标交互导致状态发生变化,您可以在您的 vue 实例中使用getter and setter 有一个computed property,如下所示:
computed:
myMapForView:
// getter
get: function ()
return this.$store.state. myMap
,
// setter
set: function (newMap)
this.$store.commit('loadMap', newMap)
工作小提琴:http://jsfiddle.net/aucqteLn/
同时检查:Vuex store with "strict: true" does not work
【讨论】:
谢谢。好点子。我编辑了我的问题,包括你的 cmets。但是仍然不起作用(不在浏览器中显示地图)。我将包含我收到的错误消息。 @musicformellons 看起来,您正在某处更改 vuex 存储状态,如前所述,vuex 变量只能通过突变来更改。可以添加watcher相关的代码吗? 我不认为我正在从代码中的其他位置更改 vuex 存储状态...看起来 mapobject 在那里,但它不显示图块。当我在 mapcanvas 上与鼠标交互时,我确实在浏览器中收到类似的错误消息,所以我现在的印象是我与地图的交互事件(加载、移动结束、鼠标单击等),都被认为是“改变” vuex 状态'而不使用突变或动作,这很有意义,因为我认为 state.map 对象已更改。这有意义吗?以及如何进行?! 我做了一些更改...查看编辑的代码和错误消息。我们需要调度,而不是提交,对吧?!我还省略了函数的 newMap 参数,因为我们的地图将是 myMap,对吧?! @musicformellons 你只需要this.myMapForView
而不是this.computed.myMapForView
。以上是关于mapbox怎么控制地图的旋转行为的主要内容,如果未能解决你的问题,请参考以下文章