plunkerでdeck.gl その7

概要

plunkerでdeck.glやってみた。
geojsonLayer、使ってみた。

サンプルコード

const tileLayer = new deck.TileLayer({
  data: "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",
  minZoom: 0,
  maxZoom: 19,
  tileSize: 256,
  renderSubLayers: props => new deck.BitmapLayer(props, {
    data: null,
    image: props.data,
    bounds: (({ west, south, east, north }) => [west, south, east, north])(props.tile.bbox),
  }),
});
const ICON_MAPPING = {
  marker: {
    x: 0, 
    y: 0, 
    width: 128, 
    height: 128, 
    mask: true
  }
};
const geojson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [139.692101, 35.689634]
    },
    "properties": {
      "name": "東京都庁"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [139.6941689, 35.6902021]
    },
    "properties": {
      "name": "京王プラザホテル"
    }
  }]
};
const geojsonLayer = new deck.GeoJsonLayer({
  id: 'geojson_layer',
  data: geojson.features,
  pickable: true,
  pointType: 'icon',
  iconAtlas: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png',
  iconMapping: ICON_MAPPING,
  getIcon: () => 'marker',
  getIconSize: () => 5,
  iconSizeScale: 8,
  onClick: info => {
    console.log(info);
  },
  onHover: info => {
    if (!map) 
      return;
    map.setOptions({ 
      draggableCursor: info.object ? 'pointer' : 'grab' 
    });
    console.log(info);
  },
});
const deckgl = new deck.Deck({
  initialViewState: {
    longitude: 139.6,
    latitude: 35.8,
    zoom: 8,
    minZoom: 2,
    maxZoom: 10,
    pitch: 30,
    bearing: 10,
  },
  controller: true,
  layers: [tileLayer, geojsonLayer, ]
});

実行結果

成果物

以上。