mapbox-custom-layers

采用Mapbox Custom Layer的接口封装了一些mapbox自身不支持的图层，用于扩展mapbox的可视化能力

使用方法

cdn引入

<div id="container"></div>
<script src="mapbox-gl.js"></script>
<script src="mapbox-custom-layers.min.js"></script>
<script>
  const linelayer = new MapboxCustomLayer.LineLayer({
    id: 'line-layer',
    data: 'path/to/data',
    pickable: true,
    getWidth: 50,
    getSourcePosition: d => d.from.coordinates,
    getTargetPosition: d => d.to.coordinates,
    getColor: d => [Math.sqrt(d.inbound + d.outbound), 140, 0],
    onHover: ({object, x, y}) => {
      const tooltip = `${object.from.name} to ${object.to.name}`;
      /* 显示tooltip */
    }
  })
 
  /* 初始化地图 */
  const map = new mapboxgl.Map({/* mapOptions */})
  /* 地图加载完成后添加自定义图层 */
  map.on('load', () => {
    map.addLayer(linelayer)
  })
</script> 

通过npm安装（尚未发布）

npm install mapbox-custom-layers

import mapboxgl from '@cgcs2000/mapbox-gl'
import {LineLayer} from 'mapbox-custom-layers'
 
const linelayer = new LineLayer({
  id: 'line-layer',
  data: 'path/to/data',
  pickable: true,
  getWidth: 50,
  getSourcePosition: d => d.from.coordinates,
  getTargetPosition: d => d.to.coordinates,
  getColor: d => [Math.sqrt(d.inbound + d.outbound), 140, 0],
  onHover: ({object, x, y}) => {
    const tooltip = `${object.from.name} to ${object.to.name}`;
    /* 显示tooltip */
  }
})
 
/* 初始化地图 */
const map = new mapboxgl.Map({/* mapOptions */})
/* 地图加载完成后添加自定义图层 */
map.on('load', () => {
  map.addLayer(linelayer)
})

文档

查看在线文档

示例

查看在线示例

开发

npm install
npm run start
# 在浏览器打开http://localhost:8080/debug查看预览 
npm run build

发布

将发布的文件复制到deploy文件夹，然后在deploy文件夹内运行npm publish，注意更新版本号和changelog