Map
继承Evented。
核心API,在页面上创建地图对象。
示例
//在id为 mapDivId 的div中初始化地图,并设置中心点和初始化级别
var map = W.map('mapDivId', {
center: [30.29, 111.34],
zoom: 12
});
构造函数
| 方法 | 描述 |
|---|---|
| W.map(< String > id, < Map options> options?) | 给定div的id和地图属性选项来创建一个地图对象 |
| W.map(< HTMLElement > el), < Map options> options?) | 通过一个html element对象和地图属性选项来创建地图对象 |
构造选项
| 选项名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| center | LatLng | undefined | 初始地图中心点 |
| zoom | Number | undefined | 初始地图缩放级别 |
| attributionControl | Boolean | true | 指定是否将属性控件添加到地图上。 |
| zoomControl | Boolean | true | 指定是否将级别缩放控件添加到地图上。 |
| closePopupOnClick | Boolean | true | 当设置为true的时候,鼠标点击地图(不是气泡的关闭按钮)将关闭已打开的气泡 |
| minZoom | Number | W.config.getMinZoom() | 地图最小级别 |
| maxZoom | Number | W.config.getMaxZoom() | 地图最大级别 |
| maxBounds | LatLngBounds | W.config.getMaxBounds() | 地图范围 |
| doubleClickZoom | Boolean | true | 当双击地图时,是否放大地图 |
方法
图层和控件相关方法
| 方法名 | 返回值 | 描述 |
|---|---|---|
| addControl(< Control > control) | this | 添加地图控件 |
| removeControl(< Control > control) | this | 删除地图控件 |
| addLayer(< Layer >layer ) | this | 将图层添加到地图上 |
| removeLayer< Layer >layer | this | 从地图上删除图层 |
| hasLayer< Layer >layer | Boolean | 判断图层是否已经叠加到地图上 |
| openPopup(< Popup >popup ) | this | 在地图上打开一个气泡 |
| closePopup() | this | 关闭地图上的气泡 |
修改地图状态相关方法
| 方法名 | 返回值 | 描述 |
|---|---|---|
| setView(<LatLng> center,< Number > zoom) | this | 设置地图视角(中心点和级别) |
| setZoom(< Number >zoom) | this | 设置地图级别 |
| zoomIn() | this | 放大地图 |
| zoomOut() | this | 缩小地图 |
| fitBounds(< LatLngBounds > bounds) | this | 设定地图范围 |
| panTo(<LatLng> latlng) | this | 平移地图至指定的坐标 |
| panBy(<Point> offset) | this | 平移地图到指定的像素点 |
| flyTo(<LatLng>latlng,<Number>zoom?) | this | 平滑的跳转到指定的位置和级别 |
| flyToBounds(<LatLngBounds> bounds) | this | 平滑跳转到指定的范围 |
| setMaxBounds(<Bounds >bounds) | this | 设置地图最大范围 |
| setMinZoom(< Number > zoom) | this | 设置地图最小级别 |
| setMaxZoom(< Number > zoom) | this | 设置地图最大级别 |
| stop() | this | 停止地图正在进行的行为panTo、FlyTo等 |
获得地图状态相关方法
| 方法名 | 返回值 | 描述 |
|---|---|---|
| getCenter() | LatLng | 获得地图中心点 |
| getZoom() | Number | 获得地图级别 |
| getBounds() | LatLngBounds | 获得地图当前范围 |
| getMinZoom() | Number | 获得地图最小级别 |
| getMaxZoom() | Number | 获得地图最大级别 |
| getBoundsZoom(< LatLngBounds >bounds,<Boolean>inside?) | Number | 获得填充指定范围的地图最大级别 |
| getSize() | Point | 获得地图的像素大小 |
| getPixelBounds() | Bounds | 获得地图当前的像素大小范围 |
| getPixelOrigin() | Point | 获得地图像素范围大小从原点开始计算 |
| getPixelWorldBounds(< Number >zoom?) | Bounds | 获得地图的像素范围 |
绘制相关方法
| 方法名 | 返回值 | 描述 |
|---|---|---|
| drawPoint(< Function > callback) | this | 绘制点 该回调函数有一个参数:该点的坐标(geom) |
| drawCircle(< Function > callback) | this | 绘制圆 该回调函数有两个参数:圆心的坐标(geom),圆的半径(radius) |
| drawRectangle(< Function > callback) | this | 绘制矩形 该回调函数有一个参数:该矩形的坐标(geom) |
| drawLineString(< Function > callback) | this | 绘制折线 该回调函数有一个参数:该折线的坐标(geom) |
| drawPolygon(< Function > callback) | this | 绘制多边形 该回调函数有一个参数:该多边形的坐标(geom) |
| stopDraw() | this | 停止绘制 |
| measureArea(< Function > callback) | this | 绘制一个面并且测量它的面积,该回调函数有两个参数:该面的面积(area) 没有可读性(单位:平方米), 该面的面积(readableArea) 有可读性(单位:平方千米) |
| measureLength(< Function > callback) | this | 绘制一个折线并且测量它的长度,该回调函数有两个参数:该折线的长度(length) 没有可读性(单位:米), 该折线的长度(readableLength) 有可读性(单位:千米) |
GeoJSON相关相关方法
| 方法名 | 返回值 | 描述 |
|---|---|---|
| geometryToLayer(< Object > geojson,< Options> options?) | Layer | 将GeoJSON要素或几何对象转换为Layer |
| geometryToCircle(< Object > geojson,< Number> redius,< Options> options?) | Circle | 将GeoJSON要素转换为一个Circle Layer |
| geometryToMarker(< Object > geojson,< Options> options?) | Marker | 将GeoJSON要素转换为Marker |
| geometryToCircleMarker(< Object > geojson,< Options> options?) | CircleMarker | 将GeoJSON要素转换为CircleMarker |
| asFeature(< Object > geom) | Feature | 将GeoJSON几何对象转换为GeoJSON 要素对象 |
| asGeometry(< Object > feature) | Geometry | 将GeoJSON要素对象转换为GeoJSON 几何对象 |
其他方法
| 方法名 | 返回值 | 描述 |
|---|---|---|
| invalidateSize() | this | 如果地图容器的大小发生变化,调用这个方法可以动态的改变地图的大小 |
事件
图层相关事件
| 事件名称 | 数据 | 描述 |
|---|---|---|
| baselayerchange | LayersControlEvent | 当底图改变时触发 |
| overlayadd | LayersControlEvent | 当在图层控件中选择显示一个图层时触发该事件 |
| overlayremove | LayersControlEvent | 当在图层控件中选择隐藏一个图层时触发该事件 |
| layeradd | LayerEvent | 当向地图上添加一个图层时触发 |
| layerremove | LayerEvent | 当从地图上删除一个图层时触发 |
地图状态改变事件
| 事件名称 | 数据 | 描述 |
|---|---|---|
| zoomlevelschange | Event | 当地图级别改变时触发 |
| resize | ResizeEvent | 当地图大小发生改变的时候触发 |
| unload | Event | 当地图销毁时触发 |
| viewreset | Event | 当地图上的内容需要重绘时触发,一般是在地图级别发生改变,或地图加载时触发 |
| load | Event | 当地图第一次加载时触发. |
| zoomstart | Event | 当地图级别发生改变前触发 |
| movestart | Event | 当地图移动开始时触发 |
| zoom | Event | 当地图级别改变时触发 |
| move | Event | 当地图移动时触发 |
| zoomend | Event | 当地图级别发生改变后触发 |
| moveend | Event | 当地图移动后触发 |
气泡相关事件
| 事件名称 | 回调数据 | 描述 |
|---|---|---|
| popupopen | PopupEvent | 当气泡打开时触发 |
| popupclose | PopupEvent | 当气泡关闭时触发 |
| autopanstart | Event | 当地图自动移动时触发,一般都是在弹出气泡的时候触发 |
提示信息事件
| 事件名称 | 回调数据 | 描述 |
|---|---|---|
| tooltipopen | TooltipEvent | 当提示信息打开时触发 |
| tooltipclose | TooltipEvent | 当提示信息关闭时触发 |
交互相关事件
| 事件名称 | 回调数据 | 描述 |
|---|---|---|
| click | MouseEvent | 当点击地图时触发 |
| dblclick | MouseEvent | 当双击地图时触发 |
| mousedown | MouseEvent | 当鼠标落下时触发 |
| mouseup | MouseEvent | 当鼠标弹起时触发 |
| mouseover | MouseEvent | 当鼠标移入时触发 |
| mouseout | MouseEvent | 当鼠标移出触发 |
| mousemove | MouseEvent | 当鼠标移动时触发 |
| contextmenu | MouseEvent | 当点击右键时触发 |
| keypress | KeyboardEvent | 当点击键盘上的按钮时触发 |