1

反応を使用した地図アプリがあります。

3 つのコンポーネントがあります。

  1. サイドバー - ズームインなどのマップ機能を実行するボタンが含まれています。
  2. map-wrapper - openlayers マップが含まれています。
  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を使用してこれを行うにはどうすればよいですか?

店は何を保持しますか？オブザーバーとは何か、オブザーバブルとは何か?

よろしく、イド

4

1 に答える 1

2

私はこのようなことをします：

// 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ます。
于 2016-10-15T17:22:44.047 に答える