JavaScript SDK

SDK下载

当前版本下载链接：加载中...


概述

GeoHey JavaScript SDK是一个面向移动互联网时代，遵循移动优先、向下兼容、保持轻量原则的地图SDK。

除了一般地图SDK所有的功能，GeoHey JavaScript SDK还具有以下特性：

针对视网膜屏的兼容和优化

与微信等轻应用平台无缝融合

地图支持无极缩放

地图支持旋转

支持大数据量的显示

地图上可添加图表、视频等任意内容

特有的3D模式，能够通过WebGL技术展示炫酷的三维图形

提供第三方地图服务集成、聚类、热图、动态目标等多种扩展模块

目前，SDK支持Chrome、Firefox、Safari、IE(7+)、Android等PC和移动端浏览器，SDK会根据情况自动选择 HTML5 CANVAS、SVG、VML等技术来进行显示。如果开启WebGL模式，还可以在三维场景中渲染地图，展示炫酷的三维图形。




入门指南

引入SDK并显示地图

将下载的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"也可替换为指定的版本号，默认加载最新版本。

NPM安装

如果您在使用ES6，可以试试通过npm来安装SDK

npm install geohey-javascript-sdk --save

通过npm安装后，就不能根据当前环境自动加载需要的canvas/WebGL/svg/vml或其他模块，需要您手动import所需模块。同样，扩展模块也需要手动import

import 'geohey-javascript-sdk/dist/lib/g.css'    // 样式
import G from 'geohey-javascript-sdk'
import 'geohey-javascript-sdk/dist/lib/g-canvas.min.js'        // canvas模块

// 不再需要在G.ready回调中操作
const map = new G.Map('mapContainer');

如果没有使用webpack等工具，则不能直接import样式文件g.css。需要在html页面中引入

当然，也可以只通过npm来下载SDK，仍然用在html中引入资源的方式来使用

<link rel="stylesheet" href="./node_modules/geohey-javascript-sdk/dist/lib/g.css">
<script type="text/javascript" src="./node_modules/geohey-javascript-sdk/dist/lib/g.min.js"></script>

基本概念

命名空间

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_ON_WEBGL Boolean 开启 HTML5 的 WebGL 渲染功能，WebGL模式可以渲染三维场景，使用三维图形必须要先开启WebGL模式，但是WebGL模式不兼容老旧浏览器
G_OFF_CSS3D Boolean 关闭 HTML5 中的CSS 3D 变换功能（大多数Canvas的3D变换会使用硬件加速），对于大多数情况应该避免使用该参数
G_CANVAS_RATIO Boolean 强制指定HTML5 Canvas的像素比例，对于超高分屏为了性能可能需要强制指定较低的像素比例
G_NOT_SET_VIEWPORT Boolean 阻止类库修改viewport设置，默认情况下类库会帮助设置页面使其适合在移动设备上显示

WebGL模式（三维模式）

设置全局参数G_ON_WEBGL为true，可以开启WebGL模式。在WebGL模式中，可以在全新的角度来观察地图，可以用鼠标或触摸屏调整地图的旋转角和倾角，并且能用新的三维图形来展示数据。

模块

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）。由于WebGL模式的三维图形无法用其他模式兼容，所以开启WebGL模式后，如果浏览器不支持WebGL，则会给出提示信息，但不会自动退化成其他模式。

几何对象

SDK内部使用尽量简单的几何对象描述，如下表所列:

几何对象类型 格式
Geometry {#geometry}
Point {#point} [ x, y ] 或 [ x, y, z ]（WebGL模式）
Polyline {#polyline} [ [x1, y1], ..., [xn, yn] ]
Polygon {#polygon} [ [[x1, y1], ..., [xn, yn]], ... ]
MultiPoint {#multipoint} {"m": [ Point1, Point2, ... ]}
MultiPolyline {#multipolyline} {"m": [ Polyline1, Polyline2, ... ]}
MultiPolygon {#multipolygon} {"m": [ Polygon1, Polygon2, ... ]}
Extent {#extent} [ xmin, ymin, xmax, ymax ]
Circle {#circle} [ cx, cy, r ]

地图分辨率

分辨率 (Resolution，API中简写为res) = 地图表示的实际尺寸 / 屏幕显示的像素尺寸

分辨率越小，地图越详细。




Map

Map是API的核心类，用于所有数据的显示和操作。

示例

var map = new G.Map('mapContainer',{
    maxRes: 160000,
    minRes: 19.109257,
    initStatus: {center: [0, 0]}
});

构造

构造函数 说明
G.Map( [String | HTMLElement] idOrDom, [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时滚轮滚动将产生和鼠标双击放大类似的效果
zoomDelta Number 2 continuouslyZoom为false时生效，控制滚轮缩放的灵敏程度，范围是[1,10]的整数
touchTol Number 8 触摸屏上操作的容差，单位像素
dragEdge 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, pitch: 0 } 地图初始状态，包括地图中心，地图分辨率，地图旋转角度和地图倾角（倾角仅在WebGL模式下有效）

方法

方法名 返回值 说明
view( [Point] center, [Number] width, [Number] height, [Number] rotate ) this 缩放、旋转地图到指定的状态
getExtent([Number] expandDis) Extent 获取地图的范围，如指定expandDis则将地图范围向外扩展一定距离
getRotate() Number 获取地图旋转的角度
getPitch() Number 获取地图当前的倾角（仅在WebGL模式下有效）
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 将地图旋转指定角度
pitchTo( [Number] degree, [Object] options ) this 将地图倾角调整至指定角度（仅在WebGL模式下有效）
isZooming() Boolean 是否正在缩放
isPanning() Boolean 是否正在拖拽
isRotating() Boolean 是否正在旋转
isDragging() Boolean 是否正在拖拽
isRightDragging() Boolean 是否正在用鼠标右键拖动旋转（仅在WebGL模式下有效）
isPinching() Boolean 是否正在双指捏合缩放
toScreen( [Point] mapPoint ) Point 将地图坐标转换为屏幕坐标
toMap( [Point] screenPoint ) Point 将屏幕坐标转换为地图坐标
addControl( [Control] control ) this 添加控件
addLegend( [Legend] legend ) this 添加图例组件
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 动画效果的持续时间，单位秒

Map.pitchTo选项

选项 类型 默认值 说明
duration Number 0.5 动画效果的持续时间，单位秒




控件

Control

所有控件的抽象类

构造选项

选项名 类型 默认值 说明
position String '' 控件位置，可以是top-right/top-left/bottom-right/bottom-left,分别表示右上/左上/右下/左下
offset Array [0,0] 控件相对于position所设置位置的偏移

方法

方法名 返回值 说明
addTo( [Map] map ) this 将控件添加到地图中
remove() this 将控件从地图中移除
show() this 显示控件
hide() this 隐藏控件

Control.Zoom

Control.Zoom → Control

缩放控件

示例 

var zoomControl = new G.Control.Zoom( {
    position: 'top-right',
} )

map.addControl( zoomControl );

构造

构造函数 说明
G.Control.Zoom( [Object] options ) options为可选的构造选项

构造选项

选项名 类型 默认值 说明
position String 'top-right' 可以是top-right/top-left/bottom-right/bottom-left
offset Array [0,0] 控件相对于position所设置位置的偏移

Control.Layers

Control.Layers → Control

图层列表控件

示例 

var layersControl = new G.Control.Layers( {
    position: 'top-right',
} )

map.addControl( layersControl );

构造

构造函数 说明
G.Control.Layers( [Object] options ) options为可选的构造选项

构造选项

选项名 类型 默认值 说明
position String 'top-left' 可以是top-right/top-left/bottom-right/bottom-left
offset Array [0,0] 控件相对于position所设置位置的偏移

Control.Timeline

Control.Timeline → Control

时间轴控件，一般和时态图层配合使用

示例 

var timelineControl = new G.Control.Timeline( {
    position: 'bottom',
} )

map.addControl( zoomControl );

构造

构造函数 说明
G.Control.Timeline( [Object] options ) options为可选的构造选项

构造选项

选项名 类型 默认值 说明
position String 'bottom' 可以是top/bottom
min Number 1 最小值
max Number 100 最大值
tooltip Boolean true 是否显示tooltip
duration Number 1 播放间隔时间，单位秒

方法

方法名 返回值 说明
setLayer( [Timed.Layer] layer ) this 绑定时态图层，将时间轴控件和一个时态图层绑定，用来控制此时态图层
setValue([Number] value) this 设置当前时间轴的值
getValue() Number 获取当前时间轴的值
play() this 开始播放
pause() this 暂停播放
stop() this 停止播放




图例

Legend

图例组件 图例组件会将图层的图例数据显示出来，需要配合Layer的setLegend方法

示例 

var legend = new G.Legend( {
    position: 'bottom-right',
} )

map.addLegend( legend );

构造

构造函数 说明
G.Legend( [Object] options ) options为可选的构造选项

构造选项

选项名 类型 默认值 说明
position String 'bottom-right' 可以是top-right/top-left/bottom-right/bottom-left
offset Array [0,0] 控件相对于position所设置位置的偏移
maxWidth Number 200 控件显示的最大宽度
exclude Array [] 不显示在图层列表的图层，用来排除不需要控制的图层

方法

方法名 返回值 说明
addTo( [Map] map ) this 将图例添加到地图中
remove() this 将图例从地图中移除
open() this 打开图例
close() this 关闭图例
isOpen() Boolean 检查图例是否打开
toggle() this 切换图例打开关闭/状态




图层 (Layer)

Layer

所有图层的抽象类

构造选项

选项名 类型 默认值 说明
minRes Number undefined 图层出现的最小分辨率
maxRes Number undefined 图层出现的最大分辨率
name String undefined 图层名称
swiper Boolean false 是否设置为卷帘图层

方法

方法名 返回值 说明
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 清除图层内容，如果是服务图层则会重新加载新内容
toggleSwiper([Boolean] swipe ) this 切换该图层状态，是否为卷帘图层

Layer.Tile

Layer.Tile → Layer

Tile Layer 瓦片图层，用于加载传统的基于瓦片图片的地图。

示例 

var osmLayer = new G.Layer.Tile('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    cluster: ['a', 'b', 'c'],
    filter: 'dark'
});
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设置，如果服务器不支持，请设置为空字符串
filter String '' 是否使用个性化的瓦片滤镜,可选值:'dark'、'gray'、'negative'
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 → 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.Graphic3D

Layer.Graphic3D → Layer

三维图形图层，只能在WebGL模式下使用，图层中可以放置各种Graphic3D，如点 [Graphic3D.Point]，这些三维图形都会在浏览器中被实时地显示给用户。

示例 

var layer = (new G.Layer.Graphic3D()).addTo(map);
layer.setStyle(['type', 'num'], ['=="city"', '>0'], { // 给type字段值等于'city'且num字段值大于0的矢量图形对象指定特定的样式
    fillColor: '#000'
});

var g = new G.Graphic3D.Point([0, 0], { // 这个对象将被显示成上面指定的样式
    type: 'city',
    num: 0
});
g.addTo(layer);

构造

构造函数 说明
G.Layer.Graphic3D()

方法

方法名 返回值 说明
add( [Graphic3D] graphic3d, [Number] id, [Boolean] noRedraw ) Number 添加一个图形对象，并返回id，如果指定id，则判断该id是否存在，如存在则直接返回已存在的图形对象的id，如指定noRedraw为true则暂不重绘，这在添加大量数据时对性能有帮助
get( [Number] id ) Graphic3D 根据指定的id返回图层上某个对象
all() Array 返回所有对象
count() Number 获取图层上所有对象的个数
clear() this 移除图层上所有对象
setStyle( [Array] fields, [Array] conditions, [Object] options ) this 设置满足某条件下对象的显示样式，options为指定的样式，它将会被合并到每个图形对象的options中；如fields或conditions为空，则设置为图层默认样式
clearStyles( [Object] options ) this 清空所有样式，options为清空后的样式，它将会被合并到每个图形对象的options中

Layer.Html

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 → Layer

Image图层，图层中可以放置图片内容，这些图片会自动缩放以维持自身在地图中固定的位置。

示例 

var layer = (new G.Layer.Image()).addTo(map);
layer.addImage('a.jpg', 0, 0, 1e6, 1e6);

构造

构造函数 说明
G.Layer.Image( [Object] options ) options为可选的构造选项

构造选项

选项名 类型 默认值 说明
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.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.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.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.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.UTFGrid

Layer.UTFGrid → Layer.TiledService

UTFGrid图层，通过指定的URL地址自动获取GeoHey提供的UTFGrid数据。

示例 

var url = 'http://{s}.geohey.com/s/dataviz/' + vizId + '/0/{z}/{x}/{y}.grid?ak=' + ak;
var layer = new G.Layer.UTFGrid(url, {
    cluster: ['s1', 's2', 's3', 's4'],
});
layer.addTo(map);

layer.addListener('gridMouseMove',function (e) {
    console.log(e.data);
    console.log(e.point);
})

构造

构造函数 说明
G.Layer.UTFGrid( [String] url, [Object] options ) url为指向服务的地址，url中可出现{s}、{z}、{x}、{y}四个参数，分别代表服务器集群编号、缩放层级、X方向图片索引、Y方向图片索引、服务端数据类型；options为可选的构造选项

构造选项

选项名 类型 默认值 说明
showAttr Boolean true 是否直接跟随鼠标移动显示属性数据，如果设置为false，通过监听事件同样可以获取当前鼠标位置和属性信息
pos String 'right' 可选值'left'、'right'，指定显示的属性数据位于鼠标左侧还是右侧

Layer.VectorCache

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 ] 分级分辨率数组

Layer.Grid

Layer.Grid → Layer

网格图层

示例 

var layer = new G.Layer.Grid({
    size: 100000,
    center: [ 0, 0 ]
});
layer.addTo(map);

构造

构造函数 说明
G.Layer.Grid( [Object] options ) options为可选的构造选项

构造选项

选项名 类型 默认值 说明
lineColor String #409eff 网格线的颜色
lineWidth Number 1 网格线的线宽
lineOpacity Number 0.8 网格线的透明度
size Number 1000000 网格线尺寸（地理单位）
center Array [0, 0] 网格中心点坐标（即网格的偏移）

Layer.Timed

Layer.Timed → Layer

时态图层，包括 Layer.Timed.Heat 和 Layer.Timed.Tile

方法

方法名 返回值 说明
start this 时态图层开始播放
pause this 时态图层暂停播放
stop this 时态图层停止播放




图形对象

Graphic

所有矢量图形的抽象类

构造选项

选项名 类型 默认值 说明
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.Point → 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);

构造

构造函数 说明
G.Graphic.Point( [Point] 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'时显示的文字内容
textColor String '#000' shape为'text'时显示的文字的颜色
textOpacity Number 1 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' 填充的颜色
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.Polyline → Graphic

线图形

示例 

var g = new G.Graphic.Polyline([[0, 0], [0,100], [100,200]], null, {
        lineWidth:8,
        lineDashArray:[20, 20],
        lineColor:'#00f'
    });
g.addTo(graphicLayer);

构造

构造函数 说明
G.Graphic.Polyline( [Polyline] 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.Polygon → 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);

构造

构造函数 说明
G.Graphic.Polygon( [Polygon] geom, [Object] attrs, [Object] options ) geom为几何对象；attrs为属性对象；options为可选的构造选项。Polygon支持洞，注意洞的坐标顺序须和外环的坐标顺序相反，比如外环坐标是顺时针顺序，则洞的坐标顺序必须是逆时针方向。

构造选项

选项名 类型 默认值 说明
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.MultiPoint

Graphic.MultiPoint → Graphic

多点图形

示例 

var g = new G.Graphic.MultiPoint({"m":[ [0,0],[2,2] ]});
g.addTo(graphicLayer);

构造

构造函数 说明
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.MultiPolyline

Graphic.MultiPolyline → Graphic

多线图形

示例 

var g = new G.Graphic.MultiPolyline({"m":[ [[0, 0], [0,100]],[[0,100], [100,200]] ]});
g.addTo(graphicLayer);

构造

构造函数 说明
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.MultiPolygon

Graphic.MultiPolygon → Graphic

多面图形

示例 

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.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.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.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.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 返回所有子图形

Graphic.OD

Graphic.OD → Graphic.Polyline

OD线

示例 

var g = new G.Graphic.OD([
            [12958411.824, 4852031.940], [9753463.349, 4852031.940]
        ], null, {
            curvature:0.4,
            lineWidth:8,
            lineDashArray:[20, 20],
            lineColor:'#00f'
        });
g.addTo(graphicLayer);

构造

构造函数 说明
G.Graphic.OD( [OD] geom, [Object] attrs, [Object] options ) geom为几何对象；attrs为属性对象；options为可选的构造选项

构造选项

选项名 类型 默认值 说明
curvature Number 0.3 取值[0,1]，用于描述OD线的弯曲程度，值越大，OD线越弯曲
curvePosition Number 0.5 用于描述OD线的弯曲位置
direction String 'right' OD线的弯曲方向，可选值有 'right'、'left'
shadow Boolean false 是否开启OD线的阴影效果，开启会影响绘制效率
shadowColor String '#fff' 阴影颜色
symbol String '' 是否在OD线上添加symbol，可选值有'arrow'、'point'
symbolSize Number 6 symbol尺寸
symbolOnly Boolean false 是否只保留symbol不绘制线，通常用户绘制再OD线上运动的动态对象，设为true可以提高效率




3D图形对象

Graphic3D

所有三维图形的抽象类，只有在WebGL模式下才能使用

构造选项

选项名 类型 默认值 说明
clickable Boolean false 对象是否可被用户点击

方法

方法名 返回值 说明
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 更新对象的属性信息，属性信息中有和绘制样式相关的内容时会导致图形重新绘制
clone() Graphic3D 返回克隆对象

Graphic3D.Point

Graphic3d.Point → Graphic3D

三维点图形,点的大小不会随缩放改变

示例 

// [20000, 20000, 100] 的前两个值表示在地图平面的位置，100表示离地图平面的高度，可以省略
var g = new G.Graphic3D.Point([20000, 20000, 100], {
        name: 'beijing'
    }, {
        shape: 'rect',
        size: [25, 40],
        height: function( res ) {   // res为地图当前缩放级别
            return 500000 / res;
        },
        clickable: true
    });
g.addTo(graphicLayer);

构造

构造函数 说明
G.Graphic3D.Point( [Point] geom, [Object] attrs, [Object] options ) geom为几何对象；attrs为属性对象；options为可选的构造选项

构造选项

选项名 类型 默认值 说明
shape String 'circle' 可选值有 circle / rect / sphere / hexagon / image / text，分别用圆形、矩形、球、六边形、图片、文字来表示点。
size Array [12, 12] 图形的尺寸，circle图形和sphere图形只会使用数组中第一个值作为直径，hexagon图形只会使用第一个值作为中心点到六边形顶点的长度，text图形只会使用数组中第一个值作为文字的尺寸，
offset Array [0, 0, 0] X、Y和 Z方向上的偏移，Z方向即垂直于地图平面向上的方向，Z值可以省略，单位像素，circle、rect、text以中心点为原点，image以图片左上角为原点
height Number 或 Function 0 图形的高度，接受一个数值高度或者一个函数，函数默认会获得一个参数res，表示当前的缩放级别，最后需要返回一个数值（geom的z值表示图形离地图平面的高度，而height表示图形本身的高度）
image String '' shape为'image'时所显示图片的URL，如'images/pin.png'；如要支持视网膜屏，该值需设置为带参数的字符串，如'images/pin{i}.png'，其中'i'参数在视网膜屏下会被替换为'@2x'，因此同时还需要准备'images/pin@2x.png'这张图片
imageRotate Number 0 shape为'image'时可以设置图片的旋转角度，单位度，图片始终会正对屏幕方向，这个旋转指的是相对于水平方向的旋转
text String '' shape为'text'时显示的文字内容
textFont String 'Arial' 文字字体，多个字体以逗号分隔
textStyle String 'normal' 可选值有 normal / italic / bold，分别对应正常字体、斜体、粗体
textAlign String 'center' 可选值有 center / left / right，分别对应居中、左对齐、右对齐
fill Boolean true 是否填充，填充相关选项对shape为img的情况无效
fillColor String '#3dc0fd' 填充的颜色，如果shape为text则文字也会使用这个颜色绘制

Graphic3D.Polyline

Graphic3D.Polyline → Graphic3D

三维线图形

示例 

var g = new G.Graphic3D.Polyline([[0, 0, 0], [0, 100, 50], [100, 200, 100]], null, {
    lineColor: '#00f',
    lineOpacity: 0.8
});
g.addTo(graphicLayer);

构造

构造函数 说明
G.Graphic3D.Polyline( [Polyline] geom, [Object] attrs, [Object] options ) geom为几何对象；attrs为属性对象；options为可选的构造选项

构造选项

选项名 类型 默认值 说明
lineColor String '#ff941b' 颜色
lineOpacity Number 1.0 透明度

Graphic3D.Polygon

Graphic3D.Polygon → Graphic3D

三维面图形

示例 

var g = new G.Graphic3D.Polygon([[[0, 0], [0,3], [3,3], [3,0]], [[1, 1], [2,1], [2,2], [1,2]]]);
g.addTo(graphicLayer);

构造

构造函数 说明
G.Graphic3D.Polygon( [Polygon] geom, [Object] attrs, [Object] options ) geom为几何对象；attrs为属性对象；options为可选的构造选项。Polygon支持洞，注意洞的坐标顺序须和外环的坐标顺序相反，比如外环坐标是顺时针顺序，则洞的坐标顺序必须是逆时针方向。

构造选项

选项名 类型 默认值 说明
highLight Boolean true 鼠标交互时是否高亮
highLightColor String '#ff2e6c' 高亮时的颜色
highLightOpacity Number 1.0 高亮时的透明度
fillColor String '#000' 填充的颜色
fillOpacity Number 0.6 填充的透明度




事件 (Event)

事件的监听

在支持事件的对象上调用bind()方法可添加监听，调用unbind()方法可移除监听，调用unlisten()方法可暂时关闭监听，调用listen()方法可重新启用监听。

示例 


var callback = function(e){
    console.log(e);
}

map.bind('click', callback);        // 此时添加了监听
map.unlisten('click');                // 此时暂时关闭了监听
map.listen('click');                // 此时重新打开了监听
map.unbind('click', callback);        // 此时移除了监听

事件格式

事件 格式
Event {#event} { type: [事件类型], target: [触发事件的对象] }
InteractEvent {#interact-event} { type: [事件类型], target: [触发事件的对象], mapX: [地图X坐标], mapY: [地图Y坐标], screenX: [屏幕X坐标], screenY: [屏幕X坐标] }
LayerEvent {#layer-event} { type: [事件类型], target: [触发事件的对象], layer: [图层对象] }
TileEvent {#tile-event} { type: [事件类型], target: [触发事件的对象], url: [瓦片图片的URL] }
GraphicEvent {#graphic-event} { type: [事件类型], target: [触发事件的对象], graphic: [图形对象] }
FeatureServiceEvent {#feature-service-event} { 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 地图显示的范围有所变化
'redraw' Event 地图发生了重绘
'update' 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 所有需要加载的瓦片图片均完成请求，但不保证所有请求都成功

Layer.Graphic的事件

事件类型 格式 说明
'graphicAdded' GraphicEvent 有图形被添加到图层上
'graphicRemoved' GraphicEvent 有图形从图层上被移除
'graphicGeomUpdated' GraphicEvent 有图形的几何信息被更新
'graphicAttrUpdated' GraphicEvent 有图形的属性信息被更新
'graphicToTop' GraphicEvent 图形被移动到图层的最上层
'graphicClicked' GraphicEvent 图形被点击
'graphicOver' GraphicEvent 鼠标进入对象
'graphicOut' GraphicEvent 鼠标移出对象
'graphicStartEdit' GraphicEvent 开始编辑某图形
'graphicEndEdit' GraphicEvent 结束编辑某图形

Layer.FeatureService的事件

事件类型 格式 说明
'loadTileStart' FeatureServiceEvent 指定范围内的数据开始加载
'loadTileSuccess' FeatureServiceEvent 指定范围内的数据加载成功
'loadTileError' FeatureServiceEvent 指定范围内的数据加载失败
'loadTileComplete' FeatureServiceEvent 指定范围内的数据加载结束，无论请求是否成功均触发该事件
'loadAllStart' FeatureServiceEvent 所有数据开始加载
'loadAllSuccess' FeatureServiceEvent 所有数据加载成功
'loadAllError' FeatureServiceEvent 所有数据加载失败
'loadAllComplete' FeatureServiceEvent 所有数据加载结束，无论请求是否成功均触发该事件

Layer.TiledService的事件

事件类型 格式 说明
'loadTileStart' TiledServiceEvent 指定分片内的数据开始加载
'loadTileSuccess' TiledServiceEvent 指定分片内的数据加载成功
'loadTileError' TiledServiceEvent 指定分片内的数据加载失败
'loadTileComplete' TiledServiceEvent 指定分片内的数据加载结束，无论请求是否成功均触发该事件
'unusedTile' TiledServiceEvent 指定分片内的数据已经无用，可以进行清理操作
'allLoaded' TiledServiceEvent 所有需要加载的分片数据均完成请求，但不保证所有请求都成功

Layer.UTFGrid的事件

事件类型 格式 说明
'gridMouseMove' TiledServiceEvent 鼠标在utfgrid上移动时, 返回属性信息和鼠标位置




投影 (Project)

常见的互联网地图投影Web Mercator

通过完整的对象名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 将经纬度坐标(wgs84)投影为中国特殊的偏移坐标(gcj-02)
unproject( [Number] longitude, [Number] latitude ) Point 将中国特殊的偏移坐标(gcj-02)反算为经纬度坐标(wgs84)，精确计算，精度全国范围均值１米　　
unprojectRough( [Number] longitude, [Number] latitude ) Point 将中国特殊的偏移坐标(gcj-02)反算为经纬度坐标(wgs84)，快速计算，精度全国范围均值２米　　




杂项

AJAX请求

方法

方法名 返回值 说明
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{i}'，data为{i:1}，则渲染的结果为'a1'

对象处理

方法

方法名 返回值 说明
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

Graphic.AnimOD → Graphic.OD

示例 

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为可选的构造选项
G.Graphic.AnimOD( [OD] geom, [Object] attrs, [Object] options ) geom为几何对象；attrs为属性对象；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

模块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/normalrect/arrow；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 当地图分辨率小于该值时，不显示聚类
clusterField String null 统计聚类点的某一个类型为数值的属性
textFormat String 'normal' 可选值有 normal / comma ,指定为‘omma’将会以千分位的格式显示数值
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 {#cluster-event} { 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提供了对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

模块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 {0.25: '#00f', 0.5: '#0ff', 0.75: '#0f0', 1.0: '#f00'} 分段设置表示热度的颜色
topValue Number 5 控制热点的最大值
drawResolution Number 1 绘制分辨率，必须大于等于1，该值越大绘制越粗糙，但效率越高
drawOnAnim Boolean false 动画过程中是否进行重绘

Layer.Heat的方法

方法名 返回值 说明
addDataPoint( [Number] x, [Number] y, [Number] val, [Object] attrs, [Boolean] redrawNow ) [Number] 添加一个数据点，返回该数据点的id。val代表这个点的值，attrs为这个点附带的属性
removeDataPoint( [Number] id, [Boolean] redrawNow ) this 根据id移除一个数据点
setFilters( [Array] fields, [Array] conditions ) this 设置过滤条件
clearFilters() this 清除所有过滤条件
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 {0.25: '#00f', 0.5: '#0ff', 0.75: '#0f0', 1.0: '#f00'} 分段设置表示热度的颜色
topValue Number 5 控制热点的最大值
drawResolution Number 1 绘制分辨率，必须大于等于1，该值越大绘制越粗糙，但效率越高
drawOnAnim Boolean false 动画过程中是否进行重绘

Layer.TiledHeat的方法

方法名 返回值 说明
setUrl( [String] url ) this 重新设置url
setFilter( [String] field, [String] condition ) this 设置过滤条件
clearFilters() this 清除所有过滤条件
clear() this 清除图层

Layer.TiledGridHeat → Layer.TiledService

示例 

heatLayer = new G.Layer.TiledGridHeat('../{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:20, gridCols:64, gridRows:64});
heatLayer.addTo(map);

Layer.TiledGridHeat的构造

构造函数 说明
G.Layer.TiledGridHeat( [String] url, [Function] dataFunc, [Object] options ) url为瓦片加载地址，dataFunc为瓦片请求返回的数据处理函数，options为可选的构造选项

Layer.TiledGridHeat的构造选项

选项名 类型 默认值 说明
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 ] 分级分辨率数组
gridCols Number 64 数据格网的列数
gridRows Number 64 数据格网的行数
maxOpacity Number 1.0 最大透明度
minOpacity Number 0 最小透明度
colors Object {0.25: '#00f', 0.5: '#0ff', 0.75: '#0f0', 1.0: '#f00'} 分段设置表示热度的颜色
topValue Number 5 控制热点的最大值
drawOnAnim Boolean false 动画过程中是否进行重绘

Layer.TiledGridHeat的方法

方法名 返回值 说明
setUrl( [String] url ) this 重新设置url
setFilter( [String] field, [String] condition ) this 设置过滤条件
clearFilters() this 清除所有过滤条件
clear() this 清除图层

Movable

模块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

模块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 返回是否正在播放动画

Temporal

模块temporal提供了数据在时间维度上的支持

Layer.TiledTemporal → Layer.TiledService

示例 

var url = 'http://geohey.com/s/dataviz/'+vizId+'/0/{z}/{x}/{y}.json?retina={i}&ak='+ak;

temporalLayer = new G.Layer.TiledTemporal(url,function(step){
    //　时间回调函数
    console.log("step:" + step);
},{
    frameCount: frameCount,
    frameDuration: 200,
    colorBuckets: [
        { "value": 1, "color": "#F84F40" }
    ],
    markerSizeBuckets: [
        {"value": 1,  "markerSize": 3 },
    ],
    isExpand: true,
    maxOpacity: 0.9,
    frameAnimStepCount: 6,
})

temporalLayer.addTo(map);
temporalLayer.start();

Layer.TiledTemporal的构造

构造函数 说明
G.Layer.TiledTemporal( [String] url, [Function] timeFunc, [Object] options ) url为瓦片加载地址，timeFunc为与时间相关的回调函数，options为可选的构造选项

Layer.TiledTemporal的构造选项

选项名 类型 默认值 说明
radiusUnit String 'pixel' 绘制的半径单位，可选有'map'和'pixel'，分别对应地图单位和像素单位
colorBuckets Array [{ "value": 0, "color": "#F84F40" }] 指定分段绘制使用的颜色，value用于对可视化请求中weightField指定字段的值进行分段
markerSizeBuckets Array [{ "value": 0, "markerSize": 3 }] 指定分段绘制使用的符号大小，value用于对可视化请求中weightField指定字段的值进行分段
rendererType String 'circle' 绘制符号的形状，可选值circle 、rectangle
maxOpacity Number 1.0 最大透明度
minOpacity Number 0 最小透明度
frameCount Number 0 数据依据时态分段的个数,需要与可视化请求中frameCount个数一致
frameDuration Number 200 单位ms,每次动画间隔时间
expand Number 0 消失时边界渐变扩大的尺寸,取值为0-6之间
frameAnimStepCount Number 3 消失动画出现的次数,一次为一个frameDuration的时间长度
blendingMode String 'source-over' 指定新的绘制内容与画布当前已有内容的重叠方式,可选"source-over"(在已有图像上显示新图像)、"destination-over"(在新图像上显示已有图像)、"lighter"(二者叠加显示)

Layer.TiledTemporal的方法

方法名 返回值 说明
start() this 开始动画
stop() this 停止动画
pause() this 暂停动画
setStep([Number]time) this 直接绘制处在某一时刻的那一帧动画

OD线图

模块OD提供了一个制作流向、路径及其动态效果的图层

Layer.OD → Layer

示例 


var series = [];
var color = ['#a6c84c', '#ffa022'];
var data = [

    [{"fromName":"北京","toName":"上海","coords":[[116.4551,40.2539],[121.4648,31.2891]]},
    {"fromName":"北京","toName":"广州","coords":[[116.4551,40.2539],[113.5107,23.2196]]},
    {"fromName":"北京","toName":"南宁","coords":[[116.4551,40.2539],[108.479,23.1152]]},
    {"fromName":"北京","toName":"拉萨","coords":[[116.4551,40.2539],[91.1865,30.1465]]},
    {"fromName":"北京","toName":"长春","coords":[[116.4551,40.2539],[125.8154,44.2584]]},
    {"fromName":"北京","toName":"包头","coords":[[116.4551,40.2539],[110.3467,41.4899]]}],

    [{"fromName":"上海","toName":"昆明","coords":[[121.4648,31.2891],[102.9199,25.4663]]},
    {"fromName":"上海","toName":"郑州","coords":[[121.4648,31.2891],[113.4668,34.6234]]},
    {"fromName":"上海","toName":"长春","coords":[[121.4648,31.2891],[125.8154,44.2584]]},
    {"fromName":"上海","toName":"重庆","coords":[[121.4648,31.2891],[107.7539,30.1904]]},
    {"fromName":"上海","toName":"北京","coords":[[121.4648,31.2891],[116.4551,40.2539]]},
    {"fromName":"上海","toName":"丹东","coords":[[121.4648,31.2891],[124.541,40.4242]]}]
];
data.forEach(function (item, i) {
    series.push({
        color: color[i],
        width: 1,
        opacity: 1,
        curveness: 0.2,
        data: data[i]
    });
});

odLayer = new G.Layer.OD({
    type: 'airplane',
    series: series,
    speed: 10,
    trailLength: 0.2,
})

odLayer.addTo(map);

Layer.OD的构造函数

选项名 类型 默认值 说明
type String 'solid' OD线的线型，可选值'solid','dashed','arrow','airplane','comet'
series Array [{ "data": [{ "coords":[ [116.4551,40.2539] , [121.4648,31.2891] ] , "fromName":"北京" , "toName":"上海"}], "color":"#F84F40","width":1,"opacity":1,"curveness":0.2 }] data是设置每个分段中线的起点、终点的经纬度，起点终点名称，color是线的颜色，opacity是线的透明度，width是线的宽度，curveness是线的弯曲程度
speen Number 10 OD线动画速度，单位像素/每秒
trailLength Number 0.2 OD线动画特效尾迹长度，取值[0,1]
effectColor String '' OD线动画特效颜色，默认不设置和线颜色保持一致,可设置 RGB,RGBA,十六进制等多种格式

MapViz服务

模块mapviz实现了对接mapviz服务的一系列功能，能够用非常简单的代码实现展示mapviz项目，具体来说，只需要提供项目uid，ak等信息，就可以将数据上图的结果展示出来。 同时，mapviz模块也新增了两个图层:Layer.Timed.Heat和Layer.Timed.Tile，这两个图层会在mapviz模块内部使用，一般不单独使用

使用mapviz模块一般需要先加载heat, maps, fluid这三个模块，除非你清楚的知道项目中是否需要用到它们，否则都应该加载

Layer.Timed.Heat → Layer.Timed

Layer.Timed.Tile → Layer.Timed

MapViz

示例 

// 示例一：传入map
// 传入map是最简单的方式，并且可以自动添加组件和图例，并且将地图缩放到项目保存的位置

G.loadModules( [ 'heat', 'maps', 'fluid', 'mapviz' ], function() {
    G.MapViz.get( '4229f22d186a456781ba4873db04e14c', {
        host: 'http://geohey.com',                          // 数据请求地址
        ak: 'OTJlMGUxMGNkYTUzNGZhY2FlN2I2M2UzOGQ5ZWVhMTU',  // API Key
        tileHost: 'http://{s}.geohey.com',                  // 瓦片请求地址
        cluster: [ 's1', 's2', 's3', 's4', 's5', 's6', 's7', 's8' ] // 瓦片服务器集群
    }, map )

} );

// 示例二：传入callback获取数据
// 如果想自己处理图层和数据，可以给第四个参数传入一个callback来获取数据，也可以和示例一的方式同时使用

G.loadModules( [ 'heat', 'maps', 'fluid', 'mapviz' ], function() {
    G.MapViz.get( '4229f22d186a456781ba4873db04e14c', {
        host: 'http://geohey.com',                          // 数据请求地址
        ak: 'OTJlMGUxMGNkYTUzNGZhY2FlN2I2M2UzOGQ5ZWVhMTU',  // API Key
        tileHost: 'http://{s}.geohey.com',                  // 瓦片请求地址
        cluster: [ 's1', 's2', 's3', 's4', 's5', 's6', 's7', 's8' ] // 瓦片服务器集群
    }, null, function( data ) {
        // data包含图层以及项目原始数据等信息，下方是data结构
        /*
           {
                mapData: {
                    center: [-9006666.08710878, 4181352.011028123],
                    resolution: 135.62261255951645,
                    type: 'online',
                    uid: 'auto'
                },
                setting: {
                    plugin: [ 'layer-list', 'logo', 'legend' ]
                },
                vizData: { ... },   // 项目原始数据
                baseLayer: layer,   // 底图图层
                layerList: [
                    {
                        name: '中国各省省会',
                        animated: false,          // 是否为时态图层
                        geometryType: 'pt',       // 数据几何类型
                        fields: [ ... ],          // 字段列表
                        visible: true,            // 是否可见
                        dataUid: '...',           // 数据uid
                        dataType: 'public',       // 数据类型
                        extent: [ ... ],          // 数据范围
                        vizData: { ... },         // 此图层原始数据
                        config: { ... },          // viz config
                        layer: layer              // 图层，可以直接添加到map中
                        setFilter: setFilter      // 图层添加一个过滤条件方法
                        clearFilter: clearFilter  // 图层清除过滤条件方法
                    },
                    ...
                ]
            }
         */

        //第i个图层添加或者清除过滤条件
        /*

            data.layerList[i].setFilter( [String] key, [String] filter );  //第i个图层中添加一个过滤条件，并给该过滤条件设置一个key值

            data.layerList[i].clearFilter( [String] key );  //第i个图层中清除某个key值对应的过滤条件，如果不设置key值，则清除该图层所有过滤条件

        */
    } )

} );

方法

方法名 返回值 说明
get( [String] uid, [Object] options, [Map] map, [Function] callback ) this 获取指定项目uid的数据上图项目，会根据数据生成多个图层，并自动添加到map中(如果传入了map)，map和callback都是可选的，可以查看上方示例代码

options

选项名 类型 默认值 说明
host String 'http://geohey.com' 数据请求地址
ak String null API Key，可以在平台密钥管理页面申请
tileHost String 'http://{s}.geohey.com' 瓦片请求地址
cluster Array [ 's1', 's2', 's3', 's4', 's5', 's6', 's7', 's8' ] 瓦片服务器集群

事件

如果初始化时传入map参数，则在点击地图进行查询时可以监听到两个事件

事件名 说明
mapvizQueryStart 点击地图时立即触发，可以得到查询的范围以及所查询数据的信息
mapvizQueryEnd 服务端返回查询结果时触发，可以得到查询的结果

示例:

map.bind( 'mapvizQueryEnd', funciton( e ) {
    console.log( e.data );  // 得到所点击的点/线/面的数据
} )

G.loadModules( [ 'heat', 'maps', 'fluid', 'mapviz' ], function() {
    G.MapViz.get( '4229f22d186a456781ba4873db04e14c', {
        host: 'http://geohey.com',                          // 数据请求地址
        ak: 'OTJlMGUxMGNkYTUzNGZhY2FlN2I2M2UzOGQ5ZWVhMTU',  // API Key
        tileHost: 'http://{s}.geohey.com',                  // 瓦片请求地址
        cluster: [ 's1', 's2', 's3', 's4', 's5', 's6', 's7', 's8' ] // 瓦片服务器集群
    }, map )

} );

顶部