LoginSignup
0
0

More than 3 years have passed since last update.

図形を回転する transformRotate

Last updated at Posted at 2020-12-07

角度と基点を指定して図形を回転させます。

cap.gif

let polygon1 = {
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [ 137.796, 34.940 ],
        [ 137.748, 34.882 ],
        [ 137.887, 34.888 ],
        [ 137.796, 34.940 ]
      ]
    ]
  }
};

const dataSource = {
  'type': 'geojson',
  'data': {
    "type": "FeatureCollection",
    "features": [
      polygon1,
    ]    
  }
};

const bounds = turf.bbox(dataSource.data);

let anchor;

const map = new mapboxgl.Map({
  container: 'map',
  bounds: bounds,
  style: {
    version: 8,
    sources: {
      OSM: {
        type: "raster",
        tiles: [
          "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
        ],
        tileSize: 256,
        attribution:
        "OpenStreetMap",
      },
    },
    layers: [{
      id: "BASEMAP",
      type: "raster",
      source: "OSM",
      minzoom: 0,
      maxzoom: 18,
    }],
  },      
});

map.once('load', () => {

  map.fitBounds(bounds, { padding: { bottom: 200, top: 200, right: 200, left: 200 }});

  map.addSource('polygons', dataSource);

  map.addLayer({
    'id': 'polygons',
    'type': 'fill',
    'source': 'polygons',
    'paint': {
      'fill-color': '#FF0000',
      'fill-opacity': 0.7
    }
  });

  const center = turf.center(polygon1);
  anchor = new mapboxgl.Marker()
    .setLngLat(center.geometry.coordinates)
    .setDraggable(true)
    .addTo(map);

});

document.getElementById('rotate').addEventListener('click', () => {
  const angle = Number(document.getElementById('dir').value);

  turf.transformRotate(polygon1, angle, { pivot: anchor.getLngLat().toArray(), mutate: true });

  const dataSource = map.getSource('polygons');
  dataSource.setData({
    "type": "FeatureCollection",
    "features": [
      polygon1,
    ]    
  });
});

使い方は、turf.transformRotate(図形, 角度, { pivot: 基点 }); です。
options に mutate: true を付けると、引数に渡した図形の座標群を入れ替えます。
mutate: false (既定値) の場合は返値に移動した図形を返します。

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0