当前版本下载链接:加载中…
GeoHey JavaScript SDK是一个面向移动互联网时代,遵循移动优先、向下兼容、保持轻量原则的地图SDK。
除了一般地图SDK所有的功能,GeoHey JavaScript SDK还具有以下特性:
针对视网膜屏的兼容和优化
与微信等轻应用平台无缝融合
地图支持无极缩放
地图支持旋转
支持大数据量的显示
地图上可添加图表、视频等任意内容
提供第三方地图服务集成、聚类、热图、动态目标等多种扩展模块
目前,SDK支持Chrome、Firefox、Safari、IE(7+)、Android等PC和移动端浏览器,SDK会根据情况自动选择 HTML5 CANVAS、SVG、VML甚至是WebGL等技术来进行显示。
将下载的SDK包中的lib目录下所有的文件与文件夹部署到服务器上,并在HTML文件中引入必需的文件链接:
<link rel="stylesheet" href="g.css"> <script type="text/javascript" src="g.min.js"></script>
注意,虽然在HTML页面中只直接引用了’g.min.js’,但必须保证服务器上存在’g-canvas.min.js’、’g-svg.min.js’、’g-vml.min.js’、’g-webgl.min.js’,客户端会根据不同浏览器加载这几个渲染实现之一,这样的设计有助于保证浏览器下载库文件的体积,提升用户体验。
在HTML中合适的位置加入一个显示地图的div:
<body> <div id="mapContainer" style="width: 100%; height: 100%;"> </body>
在所有必要库文件加载完成后创建Map对象并进行后续的操作:
G.ready(function() { // 此时类库加载完成 var map = new G.Map('mapContainer'); var tileLayer = new G.Layer.Tile('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { cluster: ['a', 'b', 'c'] }); tileLayer.addTo(map); });
您还有可能需要修改g.css中一些图片的URL路径以符合个性化的需求。
您也可以在页面中直接引用在线库文件,而无需下载开发包
<link rel="stylesheet" href="http://dist.geohey.com/g-js/latest/lib/g.css"> <script type="text/javascript" src="http://dist.geohey.com/g-js/latest/lib/g.min.js"></script>
其中URL中的”latest”也可替换为指定的版本号,默认加载最新版本。
命名空间
SDK库使用命名空间“G”,请避免使用这个名称作其它用途,否则类库可能无法正常工作。另外,在“g.css”中定义了若干名为’g-xxx’的CSS样式,请确保其它自定义样式不与之冲突。
版本
通过命名空间下的version对象可以查看当前版本。
console.log(G.version);
全局参数
在加载SDK前,可以定义一些全局参数来进行特殊的控制,定义方式如下:
<script type="text/javascript"> G_OFF_CANVAS = true; </script> <script type="text/javascript" src="g.min.js"></script>
可用的全局参数包括:
参数名 | 参数类型 | 说明 |
---|---|---|
G_OFF_CANVAS | Boolean | 不使用 HTML5 Canvas 进行显示,对于大多数情况应该避免使用该参数 |
G_OFF_CANVAS_OFFSCREEN | Boolean | 关闭 HTML5 Canvas 的离屏渲染特性,对于大多数情况应该避免使用该参数 |
G_OFF_CSS3D | Boolean | 关闭 HTML5 中的CSS 3D 变换功能(大多数Canvas的3D变换会使用硬件加速),对于大多数情况应该避免使用该参数 |
G_CANVAS_RATIO | Boolean | 强制指定HTML5 Canvas的像素比例,对于超高分屏为了性能可能需要强制指定较低的像素比例 |
G_ON_WEBGL | Boolean | 开启 HTML5 的 WebGL 渲染功能,WebGL在渲染大数据量的时候有明显优势,但有些图形效果会缺失,目前WebGL模式仅供测试 |
G_NOT_SET_VIEWPORT | Boolean | 阻止类库修改viewport设置,默认情况下类库会帮助设置页面使其适合在移动设备上显示 |
模块
SDK可以根据需要加载模块,比如想要加载第三方地图,可以动态加载一个名为“maps”的模块,该模块中包含对各种第三方地图的集成。您也可以根据需要开发自己的模块。
G.loadModule('maps', function() { // 开始使用模块内的功能 });
你也可以同时加载多个模块,确保所有的模块均加载成功后再进行下一步操作。
G.loadModules(['maps', 'draw'], function() { // 开始使用模块内的功能 });
部署在服务器端的模块只有在调用loadModule方法的时候才会去请求.
点击这里 可以查看所有可用的模块
效果
除非有特殊的设置,如在全局参数中使用G_OFF_CANVAS设置关闭HTML5 Canvas功能等,否则浏览器会自动选择最佳效果进行显示。例如Chrome等现代浏览器会选择Canvas或SVG进行图形渲染;IE7/8则会选择VML等。不同的绘制方法不影响API的调用,但是某些特殊效果(如缩放动画)在低版本的浏览器中会自动退化(如IE7/8)。
几何对象
SDK内部使用尽量简单的几何对象描述,如下表所列:
几何对象类型 | 格式 |
---|---|
Geometry | |
Point | [ x, y ] |
Polyline | [ [x1, y1], …, [xn, yn] ] |
Polygon | [ [[x1, y1], …, [xn, yn]], … ] |
Extent | [ xmin, ymin, xmax, ymax ] |
Circle | [ cx, cy, r ] |
地图分辨率
分辨率 (Resolution,API中简写为res) = 地图表示的实际尺寸 / 屏幕显示的像素尺寸
分辨率越小,地图越详细。
Map是API的核心类,用于所有数据的显示和操作。
var map = new G.Map('mapContainer',{ maxRes: 160000, minRes: 19.109257, initStatus: {center: [0, 0]} });
构造函数 | 说明 |
---|---|
G.Map( [String] id, [Object] options ) | 基于一个给定的div容器创建Map对象,options为可选的构造选项 |
构造选项
选项名 | 类型 | 默认值 | 说明 |
---|---|---|---|
minRes | Number | 0.298582 | 地图的最小分辨率,对应放大到最详细的状态 |
maxRes | Number | 156543.033928 | 地图的最大分辨率,对应缩小到最全图的状态 |
maxExtent | Extent | [-20037508.342784, -20037508.342784, 20037508.342784, 20037508.342784] | 地图的最大范围,超出范围的数据将不会被显示,同时,对地图进行拖动也会限制在这个范围之内 |
scrollPage | Boolean | false | 是否允许鼠标滚动页面,默认在地图上滚动鼠标不会滚动页面而是缩放地图 |
zoomAnim | Boolean | true | 缩放时是否支持动画效果 |
zoomAnimDuration | Number | 0.5 | 缩放时动画效果的持续时间,单位秒 |
panAnim | Boolean | true | 拖拽时是否支持惯性移动 |
panAnimMaxSpeed | Number | 1000 | 惯性移动的最大速度,单位像素/秒 |
panAnimDuration | Number | 0.5 | 惯性移动的持续时间,单位秒 |
tolerance | Number | 1e-5 | 坐标值的容差 |
topZIndex | Number | 100 | 该值用于确保拖拽缩放的遮罩层显示在最上层 |
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 | 强制重绘地图 |
isPrintable() | Boolean | 是否支持打印 |
print([Number] imageWidth, [Number] imageHeight) | String | 打印地图为图片,返回Base64编码的图片数据,Layer.Html等外置的内容不会被打印到地图上,imageWidth和imageHeight为导出的图片大小,如果指定则在打印的时候会按照中心对多余部分进行裁剪并缩放 |
destroy() | undefined | 清除地图对象 |
Map.zoomTo/Map.zoomExtent/Map.zoomIn/Map.zoomOut/Map.centerAt选项
选项名 | 类型 | 默认值 | 说明 |
---|---|---|---|
duration | Number | 0.5 | 动画效果的持续时间,单位秒 |
fireEnd | Boolean | true | 动画播放完成后是否触发相应的事件 |
ignoreAnim | Boolean | false | 是否忽略动画效果 |
Map.panBy选项
选项名 | 类型 | 默认值 | 说明 |
---|---|---|---|
duration | Number | 0.5 | 动画效果的持续时间,单位秒 |
ease | Number | 0.3 | 控制惯性移动的减缓速度,取值为0~1,值越小惯性衰减越快 |
Map.rotateTo选项
选项 | 类型 | 默认值 | 说明 |
---|---|---|---|
duration | Number | 0.5 | 动画效果的持续时间,单位秒 |
所有图层的抽象类
构造选项
选项名 | 类型 | 默认值 | 说明 |
---|---|---|---|
minRes | Number | undefined | 图层出现的最小分辨率 |
maxRes | Number | undefined | 图层出现的最大分辨率 |
方法
方法名 | 返回值 | 说明 |
---|---|---|
addTo( [Map] map ) | this | 将图层添加到Map中 |
remove() | this | 将图层从Map中移除 |
getOrder() | Number | 获取当前图层在地图中的顺序,如不在地图中则返回-1 |
bringToOrder([Number] order) | this | 将图层移动到指定的顺序 |
bringToTop() | this | 将图层移动到最上层 |
bringToBottom() | this | 将图层移动到最下层 |
bringUp([Number] delta) | this | 将图层向上移几层 |
bringDown([Number] delta) | this | 将图层向下移几层 |
hide() | this | 隐藏图层 |
show() | this | 显示图层 |
isVisible() | Boolean | 图层当前是否可见 |
clear() | this | 清除图层内容,如果是服务图层则会重新加载新内容 |
Layer.Tile → Layer
Tile Layer 瓦片图层,用于加载传统的基于瓦片图片的地图。
示例
var osmLayer = new G.Layer.Tile('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { cluster: ['a', 'b', 'c'] }); osmLayer.addTo(map);
var arcgisLayer = new G.Layer.Tile('http://server.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer/tile/{z}/{y}/{x}'); arcgisLayer.addTo(map); var bingUrl = function(z, x, y) { var key = '', i; for (i = z; i > 0; i--) { var digit = '0'; var mask = 1 << (i - 1); if ((x & mask) != 0) { digit++; } if ((y & mask) != 0) { digit++; digit++; } key += digit; } return 'http://t{s}.tiles.ditu.live.com/tiles/r' + key + '.png?g=2335'; } var bingLayer = new G.Layer.Tile(bingUrl, { cluster: [1, 2, 3] }); bingLayer.addTo(map);
构造
构造函数 | 说明 |
---|---|
G.Layer.Tile( [String/Function] url, [Object] options ) | url为瓦片图片的参数化地址或地址生成函数,url或调用url函数的返回值中可出现{s}、{z}、{x}、{y}、{i}5个参数,分别代表服务器集群编号、缩放层级、X方向图片索引、Y方向图片索引、Retina支持;如果url为函数,其形式应为function(z, x, y),z、x、y定义同上;options为可选的构造选项 |
构造选项
选项名 | 类型 | 默认值 | 说明 |
---|---|---|---|
cluster | Array | [] | 服务器集群 |
errorTileUrl | String | ‘’ | 未加载切片的替代图片 |
keepResample | Boolean | true | 是否保留其它级别的重采样图片,如果需要显示如交通图等本身带有透明度的图片时需要设置为false |
opacity | Number | 1.0 | 图层透明度,如果设置小于1的值,则同时keepResample自动为false效果 |
retryTimes | Number | 3 | 加载切片的失败重试次数 |
tileLiveMs | Number | 600000 | 瓦片在浏览器中有效的最长毫秒数 |
tileEnlarge | Boolean | true | 是否允许瓦片在绘制时适时放大1个像素用于避免可能的接缝,一般如果瓦片带有半透明应将其设置为false |
crossOrigin | String | ‘*’ | Cross-Origin设置,如果服务器不支持,请设置为空字符串 |
originX | Number | -20037508.342787 | 切片原点的X坐标 |
originY | Number | 20037508.342787 | 切片原点的Y坐标 |
minX | Number | -20037508.342787 | 图层范围的最小X坐标 |
maxX | Number | 20037508.342787 | 图层范围的最大X坐标 |
minY | Number | -20037508.342787 | 图层范围的最小Y坐标 |
maxY | Number | 20037508.342787 | 图层范围的最大Y坐标 |
tileSize | Number | 256 | 切片的尺寸,单位像素 |
zoomReses | Array | Google的分级,[ 156543.033928, 78271.516964, …, 0.298582 ] | 分级分辨率数组 |
maxRes | Number | 156543.033928 | 图层显示的最大分辨率 |
minRes | Number | 0.29858215 | 图层显示的最小分辨率 |
Layer.Graphic → Layer
矢量图形图层,图层中可以放置各种Graphic,如点 [Graphic.Point]、线段 [Graphic.Polyline]、 多边形 [Graphic.Polygon]、 圆 [Graphic.Circle]等,这些矢量图形都会在浏览器中被实时地显示给用户。
示例
var layer = (new G.Layer.Graphic()).addTo(map); layer.setStyle(['type', 'num'], ['=="city"', '>0'], { // 给type字段值等于'city'且num字段值大于0的矢量图形对象指定特定的样式 fillColor: '#000' }); var g = new G.Graphic.Point([0, 0], { // 这个对象将被显示成上面指定的样式 type: 'city', num: 0 }); g.addTo(layer);
构造
构造函数 | 说明 |
---|---|
G.Layer.Graphic() |
方法
方法名 | 返回值 | 说明 |
---|---|---|
add( [Graphic] graphic, [Number] id, [Boolean] noRedraw ) | Number | 添加一个图形对象,并返回id,如果指定id,则判断该id是否存在,如存在则直接返回已存在的图形对象的id,如指定noRedraw为true则暂不重绘,这在添加大量数据时对性能有帮助 |
get( [Number] id ) | Graphic | 根据指定的id返回图层上某个对象 |
all() | Array | 返回所有对象 |
query( [Extent] extent ) | Array | 返回给定范围内的对象 |
count() | Number | 获取图层上所有对象的个数 |
clear() | this | 移除图层上所有对象 |
setStyle( [Array] fields, [Array] conditions, [Object] options ) | this | 设置满足某条件下对象的显示样式,options为指定的样式,它将会被合并到每个图形对象的options中;如fields或conditions为空,则设置为图层默认样式 |
clearStyles( [Object] options ) | this | 清空所有样式,options为清空后的样式,它将会被合并到每个图形对象的options中 |
calcDataExtent( [Number] expand ) | Extent | 根据所有对象的位置计算并返回一个地图范围,expand为额外的缩放倍数,如不指定则返回正好包括所有对象的地图范围 |
Layer.Html → Layer
HTML图层,图层中可以放置HTML内容,这些HTML内容都会以DIV的形式在浏览器中被实时地显示给用户。
示例
var layer = (new G.Layer.Html()).addTo(map); layer.addHtml('<input type="button" value="...">', 0, 0);
构造
构造函数 | 说明 |
---|---|
G.Layer.Html() |
方法
方法名 | 返回值 | 说明 |
---|---|---|
addHtml( [String] html, [Number] x, [Number] y) | Number | 在指定坐标处添加一个HTML对象,并返回id |
getHtml( [Number] id ) | HTMLElement | 根据指定的id返回图层上某个HTML对象 |
removeHtml( [Number] id ) | this | 根据指定的id移除图层上某个HTML对象 |
Layer.Image → Layer
Image图层,图层中可以放置图片内容,这些图片会自动缩放以维持自身在地图中固定的位置。
示例
var layer = (new G.Layer.Image()).addTo(map); layer.addImage('a.jpg', 0, 0, 1e6, 1e6);
构造
构造函数 | 说明 |
---|---|
G.Layer.Image() |
构造选项
选项名 | 类型 | 默认值 | 说明 |
---|---|---|---|
errorImageUrl | String | ‘’ | 未加载图片的替代图片 |
opacity | Number | 1.0 | 图层透明度,如果设置小于1的值,则同时keepResample自动为false效果 |
retryTimes | Number | 3 | 加载切片的失败重试次数 |
crossOrigin | String | ‘*’ | Cross-Origin设置,如果服务器不支持,请设置为空字符串 |
方法
方法名 | 返回值 | 说明 |
---|---|---|
addImage( [String] imageUrl, [Number] xmin, [Number] ymin, [Number] xmax, [Number] ymax) | Number | 在指定矩形形状内放置一个图片,并返回id |
getImage( [Number] id ) | Image | 根据指定的id返回图层上某个图片对象 |
removeImage( [Number] id ) | this | 根据指定的id移除图层上某个图片对象 |
Layer.FeatureService → Layer.Graphic → Layer
关联矢量数据服务的图层,通过指定的HTTP请求自动获取数据并显示在图层上。
示例
var func = function(extent) { // 该请求是指定地图的一个范围,返回这个范围中所有的数据 var url = 'http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/FeatureServer/0/query'; var data = { // 指定对该服务进行请求的参数 f: 'json', where: '1=1' }; if(extent){ data.geometryType = 'esriGeometryEnvelope'; data.geometry = extent[0] + ',' + extent[1] + ',' + extent[2] + ',' + extent[3]; } var requestOptions = { responseType: 'JSONP', data: data, success: function(req, data) { // 解析响应的数据并生成Graphic对象添加到图层上 this.onSuccess(extent); }, error: function(req) { this.onError(extent); }, complete: function(req) { this.onComplete(extent); } }; G.Util.ajax(url, requestOptions); }; var layer = new G.Layer.FeatureService(func); layer.addTo(map);
构造
构造函数 | 说明 |
---|---|
G.Layer.FeatureService( [Function] func, [Object] options ) | func为根据范围获取数据的具体实现方法;options为可选的构造选项 |
构造选项
选项名 | 类型 | 默认值 | 说明 |
---|---|---|---|
mode | String | ‘all’ | 从服务获取数据的方式,可选all、tile,分别对应一次获取全部数据、按块获取数据 |
vacuumCount | Number | 1000 | 图层上对象大于这个数值时会适时清理屏幕外的不可见对象 |
如果设置mode为tile,注意确认Layer.FeatureService的层级设置,其默认值为类Google样式的互联网地图服务,如地图的空间参考与之并不一致,请注意修改。
Layer.GeoHeyFeature → Layer.FeatureService → Layer.Graphic → Layer
关联GeoHey数据服务的图层,通过指定的URL地址和HTTP请求模式自动获取数据并显示在图层上。
示例
var layer = new G.Layer.GeoHeyFeature('http://geohey.com/s/data/9ae0fb8cf97f4566a5681d742b6fae4c', { apiKey: 'MzE5YTE0NGJkNDkyNDhjNWE5Y2QwOWM1NDljZmFhZWQ' }); layer.addTo(map);
构造
构造函数 | 说明 |
---|---|
G.Layer.GeoHeyFeature( [String] url, [Object] options ) | url为指向GeoHey数据服务的地址;options为可选的构造选项 |
构造选项
选项名 | 类型 | 默认值 | 说明 |
---|---|---|---|
apiKey | String | ‘’ | 用户的API访问凭证 |
where | String | ‘1=1’ | 过滤条件 |
outFields | String | ‘’ | 返回的字段列表,格式如’[id, name]’,如留空表示返回所有字段 |
limit | Number | 1000 | 限制返回的结果数量 |
Layer.Label → Layer
关联标注服务的图层,通过指定的URL地址自动获取标注数据并显示在图层上。标注图层提供对文字、图标等标注信息不同于传统瓦片图片的效果,在地图旋转、缩放的情况下均有较好的显示效果。该功能需特殊的服务器功能支持,普通的在线地图服务并无此功能。
示例
var layer = new G.Layer.Label('../data/label/{z}_{x}_{y}{i}.json', {icons: '../data/icons/'}); layer.addTo(map);
构造
构造函数 | 说明 |
---|---|
G.Layer.Label( [String] url, [Object] options ) | url为指向服务的地址,url中可出现{s}、{z}、{x}、{y}、{i}6个参数,分别代表服务器集群编号、缩放层级、X方向图片索引、Y方向图片索引、Retina支持;options为可选的构造选项 |
构造选项
选项名 | 类型 | 默认值 | 说明 |
---|---|---|---|
icons | String | ‘’ | 所用到图标所在的URL,该URL会添加到icon的相对路径之前 |
cluster | Array | [] | 服务器集群 |
crossOrigin | String | ‘*’ | Cross-Origin设置,如果服务器不支持,请设置为空字符串 |
originX | Number | -20037508.342787 | 标注分块的原点X坐标 |
originY | Number | 20037508.342787 | 标注分块的原点Y坐标 |
minX | Number | -20037508.342787 | 图层范围的最小X坐标 |
maxX | Number | 20037508.342787 | 图层范围的最大X坐标 |
minY | Number | -20037508.342787 | 图层范围的最小Y坐标 |
maxY | Number | 20037508.342787 | 图层范围的最大Y坐标 |
tileSize | Number | 256 | 标注分块的尺寸,单位像素 |
zoomReses | Array | Google的分级,[ 156543.033928, 78271.516964, …, 0.298582 ] | 分级分辨率数组 |
Layer.TiledService → Layer
通用的分片数据图层,通过指定的HTTP请求模式自动获取数据并可进行进一步操作。
示例
var layer = new G.Layer.TiledService(function(x, y, z){ var tileInfo = [x, y, z]; G.Util.ajax('../data/label/' + z + '_' + x + '_' + y + '.json', { responseType: 'json', success: function(xhr, data){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.Graphic → Layer
关联矢量切片服务的图层,通过指定的URL地址自动获取矢量切片数据并显示在图层上。矢量切片图层提供对矢量数据不同于传统瓦片图片的效果。该功能需特殊的服务器功能支持,普通的在线地图服务并无此功能。
示例
var layer = new G.Layer.VectorCache('http://static.map.net/s/china/vector/{z}/{y}/{x}/{d}'); layer.addTo(map);
构造
构造函数 | 说明 |
---|---|
G.Layer.VectorCache( [String] url, [Object] options ) | url为指向服务的地址,url中可出现{s}、{z}、{x}、{y}、{d}五个参数,分别代表服务器集群编号、缩放层级、X方向图片索引、Y方向图片索引、服务端数据类型;options为可选的构造选项 |
构造选项
选项名 | 类型 | 默认值 | 说明 |
---|---|---|---|
cluster | Array | [] | 服务器集群 |
originX | Number | -20037508.342787 | 标注分块的原点X坐标 |
originY | Number | 20037508.342787 | 标注分块的原点Y坐标 |
minX | Number | -20037508.342787 | 图层范围的最小X坐标 |
maxX | Number | 20037508.342787 | 图层范围的最大X坐标 |
minY | Number | -20037508.342787 | 图层范围的最小Y坐标 |
maxY | Number | 20037508.342787 | 图层范围的最大Y坐标 |
tileSize | Number | 256 | 标注分块的尺寸,单位像素 |
zoomReses | Array | Google的分级,[ 156543.033928, 78271.516964, …, 0.298582 ] | 分级分辨率数组 |
所有矢量图形的抽象类
构造选项
选项名 | 类型 | 默认值 | 说明 |
---|---|---|---|
clickable | Boolean | false | 对象是否可被用户点击 |
allowPan | Boolean | false | 当对象的clickable为true时,默认地图是不可被拖动的,但是也可以通过设置这个属性为true让地图也可以拖动 |
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
点图形
示例
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,分别对应正常字体、斜体、粗体 |
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 | ‘#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
线图形
示例
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
多边形图形
示例
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
多边形图形
示例
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
组合图形
示例
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 | 返回所有子图形 |
在支持事件的对象上直接调用
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 | 地图缩放结束 |
‘pinchStart’ | Event | 用手指捏放地图时触发 |
‘pinch’ | Event | 捏合地图中 |
‘pinchEnd’ | Event | 捏合地图结束 |
‘layerAdded’ | LayerEvent | 有图层被添加到地图上 |
‘layerRemoved’ | LayerEvent | 有图层从地图上被移除 |
‘popupShown’ | Event | 气泡被弹出 |
‘popupHidden’ | Event | 气泡被隐藏 |
Layer.Tile的事件
事件类型 | 格式 | 说明 |
---|---|---|
‘tileStart’ | TileEvent | 瓦片图片开始加载 |
‘tileSuccess’ | TileEvent | 瓦片图片加载成功 |
‘tileError’ | TileEvent | 瓦片图片加载失败 |
‘allLoaded’ | Event | 所有需要加载的瓦片图片均完成请求,但不保证所有请求都成功 |
事件类型 | 格式 | 说明 |
---|---|---|
‘graphicAdded’ | GraphicEvent | 有图形被添加到图层上 |
‘graphicRemoved’ | GraphicEvent | 有图形从图层上被移除 |
‘graphicGeomUpdated’ | GraphicEvent | 有图形的几何信息被更新 |
‘graphicAttrUpdated’ | GraphicEvent | 有图形的属性信息被更新 |
‘graphicToTop’ | GraphicEvent | 图形被移动到图层的最上层 |
‘graphicClicked’ | GraphicEvent | 图形被点击 |
‘graphicOver’ | GraphicEvent | 鼠标进入对象 |
‘graphicOut’ | GraphicEvent | 鼠标移出对象 |
‘graphicStartEdit’ | GraphicEvent | 开始编辑某图形 |
‘graphicEndEdit’ | GraphicEvent | 结束编辑某图形 |
事件类型 | 格式 | 说明 |
---|---|---|
‘loadTileStart’ | FeatureServiceEvent | 指定范围内的数据开始加载 |
‘loadTileSuccess’ | FeatureServiceEvent | 指定范围内的数据加载成功 |
‘loadTileError’ | FeatureServiceEvent | 指定范围内的数据加载失败 |
‘loadTileComplete’ | FeatureServiceEvent | 指定范围内的数据加载结束,无论请求是否成功均触发该事件 |
‘loadAllStart’ | FeatureServiceEvent | 所有数据开始加载 |
‘loadAllSuccess’ | FeatureServiceEvent | 所有数据加载成功 |
‘loadAllError’ | FeatureServiceEvent | 所有数据加载失败 |
‘loadAllComplete’ | FeatureServiceEvent | 所有数据加载结束,无论请求是否成功均触发该事件 |
事件类型 | 格式 | 说明 |
---|---|---|
‘loadTileStart’ | TiledServiceEvent | 指定分片内的数据开始加载 |
‘loadTileSuccess’ | TiledServiceEvent | 指定分片内的数据加载成功 |
‘loadTileError’ | TiledServiceEvent | 指定分片内的数据加载失败 |
‘loadTileComplete’ | TiledServiceEvent | 指定分片内的数据加载结束,无论请求是否成功均触发该事件 |
‘unusedTile’ | TiledServiceEvent | 指定分片内的数据已经无用,可以进行清理操作 |
通过完整的对象名
G.Proj.WebMercator
可在经纬度坐标和Web Mercator坐标间进行转换。
方法名 | 返回值 | 说明 |
---|---|---|
project( [Number] longitude, [Number] latitude ) | Point | 将经纬度坐标投影为Web Mercator坐标 |
unproject( [Number] x, [Number] y ) | Point | 将Web Mercator坐标反算为经纬度坐标 |
通过完整的对象名
G.Proj.Gcj
可在标准经纬度坐标和中国特殊的偏移处理后的坐标间进行转换。
方法名 | 返回值 | 说明 |
---|---|---|
project( [Number] longitude, [Number] latitude ) | Point | 将经纬度坐标投影为中国特殊的偏移坐标 |
unproject( [Number] x, [Number] y ) | Point | 将中国特殊的偏移坐标反算为经纬度坐标 |
方法
方法名 | 返回值 | 说明 |
---|---|---|
Util.ajax( [String] url, [Object] options ) | XMLHttpRequest/Script | 发送一个AJAX请求,并返回请求对象;options为AJAX选项 |
Util.ajaxCancel( [XMLHttpRequest/Script] request ) | undefined | 取消AJAX请求;request为需要取消的AJAX请求对象 |
AJAX选项
选项名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | String | ‘GET’ | 请求方法;如指定了JSONP方式,则只会使用GET方法发送请求 |
contentType | String | ‘application/x-www-form-urlencoded; charset=UTF-8’ | 发送数据给服务器时内容编码类型 |
headers | Object | 额外需要设置的HTTP请求头 | |
data | Object | 请求发送的数据;GET方法将数据附加到URL,POST方法根据contentType设置进行编码后作为请求体发送 | |
responseType | String | ‘DATA’ | 预期服务器返回的数据类型,可选DATA/TEXT/XML/JSON/JSONP |
jsonp | String | 自动生成 | JSONP的回调函数名,大多数情况不需自行指定 |
jsonpCallback | String | ‘callback’ | 服务器指定JSONP回调函数的参数名 |
success | Function(request, data) | undefined | 请求成功后的回调函数,request为请求对象,data为返回值 |
error | Function(request) | undefined | 请求失败后的回调函数,request为请求对象 |
complete | Function(request) | undefined | 请求完成后的回调函数,无论请求成功或失败都会调用,request为请求对象 |
方法
方法名 | 返回值 | 说明 |
---|---|---|
Util.trim( [String] str ) | String | 移除字符串首尾空格 |
Util.renderString( [String] template, [Object] data ) | String | 根据一个字符串模板填充数据并返回结果字符串,模板中以大括号为参数;如template为’a |
方法
方法名 | 返回值 | 说明 |
---|---|---|
Util.merge( [[Object]] objs ) | Object | 合并对象值;如调用merge(obj1, obj2, obj3),则会将obj2、obj3对象的值依次合并到obj1中,并返回obj1对象 |
方法
方法名 | 返回值 | 说明 |
---|---|---|
Util.colorHex( [Number] red, [Number] green, [Number] blue ) | String | 返回RGB颜色对应的HTML描述,返回格式如’#0xff98’ |
Util.colorRgb( [String] hex ) | Array | 返回HTML描述的颜色对应的RGB数值,返回格式如[255, 0, 0] |
方法
方法名 | 返回值 | 说明 |
---|---|---|
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.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.NasaMap( [String] layer, [String] time, [Number] srid, [String] resolution, [String] format) | NASA提供的系列地图,内容可参考 NASA GIBS。其中layer是NASA提供的图层名字,比如 ‘MODIS_Aqua_Land_Surface_Temp_Day’,time为数据的时间,如‘2014-04-09’,srid可选4326(WGS 84)与3857(Web Mercator),resolution可选‘250m’/‘500m’/‘1km’/‘2km’ ,format可选’jpg’/’png’。注意,并不是每个地图都支持所有格式,每个地图支持的格式详见链接 NASA GIBS。 |
G.Layer.OpenStreetMap() | OpenStreetMap地图 |
G.Layer.QQMap( [String] type ) | 腾讯地图,type可选 street/sate/satel 之一 |
G.Layer.TiandituMap( [String] type ) | 天地图地图,type可选 street/streetl/sate/satel/terrain/terrainl 之一 |
在经纬度坐标和百度坐标间进行转换
方法名 | 返回值 | 说明 |
---|---|---|
G.Proj.Baidu.project( [Number] longitude, [Number] latitude ) | Point | 将标准经纬度坐标投影为百度经纬坐标 |
G.Proj.Baidu.unproject( [Number] x, [Number] y ) | Point | 将百度经纬坐标反算为标准经纬度坐标 |
G.Proj.Baidu.projectM( [Number] longitude, [Number] latitude ) | Point | 将标准经纬度坐标投影为百度米制坐标 |
G.Proj.Baidu.unprojectM( [Number] x, [Number] y ) | Point | 将百度米制坐标反算为标准经纬度坐标 |
模块draw提供了一个可供绘制的图层
Layer.Draw → Layer.Graphic
示例
drawLayer = new G.Layer.Draw(); drawLayer.addTo(map); drawLayer.addListener('drawEnd', function(e){ console.log(e.graphic); }); drawLayer.startDraw('circle', {fillColor:'#f00'});
Draw模块绘制多边形和线的操作略加说明:用户可以通过双击结束一个对象的绘制,但是这个双击的位置不作为最后一个节点保存,因为双击操作确定的位置一般不太准确。
构造
构造函数 | 说明 |
---|---|
G.Layer.Draw() |
方法
方法名 | 返回值 | 说明 |
---|---|---|
startDraw( [String] type , [Object] options) | this | 进入可绘制状态,type为需要绘制的图形类型,可选值为 circle/point/polyline/polygon/freepolyline/freepolygon/rect;options为给需要绘制的图形设置的样式,可参考各种Graphic的构造选项 |
endDraw() | this | 退出可绘制状态 |
事件
事件类型 | 格式 | 说明 |
---|---|---|
‘drawStart’ | GraphicEvent | 开始绘制一个图形 |
‘draw’ | GraphicEvent | 正在绘制一个图形,图形的几何属性有变化时触发 |
‘drawEnd’ | GraphicEvent | 结束绘制一个图形 |
模块cluster提供了进行聚类的方法,可以将若干点显示为一个带数字的图形。
Layer.Cluster → Layer.Graphic
Graphic.Cluster → Graphic.Group
示例
layer = new G.Layer.Cluster({ breakValues: [3, 5, 10] }); layer.addTo(map); layer.addListener('clusterClicked', function(e){ var cluster = e.cluster; }); var g = new G.Graphic.Point([0, 0]); layer.addPoint(g);
构造
构造函数 | 说明 |
---|---|
G.Layer.Cluster( [Object] options ) | options为可选的构造选项 |
Layer.Cluster的构造选项
选项名 | 类型 | 默认值 | 说明 |
---|---|---|---|
radius | Number | 50 | 聚类的半径,单位像素 |
showRealRes | Number | null | 当地图分辨率小于该值时,不显示聚类 |
breakValues | Array | [5, 10, 20] | 聚类中包含点数量的分类,不同分类有不同的显示样式 |
breakShapeSizes | Array | [24, 32, 40, 48] | 不同分类显示图形的尺寸,注意,该数组长度应比breakValues多一个 |
breakFillColors | Array | [‘#71e28c’, ‘#58d7dd’, ‘#efcd45’, ‘#ff936a’] | 不同分类显示图形的填充色,注意,该数组长度应比breakValues多一个 |
breakFillOpacities | Array | [1.0, 1.0, 1.0, 1.0] | 不同分类显示图形的透明度,注意,该数组长度应比breakValues多一个 |
breakOutlines | Array | [true, true, true, true] | 不同分类是否显示图形描边,注意,该数组长度应比breakValues多一个 |
breakOutlineColors | Array | [‘#71e28c’, ‘#58d7dd’, ‘#efcd45’, ‘#ff936a’] | 不同分类显示图形的描边颜色,注意,该数组长度应比breakValues多一个 |
breakOutlineOpacities | Array | [0.6, 0.6, 0.6, 0.6] | 不同分类显示图形的描边透明度,注意,该数组长度应比breakValues多一个 |
breakOutlineWidths | Array | [12, 16, 20, 24] | 不同分类显示图形的描边宽度,注意,该数组长度应比breakValues多一个 |
breakTextSizes | Array | [16, 18, 20, 24] | 不同分类显示图形的文字大小,注意,该数组长度应比breakValues多一个 |
breakTextColors | Array | [‘#fff’, ‘#fff’, ‘#fff’, ‘#fff’] | 不同分类显示图形的文字颜色,注意,该数组长度应比breakValues多一个 |
事件格式
事件 | 格式 |
---|---|
ClusterEvent | { type: [事件类型], target: [触发事件的对象], cluster: [聚类对象] } |
事件
事件类型 | 格式 | 说明 |
---|---|---|
‘clusterClicked’ | ClusterEvent | 聚类被点击 |
‘clusterOver’ | ClusterEvent | 鼠标进入对象 |
‘clusterOut’ | ClusterEvent | 鼠标移出对象 |
方法
方法名 | 返回值 | 说明 |
---|---|---|
addPoint( [Graphic.Point] pointGraphic , [Boolean] redrawNow) | String | 添加一个点 |
clear() | this | 清空所有点 |
count() | Number | 计算所有点数量 |
diveIn( [Graphic.Cluster] cluster ) | this | 放大聚类图形,显示其下一级子图形 |
模块arcgis提供了对ArcGIS服务的访问
Layer.ArcGISFeature → Layer.VectorService
示例
polygonLayer = new G.Layer.ArcGISFeature('http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0', { fields: 'objectid' }); polygonLayer.addTo(map);
Layer.ArcGISFeature的构造
构造函数 | 说明 |
---|---|
G.Layer.ArcGISFeature( [String] url, [Object] options ) | url为指向某个ArcGIS Feature服务的地址;options为可选的构造选项 |
|
模块heat提供了客户端的热度图功能,该模块目前只在支持Canvas的浏览器中有效
Layer.Heat → Layer
示例
heatLayer = new G.Layer.Heat({topValue:2, radius:2000000, radiusUnit:'map'}); heatLayer.addTo(map); map.addListener('click', function(e){ heatLayer.addDataPoint(e.mapX, e.mapY, 1, true); });
Layer.Heat的构造
构造函数 | 说明 |
---|---|
G.Layer.Heat( [Object] options ) | options为可选的构造选项 |
Layer.Heat的构造选项
选项名 | 类型 | 默认值 | 说明 |
---|---|---|---|
radius | Number | 30 | 绘制热点的半径 |
radiusUnit | String | ‘pixel’ | 绘制热点的半径单位,可选有’map’和’pixel’,分别对应地图单位和像素单位 |
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提供了动态对象的支持
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 | 通过经纬度坐标获取网格对象 |