矢量图层 最后更新时间: 2021年01月22日
路径
一个抽象类，它包含选项和矢量叠加（多边形，折线，圆）之间共享的常量。
属性
Option | Type | Default | Description |
|---|---|---|---|
stroke | Boolean | true | 是否绘制笔划沿路径。 将它设置为false ，以禁用多边形或圆形边界。 |
color | String | '#03f' | 描边色。 |
weight | Number | 5 | 笔画宽度。 |
opacity | Number | 0.5 | 不透明度. |
fill | Boolean | depends | 是否使用颜色填充路径。 将它设置为false禁用填充多边形上或圆。 |
fillColor | String | same as color | 填充颜色。 |
fillOpacity | Number | 0.2 | 填充不透明度。 |
事件
Event | Data | Description |
|---|---|---|
click | MouseEvent | 单击. |
dblclick | MouseEvent | 双击. |
mousedown | MouseEvent | 鼠标按下. |
mouseover | MouseEvent | 鼠标经过. |
mouseout | MouseEvent | 鼠标离开. |
contextmenu | MouseEvent | 右键. |
add | Event | 添加到地图后. |
remove | Event | 从地图删除后. |
方法
Method | returns | Description |
|---|---|---|
addTo( <Map> map ) | this | 添加图层到地图。 |
bindPopup( <String> html |<HTMLElement> el | <Popup> popup,<Popup options> options? ) | this | 绑定信息窗体. |
bindPopup( <Popup> popup,<Popup options> options? ) | this | 绑定信息窗体. |
unbindPopup() | this | 解除信息窗体的绑定. |
openPopup( <LatLng> latlng? ) | this | 打开信息窗体. |
closePopup() | this | 关闭信息窗体. |
Method | Returns | Description |
addTo( <Map> map ) | this | 添加图层到地图。 |
折线
示例代码
// 创建一条折线
var polyline = Indoor.polyline(latlngs, {color: 'red'}).addTo(map);
// 调整地图视野范围
map.fitBounds(polyline.getBounds());
创建
Factory | Description |
|---|---|
Indoor.polyline( <LatLng[]> latlngs, <Polyline options> options? ) | 通过传入LatLng数组和选项实例化折线. |
选项
Option | Type | Default | Description |
|---|---|---|---|
noClip | Boolean | false | 是否允许裁剪. |
方法
Method | returns | Description |
|---|---|---|
addLatLng( <LatLng> latlng ) | this | 添加折线点. |
setLatLngs( <LatLng[]> latlngs ) | this | 设置折线点数组. |
getLatLngs() | LatLng[] | 返回折线点数组. |
折线集
创建
Factory | Description |
|---|---|
Indoor.multiPolyline( <LatLng[][]> latlngs, <Polyline options> options? ) | 传入多个LatLng数组来创建折线集. |
方法
Method | returns | Description |
|---|---|---|
setLatLngs( <LatLng[][]> latlngs ) | this | 设置折线集的折线点数组. |
getLatLngs() | <LatLng[][]> latlngs | 获取折线集的折线点数组. |
openPopup() | this | 打开已经绑定的信息窗体 bindPopup. |
多边形
Factory | Description |
|---|---|
Indoor.polygon( <LatLng[]> latlngs, <Polyline options> options? ) | 传入LatLng数组创建多边形 |
多边形集
创建
Factory | Description |
|---|---|
Indoor.multiPolygon( <LatLng[][]> latlngs, <Polyline options> options? ) | 传入多个LatLng数组来创建多边形集. |
方法
Method | returns | Description |
|---|---|---|
setLatLngs( <LatLng[][]> latlngs ) | this | 设置多边形集的折线点数组. |
getLatLngs() | <LatLng[][]> latlngs | 获取多边形集的折线点数组. |
openPopup() | this | 打开已经绑定的信息窗体 bindPopup. |
矩形
示例
// 定义矩形的对角坐标
var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];
// 添加矩形到地图,边框颜色#ff7800和边框大小1
Indoor.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);
//调整地图视图
map.fitBounds(bounds);
创建
Factory | Description |
|---|---|
Indoor.rectangle(<LatLngBounds> bounds, <Path options> options? ) | 实例化一个矩形对 |
方法
Method | returns | Description |
|---|---|---|
setBounds( <LatLngBounds> bounds ) | this | 设置矩形范围. |
圆形
创建
Factory | Description |
|---|---|
Indoor.circle( <LatLng> latlng, <Number> radius, <Path options> options? ) | 传入圆心坐标，半径，实例化一个圆形. |
方法
Method | returns | Description |
|---|---|---|
getLatLng() | LatLng | 获取圆心坐标. |
getRadius() | Number | 获取半径. |
setLatLng( <LatLng> latlng ) | this | 设置圆形圆心所在坐标位置. |
setRadius( <Number> radius ) | this | 设置圆形半径. |
圆形标记
创建
Factory | Description |
|---|---|
Indoor.circleMarker(<LatLng> latlng,<Path options> options? ) | 实例一个圆形标记，默认半径为10像素 |
方法
Method | returns | Description |
|---|---|---|
setLatLng( <LatLng> latlng ) | this | 设置圆心所有位置. |
setRadius( <Number> radius ) | this | 设置半径. |