Reactでleaflet.timedimension（雑記）

5663 ワード
leaflet.timedimension leaflet React leaflet テキストリンク 
$ npx create-react-app sample-app
$ cd sample-app
$ npm install leaflet
$ npm install leaflet.timedimension
$ npm start
/sample-app/src/MyMap2.js
import React, { useEffect } from "react";
import "leaflet/dist/leaflet.css";
import "leaflet-timedimension/dist/leaflet.timedimension.control.min.css";
import L from "leaflet";
import "leaflet-timedimension";

import data from "./data2.json";

const MyMap2 = () => {
  console.log(data);
  useEffect(() => {
    var map = L.map("map", {
      zoom: 3,
      center: [38.705, 1.15],
      timeDimension: true,
      timeDimensionControl: true,
      timeDimensionOptions: {
        times: [1496314227000, 1504263027000],
        currentTime: 1496314227000,
        // period: "P1M",
      },
      timeDimensionControlOptions: {
        playerOptions: { transitionTime: 1000, startOver: true },
      },
    });
    const dataLayer = L.geoJson(data);
    L.timeDimension.layer.geoJson(dataLayer).addTo(map);
  }, []);
  return <div id="map" style={{ height: "100vh" }}></div>;
};

export default MyMap2;