xianxuLi/maptalks.deckgl

The plugin to play deck.gl with maptalks.js

maptalks.deckgl

The plugin to play deck.gl with maptalks.js

Dev

git clone https://github.com/sakitam-gis/maptalks.deckgl.git
npm install / yarn
npm run dev / yarn run dev
npm run build / yarn run build

install

v1.0.0 npm i maptalks.deckgl

依赖 deck.gl 相关引用的 7.3.0 以上版本; 已知问题：高清屏图形会错位；

临时解决方案：指定devicePixelRatio为 1

this.map = new maptalks.Map(this.container, {
  center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
  zoom: INITIAL_VIEW_STATE.zoom,
  pitch: INITIAL_VIEW_STATE.pitch,
  bearing: INITIAL_VIEW_STATE.bearing,
  maxZoom: INITIAL_VIEW_STATE.maxZoom,
  centerCross: true,
  baseLayer: new maptalks.TileLayer('tile', {
    urlTemplate: `https://api.mapbox.com/styles/v1/mapbox/dark-v10/tiles/{z}/{x}/{y}${getDevicePixelRatio() > 1.5 ? '@2x' : ''}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg`
  }),
  devicePixelRatio: 1 // 指定devicePixelRatio为 1
});

use 使用

import { GeoJsonLayer, PolygonLayer } from '@deck.gl/layers';
import * as maptalks from 'maptalks';
import DeckGLLayer from 'maptalks.deckgl';

const map = new maptalks.Map(this.container, {
  center: [-74.01194070150844, 40.70708981756565],
  zoom: 5,
  pitch: 0,
  bearing: 0,
  centerCross: true,
  baseLayer: new maptalks.TileLayer('tile', {
    'urlTemplate': 'https://api.mapbox.com/styles/v1/mapbox/dark-v10/tiles/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg'
    // 'subdomains': ['a', 'b', 'c', 'd']
  }),
  devicePixelRatio: 1
});

const DATA_URL =
  'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/geojson/vancouver-blocks.json'; // eslint-disable-line
const landCover = [[[-123.0, 49.196], [-123.0, 49.324], [-123.306, 49.324], [-123.306, 49.196]]];

const deckLayer = new DeckGLLayer('deck', {
  'layers': [
    new PolygonLayer({
        id: 'ground',
        data: landCover,
        stroked: false,
        getPolygon: f => f,
        getFillColor: [0, 0, 0, 0]
      }),
    new GeoJsonLayer({
        id: 'geojson',
        data: DATA_URL,
        opacity: 0.8,
        stroked: false,
        filled: true,
        extruded: true,
        wireframe: true,
        getElevation: f => Math.sqrt(f.properties.valuePerSqm) * 10,
        getFillColor: f => COLOR_SCALE(f.properties.growth),
        getLineColor: [255, 255, 255],
        pickable: true,
        onHover: this._onHover
      })
  ]
}, {
  'animation': false,
  'renderer': 'webgl'
});

map.addLayer(deckLayer);

Examples

示例

其他示例请查看 website 目录下源码。