1.15.0 • Published 12 months ago
@wayz/rc-map v1.15.0
wz-rc-map
based on deck.gl and mapbox TOC
使用方法
// 安装
`npm install -S git+ssh://git@git.aimap.io: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}(https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources)列表
- layers: object列表
- 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,
// }
1.15.0
12 months ago