反应 + mobx + openlayers 3
React + mobx + openlayers 3
我有一个使用 React 的地图应用程序。
它有 3 个组成部分:
- 侧边栏 - 包含将执行放大等地图功能的按钮。
- map-wrapper - 包含 openlayers 地图。
- 同时呈现它们的视图。
查看:
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
的 min/max 个值。
我有一个使用 React 的地图应用程序。
它有 3 个组成部分:
- 侧边栏 - 包含将执行放大等地图功能的按钮。
- map-wrapper - 包含 openlayers 地图。
- 同时呈现它们的视图。
查看:
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
的 min/max 个值。