addSource

为地图的样式添加数据源。id(string)添加数据源的ID。不能和存在的数据源冲突。source(Object)数据源对象。其中type可以是vector,raster,geojson,image,video等

map.addSource("points", {
  "type": "geojson",
  "data": {
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-77.03238901390978, 38.913188059745586]
      },
      "properties": {
        "title": "Mapbox DC 中国文字",
        "icon": "monument"
      }
      }, {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-122.414, 37.776]
      },
      "properties": {
        "title": "Mapbox SF",
        "icon": "harbor"
      }
      }]
  }
});

source配置参考:https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#geojson

addLayer

添加一个 Mapbox 样式的图层 到地图样式。图层为来自特定数据源的数据定义样式。
id: 唯一标识
type可选:fill,line,symbol,circle等
source: 对应addsource

参考:https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/

"layers": [
  {
    "id": "water",
    "source": "mapbox-streets",
    "source-layer": "water",
    "type": "fill",
    "paint": {
      "fill-color": "#00ffff"
    }
  }
]
// 添加图层,使得上面的数据源里面的数据可视化(source对应上面addsource的points)
map.addLayer({
  "id": "points",
  "type": "symbol",
  "source": "points",
  "layout": {
    "icon-image": "{icon}-15",
    "text-field": "{title}",
    "text-font": ["Open Sans Regular"],
    "text-offset": [0, 0.6],
    "text-anchor": "top"
  }
});

参考:
(添加wms图层)http://www.mapbox.cn/mapbox-gl-js/example/wms/
(添加聚合图层)https://docs.mapbox.com/mapbox-gl-js/example/cluster/
(聚合点中paint配置)https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/

setPaintProperty

设置指定样式图层中 paint 属性的值。setPaintProperty(layerId,name,value)
layerId(string)需要设置 paint 渲染属性的图层 ID。
name(string)需要设置的 paint 渲染属性名称。
value(any)要设置的 paint 渲染属性值。
某一个样式图层

参考:http://www.mapbox.cn/mapbox-gl-js/api/#map#setpaintproperty

setLayoutProperty

设置指定样式图层中布局属性的值。map.setLayoutProperty(‘my-layer’, ‘visibility’, ‘none’);
layerId(string)需要在其中设置布局(layout)属性的图层 ID。
name(string)需要设置的布局属性名称。
value(any)布局属性的值。必须是一种符合 Mapbox Style Specification 规定的属性类型。
options(Object?)(default {})

loadImage,addImage

map.on('load', function() {
      map.loadImage(
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
        function(error, image) {
          if (error) throw error;
          map.addImage('cat', image);  //
          map.addSource('point', {
            'type': 'geojson',
            'data': {
              'type': 'FeatureCollection',
              'features': [
                {
                  'type': 'Feature',
                  'geometry': {
                    'type': 'Point',
                    'coordinates': [0, 0]
                  }
                }
              ]
            }
          });
          map.addLayer({
            'id': 'points',
            'type': 'symbol',
            'source': 'point',  //对应addsource的point
            'layout': {
              'icon-image': 'cat',  //对应addiamge的cat
              'icon-size': 0.25
            }
          });
        }
      );
    });

参考:http://www.mapbox.cn/mapbox-gl-js/example/wms/

getLayer

返回地图样式中指定 ID 的图层。

removeLayerAndSource

返回地图样式中指定 ID 的图层。

popup

弹窗组件
example

var markerHeight = 50, markerRadius = 10, linearOffset = 25;
var popupOffsets = {
 'top': [0, 0],
 'top-left': [0,0],
 'top-right': [0,0],
 'bottom': [0, -markerHeight],
 'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
 'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
 'left': [markerRadius, (markerHeight - markerRadius) * -1],
 'right': [-markerRadius, (markerHeight - markerRadius) * -1]
 };
var popup = new mapboxgl.Popup({offset: popupOffsets, className: 'my-class'})
  .setLngLat(e.lngLat)
  .setHTML("<h1>Hello World!</h1>")
  .setMaxWidth("300px")
  .addTo(map);

具体参考:http://www.mapbox.cn/mapbox-gl-js/api/#popup

queryRenderedFeatures

返回一个GeoJSON Feature objects数组,这些对象表示满足查询参数的可见要素。

// 查找一个点的所有要素
var features = map.queryRenderedFeatures(
  [20, 35],
  { layers: ['my-layer-name'] }
);
// 查询单个图层的所有渲染的要素
var features = map.queryRenderedFeatures({ layers: ['my-layer-name'] });

参考:https://docs.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures/

getSource

返回地图样式中指定ID的数据源。

setFilter

layerId(string)需要应用筛选器的图层 ID。
filter((Array | null | undefined))筛选器,需符合 Mapbox 样式规范的 筛选器定义 。如果提供了 null 或 undefined ,函数会从图层中移除所有存在的筛选器
参考:http://www.mapbox.cn/mapbox-gl-js/api/#map#setfilter
https://docs.mapbox.com/mapbox-gl-js/style-spec/other/#other-filter

Logo

前往低代码交流专区

更多推荐