[英]React + mobx + openlayers 3
我有一个使用React的地图应用程序。
它包含3个组件:
视图:
export default class MapView extends Component {
render() {
return (
<div>
<Sidebar />
<MapWrapper />
</div>
);
}
边栏:
export default class Sidebar extends Component {
render() {
return (
<div>
<ul>
<li>MAPS</li>
<li onClick=zoomIn> Zoom In + </li>
<li onClick=zoomOut> Zoom Out - </li>
</ul>
</div>
);
}
}
地图就是这样: https : //github.com/pka/ol3-react-example
现在,我要实现以下逻辑:按下缩放将放大地图。
如何使用mobx做到这一点?
这家商店将持有什么? 什么是观察者,什么是可观察者?
问候,伊豆
我会做这样的事情:
// The store:
class MapStore {
@observable zoom = 4;
}
const store = new MapStore();
// The component:
export default function Sidebar(props) {
return (
<div>
<ul>
<li>MAPS</li>
<li onClick={zoomIn}> Zoom In + </li>
<li onClick={zoomOut}> Zoom Out - </li>
</ul>
</div>
);
}
// The click handlers
function zoomIn() {
store.zoom++;
}
function zoomOut() {
store.zoom--;
}
// The observer
// See docs: https://mobxjs.github.io/mobx/refguide/reaction.html
mobx.reaction(
() => store.zoom,
(zoom) => {
map.getView().setZoom(zoom);
}
);
我没有介绍的一些内容:
map
实例。 zoom
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.