@wayz/rc-map

v1.15.0

Published

3 years ago

react map based on deck.gl and mapbox

0High
0Medium
0Low

aaron.qi

yl.wang

deck.gl mapbox map react

wz-rc-map

based on deck.gl and mapbox [TOC]

使用方法

// 安装
`npm install -S git+ssh://[email protected]:fe-components/wr-components/wz-rc-map.git`

// 升级
yarn upgrade wz-rc-map

地图组件

import Map, {DarkTheme } from "wz-rc-map"
var initialViewState = {
  longitude: 121.41669,
  latitude: 31.7853,
  zoom: 13,
  pitch: 0,
  bearing: 0
}

getChildContext() {
    return {
      getMapIns: (mapId: string | undefined) => this.$Map
    }
  }


<Map
  ref="$Map"
  onInit={(node) => {
    this.$Map = node
  }}
  initialViewState={initialViewState}
  mapStyle={DarkTheme}
  // mapStyle={'http://52.83.254.109:9876/api/vtiles/v1/static/style/base.json'}
  // mapStyle={'mapbox://styles/mapbox/dark-v9'}
  MapboxToken={MapboxToken} // 使用mapbox地图资源时必须的参数
  AMapKey={AmapKey} // 高德开放平台key, 搜索、定位时用到
  showSearch // 是否显示搜索框
/>

| 参数名 | 类型 | 必选 | 说明 | 例子 | | :--------------- | :-----------: | :--: | :-------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | initialViewState | Object | 否 | 初始地图状态 | { longitude: 121.41669, latitude: 31.7853, zoom: 13, pitch: 0, bearing: 0 } | | mapStyle | Object/String | 是 | 地图样式 | http://52.83.254.109:9876/api/vtiles/v1/static/style/base.json http://52.83.254.109:9876/api/vtiles/v1/static/style/base.json http://52.83.254.109:9876/api/vtiles/v1/static/style/base.json mapbox://styles/mapbox/dark-v9 内置 theme: DarkTheme | | MapboxToken | String | 否 | 使用 mapbox 底图时必选 | | | AMapKey | String | 否 | 使用搜索、定位时必选 | |

方法

changeViewState(viewState: Object)

用于改变地图视角，如果设置中心点，zoom 层级等

this.refs.$Map.changeViewState({
  longitude: 120,
  latitude: 21,
  zoom: 1
})

addLayers(layers: deck.gl-Layer [])

用于添加deck.gl layers

在 deck.gl layer 的基础上增加了zIndex字段，用于 layer 排序

  import {ScatterplotLayer} from '@deck.gl/layers'
  var layers = []
  layers.push(
    new ScatterplotLayer({
    id: 'scatterplot-layer', // 不同layer id 要不同
    data,
    pickable: true,
    opacity: 0.8,
    stroked: true,
    filled: true,
    radiusScale: 6,
    radiusMinPixels: 1,
    radiusMaxPixels: 100,
    lineWidthMinPixels: 1,
    zIndex: 10, // **扩展字段**
    getPosition: d => d.coordinates,
    getRadius: d => Math.sqrt(d.exits),
    getFillColor: d => [255, 140, 0],
    getLineColor: d => [0, 0, 0],
    onHover: ({object, x, y}) => {
      const tooltip = `${object.name}\n${object.address}`;
      /* Update tooltip
         http://deck.gl/#/documentation/developer-guide/adding-interactivity?section=example-display-a-tooltip-for-hovered-object
      */
    }
  });
  )
  this.$Map.addLayers(layers)

removeLayers(layerIds: string[])

从地图上清除 deck.gl layers

this.$Map.removeLayers(["scatterplot-layer"])

on(eventName: string, linstener: function)

监听地图视角变化

function onViewStateChange(viewState) {}
// 监听
this.$Map.on(map.EVENT.VIEW_STATE_CHANGE, onViewStateChange)

// 取消监听
this.$Map.off(map.EVENT.VIEW_STATE_CHANGE, onViewStateChange)

监听事件键盘、鼠标 viewport

// 需要捕捉的事件 return true, 否则 return false
function handleDrag(e, viewPort) {
  let { type, offsetCenter: center } = e
  if (type === "panmove" || type === "panend") {
    // 拖动
    // dragging
    let [longitude, latitude] = viewPort.unproject([center.x, center.y])
    // 操作逻辑
    return true
  }
  return false
}
// 监听
this.$Map.on(map.EVENT.MAP_EVENT, handleDrag)

// 取消监听
this.$Map.off(map.EVENT.MAP_EVENT, handleDrag)

off(eventName: string, linstener: function)

取消监听

getMapboxIns

获取 mapbox 实例，这样可以使用 mapbox 原生接口

getMapboxInsAsnyc

mapbox 实例，这样可以使用(mapbox 原生接口)[https://docs.mapbox.com/mapbox-gl-js/examples/]

this.$Map.getMapboxInsAsnyc(map=>{
  map.addLayer({...})
})

LayerRender

对 Decl.gl layers 的显示做的一层封装，自动更新、卸载图层

参数：

data: object data 有变化时才会触发 layer 更新，否则不更新
getLayer: function(data, showTip) 返回 Deck.gl 数组

import { LayerRender } from "wz-rc-map"
import {ArcLayer} from '@deck.gl/layers';

function getLayers(data, showTip) {
  return [
     new ArcLayer({
      id: 'arc-layer',
      data,
      pickable: true,
      getWidth: 12,
      zIndex:2,
      getSourcePosition: d => d.from.coordinates,
      getTargetPosition: d => d.to.coordinates,
      getSourceColor: d => [Math.sqrt(d.inbound), 140, 0],
      getTargetColor: d => [Math.sqrt(d.outbound), 140, 0],
      onHover: ({object, x, y}) => {
        const tooltip = `${object.from.name} to ${object.to.name}`;
        showTip(tooltip)
      }
    });
  ]
}
return (
  <LayerRender data={{ list, sprites, img }} getLayer={getLayers} mapId="need when multi map exist " />
)

MapboxLayerRender

基于 mapbox layer实现

参数：

sources: object[{id, source}]mapbox source列表
layers: object[][mapbox layer]列表

updateSource: function(sourceIns, sourceData) 更新 source 方法, 默认为：

function defaultUpdateSource(sourceIns, sourceData) {
  sourceIns.setData(sourceData.data)
}

import { MapboxLayerRender } from "wz-rc-map"

return (
  <MapboxLayerRender
    mapId="need when multi map exist "
    sources={[
      {
        id: "national-park",
        source: {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                geometry: {
                  type: "Polygon",
                  coordinates: [
                    [
                      [-121.353637, 40.584978],
                      [-121.284551, 40.584758],
                      [-121.275349, 40.541646],
                      [-121.246768, 40.541017],
                      [-121.251343, 40.423383],
                      [-121.32687, 40.423768],
                      [-121.360619, 40.43479],
                      [-121.363694, 40.409124],
                      [-121.439713, 40.409197],
                      [-121.439711, 40.423791],
                      [-121.572133, 40.423548],
                      [-121.577415, 40.550766],
                      [-121.539486, 40.558107],
                      [-121.520284, 40.572459],
                      [-121.487219, 40.550822],
                      [-121.446951, 40.56319],
                      [-121.370644, 40.563267],
                      [-121.353637, 40.584978]
                    ]
                  ]
                }
              },
              {
                type: "Feature",
                geometry: {
                  type: "Point",
                  coordinates: [-121.415061, 40.506229]
                }
              },
              {
                type: "Feature",
                geometry: {
                  type: "Point",
                  coordinates: [-121.505184, 40.488084]
                }
              },
              {
                type: "Feature",
                geometry: {
                  type: "Point",
                  coordinates: [-121.354465, 40.488737]
                }
              }
            ]
          }
        }
      }
    ]}
    layers={[
      {
        id: "park-boundary",
        type: "fill",
        source: "national-park",
        paint: {
          "fill-color": "#888888",
          "fill-opacity": 0.4
        },
        filter: ["==", "$type", "Polygon"]
      },
      {
        id: "park-volcanoes",
        type: "circle",
        source: "national-park",
        paint: {
          "circle-radius": 6,
          "circle-color": "#B42222"
        },
        filter: ["==", "$type", "Point"]
      }
    ]}
  />
)

domRender

基于 mapbox marker实现

参数：

list: object[] 列表
className: string dom 类名，方便写样式表
getHtml: function 返回节点 html 内容
getCoords: function 返回节点坐标

import { DomRender } from "wz-rc-map"

return (
  <DomRender
    mapId="need when multi map exist "
    list={[
      { name: "001", coords: [121.577515, 31] },
      { name: "002", coords: [120, 31] }
    ]}
    className="poi"
    getHtml={item => {
      return `<div class='poi-name'>${item.name}</div>`
    }}
    getCoords={item => {
      return item.coords
    }}
  />
)
// 节点内容如下，可以通过css控制样式内容
// <div class="poi"><div class='poi-name'>001</div></div>
// <div class="poi"><div class='poi-name'>002</div></div>

DomToImageSprites

将 dom 元素转为 base64 图片及对应坐标, 可以用于 icon layer

DomToImageSprites(
  [{ name: 001, count: 002 }],
  item =>
    `<div class="count-item"><span class='name'>${item.name}</span><span class='count'>${item.count}家</span></div>`,
  "city-brand-count"
).then(({ sprites, img }) => {
  // var image = new Image()
  // image.setAttribute("src", img)
  // document.body.append(image)
})

deck.gl layer 扩展

WGeoLayer

返回 deck.gl GeoJsonLayer

import {WGeoLayer} from 'wz-rc-map

var layer = WGeoLayer.default({
  id: 'may id',
  data: mydata
})
// default conf
// {
//   id: "layer-geo",
//   data: {},
//   pickable: false,
//   stroked: false,
//   filled: true,
//   extruded: true,
//   lineWidthScale: 1,
//   lineWidthMinPixels: 1,
//   getFillColor: d => d.properties.color,
//   getRadius: 1,
//   getLineWidth: 1,
//   getElevation: 0,
// }

WGridLayer

返回 deck.gl GridLayer

import {WGridLayer} from 'wz-rc-map

var layer = WGridLayer.default({
  id: 'may id',
  data: mydata
})
// default conf
// {
//   id: "layer-grid",
//   data: [],
//   getPosition: d => [d[0], d[1]],
//   getWeight: d => 1,
//   cellSizePixels: 20,
//   colorRange,
//   gpuAggregation: true
// }

WIconLayer

返回 deck.gl IconLayer

import {WIconLayer} from 'wz-rc-map

var layer = WIconLayer.default({
  id: 'may id',
  data: mydata
})
// default conf
// {
//   data: [],
//   iconAtlas: icon["app.png"],
//   iconMapping: {
//     store: {
//       x: 10,
//       y: 10,
//       width: 22,
//       height: 26,
//       anchorY: 13,
//       mask: true,
//     },
//     address: {
//       x: 10,
//       y: 56,
//       width: 18,
//       height: 29,
//       anchorY: 15,
//       mask: true,
//     },
//     loc_red: {
//       x: 90,
//       y: 10,
//       width: 18,
//       height: 29,
//       anchorY: 15,
//       mask: false,
//     },
//     loc_green: {
//       x: 10,
//       y: 56,
//       width: 18,
//       height: 29,
//       anchorY: 15,
//       mask: false,
//     },
//     loc_yellow: {
//       x: 52,
//       y: 10,
//       width: 18,
//       height: 29,
//       anchorY: 15,
//       mask: false,
//     },
//     radius: {
//       x: 128,
//       y: 10,
//       width: 28,
//       height: 17,
//       anchorY: 8,
//       mask: false,
//     },
//     center: {
//       x: 128,
//       y: 47,
//       width: 12,
//       height: 12,
//       anchorY: 6,
//       mask: false,
//     },
//   },
//   sizeScale: 1,
//   getPosition: d => d.coordinates,
//   getIcon: d => d.icon,
//   getSize: d => d.size || 30,
//   getColor: d => d.color || [100, 140, 0],
// }

var layer = WIconLayer.num({
  id: 'may id',
  data: mydata
})
// default conf
// {
//   data: [],
//   iconAtlas: icon["num.png"],
//   iconMapping: {
//     "marker-1": {
//       x: 0,
//       y: 0,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     "marker-2": {
//       x: 128,
//       y: 0,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     "marker-3": {
//       x: 256,
//       y: 0,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     "marker-4": {
//       x: 384,
//       y: 0,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     "marker-5": {
//       x: 0,
//       y: 128,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     "marker-6": {
//       x: 128,
//       y: 128,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     "marker-7": {
//       x: 256,
//       y: 128,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     "marker-8": {
//       x: 384,
//       y: 128,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     "marker-9": {
//       x: 0,
//       y: 256,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     "marker-10": {
//       x: 128,
//       y: 256,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     "marker-20": {
//       x: 256,
//       y: 256,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     "marker-30": {
//       x: 384,
//       y: 256,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     "marker-40": {
//       x: 0,
//       y: 384,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     "marker-50": {
//       x: 128,
//       y: 384,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     "marker-60": {
//       x: 256,
//       y: 384,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     "marker-70": {
//       x: 384,
//       y: 384,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     "marker-80": {
//       x: 0,
//       y: 512,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     "marker-90": {
//       x: 128,
//       y: 512,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     "marker-100": {
//       x: 256,
//       y: 512,
//       width: 128,
//       height: 128,
//       anchorY: 128,
//     },
//     marker: {
//       x: 384,
//       y: 512,
//       width: 128,
//       height: 128,
//       anchorY: 64,
//     },
//   },
//   sizeScale: 1,
//   getPosition: d => d.coordinates,
//   getIcon: d => d.icon,
//   getSize: d => d.size || 30,
//   getColor: d => d.color || [100, 140, 0]ation: true
// }

WScatterLayer

返回 deck.gl ScatterplotLayer

import {WScatterLayer} from 'wz-rc-map

var layer = WScatterLayer.default({
  id: 'may id',
  data: mydata
})
// default conf
// {
//   id: "layer-scatter",
//   data: [],
//   radiusScale: 1,
//   radiusMinPixels: 1,
//   getPosition: d => [d[0], d[1], 0],
//   getColor: [255, 255, 30],
//   getRadius: 1,
// }

WTextLayer

返回 deck.gl TextLayer

import {WTextLayer} from 'wz-rc-map

var layer = WTextLayer.default({
  id: 'may id',
  data: mydata
})
// default conf
// {
//   id: "layer-text",
//   data: [],
//   getText: d => d.name,
//   getPosition: x => x.coordinates,
//   getColor: d => d.color || [0, 0, 0],
//   getSize: d => 12,
//   characterSet: "utf8",
//   sizeScale: 1,
// }