API 手册

全局 API

methods

GL.Proxy

缓存/代理

methods

默认获取项目中assets/目录里的iconsimages目录的图片。所以获取图标时,key的组成是icons.0001(目录名.图片名)或者images.gaea

GL.Hub

全局事件

events

methods

GL.Http

ajax 请求工具

example

GL.Http(config)
.then(function(response) {
console.log('success');
})
.catch(function(error) {
console.log('error');
});

//or

GL.Http.get('test')
.then(function(response) {
console.log('success');
})
.catch(function(error) {
console.log('error');
});

config

{
// `url` 是用于请求的服务器 URL
url: '/user',

// `method` 是创建请求时使用的方法
method: 'get', // 默认是 get

// `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
baseURL: 'https://some-domain.com/api/',

// `transformRequest` 允许在向服务器发送前,修改请求数据
// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
transformRequest: [function (data) {
// 对 data 进行任意转换处理

return data;
}],

// `transformResponse` 在传递给 then/catch 前,允许修改响应数据
transformResponse: [function (data) {
// 对 data 进行任意转换处理

return data;
}],

// `headers` 是即将被发送的自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},

// `params` 是即将与请求一起发送的 URL 参数
// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
params: {
ID: 12345
},

// `data` 是作为请求主体被发送的数据
// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
// 在没有设置 `transformRequest` 时,必须是以下类型之一:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 浏览器专属:FormData, File, Blob
// - Node 专属: Stream
data: {
firstName: 'Fred'
},

// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求话费了超过 `timeout` 的时间,请求将被中断
timeout: 1000,

// `withCredentials` 表示跨域请求时是否需要使用凭证
withCredentials: false, // 默认的

// `adapter` 允许自定义处理请求,以使测试更轻松
// 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
adapter: function (config) {
/* ... */
},

// `auth` 表示应该使用 HTTP 基础验证,并提供凭据
// 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
auth: {
username: 'janedoe',
password: 's00pers3cret'
},

// `responseType` 表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // 默认的

// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
xsrfCookieName: 'XSRF-TOKEN', // default

// `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的

// `onUploadProgress` 允许为上传处理进度事件
onUploadProgress: function (progressEvent) {
// 对原生进度事件的处理
},

// `onDownloadProgress` 允许为下载处理进度事件
onDownloadProgress: function (progressEvent) {
// 对原生进度事件的处理
},

// `maxContentLength` 定义允许的响应内容的最大尺寸
maxContentLength: 2000,

// `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 rejecte
validateStatus: function (status) {
return status >= 200 && status < 300; // 默认的
},

// `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
// 如果设置为0,将不会 follow 任何重定向
maxRedirects: 5, // 默认的
}

response

{
// `data` 由服务器提供的响应
data: {},

// `status` 来自服务器响应的 HTTP 状态码
status: 200,

// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',

// `headers` 服务器响应的头
headers: {},

// `config` 是为请求提供的配置信息
config: {}
}

methods

GL.Map

地图对象

example

var map = new GL.Map('container', {
center: [120.45, 31.56],
zoom: 6
});

creation

options

Map options

Zoom options

Pan options

properties

events

methods

GL.Map.GaeaInfo

继承 GL.Map。内置 gaea 基础底图

example

var map = new GL.Map.GaeaInfo('container', {
center: [120.45, 31.56],
zoom: 6
});

options

GL.Map.TDT

继承 GL.Map。内置天地图

example

var map = new GL.Map.TDT('container', {
center: [120.45, 31.56]
});

options

GL.LayerLookup

基础底图创建工具

example

var baseLayer = new GL.LayerLookup.lookup('gaea');
map.addBaseLayer(baseLayer);

所有类型基础地图在特定情况下需要完全自定义瓦片请求时,可按下面的例子重写formatTileUrl

let baseLayer = GL.LayerLookup.createGaeaTiledLayer('url', {}, {})
baseLayer.formatTileUrl = function(view) {
// 行号:y
let row = view.row;
// 列号:x
let col = view.col;
// 层级:z
let lev = view.zoom;

if (this.options.invertedY && view["-row"] !== undefined) {
row = view["-row"];
}

return `${this.url}/${lev}/${row}/${col}${this.format}`;
}

options

CRS options

static methods

注:
gaea 类型是指公司自己切的瓦片并用 HTTP Server 容器发布的底图。地址规则如下:

http://img2.sz-map.com/Layers20160414/Layers/_alllayers<br/>

pgis 类型的底图地址规则如下:
http://10.35.162.68:7001/PGIS_S_TileMapServer/Maps/default

esri 类型是通过 arcgis server 发布的底图服务。地址规则如下:
http://192.168.3.213:8399/arcgis/rest/services/PGIS_SL/MapServer

tdt 类型是天地图,不可自定义配置。

BaseLayer

基础地图(GL.TiledLayer、GaeaTiledLayer、PgisTiledLayer、TdtTiledLayer、GL.EsriTiledLayer)

properties

methods

GL.CanvasVectorLayer

Canvas 绘制点位图层

example

var layer = new GL.CanvasVectorLayer('canvasVectorLayer');

creation

properties

methods

GL.VectorLayer

矢量图层

example

var layer = new GL.VectorLayer('vectorLayer');

creation

Cluster options

properties

methods

GL.ClusterLayer

聚合图层

example

var layer = new GL.ClusterLayer('clusterLayer');

creation

options

properties

methods

GL.HeatLayer

热区图层

example

var layer = new GL.HeatLayer('heatLayer');

creation

options

properties

methods

GL.EsriMapServerLayer

静态服务图层

example

var layer = new GL.EsriMapServerLayer('http://192.168.3.209:8399/arcgis/rest/services/framework/MapServer');
map.addLayer(layer);

creation

options

properties

events

methods

GL.EsriFeatureLayer

静态服务图层,只展示单个服务中指定的单个 layer

example

var layer = new GL.EsriFeatureLayer('http://192.168.3.209:8399/arcgis/rest/services/framework/MapServer/1');
map.addLayer(layer);

creation

options

properties

events

methods

GL.Point

example

var point = new GL.Point('120.45,31.456');
point2 = new GL.Point(new GL.LngLat(120.45, 31.456), GL.Proxy.getIcon('icons.0001'));

creation

options

properties

events

methods

static methods

GL.Polyline

线

example

var polyline = new GL.Polyline('120.45,31.456;120.78,31.645');
polyline2 = new GL.Polyline('120.45,31.456;120.78,31.645', new GL.Style((color: '#ff0000')));

creation

properties

events

methods

static methods

GL.Polygon

example

var polygon = new GL.Polygon('120.45,31.456;120.78,31.645;120.789,31.465');
polygon2 = new GL.Polygon('120.45,31.456;120.78,31.645;120.789,31.465', new GL.Style.Fill((fillColor: '#ff0000')));

creation

properties

events

methods

static methods

GL.Rectangle

矩形

example

var envelope = new GL.Envelope('120.45,31.456', '120.65,31.564');
var rectangle = new GL.Rectangle(envelope);
rectangle2 = new GL.Rectangle(envelope, new GL.Style.Fill((fillColor: '#ff0000')));

creation

properties

events

methods

static methods

GL.Circle

example

var circle = new GL.Circle('120.45,31.56', 500);
circle2 = new GL.Circle('120.45,31.56', 500, new GL.Style.Fill((fillColor: '#ff0000')));

creation

properties

events

methods

static methods

GL.Text

文字点

example

var text = new GL.Text('120.45,31.456', '文本');

creation

options

properties

events

methods

static methods

GL.LngLat

地理坐标对象

example

var lngLat = new GL.LngLat([120.456, 31.456]);
//or
var lngLat2 = new GL.LngLat('120.456,31.456');
//or
var lngLat3 = new GL.LngLat(120.456, 31.456);

creation

properties

methods

static methods

GL.Pixel

屏幕坐标对象

example

var pixel = new GL.Pixel([120.456, 31.456]);
//or
var pixel2 = new GL.Pixel('120.456,31.456');
//or
var pixel3 = new GL.Pixel(120.456, 31.456);

creation

properties

methods

GL.Envelope

地理坐标边界

example

var bounds = new GL.Envelope('120.45,31.45', '120.456,31.56');
//or
var bounds2 = new GL.Envelope(new GL.LngLat('120.45,31.45'), new GL.LngLat('120.456,31.56'));
//or
var bounds3 = new GL.Envelope('120.45,31.45;120.456,31.56');
//or
var bounds4 = new GL.Envelope(['120.45,31.45', '120.456,31.56']);
//or
var bounds5 = new GL.Envelope([new GL.LngLat('120.45,31.45'), new GL.LngLat('120.456,31.56')]);

creation

properties

methods

GL.Size

屏幕坐标边界

example

var size = new GL.Size('500,300', '550,350');
//or
var size2 = new GL.Size(new GL.Pixel('500,300'), new GL.Pixel('550,350'));
//or
var size3 = new GL.Size('500,300;550,350');
//or
var size4 = new GL.Size(['500,300', '550,350']);
//or
var size5 = new GL.Size([new GL.Pixel('500,300'), new GL.Pixel('550,350')]);

creation

properties

methods

GL.Icon.Smart

图标

example

var icon = new GL.Icon.Smart('assets/icons/0001.png', [32, 32]);
var point = new GL.Point('120.456,31.46', icon).addTo(map);

creation

properties

methods

GL.Icon.Div

DIV 图标

example

var icon = new GL.Icon.Div('测试');
var point = new GL.Point('120.456,31.46', icon).addTo(map);

creation

options

properties

methods

GL.Icon.Stat

统计样式图标

example

const data = [
{
icon: '../assets/icons/0001.png',
iconHtml: false,
text: '出租车',
count: 5000
},
{
icon: '../assets/icons/0002.png',
iconHtml: false,
text: '公交车',
count: 420
},
{
icon: '<i class="gf icon-jingche"></i>',
iconHtml: true,
text: '警车',
count: 2000
}
];
var icon = new GL.Icon.Stat(5500, data, '2');
var point = new GL.Point('120.456,31.46', icon).addTo(map);

creation

options

GL.Style

线的样式

example

var style = new GL.Style({ color: '#ff0000' }, true);
var polyline = new GL.Polyline('120.456,31.46;120.564,31.756', style).addTo(map);

creation

options

properties

methods

GL.Style.Fill

面、矩形、圆的样式

example

var style = new GL.Style.Fill({ fillColor: '#ff0000' }, true);
var polygon = new GL.Polygon('120.456,31.46;120.564,31.756;120.756,31.456', style).addTo(map);

creation

options

properties

methods

GL.Popup

气泡窗口

example

var popup = new GL.Popup();
popup.setLngLat(new GL.LngLat('120.456,31.405')).setContent('testPopup');

creation

options

<!-- popup 整体的 html 结构,自定义的 className 会添加在最外面一层。如‘custom-popup’ -->
<div class="gaea-popup leaflet-zoom-animated custom-popup">
<!-- popup 关闭按钮 -->
<a class="gaea-popup-close-button" href="#close">×</a>
<!-- popup 内容背景 -->
<div class="gaea-popup-content-wrapper">
<!-- popup 内容区域 -->
<div class="gaea-popup-content" style="width: 51px;">
<!-- 自定义的 popup 内容 -->
<div><p>测试 popup </p></div>
</div>
</div>
<!-- popup 箭头区域 -->
<div class="gaea-popup-tip-container">
<!-- popup 箭头 -->
<div class="gaea-popup-tip"></div>
</div>
</div>

methods

GL.Tooltip

提示框

example

var tooltip = new GL.Tooltip();
tooltip.setLngLat(new GL.LngLat('120.456,31.405')).setContent('testTooltip');

creation

options

<!-- tooltip 整体的 html 结构,自定义的 className 会添加在最外面一层。如‘custom-tooltip’ -->
<div class="gaea-tooltip leaflet-zoom-animated gaea-tooltip-right custom-tooltip">
<!-- 自定义的 tooltip 内容 -->
<div><p>测试 tooltip</p></div>
</div>

tooltip 的箭头 css:

custom-tooltip:before {
border-top-color: #fff; //tooltip 在上边时
border-left-color: #fff; //tooltip 在左边时
border-right-color: #fff; //tooltip 在右边时
border-bottom-color: #fff; //tooltip 在下边时
}

methods

GL.Label

文字 Label

example

var label = new GL.Label();
label.setLngLat(new GL.LngLat('120.456,31.405')).setContent('testLabel');

creation

options

<!-- label 整体的 html 结构,自定义的 className 会添加在最外面一层。如‘custom-label’ -->
<div class="gaea-label leaflet-zoom-animated gaea-label-center custom-label">
<!-- 自定义的 label 内容 -->
<div><p>测试label</p></div>
</div>

methods

GL.Handler

地图交互处理程序的抽象类

creation

methods

GL.Handler.PointDrag

Point 拖动处理程序

creation

methods

GL.Control

地图控件的基类

creation

options

methods

延伸的方法,每个继承 GL.Control 的控件都应该重写以下方法。

GL.Measure

测量

example

var measure = new GL.Measure(map);
measure.activate('Polyline');

options

根据测量类型选择不同的 options

Polyline

Polygon

creation

methods

GL.DrawTool

绘制工具

options

根据绘制类型选择不同的 options

Point

Polyline

Polygon

Rectangle

Circle

static methods

GL.EditTool

编辑工具,事件请见Point Event | Polyline Event | Polygon Event| Rectangle Event| Circle Event

options

根据绘制类型选择不同的 options

Polyline

Polygon

Rectangle

Circle

static methods

GL.BufferTool

缓冲工具

static methods

GL.H

基本工具类

static methods

GL.H.Geometry

Geometry 相关工具类

static methods

GL.H.Transform

坐标转换工具类

static methods

GL.DomUtil

Dom 操作工具类

static methods

GL.DomEvent

Dom 事件工具类

static methods

GL.Service

常用数据查询服务代理类

static methods

GL.RouteServiceProxy

道路查询服务代理类

static methods

GL.SingleQuery

单点查询
可通过项目根目录中conf/singleQuery.json配置

example


// activate
GL.enable('singleQuery',true,'map');
GL.Hub.fire(GL.E.SingleQuery.Active);
//inactivate
GL.enable('singleQuery',false,'map');


options

events

//active
GL.Hub.fire(GL.E.SingleQuery.Active);
//Destroy
GL.Hub.fire(GL.E.SingleQuery.Destroy);

GL.Playback

轨迹回放

example


var playback = new GL.Playback(map, nTracks, function (cursor, tracks) {
console.log(cursor);//当前步数
console.log(tracks);//当前所有轨迹对象,使用方法详见 getTracks

});

// activate
GL.enable('playback',true,'map');
//inactivate
GL.enable('playback',false,'map');

`


creation

options

track options

Play states

events

methods

GL.Toc

图层树
可通过项目根目录中conf/layerTree.json配置

example


// activate
GL.enable('layerTree',true,'map');
//inactivate
GL.enable('layerTree',false,'map');

//获取图层数实例
var toc = GL.getModule('layerTree','map');

`


options

例如:

    {
layerInfo: {
default: {
interval: 60000,
state: 'cluster',
displayKeyLabel: {
'name': '名称',
'address': '地址',
'categoryName': '类别',
'regionName': '所属辖区'
},
clusterOptions:{

},
callback:null
}
},
staticService: [],
exclude: []
}

//例如现在有一个出租车动态图层,对其进行个性化配置,其他图层按照默认配置,如下:

{
layerInfo: {
default: {
interval: 60000,
state: 'cluster',
displayKeyLabel: {
'name': '名称',
'address': '地址',
'categoryName': '类别',
'regionName': '所属辖区'
},
clusterOptions:{

},
callback:null
},
TAXI:{
interval: 3000,
state: 'normal',
displayKeyLabel: {
'name': '车牌号',
'driver': '司机',
'speed': '速度'
},
callback:taxiCallback
}
},
staticService: [],
exclude: []
}

function taxiCallback(overlay){

}
`

events

GL.Hub.on(GL.E.Toc.DataInitFinish, function() {
//init tree or dosomething
});

GL.Hub.on(GL.E.Toc.ItemCheckChanged, function(e) {
console.log(e.target);
console.log(e.state);
});

GL.Hub.on(GL.E.Toc.ItemChildrenChanged, function(e) {
console.log(e.target);
console.log(e.item);
});

methods

GL.TocUtil

图层树数据操作工具类

static methods

GL.TocItem

图层树节点对象

properties

methods

GL.Contextmenu

上下文菜单

example


// show
var point = new GL.Pixel(500,300);
var items = [
{
text:'添加',
icon:'./assets/icons/add.png',
callback:add,
context:this,
},
'-',
{
text:'删除',
iconCls:'deleteIcon',
callback:del
}
];

function add(){

}

function del(){

}

GL.Hub.fire(GL.E.Contextmenu.Show,point,items);
//hide
GL.Hub.fire(GL.E.Contextmenu.Hide);


options

分割线可以直接这样写:

var items = [
{
...
},
{
...
},
'-',//分割线
{
...
}
];

events

Overlay

以下 Overlay 的基类,包含一些共有方法属性,事件类型等。

events

methods

Event

地图、图层、覆盖物等对象的事件

methods


- **_off( type, fn, [context])_**

删除先前添加的侦听器函数。如果没有指定函数,它将从对象中删除该特定事件的所有侦听器。请注意,如果您将自定义上下文传递到上,则必须传递相同的上下文以关闭侦听器。

- **参数:**

- `{string} type`:
- `{Function} fn`:侦听器
- `{Object} [context]`:绑定到侦听器的上下文对象

- **返回值:** `this`

- **_off( eventMap, [context] )_**

删除一组`type/listener`。

- **参数:**

- `{Object} eventMap`:事件类型/监听器对
- `{Object} [context]`:绑定到侦听器的上下文对象

- **返回值:** `this`

- **用法:**
```js
point.on({
click: onClick,
mousemove: onMouseMove
});