2.3 KiB

Raw Blame History

title	order
Control	1

control

地图组件用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺

构造函数

const baseControl = new L7.Control.Base(option);

option

position: string 控件位置支持是个方位 bottomright, topright, bottomleft, topleft

scene 内置地图组件

zoom 地图放大缩小默认添加
Scale 地图比例尺默认添加
attribution 地图数据属性默认添加
layer 图层列表

scene 配置项设置控件添加状态

scene = new L7.scene({
  zoomControl: true,
  scaleControl: true,
  attributionControl: true,
});

Zoom

放大缩小组件默认左上角

new L7.Control.Zoom({
  position: 'topleft',
}).addTo(scene);

Scale

比例尺组件默认左下角

new L7.Control.Scale({
  position: 'bottomleft',
}).addTo(scene);

attribution

默认右下角

new L7.Control.Attribution({
  position: 'bottomleft',
}).addTo(scene);

layer

图层列表目前只支持可视化 overlayers 图层控制

var overlayers = {
  围栏填充: layer,
  围栏边界: layer2,
};
new L7.Control.Layers({
  overlayers: overlayers,
}).addTo(scene);

方法

onAdd

组件添加到地图 Scene 时调用，自定义组件时需要实现此方法

addTo

添加到地图 scene

control.addTo(scene);

setPosition

设置组件位置

control.setPosition('bottomright');

remove

移除地图组件

control.remove();

示例代码

自定义图例控件

源码

var legend = new L7.Control.Base({
  position: 'bottomright',
});
legend.onAdd = function() {
  var el = document.createElement('div');
  el.className = 'infolegend legend';
  var grades = [0, 8, 15, 30, 65, 120];
  for (var i = 0; i < grades.length; i++) {
    el.innerHTML +=
      '<i style="background:' +
      colors[i] +
      '"></i> ' +
      grades[i] +
      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
  }
  return el;
};
legend.addTo(scene);

2.3 KiB Raw Blame History Unescape Escape