JavaScript SDK


SDK下载

当前版本下载链接:加载中…


概述

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

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

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

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

地图支持无极缩放

地图支持旋转

支持大数据量的显示

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

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

目前,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”也可替换为指定的版本号,默认加载最新版本。

基本概念

命名空间

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]], … ]
Extent [ xmin, ymin, xmax, ymax ]
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] 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 该值用于确保拖拽缩放的遮罩层显示在最上层
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 遮罩层的透明度
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 清除遮罩层
redraw() this 强制重绘地图
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 动画效果的持续时间,单位秒




图层 (Layer)

Layer

所有图层的抽象类

构造选项

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

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 图层显示的最小分辨率

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.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()

构造选项

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

关联矢量数据服务的图层,通过指定的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.FeatureServiceLayer.GraphicLayer

关联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){tsLayer.onSuccess(tileInfo, data)},
        error: function(xhr){tsLayer.onError(tileInfo)},
        complete: function(xhr){tsLayer.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.VectorCache → Layer.GraphicLayer

关联矢量切片服务的图层,通过指定的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 ] 分级分辨率数组




图形对象

Graphic

所有矢量图形的抽象类

构造选项

选项名 类型 默认值 说明
clickable Boolean false 对象是否可被用户点击
allowPan Boolean false 当对象的clickable为true时,默认地图是不可被拖动的,但是也可以通过设置这个属性为true让地图也可以拖动
vertexSize Number 16 编辑时节点的边长
vertexColor String ‘#fff’ 编辑时节点的边线颜色
vertexDashArray String [6, 2] 编辑时节点的虚线样式,取值如[10, 5, …],该选项在某些移动平台上无效
vertexFillColor String ‘#ff0’ 编辑时节点的填充色
vertexHighlightColor 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’时显示的文字内容
textFont String ‘Arial’ 文字字体,多个字体以逗号分隔
textStyle String ‘normal’ 可选值有 normal / italic / bold,分别对应正常字体、斜体、粗体
outline Boolean false 是否显示外边线,外边线相关选项对图片无效
outlineColor String ‘#000’ 外边线的颜色
outlineDashArray Array [] 外边线的虚线样式,取值如[10, 5, …],该选项在某些移动平台上无效
outlineWidth Number 2 外边线的宽度
outlineOpacity Number 1.0 外边线的透明度
fill Boolean true 是否填充,填充相关选项对shape为img的情况无效
fillColor String ‘#00f’ 填充的颜色
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 ‘#f00’ 颜色
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 ‘#0f0’ 外边线的颜色
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.3 填充的透明度

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 ‘#f00’ 外边线的颜色
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.3 填充的透明度
gradual Boolean false 从中心向外显示渐变效果,如设为true,则显示为圆心处不透明而边缘处透明度为fillOpacity值的渐变效果

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




事件 (Event)

事件的监听

在支持事件的对象上直接调用addListener()方法即可监听相应的事件。

示例

map.addListener('mousedown', function(e){
    console.log(e);
});

事件格式

事件 格式
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: [矢量数据所在的地图范围] }

事件方法

方法名 返回值 说明
cancel() this 取消后续事件监听的响应,事件监听按照添加监听的先后顺序从后往前触发,越晚添加的监听越早被触发

事件列表

Map的事件

事件类型 格式 说明
‘resize’ Event 地图容器被调整了尺寸
‘click’ 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 地图缩放结束
‘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 指定分片内的数据已经无用,可以进行清理操作




投影 (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 将经纬度坐标投影为中国特殊的偏移坐标
unproject( [Number] x, [Number] y ) Point 将中国特殊的偏移坐标反算为经纬度坐标




杂项

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

对象处理

方法

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

地图范围工具

方法

方法名 返回值 说明
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.OpenStreetMap → Layer.Tile

Layer.TiandituMap → Layer.Tile

Layer.NasaMap → 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.OpenStreetMap() OpenStreetMap地图
G.Layer.TiandituMap( [String] type ) 天地图地图,type可选 street/streetl/sate/satel/terrain/terrainl 之一
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.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;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提供了对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’,分别对应地图单位和像素单位
opacity Number 0.5 透明度
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([Boolean] forbidRedraw) 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 通过经纬度坐标获取网格对象