search
LoginSignup
0

More than 1 year has passed since last update.

posted at

図形を移動する transformTranslate

距離と方向を指定して図形を移動します。

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);

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': '#088',
      'fill-opacity': 0.8      
    }
  });

});

document.getElementById('translate').addEventListener('click', () => {
  const distance = Number(document.getElementById('dist').value);
  const direction = Number(document.getElementById('dir').value);

  turf.transformTranslate(polygon1, distance, direction, { units: 'meters', mutate: true });

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

使い方は turf.transformTranslate(図形, 距離, 方向, { 距離の単位、など }) です。
方向は北を0として時計回りに360までの度です。
options に mutate: true を付けると、引数に渡した図形の座標群を入れ替えます。
mutate: false (既定値) の場合は返値に移動した図形を返します。

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
What you can do with signing up
0