当前版本下载链接：加载中…
GeoHey JavaScript SDK是一个面向移动互联网时代，遵循移动优先、向下兼容、保持轻量原则的地图SDK。
除了一般地图SDK所有的功能，GeoHey JavaScript SDK还具有以下特性：
针对视网膜屏的兼容和优化
与微信等轻应用平台无缝融合
地图支持无极缩放
地图支持旋转
支持大数据量的显示
地图上可添加图表、视频等任意内容
提供第三方地图服务集成、聚类、热图、动态目标等多种扩展模块
目前，SDK支持Chrome、Firefox、Safari、IE(7+)、Android等PC和移动端浏览器，SDK会根据情况自动选择 HTML5 CANVAS、SVG、VML甚至是WebGL等技术来进行显示。
将下载的SDK包中的lib目录下所有的文件与文件夹部署到服务器上，并在HTML文件中引入必需的文件链接：
<link rel="stylesheet" href="g.css"> <script type="text/javascript" src="g.min.js"></script>
注意，虽然在HTML页面中只直接引用了’g.min.js’，但必须保证服务器上存在’g-canvas.min.js’、’g-svg.min.js’、’g-vml.min.js’、’g-webgl.min.js’，客户端会根据不同浏览器加载这几个渲染实现之一，这样的设计有助于保证浏览器下载库文件的体积，提升用户体验。
在HTML中合适的位置加入一个显示地图的div：
<body> <div id="mapContainer" style="width: 100%; height: 100%;"> </body>
在所有必要库文件加载完成后创建Map对象并进行后续的操作：
G.ready(function() { // 此时类库加载完成 var map = new G.Map('mapContainer'); var tileLayer = new G.Layer.Tile('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { cluster: ['a', 'b', 'c'] }); tileLayer.addTo(map); });
您还有可能需要修改g.css中一些图片的URL路径以符合个性化的需求。
您也可以在页面中直接引用在线库文件，而无需下载开发包
<link rel="stylesheet" href="http://dist.geohey.com/g-js/latest/lib/g.css"> <script type="text/javascript" src="http://dist.geohey.com/g-js/latest/lib/g.min.js"></script>
其中URL中的”latest”也可替换为指定的版本号，默认加载最新版本。
命名空间
SDK库使用命名空间“G”，请避免使用这个名称作其它用途，否则类库可能无法正常工作。另外，在“g.css”中定义了若干名为’g-xxx’的CSS样式，请确保其它自定义样式不与之冲突。
版本
通过命名空间下的version对象可以查看当前版本。
console.log(G.version);
全局参数
在加载SDK前，可以定义一些全局参数来进行特殊的控制，定义方式如下：
<script type="text/javascript"> G_OFF_CANVAS = true; </script> <script type="text/javascript" src="g.min.js"></script>
可用的全局参数包括：
| 参数名 | 参数类型 | 说明 |
|---|---|---|
| G_OFF_CANVAS | Boolean | 不使用 HTML5 Canvas 进行显示，对于大多数情况应该避免使用该参数 |
| G_OFF_CANVAS_OFFSCREEN | Boolean | 关闭 HTML5 Canvas 的离屏渲染特性，对于大多数情况应该避免使用该参数 |
| G_OFF_CSS3D | Boolean | 关闭 HTML5 中的CSS 3D 变换功能（大多数Canvas的3D变换会使用硬件加速），对于大多数情况应该避免使用该参数 |
| G_CANVAS_RATIO | Boolean | 强制指定HTML5 Canvas的像素比例，对于超高分屏为了性能可能需要强制指定较低的像素比例 |
| G_ON_WEBGL | Boolean | 开启 HTML5 的 WebGL 渲染功能，WebGL在渲染大数据量的时候有明显优势，但有些图形效果会缺失，目前WebGL模式仅供测试 |
| G_NOT_SET_VIEWPORT | Boolean | 阻止类库修改viewport设置，默认情况下类库会帮助设置页面使其适合在移动设备上显示 |
模块
SDK可以根据需要加载模块，比如想要加载第三方地图，可以动态加载一个名为“maps”的模块，该模块中包含对各种第三方地图的集成。您也可以根据需要开发自己的模块。
G.loadModule('maps', function() { // 开始使用模块内的功能 });
你也可以同时加载多个模块，确保所有的模块均加载成功后再进行下一步操作。
G.loadModules(['maps', 'draw'], function() { // 开始使用模块内的功能 });
部署在服务器端的模块只有在调用loadModule方法的时候才会去请求.
点击这里 可以查看所有可用的模块
效果
除非有特殊的设置，如在全局参数中使用G_OFF_CANVAS设置关闭HTML5 Canvas功能等，否则浏览器会自动选择最佳效果进行显示。例如Chrome等现代浏览器会选择Canvas或SVG进行图形渲染；IE7/8则会选择VML等。不同的绘制方法不影响API的调用，但是某些特殊效果（如缩放动画）在低版本的浏览器中会自动退化（如IE7/8）。
几何对象
SDK内部使用尽量简单的几何对象描述，如下表所列:
| 几何对象类型 | 格式 |
|---|---|
| Geometry | |
| Point | [ x, y ] |
| Polyline | [ [x1, y1], …, [xn, yn] ] |
| Polygon | [ [[x1, y1], …, [xn, yn]], … ] |
| MultiPoint | {“m”: [ Point1, Point2, … ]} |
| MultiPolyline | {“m”: [ Polyline1, Polyline2, … ]} |
| MultiPolygon | {“m”: [ Polygon1, Polygon2, … ]} |
| Extent | [ xmin, ymin, xmax, ymax ] |
| Circle | [ cx, cy, r ] |
地图分辨率
分辨率 (Resolution，API中简写为res) = 地图表示的实际尺寸 / 屏幕显示的像素尺寸
分辨率越小，地图越详细。
Map是API的核心类，用于所有数据的显示和操作。
var map = new G.Map('mapContainer',{ maxRes: 160000, minRes: 19.109257, initStatus: {center: [0, 0]} });
| 构造函数 | 说明 |
|---|---|
| G.Map( [String] id, [Object] options ) | 基于一个给定的div容器创建Map对象，options为可选的构造选项 |
构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| minRes | Number | 0.298582 | 地图的最小分辨率，对应放大到最详细的状态 |
| maxRes | Number | 156543.033928 | 地图的最大分辨率，对应缩小到最全图的状态 |
| maxExtent | Extent | [-20037508.342784, -20037508.342784, 20037508.342784, 20037508.342784] | 地图的最大范围，超出范围的数据将不会被显示，同时，对地图进行拖动也会限制在这个范围之内 |
| scrollPage | Boolean | false | 是否允许鼠标滚动页面，默认在地图上滚动鼠标不会滚动页面而是缩放地图 |
| zoomAnim | Boolean | true | 缩放时是否支持动画效果 |
| zoomAnimDuration | Number | 0.5 | 缩放时动画效果的持续时间，单位秒 |
| panAnim | Boolean | true | 拖拽时是否支持惯性移动 |
| panAnimMaxSpeed | Number | 1000 | 惯性移动的最大速度，单位像素/秒 |
| panAnimDuration | Number | 0.5 | 惯性移动的持续时间，单位秒 |
| tolerance | Number | 1e-5 | 坐标值的容差 |
| topZIndex | Number | 100 | 该值用于确保拖拽缩放的遮罩层显示在最上层 |
| hideLogo | Boolean | false | 是否隐藏Logo |
| doubleDuration | Number | 0.2 | 判断两次点击是否是双击的最大时间间隔，单位秒 |
| doubleZoom | Boolean | true | 是否允许双击时进行缩放（左键双击放大，右键双击缩小） |
| pinchZoom | Boolean | true | 是否允许双指捏合时进行缩放 |
| pinchRotate | Boolean | true | 是否允许双指捏合时进行地图旋转 |
| dragPan | Boolean | true | 是否允许拖拽时改变地图位置 |
| shiftZoom | Boolean | true | 是否允许按住shift后点击鼠标拉框放大 |
| scrollZoom | Boolean | true | 是否允许鼠标滚动进行缩放 |
| continuouslyZoom | Boolean | true | 是否允许无极缩放，当设为false时滚轮滚动将产生和鼠标双击放大类似的效果 |
| touchTol | Number | 8 | 触摸屏上操作的容差，单位像素 |
| recordStatus | Boolean | true | 是否在浏览器历史中记录每一次更新的状态 |
| wrap | Boolean | true | 是否显示环绕地图，该属性不支持IE7/8浏览器 |
| mask | Boolean | false | 是否在地图上使用遮罩层，该属性不支持IE7/8浏览器 |
| maskColor | String | ‘#000’ | 遮罩层的颜色 |
| maskOpacity | Number | 1.0 | 遮罩层的透明度 |
| spark | Boolean | true | 是否显示点击提示效果，该效果不支持IE7/8浏览器 |
| sparkOffset | Array | [-24, -24] | 点击提示效果的偏移，该值需要和CSS中的设置匹配 |
| sparkDuration | Number | 1.0 | 点击提示效果的持续时间，单位秒 |
| canvasAnimRedraw | Boolean | false | Canvas模式下显示动画时是否重绘数据，默认不重绘，重绘效果更加连续但是对性能会有影响 |
| canvasExpandFactor | Number | 0.25 | Canvas模式下地图渲染范围的扩充倍数，如果希望地图拖动时边缘尽可能少出现空白区域，则可以将该值适当调大（不超过1.0），注意，该值的增大会加载额外的当前窗口外部的数据 |
| initStatus | Object | { center: [0,0], res: 156543.033928, rotate: 0 } | 地图初始状态，包括地图中心，地图分辨率和地图旋转角度 |
| 方法名 | 返回值 | 说明 |
|---|---|---|
| view( [Point] center, [Number] width, [Number] height, [Number] rotate ) | this | 缩放、旋转地图到指定的状态 |
| getExtent([Number] expandDis) | Extent | 获取地图的范围，如指定expandDis则将地图范围向外扩展一定距离 |
| getRotate() | Number | 获取地图旋转的角度 |
| getSize() | Array | 获取地图容器的尺寸，格式为[width, height] |
| getDrawSize() | Array | 获取新绘制的地图尺寸，格式为[width, height] |
| getLayers() | Array | 获取当前所有图层 |
| getLayer( [String] id ) | Layer | 根据id获取当前图层 |
| addLayer( [Layer] layer ) | String | 添加图层，返回图层id |
| getCenter() | Point | 获取当前地图的中心 |
| getResolution() | Number | 获取当前地图的分辨率 |
| zoomTo( [Point] center, [Number] width, [Number] height, [Object] options ) | this | 缩放到指定的状态 |
| zoomRes( [Point] center, [Number] res, [Object] options ) | this | 缩放到指定的分辨率 |
| zoomExtent( [Extent] extent, [Object] options) | this | 缩放到指定的范围 |
| zoomIn( [Object] options ) | this | 放大到下一级别 |
| zoomOut( [Object] options ) | this | 缩小到上一级别 |
| centerAt( [Point] center, [Object] options ) | this | 以指定坐标点为中心将地图居中 |
| panBy( [Number] offsetX, [Number] offsetY, [Object] options ) | this | 根据偏移改变地图显示位置 |
| rotateTo( [Number] degree, [Object] options ) | this | 将地图旋转指定角度 |
| isZooming() | Boolean | 是否正在缩放 |
| isPanning() | Boolean | 是否正在拖拽 |
| isRotating() | Boolean | 是否正在旋转 |
| isDragging() | Boolean | 是否正在拖拽 |
| isPinching() | Boolean | 是否正在双指捏合缩放 |
| toScreen( [Point] mapPoint ) | Point | 将地图坐标转换为屏幕坐标 |
| toMap( [Point] screenPoint ) | Point | 将屏幕坐标转换为地图坐标 |
| showPopup( [Point] mapPoint, [String] html, [Number] offsetX, [Number] offsetY ) | this | 在地图上显示气泡 |
| hidePopup( [Boolean] clearContent ) | this | 隐藏地图上的气泡，隐藏的同时可以通过指定clearContent为true来清除其中的内容 |
| addMask( [Graphic] graphic ) | this | 在遮罩层上添加一个图形对象，只有这个图形对象下的内容可见，注意，只有添加圆形和多边形才有效 |
| clearMask() | this | 清除遮罩层 |
| resize() | this | 强制重新布局地图，自动调整尺寸机制只针对窗体有变化时触发，如通过其它方式改变了地图容器的尺寸或位置，可以通过这个方法强制对地图进行重新布局 |
| redraw() | this | 强制重绘地图，重绘是重新进行一次绘制 |
| update() | this | 强制更新地图，更新会尝试更新地图和图层中的数据 |
| isPrintable() | Boolean | 是否支持打印 |
| print([Number] imageWidth, [Number] imageHeight) | String | 打印地图为图片，返回Base64编码的图片数据，Layer.Html等外置的内容不会被打印到地图上，imageWidth和imageHeight为导出的图片大小，如果指定则在打印的时候会按照中心对多余部分进行裁剪并缩放 |
| destroy() | undefined | 清除地图对象 |
Map.zoomTo/Map.zoomExtent/Map.zoomIn/Map.zoomOut/Map.centerAt选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| duration | Number | 0.5 | 动画效果的持续时间，单位秒 |
| fireEnd | Boolean | true | 动画播放完成后是否触发相应的事件 |
| ignoreAnim | Boolean | false | 是否忽略动画效果 |
Map.panBy选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| duration | Number | 0.5 | 动画效果的持续时间，单位秒 |
| ease | Number | 0.3 | 控制惯性移动的减缓速度，取值为0~1，值越小惯性衰减越快 |
Map.rotateTo选项
| 选项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| duration | Number | 0.5 | 动画效果的持续时间，单位秒 |
所有图层的抽象类
构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| minRes | Number | undefined | 图层出现的最小分辨率 |
| maxRes | Number | undefined | 图层出现的最大分辨率 |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| addTo( [Map] map ) | this | 将图层添加到Map中 |
| remove() | this | 将图层从Map中移除 |
| getOrder() | Number | 获取当前图层在地图中的顺序，如不在地图中则返回-1 |
| bringToOrder([Number] order) | this | 将图层移动到指定的顺序 |
| bringToTop() | this | 将图层移动到最上层 |
| bringToBottom() | this | 将图层移动到最下层 |
| bringUp([Number] delta) | this | 将图层向上移几层 |
| bringDown([Number] delta) | this | 将图层向下移几层 |
| hide() | this | 隐藏图层 |
| show() | this | 显示图层 |
| isVisible() | Boolean | 图层当前是否可见 |
| clear() | this | 清除图层内容，如果是服务图层则会重新加载新内容 |
Layer.Tile → Layer
Tile Layer 瓦片图层，用于加载传统的基于瓦片图片的地图。
示例
var osmLayer = new G.Layer.Tile('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { cluster: ['a', 'b', 'c'] }); osmLayer.addTo(map);
var arcgisLayer = new G.Layer.Tile('http://server.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer/tile/{z}/{y}/{x}'); arcgisLayer.addTo(map); var bingUrl = function(z, x, y) { var key = '', i; for (i = z; i > 0; i--) { var digit = '0'; var mask = 1 << (i - 1); if ((x & mask) != 0) { digit++; } if ((y & mask) != 0) { digit++; digit++; } key += digit; } return 'http://t{s}.tiles.ditu.live.com/tiles/r' + key + '.png?g=2335'; } var bingLayer = new G.Layer.Tile(bingUrl, { cluster: [1, 2, 3] }); bingLayer.addTo(map);
构造
| 构造函数 | 说明 |
|---|---|
| G.Layer.Tile( [String/Function] url, [Object] options ) | url为瓦片图片的参数化地址或地址生成函数，url或调用url函数的返回值中可出现{s}、{z}、{x}、{y}、{i}5个参数，分别代表服务器集群编号、缩放层级、X方向图片索引、Y方向图片索引、Retina支持；如果url为函数，其形式应为function(z, x, y)，z、x、y定义同上；options为可选的构造选项 |
构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| cluster | Array | [] | 服务器集群 |
| errorTileUrl | String | ‘’ | 未加载切片的替代图片 |
| keepResample | Boolean | true | 是否保留其它级别的重采样图片，如果需要显示如交通图等本身带有透明度的图片时需要设置为false |
| opacity | Number | 1.0 | 图层透明度，如果设置小于1的值，则同时keepResample自动为false效果 |
| retryTimes | Number | 3 | 加载切片的失败重试次数 |
| tileLiveMs | Number | 600000 | 瓦片在浏览器中有效的最长毫秒数 |
| tileEnlarge | Boolean | true | 是否允许瓦片在绘制时适时放大1个像素用于避免可能的接缝，一般如果瓦片带有半透明应将其设置为false |
| crossOrigin | String | ‘*’ | Cross-Origin设置，如果服务器不支持，请设置为空字符串 |
| originX | Number | -20037508.342787 | 切片原点的X坐标 |
| originY | Number | 20037508.342787 | 切片原点的Y坐标 |
| minX | Number | -20037508.342787 | 图层范围的最小X坐标 |
| maxX | Number | 20037508.342787 | 图层范围的最大X坐标 |
| minY | Number | -20037508.342787 | 图层范围的最小Y坐标 |
| maxY | Number | 20037508.342787 | 图层范围的最大Y坐标 |
| tileSize | Number | 256 | 切片的尺寸，单位像素 |
| zoomReses | Array | Google的分级，[ 156543.033928, 78271.516964, …, 0.298582 ] | 分级分辨率数组 |
| maxRes | Number | 156543.033928 | 图层显示的最大分辨率 |
| minRes | Number | 0.29858215 | 图层显示的最小分辨率 |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| setUrl( [String/Function] url ) | this | 重新设置url属性，调用这个方法会重新加载数据 |
| calcNearestZoom( [Boolean] greater ) | Number | 计算离当前分辨率最近的级别，默认返回比当前分辨率更小的级别，如果greater为true则返回更大的级别 |
| calcTileIndex( [Number] x, [Number] y, [Number] zoom ) | Array | 根据坐标和级别返回瓦片编号，瓦片编号格式为[X方向编号, Y方向编号, 级别] |
| calcTileExtent( [Number] idxX, [Number] idxY, [Number] zoom ) | Extent | 根据给定的瓦片编号返回其对应的地图范围 |
Layer.Graphic → Layer
矢量图形图层，图层中可以放置各种Graphic，如点 [Graphic.Point]、线段 [Graphic.Polyline]、 多边形 [Graphic.Polygon]、 圆 [Graphic.Circle]等，这些矢量图形都会在浏览器中被实时地显示给用户。
示例
var layer = (new G.Layer.Graphic()).addTo(map); layer.setStyle(['type', 'num'], ['=="city"', '>0'], { // 给type字段值等于'city'且num字段值大于0的矢量图形对象指定特定的样式 fillColor: '#000' }); var g = new G.Graphic.Point([0, 0], { // 这个对象将被显示成上面指定的样式 type: 'city', num: 0 }); g.addTo(layer);
构造
| 构造函数 | 说明 |
|---|---|
| G.Layer.Graphic() |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| add( [Graphic] graphic, [Number] id, [Boolean] noRedraw ) | Number | 添加一个图形对象，并返回id，如果指定id，则判断该id是否存在，如存在则直接返回已存在的图形对象的id，如指定noRedraw为true则暂不重绘，这在添加大量数据时对性能有帮助 |
| get( [Number] id ) | Graphic | 根据指定的id返回图层上某个对象 |
| all() | Array | 返回所有对象 |
| query( [Extent] extent ) | Array | 返回给定范围内的对象 |
| count() | Number | 获取图层上所有对象的个数 |
| clear() | this | 移除图层上所有对象 |
| setStyle( [Array] fields, [Array] conditions, [Object] options ) | this | 设置满足某条件下对象的显示样式，options为指定的样式，它将会被合并到每个图形对象的options中；如fields或conditions为空，则设置为图层默认样式 |
| clearStyles( [Object] options ) | this | 清空所有样式，options为清空后的样式，它将会被合并到每个图形对象的options中 |
| calcDataExtent( [Number] expand ) | Extent | 根据所有对象的位置计算并返回一个地图范围，expand为额外的缩放倍数，如不指定则返回正好包括所有对象的地图范围 |
Layer.Html → Layer
HTML图层，图层中可以放置HTML内容，这些HTML内容都会以DIV的形式在浏览器中被实时地显示给用户。
示例
var layer = (new G.Layer.Html()).addTo(map); layer.addHtml('<input type="button" value="...">', 0, 0);
构造
| 构造函数 | 说明 |
|---|---|
| G.Layer.Html() |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| addHtml( [String] html, [Number] x, [Number] y) | Number | 在指定坐标处添加一个HTML对象，并返回id |
| getHtml( [Number] id ) | HTMLElement | 根据指定的id返回图层上某个HTML对象 |
| removeHtml( [Number] id ) | this | 根据指定的id移除图层上某个HTML对象 |
Layer.Image → Layer
Image图层，图层中可以放置图片内容，这些图片会自动缩放以维持自身在地图中固定的位置。
示例
var layer = (new G.Layer.Image()).addTo(map); layer.addImage('a.jpg', 0, 0, 1e6, 1e6);
构造
| 构造函数 | 说明 |
|---|---|
| G.Layer.Image() |
构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| errorImageUrl | String | ‘’ | 未加载图片的替代图片 |
| opacity | Number | 1.0 | 图层透明度，如果设置小于1的值，则同时keepResample自动为false效果 |
| retryTimes | Number | 3 | 加载切片的失败重试次数 |
| crossOrigin | String | ‘*’ | Cross-Origin设置，如果服务器不支持，请设置为空字符串 |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| addImage( [String] imageUrl, [Number] xmin, [Number] ymin, [Number] xmax, [Number] ymax) | Number | 在指定矩形形状内放置一个图片，并返回id |
| getImage( [Number] id ) | Image | 根据指定的id返回图层上某个图片对象 |
| removeImage( [Number] id ) | this | 根据指定的id移除图层上某个图片对象 |
Layer.FeatureService → Layer.Graphic → Layer
关联矢量数据服务的图层，通过指定的HTTP请求自动获取数据并显示在图层上。
示例
var func = function(extent) { // 该请求是指定地图的一个范围，返回这个范围中所有的数据 var url = 'http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/FeatureServer/0/query'; var data = { // 指定对该服务进行请求的参数 f: 'json', where: '1=1' }; if(extent){ data.geometryType = 'esriGeometryEnvelope'; data.geometry = extent[0] + ',' + extent[1] + ',' + extent[2] + ',' + extent[3]; } var requestOptions = { responseType: 'JSONP', data: data, success: function(req, data) { // 解析响应的数据并生成Graphic对象添加到图层上 this.onSuccess(extent); }, error: function(req) { this.onError(extent); }, complete: function(req) { this.onComplete(extent); } }; G.Util.ajax(url, requestOptions); }; var layer = new G.Layer.FeatureService(func); layer.addTo(map);
构造
| 构造函数 | 说明 |
|---|---|
| G.Layer.FeatureService( [Function] func, [Object] options ) | func为根据范围获取数据的具体实现方法；options为可选的构造选项 |
构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| mode | String | ‘all’ | 从服务获取数据的方式，可选all、tile，分别对应一次获取全部数据、按块获取数据 |
| vacuumCount | Number | 1000 | 图层上对象大于这个数值时会适时清理屏幕外的不可见对象 |
如果设置mode为tile，注意确认Layer.FeatureService的层级设置，其默认值为类Google样式的互联网地图服务，如地图的空间参考与之并不一致，请注意修改。
Layer.GeoHeyFeature → Layer.FeatureService → Layer.Graphic → Layer
关联GeoHey数据服务的图层，通过指定的URL地址和HTTP请求模式自动获取数据并显示在图层上。
示例
var layer = new G.Layer.GeoHeyFeature('http://geohey.com/s/data/9ae0fb8cf97f4566a5681d742b6fae4c', { apiKey: 'MzE5YTE0NGJkNDkyNDhjNWE5Y2QwOWM1NDljZmFhZWQ' }); layer.addTo(map);
构造
| 构造函数 | 说明 |
|---|---|
| G.Layer.GeoHeyFeature( [String] url, [Object] options ) | url为指向GeoHey数据服务的地址；options为可选的构造选项 |
构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| apiKey | String | ‘’ | 用户的API访问凭证 |
| where | String | ‘1=1’ | 过滤条件 |
| outFields | String | ‘’ | 返回的字段列表，格式如’[id, name]’，如留空表示返回所有字段 |
| limit | Number | 1000 | 限制返回的结果数量 |
Layer.Label → Layer
关联标注服务的图层，通过指定的URL地址自动获取标注数据并显示在图层上。标注图层提供对文字、图标等标注信息不同于传统瓦片图片的效果，在地图旋转、缩放的情况下均有较好的显示效果。该功能需特殊的服务器功能支持，普通的在线地图服务并无此功能。
示例
var layer = new G.Layer.Label('../data/label/{z}_{x}_{y}{i}.json', {icons: '../data/icons/'}); layer.addTo(map);
构造
| 构造函数 | 说明 |
|---|---|
| G.Layer.Label( [String] url, [Object] options ) | url为指向服务的地址，url中可出现{s}、{z}、{x}、{y}、{i}6个参数，分别代表服务器集群编号、缩放层级、X方向图片索引、Y方向图片索引、Retina支持；options为可选的构造选项 |
构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| icons | String | ‘’ | 所用到图标所在的URL，该URL会添加到icon的相对路径之前 |
| cluster | Array | [] | 服务器集群 |
| crossOrigin | String | ‘*’ | Cross-Origin设置，如果服务器不支持，请设置为空字符串 |
| originX | Number | -20037508.342787 | 标注分块的原点X坐标 |
| originY | Number | 20037508.342787 | 标注分块的原点Y坐标 |
| minX | Number | -20037508.342787 | 图层范围的最小X坐标 |
| maxX | Number | 20037508.342787 | 图层范围的最大X坐标 |
| minY | Number | -20037508.342787 | 图层范围的最小Y坐标 |
| maxY | Number | 20037508.342787 | 图层范围的最大Y坐标 |
| tileSize | Number | 256 | 标注分块的尺寸，单位像素 |
| zoomReses | Array | Google的分级，[ 156543.033928, 78271.516964, …, 0.298582 ] | 分级分辨率数组 |
Layer.TiledService → Layer
通用的分片数据图层，通过指定的HTTP请求模式自动获取数据并可进行进一步操作。
示例
var layer = new G.Layer.TiledService(function(x, y, z){ var tileInfo = [x, y, z]; G.Util.ajax('../data/label/' + z + '_' + x + '_' + y + '.json', { responseType: 'json', success: function(xhr, data){layer.onSuccess(tileInfo, data)}, error: function(xhr){layer.onError(tileInfo)}, complete: function(xhr){layer.onComplete(tileInfo)} }); }); layer.addListener('loadTileStart', function(e) { console.log(e.type, e); }).addListener('loadTileSuccess', function(e) { console.log(e.type, e); }).addListener('loadTileError', function(e) { console.log(e.type, e); }).addListener('loadTileComplete', function(e) { console.log(e.type, e); }).addListener('unusedTile', function(e) { console.log(e.type, e); }); layer.addTo(map);
构造
| 构造函数 | 说明 |
|---|---|
| G.Layer.TiledService( [Function] func, [Object] options ) | func为根据 x(分片的x索引), y(分片的y索引), z(分片的层级) 获取数据的具体实现方法；options为可选的构造选项 |
TiledService的层级设置，其默认值为类Google样式的互联网地图服务，如地图的空间参考与之并不一致，请注意修改。
Layer.VectorCache → Layer.Graphic → Layer
关联矢量切片服务的图层，通过指定的URL地址自动获取矢量切片数据并显示在图层上。矢量切片图层提供对矢量数据不同于传统瓦片图片的效果。该功能需特殊的服务器功能支持，普通的在线地图服务并无此功能。
示例
var layer = new G.Layer.VectorCache('http://static.map.net/s/china/vector/{z}/{y}/{x}/{d}'); layer.addTo(map);
构造
| 构造函数 | 说明 |
|---|---|
| G.Layer.VectorCache( [String] url, [Object] options ) | url为指向服务的地址，url中可出现{s}、{z}、{x}、{y}、{d}五个参数，分别代表服务器集群编号、缩放层级、X方向图片索引、Y方向图片索引、服务端数据类型；options为可选的构造选项 |
构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| cluster | Array | [] | 服务器集群 |
| originX | Number | -20037508.342787 | 标注分块的原点X坐标 |
| originY | Number | 20037508.342787 | 标注分块的原点Y坐标 |
| minX | Number | -20037508.342787 | 图层范围的最小X坐标 |
| maxX | Number | 20037508.342787 | 图层范围的最大X坐标 |
| minY | Number | -20037508.342787 | 图层范围的最小Y坐标 |
| maxY | Number | 20037508.342787 | 图层范围的最大Y坐标 |
| tileSize | Number | 256 | 标注分块的尺寸，单位像素 |
| zoomReses | Array | Google的分级，[ 156543.033928, 78271.516964, …, 0.298582 ] | 分级分辨率数组 |
所有矢量图形的抽象类
构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| clickable | Boolean | false | 对象是否可被用户点击 |
| allowPan | Boolean | false | 当对象的clickable为true时，默认地图是不可被拖动的，但是也可以通过设置这个属性为true让地图也可以拖动 |
| vertexShape | String | ‘circle’ | 编辑时节点的形状，取值为’circle’或’rect’ |
| vertexSize | Number | 16 | 编辑时节点的边长 |
| vertexColor | String | ‘#fff’ | 编辑时节点的边线颜色 |
| vertexDashArray | String | [6, 2] | 编辑时节点的虚线样式，取值如[10, 5, …]，该选项在某些移动平台上无效 |
| vertexFillColor | String | ‘#ff0’ | 编辑时节点的填充色 |
| lineHighlightColor | String | ‘#0ff’ | 线的高亮颜色，一般在编辑状态使用 |
| lineHighlightWiden | Number | 2 | 线的高亮宽度变化，一般在鼠标移动到对象时提醒使用 |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| addTo( [Layer] layer, [Number] id, [Boolean] noRedraw ) | this | 将对象添加到图层中，id可选，如不指定将对id进行自动分配，如指定noRedraw为true则暂不重绘，这在添加大量数据时对性能有帮助 |
| remove( [Boolean] noRedraw ) | this | 将对象从图层中移除，如指定noRedraw为true则暂不重绘，这在移除大量数据时对性能有帮助 |
| id() | Number | 获取对象的ID |
| updateOptions( [Object] options ) | this | 更新对象的选项，会导致图形重新绘制 |
| updateGeom( [Geometry] geom ) | this | 更新对象的几何信息，会导致图形重新绘制 |
| updateAttrs( [Object] attrs ) | this | 更新对象的属性信息，属性信息中有和绘制样式相关的内容时会导致图形重新绘制 |
| bringToTop() | this | 将对象移动到图层最上层 |
| startEdit( [Object] options ) | this | 开始编辑，options为编辑时指定的选项，此处设置将覆盖Graphic的默认选项 |
| endEdit() | this | 停止编辑 |
| isEditing() | Boolean | 是否处于编辑状态 |
| clone() | Graphic | 返回克隆对象 |
Graphic.Point → Graphic 和 Graphic.MultiPoint → Graphic
点图形 和 多点图形
示例
var g = new G.Graphic.Point([116.39, 39.9], { name: 'beijing' }, { shape: 'image', size: [25, 40], offset: [-12, -40], image: 'images/pin{i}.png', clickable: true }); g.addTo(graphicLayer); var g = new G.Graphic.MultiPoint({"m":[ [0,0],[2,2] ]}); g.addTo(graphicLayer);
构造
| 构造函数 | 说明 |
|---|---|
| G.Graphic.Point( [Point] geom, [Object] attrs, [Object] options ) | geom为几何对象；attrs为属性对象；options为可选的构造选项 |
| G.Graphic.MultiPoint( [MultiPoint] geom, [Object] attrs, [Object] options ) | geom为几何对象；attrs为属性对象；options为可选的构造选项 |
构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| shape | String | ‘circle’ | 可选值有 circle / rect / image / text，分别用圆形、矩形、图片、文字来表示点 |
| size | Array | [12, 12] | 图形的尺寸，circle图形只会使用数组中第一个值作为直径，text图形只会使用数组中第一个值作为文字的尺寸 |
| offset | Array | [0, 0] | X和Y方向上的偏移，单位像素，circle、rect、text以中心点为原点，image以图片左上角为原点 |
| image | String | ‘’ | shape为’image’时所显示图片的URL，如’images/pin.png’；如要支持视网膜屏，该值需设置为带参数的字符串，如’images/pin{i}.png’，其中’i’参数在视网膜屏下会被替换为’@2x’，因此同时还需要准备’images/pin@2x.png’这张图片 |
| imageRotate | Number | 0 | shape为’image’时可以设置图片的旋转角度，单位度 |
| imageGravity | Boolean | true | 图片是否受到重力影响，也就是图片始终正对用户 |
| text | String | ‘’ | shape为’text’时显示的文字内容 |
| textFont | String | ‘Arial’ | 文字字体，多个字体以逗号分隔 |
| textStyle | String | ‘normal’ | 可选值有 normal / italic / bold，分别对应正常字体、斜体、粗体 |
| textAlign | String | ‘center’ | 可选值有 center / left / right，分别对应居中、左对齐、右对齐 |
| outline | Boolean | false | 是否显示外边线，外边线相关选项对图片无效 |
| outlineColor | String | ‘#000’ | 外边线的颜色 |
| outlineDashArray | Array | [] | 外边线的虚线样式，取值如[10, 5, …]，该选项在某些移动平台上无效 |
| outlineWidth | Number | 2 | 外边线的宽度 |
| outlineOpacity | Number | 1.0 | 外边线的透明度 |
| fill | Boolean | true | 是否填充，填充相关选项对shape为img的情况无效 |
| fillColor | String | ‘#3dc0fd’ | 填充的颜色，如果shape为text则文字也会使用这个颜色绘制 |
| fillImage | String | ‘’ | 填充图片的URL，如设置该值，则fillColor属性无效，如’images/grass.jpg’；如要支持视网膜屏，该值需设置为带参数的字符串，如’images/grass{i}.jpg’，其中’i’参数在视网膜屏下会被替换为’@2x’，因此同时还需要准备’images/grass@2x.jpg’这张图片 |
| fillImageSize | Array | [24, 24] | 填充图片的尺寸 |
| fillOpacity | Number | 1.0 | 填充的透明度 |
| gradual | Boolean | false | 从中心向外显示渐变效果，如设为true，则显示为中心处不透明而边缘处透明度为fillOpacity值的渐变效果，该值只在shape为circle或rect时有效 |
Graphic.Polyline → Graphic 和 Graphic.MultiPolyline → Graphic
线图形 和 多线图形
示例
var g = new G.Graphic.Polyline([[0, 0], [0,100], [100,200]], null, { lineWidth:8, lineDashArray:[20, 20], lineColor:'#00f' }); g.addTo(graphicLayer); var g = new G.Graphic.MultiPolyline({"m":[ [[0, 0], [0,100]],[[0,100], [100,200]] ]}); g.addTo(graphicLayer);
构造
| 构造函数 | 说明 |
|---|---|
| G.Graphic.Polyline( [Polyline] geom, [Object] attrs, [Object] options ) | geom为几何对象；attrs为属性对象；options为可选的构造选项 |
| G.Graphic.MultiPolyline( [MultiPolyline] geom, [Object] attrs, [Object] options ) | geom为几何对象；attrs为属性对象；options为可选的构造选项 |
构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| lineColor | String | ‘#ff941b’ | 颜色 |
| lineDashArray | Array | [] | 虚线样式，取值如[10, 5, …]，该选项在某些移动平台上无效 |
| lineCap | String | ‘butt’ | 线端点样式，可选值有 butt / square / round |
| lineJoin | String | ‘round’ | 线转角样式，可选值有 miter / round / bevel |
| lineWidth | Number | 4 | 线宽 |
| lineOpacity | Number | 1.0 | 透明度 |
Graphic.Polygon → Graphic 和 Graphic.MultiPolygon → Graphic
面图形 和 多面图形
示例
var g = new G.Graphic.Polygon([[[0, 0], [0,3], [3,3], [3,0]], [[1, 1], [2,1], [2,2], [1,2]]]); g.addTo(graphicLayer); var g = new G.Graphic.MultiPolygon({"m":[ [[[0, 0], [0,3], [3,3], [3,0]]],[[[10, 10], [10,13], [13,13], [13,10]]] ]}); g.addTo(graphicLayer);
构造
| 构造函数 | 说明 |
|---|---|
| G.Graphic.Polygon( [Polygon] geom, [Object] attrs, [Object] options ) | geom为几何对象；attrs为属性对象；options为可选的构造选项。Polygon支持洞，注意洞的坐标顺序须和外环的坐标顺序相反，比如外环坐标是顺时针顺序，则洞的坐标顺序必须是逆时针方向。 |
| G.Graphic.MultiPolygon( [MultiPolygon] geom, [Object] attrs, [Object] options ) | geom为几何对象；attrs为属性对象；options为可选的构造选项。 |
构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| outline | Boolean | true | 是否显示外边线 |
| outlineColor | String | ‘#ff2e6c’ | 外边线的颜色 |
| outlineDashArray | Array | [] | 外边线的虚线样式，取值如[10, 5, …]，该选项在某些移动平台上无效 |
| outlineCap | String | ‘butt’ | 外边线的端点样式，可选值有 butt / square / round |
| outlineJoin | String | ‘round’ | 外边线的转角样式，可选值有 miter / round / bevel |
| outlineWidth | Number | 2 | 外边线的宽度 |
| outlineOpacity | Number | 1.0 | 外边线的透明度 |
| fill | Boolean | true | 是否填充，填充相关选项对图片无效 |
| fillColor | String | ‘#000’ | 填充的颜色 |
| fillImage | String | ‘’ | 填充图片的URL，如设置该值，则fillColor属性无效，如’images/grass.jpg’；如要支持视网膜屏，该值需设置为带参数的字符串，如’images/grass{i}.jpg’，其中’i’参数在视网膜屏下会被替换为’@2x’，因此同时还需要准备’images/grass@2x.jpg’这张图片 |
| fillImageSize | Array | [24, 24] | 填充图片的尺寸 |
| fillOpacity | Number | 0.6 | 填充的透明度 |
Graphic.Circle → Graphic
多边形图形
示例
var g = new G.Graphic.Circle([0, 0, 100]); g.addTo(graphicLayer);
构造
| 构造函数 | 说明 |
|---|---|
| G.Graphic.Circle( [Circle] geom, [Object] attrs, [Object] options ) | geom为几何对象；attrs为属性对象；options为可选的构造选项 |
构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| outline | Boolean | true | 是否显示外边线 |
| outlineColor | String | ‘#fff’ | 外边线的颜色 |
| outlineDashArray | Array | [] | 外边线的虚线样式，取值如[10, 5, …]，该选项在某些移动平台上无效 |
| outlineWidth | Number | 2 | 外边线的宽度 |
| outlineOpacity | Number | 1.0 | 外边线的透明度 |
| fill | Boolean | true | 是否填充，填充相关选项对图片无效 |
| fillColor | String | ‘#000’ | 填充的颜色 |
| fillImage | String | ‘’ | 填充图片的URL，如设置该值，则fillColor属性无效，如’images/grass.jpg’；如要支持视网膜屏，该值需设置为带参数的字符串，如’images/grass{i}.jpg’，其中’i’参数在视网膜屏下会被替换为’@2x’，因此同时还需要准备’images/grass@2x.jpg’这张图片 |
| fillImageSize | Array | [24, 24] | 填充图片的尺寸 |
| fillOpacity | Number | 0.6 | 填充的透明度 |
| gradual | Boolean | false | 从中心向外显示渐变效果，如设为true，则显示为圆心处不透明而边缘处透明度为fillOpacity值的渐变效果 |
Graphic.Arrow → Graphic.Polygon
箭头图形
示例
var g = new G.Graphic.Arrow([ [0, 0], [0,3] ]); g.addTo(graphicLayer);
构造
| 构造函数 | 说明 |
|---|---|
| G.Graphic.Arrow( [Polyline] geom, [Object] attrs, [Object] options ) | geom为几何对象；attrs为属性对象；options为可选的构造选项。 |
构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| headSize | Number | 30 | 箭头斜边长 |
| headAngle | Number | 30 | 箭头开角，指整个箭头处角度的一半 |
| neckSize | Number | 25 | 颈处斜边长 |
| neckAngle | Number | 15 | 颈处开角 |
| tailSize | Number | 0 | 尾部斜边长 |
| tailAngle | Number | 60 | 尾部开角 |
Graphic.Group → Graphic
组合图形
示例
var g = new G.Graphic.Group([g0, g1, g2]); g.addTo(graphicLayer);
构造
| 构造函数 | 说明 |
|---|---|
| G.Graphic.Group( [[Array] graphics, [Object] attrs, [Object] options ) | graphics为该组合对象中包含的子对象；attrs为属性对象；options为可选的构造选项 |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| child( [Number] id ) | Graphic | 根据ID获取组合图形内的子图形 |
| children() | Array | 返回所有子图形 |
在支持事件的对象上调用
bind()方法可添加监听，调用unbind()方法可移除监听，调用listen()方法可暂时关闭监听，调用unlisten()方法可重新启用监听。
示例
var callback = function(e){ console.log(e); } map.bind('click', callback); // 此时添加了监听 map.unlisten('click'); // 此时暂时关闭了监听 map.listen('click'); // 此时重新打开了监听 map.unbind('click', callback); // 此时移除了监听
| 事件 | 格式 |
|---|---|
| Event | { type: [事件类型], target: [触发事件的对象] } |
| InteractEvent | { type: [事件类型], target: [触发事件的对象], mapX: [地图X坐标], mapY: [地图Y坐标], screenX: [屏幕X坐标], screenY: [屏幕X坐标] } |
| LayerEvent | { type: [事件类型], target: [触发事件的对象], layer: [图层对象] } |
| TileEvent | { type: [事件类型], target: [触发事件的对象], url: [瓦片图片的URL] } |
| GraphicEvent | { type: [事件类型], target: [触发事件的对象], graphic: [图形对象] } |
| FeatureServiceEvent | { type: [事件类型], target: [触发事件的对象], extent: [矢量数据所在的地图范围] } |
事件监听的方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| bind([String] type, [Function] fn, [Object] context) | this | 添加监听，事件监听按照添加监听的先后顺序从后往前触发，越晚添加的监听越早被触发。type为事件类型，fn为响应函数，context为调用上下文（如为空则代表当前上下文）。 |
| unbind([String] type, [Function] fn, [Object] context) | this | 移除监听 |
| listen([String] type, [Function] fn, [Object] context) | this | 重新启用监听 |
| unlisten([String] type, [Function] fn, [Object] context) | this | 暂时关闭监听 |
事件的方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| cancel() | this | 取消后续事件监听的响应 |
Map的事件
| 事件类型 | 格式 | 说明 |
|---|---|---|
| ‘resize’ | Event | 地图容器被调整了尺寸 |
| ‘viewChanged’ | Event | 地图显示的范围有所变化 |
| ‘click’ | InteractEvent | 点击地图事件，鼠标点击或触摸轻击均可触发 |
| ‘virtualclick’ | InteractEvent | 不区分单击和双击的点击地图事件，单击时触发一次，双击时触发两次 |
| ‘doubleclick’ | InteractEvent | 双击地图事件，鼠标双击或连续触摸均可触发 |
| ‘mouseenter’ | InteractEvent | 鼠标进入地图 |
| ‘mouseleave’ | InteractEvent | 鼠标离开地图 |
| ‘mousemove’ | InteractEvent | 鼠标在地图上移动 |
| ‘mousewheel’ | InteractEvent | 滚轮在滚动 |
| ‘moveStart’ | Event | 地图开始平移，在用鼠标、手指拖拽地图或调用panBy()方法时均会触发 |
| ‘move’ | Event | 地图平移中 |
| ‘moveEnd’ | Event | 地图平移结束 |
| ‘rotateStart’ | Event | 地图开始旋转，在用手指扭转地图或调用rotateTo()方法时均会触发 |
| ‘rotate’ | Event | 地图旋转中 |
| ‘rotateEnd’ | Event | 地图旋转结束 |
| ‘zoomStart’ | Event | 地图开始缩放，在滚轮滚动缩放、用手指捏放地图或调用zoom系列方法时均会触发 |
| ‘zoom’ | Event | 地图缩放中 |
| ‘zoomEnd’ | Event | 地图缩放结束 |
| ‘pinchStart’ | Event | 用手指捏放地图时触发 |
| ‘pinch’ | Event | 捏合地图中 |
| ‘pinchEnd’ | Event | 捏合地图结束 |
| ‘layerAdded’ | LayerEvent | 有图层被添加到地图上 |
| ‘layerRemoved’ | LayerEvent | 有图层从地图上被移除 |
| ‘popupShown’ | Event | 气泡被弹出 |
| ‘popupHidden’ | Event | 气泡被隐藏 |
Layer.Tile的事件
| 事件类型 | 格式 | 说明 |
|---|---|---|
| ‘tileStart’ | TileEvent | 瓦片图片开始加载 |
| ‘tileSuccess’ | TileEvent | 瓦片图片加载成功 |
| ‘tileError’ | TileEvent | 瓦片图片加载失败 |
| ‘allLoaded’ | Event | 所有需要加载的瓦片图片均完成请求，但不保证所有请求都成功 |
| 事件类型 | 格式 | 说明 |
|---|---|---|
| ‘graphicAdded’ | GraphicEvent | 有图形被添加到图层上 |
| ‘graphicRemoved’ | GraphicEvent | 有图形从图层上被移除 |
| ‘graphicGeomUpdated’ | GraphicEvent | 有图形的几何信息被更新 |
| ‘graphicAttrUpdated’ | GraphicEvent | 有图形的属性信息被更新 |
| ‘graphicToTop’ | GraphicEvent | 图形被移动到图层的最上层 |
| ‘graphicClicked’ | GraphicEvent | 图形被点击 |
| ‘graphicOver’ | GraphicEvent | 鼠标进入对象 |
| ‘graphicOut’ | GraphicEvent | 鼠标移出对象 |
| ‘graphicStartEdit’ | GraphicEvent | 开始编辑某图形 |
| ‘graphicEndEdit’ | GraphicEvent | 结束编辑某图形 |
| 事件类型 | 格式 | 说明 |
|---|---|---|
| ‘loadTileStart’ | FeatureServiceEvent | 指定范围内的数据开始加载 |
| ‘loadTileSuccess’ | FeatureServiceEvent | 指定范围内的数据加载成功 |
| ‘loadTileError’ | FeatureServiceEvent | 指定范围内的数据加载失败 |
| ‘loadTileComplete’ | FeatureServiceEvent | 指定范围内的数据加载结束，无论请求是否成功均触发该事件 |
| ‘loadAllStart’ | FeatureServiceEvent | 所有数据开始加载 |
| ‘loadAllSuccess’ | FeatureServiceEvent | 所有数据加载成功 |
| ‘loadAllError’ | FeatureServiceEvent | 所有数据加载失败 |
| ‘loadAllComplete’ | FeatureServiceEvent | 所有数据加载结束，无论请求是否成功均触发该事件 |
| 事件类型 | 格式 | 说明 |
|---|---|---|
| ‘loadTileStart’ | TiledServiceEvent | 指定分片内的数据开始加载 |
| ‘loadTileSuccess’ | TiledServiceEvent | 指定分片内的数据加载成功 |
| ‘loadTileError’ | TiledServiceEvent | 指定分片内的数据加载失败 |
| ‘loadTileComplete’ | TiledServiceEvent | 指定分片内的数据加载结束，无论请求是否成功均触发该事件 |
| ‘unusedTile’ | TiledServiceEvent | 指定分片内的数据已经无用，可以进行清理操作 |
通过完整的对象名
G.Proj.WebMercator可在经纬度坐标和Web Mercator坐标间进行转换。
| 方法名 | 返回值 | 说明 |
|---|---|---|
| project( [Number] longitude, [Number] latitude ) | Point | 将经纬度坐标投影为Web Mercator坐标 |
| unproject( [Number] x, [Number] y ) | Point | 将Web Mercator坐标反算为经纬度坐标 |
通过完整的对象名
G.Proj.Gcj可在标准经纬度坐标和中国特殊的偏移处理后的坐标间进行转换。
| 方法名 | 返回值 | 说明 |
|---|---|---|
| project( [Number] longitude, [Number] latitude ) | Point | 将经纬度坐标投影为中国特殊的偏移坐标 |
| unproject( [Number] x, [Number] y ) | Point | 将中国特殊的偏移坐标反算为经纬度坐标 |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| Util.ajax( [String] url, [Object] options ) | XMLHttpRequest/Script | 发送一个AJAX请求，并返回请求对象；options为AJAX选项 |
| Util.ajaxCancel( [XMLHttpRequest/Script] request ) | undefined | 取消AJAX请求；request为需要取消的AJAX请求对象 |
AJAX选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | String | ‘GET’ | 请求方法；如指定了JSONP方式，则只会使用GET方法发送请求 |
| contentType | String | ‘application/x-www-form-urlencoded; charset=UTF-8’ | 发送数据给服务器时内容编码类型 |
| headers | Object | 额外需要设置的HTTP请求头 | |
| data | Object | 请求发送的数据；GET方法将数据附加到URL，POST方法根据contentType设置进行编码后作为请求体发送 | |
| responseType | String | ‘DATA’ | 预期服务器返回的数据类型，可选DATA/TEXT/XML/JSON/JSONP |
| jsonp | String | 自动生成 | JSONP的回调函数名，大多数情况不需自行指定 |
| jsonpCallback | String | ‘callback’ | 服务器指定JSONP回调函数的参数名 |
| success | Function(request, data) | undefined | 请求成功后的回调函数，request为请求对象，data为返回值 |
| error | Function(request) | undefined | 请求失败后的回调函数，request为请求对象 |
| complete | Function(request) | undefined | 请求完成后的回调函数，无论请求成功或失败都会调用，request为请求对象 |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| Util.trim( [String] str ) | String | 移除字符串首尾空格 |
| Util.renderString( [String] template, [Object] data ) | String | 根据一个字符串模板填充数据并返回结果字符串，模板中以大括号为参数；如template为’a |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| Util.merge( [[Object]] objs ) | Object | 合并对象值；如调用merge(obj1, obj2, obj3)，则会将obj2、obj3对象的值依次合并到obj1中，并返回obj1对象 |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| Util.colorHex( [Number] red, [Number] green, [Number] blue ) | String | 返回RGB颜色对应的HTML描述，返回格式如’#0xff98’ |
| Util.colorRgb( [String] hex ) | Array | 返回HTML描述的颜色对应的RGB数值，返回格式如[255, 0, 0] |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| GeomUtil.geomType( [Geometry] geom ) | String | 判断几何对象所对应的几何类型 |
| GeomUtil.centroid( [Geometry] geom ) | Point | 获取几何对象的质心 |
| GeomUtil.labelPoint( [Geometry] geom ) | Point | 获取几何对象的标注点 |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| ExtentUtil.overlaps( [Extent] ext1, [Extent] ext2, [Number] tolerance ) | Boolean | 判断范围ext1是否完全覆盖范围ext2，tolerance为允许的坐标误差 |
| ExtentUtil.contains( [Extent] ext, [Point] p, [Number] tolerance ) | Boolean | 判断范围ext是否包含点p，也即p是否在ext内，tolerance为允许的坐标误差 |
| ExtentUtil.intersect( [Extent] ext1, [Extent] ext2 ) | Extent | 返回范围ext1和范围ext2相交的部分 |
| ExtentUtil.union( [Extent] ext1, [Extent] ext2 ) | Extent | 返回范围ext1和范围ext2合并后的结果 |
| ExtentUtil.equals( [Extent] ext1, [Extent] ext2, [Number] tolerance ) | Boolean | 判断范围ext1和范围ext2是否相等，tolerance为允许的坐标误差 |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| GeodeticUtil.sphereDistance( [Point] p1, [Point] p2 ) | Number | 计算经纬度坐标p1和p2的球面距离，单位为米 |
当前可用的模块有：
| 模块名 | 说明 |
|---|---|
| anim | 显示动画对象 |
| maps | 直接加入第三方地图服务 |
| draw | 提供可以直接在地图上交互绘图的功能 |
| cluster | 聚类地图 |
| arcgis | 对ArcGIS服务的支持 |
| heat | 热度图 |
| movable | 显示动态目标 |
| geogrid | 地理网格 |
模块anim提供了显示动画的方法，你可以显示形状或样式动态变化的点、线、多边形和圆形等。
Graphic.AnimPoint → Graphic.Point
Graphic.AnimPolyline → Graphic.Polyline
Graphic.AnimPolygon → Graphic.Polygon
Graphic.AnimCircle → Graphic.Circle
示例
var g = new G.Graphic.AnimPoint( new G.Graphic.Point([1e7, 1e7], null, { size:[0, 0] }), new G.Graphic.Point([1e7, 1e7], null, { size:[24, 24] }) ); g.addTo(graphicLayer); g.play();
构造
| 构造函数 | 说明 |
|---|---|
| G.Graphic.AnimPoint( [Graphic.Point] fromGraphic, [Graphic.Point] toGraphic, [Object] options ) | options为可选的构造选项 |
| G.Graphic.AnimPolyline( [Graphic.Polyline] fromGraphic, [Graphic.Polyline] toGraphic, [Object] options ) | options为可选的构造选项 |
| G.Graphic.AnimPolygon( [Graphic.Polygon] fromGraphic, [Graphic.Polygon] toGraphic, [Object] options ) | options为可选的构造选项 |
| G.Graphic.AnimCircle( [Graphic.Circle] fromGraphic, [Graphic.Circle] toGraphic, [Object] options ) | options为可选的构造选项 |
Graphic.AnimPoint/Graphic.AnimPolygon/Graphic.AnimPolygon/Graphic.AnimCircle 的构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| duration | Number | 2 | 动画持续的时间，单位秒 |
| repeatCount | Number | -1 | 动画循环的次数，若小于等于零，则表示动画永远循环显示 |
Graphic.AnimPoint/Graphic.AnimPolygon/Graphic.AnimPolygon/Graphic.AnimCircle 的方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| play() | this | 开始动画 |
| stop() | this | 停止动画 |
模块maps提供了更方便访问互联网底图服务的类，注意，互联网底图服务的地址有可能变化从而导致服务不能使用，需要自行升级配置或重写访问类
Layer.AliMap → Layer.Tile
Layer.AMap → Layer.Tile
Layer.BaiduMap → Layer.Tile
Layer.BingMap → Layer.Tile
Layer.CartoMap → Layer.Tile
Layer.GoogleCnMap → Layer.Tile
Layer.NasaMap → Layer.Tile
Layer.OpenStreetMap → Layer.Tile
Layer.QQMap → Layer.Tile
Layer.TiandituMap → Layer.Tile
示例
layer = new G.Layer.BingMap('street'); layer.addTo(map);
各种底图的构造
| 构造函数 | 说明 |
|---|---|
| G.Layer.AliMap() | 阿里云地图 |
| G.Layer.AMap( [String] type ) | 高德地图，type可选 street/street2/sate/satel/traffic 之一 |
| G.Layer.BaiduMap( [String] type ) | 百度地图，type可选 street/sate/satel/traffic 之一 |
| G.Layer.BingMap( [String] type ) | 必应地图，type可选 street/traffic 之一 |
| G.Layer.CartoMap( [String] type ) | Carto地图，type可选 midnight/eco/flatblue 之一 |
| G.Layer.GoogleCnMap( [String] type ) | Google中国地图，type可选 street/terrian/sate/satel 之一 |
| G.Layer.NasaMap( [String] layer, [String] time, [Number] srid, [String] resolution, [String] format) | NASA提供的系列地图，内容可参考 NASA GIBS。其中layer是NASA提供的图层名字，比如 ‘MODIS_Aqua_Land_Surface_Temp_Day’，time为数据的时间，如‘2014-04-09’，srid可选4326(WGS 84)与3857(Web Mercator)，resolution可选‘250m’/‘500m’/‘1km’/‘2km’ ,format可选’jpg’/’png’。注意，并不是每个地图都支持所有格式，每个地图支持的格式详见链接 NASA GIBS。 |
| G.Layer.OpenStreetMap() | OpenStreetMap地图 |
| G.Layer.QQMap( [String] type ) | 腾讯地图，type可选 street/sate/satel 之一 |
| G.Layer.TiandituMap( [String] type ) | 天地图地图，type可选 street/streetl/sate/satel/terrain/terrainl 之一 |
在经纬度坐标和百度坐标间进行转换
| 方法名 | 返回值 | 说明 |
|---|---|---|
| G.Proj.Baidu.project( [Number] longitude, [Number] latitude ) | Point | 将标准经纬度坐标投影为百度经纬坐标 |
| G.Proj.Baidu.unproject( [Number] x, [Number] y ) | Point | 将百度经纬坐标反算为标准经纬度坐标 |
| G.Proj.Baidu.projectM( [Number] longitude, [Number] latitude ) | Point | 将标准经纬度坐标投影为百度米制坐标 |
| G.Proj.Baidu.unprojectM( [Number] x, [Number] y ) | Point | 将百度米制坐标反算为标准经纬度坐标 |
模块draw提供了一个可供绘制的图层
Layer.Draw → Layer.Graphic
示例
drawLayer = new G.Layer.Draw(); drawLayer.addTo(map); drawLayer.addListener('drawEnd', function(e){ console.log(e.graphic); }); drawLayer.startDraw('circle', {fillColor:'#f00'});
Draw模块绘制多边形和线的操作略加说明：用户可以通过双击结束一个对象的绘制，但是这个双击的位置不作为最后一个节点保存，因为双击操作确定的位置一般不太准确。
构造
| 构造函数 | 说明 |
|---|---|
| G.Layer.Draw() |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| startDraw( [String] type , [Object] options) | this | 进入可绘制状态，type为需要绘制的图形类型，可选值为 circle/point/polyline/polygon/freepolyline/freepolygon/rect；options为给需要绘制的图形设置的样式，可参考各种Graphic的构造选项 |
| endDraw() | this | 退出可绘制状态 |
事件
| 事件类型 | 格式 | 说明 |
|---|---|---|
| ‘drawStart’ | GraphicEvent | 开始绘制一个图形 |
| ‘draw’ | GraphicEvent | 正在绘制一个图形，图形的几何属性有变化时触发 |
| ‘drawEnd’ | GraphicEvent | 结束绘制一个图形 |
模块cluster提供了进行聚类的方法，可以将若干点显示为一个带数字的图形。
Layer.Cluster → Layer.Graphic
Graphic.Cluster → Graphic.Group
示例
layer = new G.Layer.Cluster({ breakValues: [3, 5, 10] }); layer.addTo(map); layer.addListener('clusterClicked', function(e){ var cluster = e.cluster; }); var g = new G.Graphic.Point([0, 0]); layer.addPoint(g);
构造
| 构造函数 | 说明 |
|---|---|
| G.Layer.Cluster( [Object] options ) | options为可选的构造选项 |
Layer.Cluster的构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| radius | Number | 50 | 聚类的半径，单位像素 |
| showRealRes | Number | null | 当地图分辨率小于该值时，不显示聚类 |
| breakValues | Array | [5, 10, 20] | 聚类中包含点数量的分类，不同分类有不同的显示样式 |
| breakShapeSizes | Array | [24, 32, 40, 48] | 不同分类显示图形的尺寸，注意，该数组长度应比breakValues多一个 |
| breakFillColors | Array | [‘#71e28c’, ‘#58d7dd’, ‘#efcd45’, ‘#ff936a’] | 不同分类显示图形的填充色，注意，该数组长度应比breakValues多一个 |
| breakFillOpacities | Array | [1.0, 1.0, 1.0, 1.0] | 不同分类显示图形的透明度，注意，该数组长度应比breakValues多一个 |
| breakOutlines | Array | [true, true, true, true] | 不同分类是否显示图形描边，注意，该数组长度应比breakValues多一个 |
| breakOutlineColors | Array | [‘#71e28c’, ‘#58d7dd’, ‘#efcd45’, ‘#ff936a’] | 不同分类显示图形的描边颜色，注意，该数组长度应比breakValues多一个 |
| breakOutlineOpacities | Array | [0.6, 0.6, 0.6, 0.6] | 不同分类显示图形的描边透明度，注意，该数组长度应比breakValues多一个 |
| breakOutlineWidths | Array | [12, 16, 20, 24] | 不同分类显示图形的描边宽度，注意，该数组长度应比breakValues多一个 |
| breakTextSizes | Array | [16, 18, 20, 24] | 不同分类显示图形的文字大小，注意，该数组长度应比breakValues多一个 |
| breakTextColors | Array | [‘#fff’, ‘#fff’, ‘#fff’, ‘#fff’] | 不同分类显示图形的文字颜色，注意，该数组长度应比breakValues多一个 |
事件格式
| 事件 | 格式 |
|---|---|
| ClusterEvent | { type: [事件类型], target: [触发事件的对象], cluster: [聚类对象] } |
事件
| 事件类型 | 格式 | 说明 |
|---|---|---|
| ‘clusterClicked’ | ClusterEvent | 聚类被点击 |
| ‘clusterOver’ | ClusterEvent | 鼠标进入对象 |
| ‘clusterOut’ | ClusterEvent | 鼠标移出对象 |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| addPoint( [Graphic.Point] pointGraphic , [Boolean] redrawNow) | String | 添加一个点 |
| clear() | this | 清空所有点 |
| count() | Number | 计算所有点数量 |
| diveIn( [Graphic.Cluster] cluster ) | this | 放大聚类图形，显示其下一级子图形 |
模块arcgis提供了对ArcGIS服务的访问
Layer.ArcGISFeature → Layer.VectorService
示例
polygonLayer = new G.Layer.ArcGISFeature('http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0', { fields: 'objectid' }); polygonLayer.addTo(map);
Layer.ArcGISFeature的构造
| 构造函数 | 说明 |
|---|---|
| G.Layer.ArcGISFeature( [String] url, [Object] options ) | url为指向某个ArcGIS Feature服务的地址；options为可选的构造选项 |
| |
模块heat提供了客户端的热度图功能，该模块目前只在支持Canvas的浏览器中有效
Layer.Heat → Layer
示例
heatLayer = new G.Layer.Heat({topValue:2, radius:2000000, radiusUnit:'map'}); heatLayer.addTo(map); map.addListener('click', function(e){ heatLayer.addDataPoint(e.mapX, e.mapY, 1, true); });
Layer.Heat的构造
| 构造函数 | 说明 |
|---|---|
| G.Layer.Heat( [Object] options ) | options为可选的构造选项 |
Layer.Heat的构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| radius | Number | 30 | 绘制热点的半径 |
| radiusUnit | String | ‘pixel’ | 绘制热点的半径单位，可选有’map’和’pixel’，分别对应地图单位和像素单位 |
| maxOpacity | Number | 1.0 | 最大透明度 |
| minOpacity | Number | 0 | 最小透明度 |
| colors | Object | 分段设置表示热度的颜色 | |
| topValue | Number | 1 | 控制热点的最大值 |
| drawOnAnim | Boolean | false | 动画过程中是否进行重绘 |
Layer.Heat的方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| addDataPoint( [Number] x, [Number] y, [Number] value, [Boolean] redrawNow ) | [Number] | 添加一个数据点，返回该数据点的id |
| removeDataPoint( [Number] id, [Boolean] redrawNow ) | this | 根据id移除一个数据点 |
| clear() | this | 清除图层 |
Layer.TiledHeat → Layer.TiledService
示例
heatLayer = new G.Layer.TiledHeat('../{z}_{x}_{y}.json', function(tileInfo, data){ var dataPoints = []; for(var i in data){ var pt = data[i]; dataPoints.push([pt[0], pt[1], 1]); } return dataPoints; },{topValue:2, radius:2000000, radiusUnit:'map'}); heatLayer.addTo(map);
Layer.TiledHeat的构造
| 构造函数 | 说明 |
|---|---|
| G.Layer.TiledHeat( [String] url, [Function] dataFunc, [Object] options ) | url为瓦片加载地址，dataFunc为瓦片请求返回的数据处理函数，options为可选的构造选项 |
Layer.TiledHeat的构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| cluster | Array | [] | 服务器集群 |
| originX | Number | -20037508.342787 | 标注分块的原点X坐标 |
| originY | Number | 20037508.342787 | 标注分块的原点Y坐标 |
| minX | Number | -20037508.342787 | 图层范围的最小X坐标 |
| maxX | Number | 20037508.342787 | 图层范围的最大X坐标 |
| minY | Number | -20037508.342787 | 图层范围的最小Y坐标 |
| maxY | Number | 20037508.342787 | 图层范围的最大Y坐标 |
| tileSize | Number | 256 | 标注分块的尺寸，单位像素 |
| zoomReses | Array | Google的分级，[ 156543.033928, 78271.516964, …, 0.298582 ] | 分级分辨率数组 |
| radius | Number | 30 | 绘制热点的半径 |
| radiusUnit | String | ‘pixel’ | 绘制热点的半径单位，可选有’map’和’pixel’，分别对应地图单位和像素单位 |
| maxOpacity | Number | 1.0 | 最大透明度 |
| minOpacity | Number | 0 | 最小透明度 |
| colors | Object | 分段设置表示热度的颜色 | |
| topValue | Number | 2 | 控制热点的最大值 |
| drawOnAnim | Boolean | false | 动画过程中是否进行重绘 |
Layer.TiledHeat的方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| setUrl( [String] url ) | this | 重新设置url |
| clear() | this | 清除图层 |
模块movable提供了动态对象的支持
Graphic.MovablePoint → Graphic.Point
示例
route = [[0, 0], [100, 0], [100, 100]]; movePoint = new G.Graphic.MovablePoint(route[0], null, { shape: 'image', size: [24, 24], offset: [-12, -12], image: 'boot{i}.png', duration: 5000 }); movePoint.addTo(graphicLayer); movePoint.setRoute(route); movePoint.start();
Graphic.MovablePoint的构造
同 Graphic.Point 的构造
Graphic.MovablePoint的方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| setRoute( [Polyline] route ) | this | 设置对象将要移动的路径 |
| start() | this | 开始移动 |
| stop() | this | 停止移动 |
| |
模块geogrid提供了地理网格图层及工具类。地理网格是基于经纬度坐标进行划分，并且确保网格面积相等的格网系统。
Layer.GeoGrid → Layer.Graphic
示例
layer = new G.Layer.GeoGrid(14, G.Proj.WebMercator, { gridOutlineColor: '#ff0' }); layer.addTo(map);
构造
| 构造函数 | 说明 |
|---|---|
| Layer.GeoGrid( [Number] level, [ProjectClass] projectClass, [Object] options ) | level为网格划分的层级，projectClass为当前地图与经纬度坐标进行换算的投影类（如G.Proj.WebMercator），options为可选的构造选项 |
构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| gridOutline | Boolean | true | 是否绘制网格的外边线 |
| gridOutlineColor | String | ‘#0f0’ | 网格外边线的颜色 |
| gridOutlineWidth | Number | 2 | 网格外边线的线宽 |
| gridOutlineOpacity | Number | 1.0 | 网格外边线的透明度 |
| gridFill | Boolean | true | 是否填充网格 |
| gridFillColor | String | ‘#000’ | 网格填充的颜色 |
| gridFillOpacity | Number | 0.3 | 网格填充的透明度 |
方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| getGridByIndex( [Number] ix, [Number] iy ) | Graphic | 通过序号获取网格对象 |
| getGridByLL( [Number] lon, [Number] lat ) | Graphic | 通过经纬度坐标获取网格对象 |
模块fluid提供了流体场（比如风、洋流等）的动画功能，该模块目前只在支持Canvas的浏览器中有效
Layer.Fluid → Layer
示例
fluidLayer = new G.Layer.Fluid(); fluidLayer.addTo(map);
Layer.Fluid的构造
| 构造函数 | 说明 |
|---|---|
| G.Layer.Fluid( [Object] options ) | options为可选的构造选项 |
Layer.Fluid的构造选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| gridPixels | Number | 4 | 用于插值的网格像素边长 |
| gridMaxDivs | Number | 200 | 最大网格边划分数量 |
| gridReduceFactor | Number | 2 | 在移动设备上适当减少网格数量的比例 |
| fieldFactor | Number | 0.8 | 流体场的长度绘制因子 |
| fieldMaxIntensity | Number | 50 | 可视化时限制的流体场最大强度 |
| particleMaxAge | Number | 100 | 粒子的最大生命长度 |
| particleCountFactor | Number | 0.05 | 粒子数量的缩减因子，该值为期望的粒子数与网格节点的比值 |
| lineWidth | Number | 1.2 | 粒子路径绘制的线宽 |
| opacity | Number | 1.0 | 粒子路径绘制的透明度 |
| colors | Array | [‘#fff’, ‘#fff’, ‘#fff’, ‘#fff’, ‘#fff’] | 粒子路径绘制的颜色列表 |
| searchSteps | Number | 3 | 插值时搜索附近数据点的最大尝试次数，每次尝试会讲前一次搜索范围扩大一倍 |
| frameDuration | Number | 50 | 动画帧之间的间隔时间，单位毫秒 |
Layer.Fluid的方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| addDataPoint( [Number] x, [Number] y, [Number] u, [Number] v, [Boolean] redrawNow ) | [Number] | 添加一个数据点，返回该数据点的id |
| removeDataPoint( [Number] id, [Boolean] redrawNow ) | this | 根据id移除一个数据点 |
| calcField( [Number] x, [Number] y ) | Array | 计算指定坐标处的场，结果为一个三维数组，[u方向值, v方向值, 场强]，如果该处无结果则返回[NaN, NaN, null] |
| clear([Boolean] forbidRedraw) | this | 清除图层 |
| start() | this | 开始播放动画 |
| stop() | this | 停止播放动画 |
| isPlaying() | Boolean | 返回是否正在播放动画 |