layer图层

图层相关说明。

Introduction#

图层是maptalks的核心，地图的所有功能都是通过图层来展现：

  • 通过TileLayer显示基本地图，

  • 通过VectorLayer加载矢量数据

  • 通过HeatMap绘制热力图等。

每个图层都是一个独立的系统。

  • 独立: 图层之间没有联系

  • 系统: 每个图层有自己独立的数据格式, 渲染逻辑, 交互过程, 空间算法等

  • 继承: 子图层可以选择性的继承父图层方法, 例如继承数据格式, 但采用新的渲染方式

你可以用图层绘制简单的点线面, 也可以用图层加载复杂的地形数据(terrain DEM data), 也可以用图层绘制复杂的交互动画, 他们都是图层.

maptalks核心库图层#

TileLayer#

API接口 | 示例

瓦片图层用来加载底图瓦片, TileLayer用[Tile System|tile-system]来配置不同的瓦片系统

VectorLayer#

API接口 | 示例

VectorLayer用来加载矢量数据, 包括Marker, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, GeometryCollection 和一些扩展图形, 例如Curve, Ellipse, Rectangle等

CanvasLayer#

API接口 | 示例

CanvasLayer是绘制在canvas上的图层, 并提供了canvas的绘图接口和相应的接口(prepareToDraw, draw), 方便用户定制自己的canvas绘制逻辑. 它还提供了一些方法用于创建动画.

ParticleLayer#

API接口 | 示例

ParticleLayer是CanvasLayer的子类, 其在CanvasLayer基础上封装了粒子动画的绘制逻辑, 你只需要实现getParticles方法, 既能简单的方便在地图上画出各种粒子动画.

CanvasTileLayer#

API接口 | 示例

CanvasTileLayer是TileLayer的子类, 与TileLayer不同的是, 其每个Tile是一个独立的Canvas, 而不是Image.

常用的插件图层#

ClusterLayer#

链接

点聚合图层, 用来在图层上有大量Marker时, 将其聚合起来显示为聚合点, 它是VectorLayer的子类.

HeatLayer#

链接

热力图图层, 用来绘制热力图效果

AnimateMarkerLayer#

链接

动画Marker图层, 该图层用来绘制Marker的动画效果

其他插件图层#

maptalks的插件图层在不停的增加, 你可以在官网随时浏览现在已有的插件图层.

代码演示

TileLayer

summary#

TileLayer。

expand codeexpand code
import { Checkbox, Row, Col } from 'antd';
import { Map, TileLayer } from '@sakitam-gis/react-map';
import './index.less';

class Index extends React.Component {
  constructor (props, context) {
    super(props, context);
    this.state = {
      zoom: 9,
      fov: 0,
      pitch: 0,
      bearing: 0,
      layers: []
    };

    this.map = null;
    this.layers = [
      {
        id: 'lite',
        key: 'lite',
        renderer: 'gl',
        urlTemplate: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
        subdomains: ['a', 'b', 'c', 'd']
      },
      {
        id: 'dark',
        key: 'dark',
        renderer: 'gl',
        urlTemplate: 'http://{s}.basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}.png',
        subdomains: ['a', 'b', 'c', 'd']
      },
      {
        id: 'google',
        key: 'google',
        renderer: 'gl',
        urlTemplate: 'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}',
        subdomains: null
      },
      {
        id: 'image',
        key: 'image',
        renderer: 'gl',
        urlTemplate: 'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}',
        subdomains: null
      },
      {
        id: 'amap',
        key: 'amap',
        renderer: 'gl',
        urlTemplate: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=8&x={x}&y={y}&z={z}',
        subdomains: ['1', '2', '3', '4']
      }
    ];
  }

  componentDidMount () {
  }

  handleMapLoad = (map) => {
    this.map = map;
  };

  onChange = (value) => {
    this.setState({
      layers: this.layers.filter(item => value.indexOf(item.id) > -1)
    });
  };

  render () {
    const { zoom, fov, pitch, bearing, layers } = this.state;
    return (
      <div className="example-content">
        <Map
          className="map-content"
          center={[-0.113049, 51.498568]}
          zoom={zoom}
          pitch={pitch}
          bearing={bearing}
          fov={fov}
          events={{
            onload: this.handleMapLoad
          }}
        >
          {
            layers.map(layer => {
              return (
                <TileLayer {...layer} />
              );
            })
          }
        </Map>
        <div className="example-top">
          <Checkbox.Group style={{ width: '100%' }} onChange={this.onChange}>
            <Row>
              {
                this.layers.map(layer => {
                  return (
                    <Col key={layer.key} span={8}><Checkbox value={layer.key}>{layer.key}</Checkbox></Col>
                  );
                })
              }
            </Row>
          </Checkbox.Group>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Index />
, mountNode);
map简单地图