amap-geohey-plugin
v0.0.6
Published
高德地图扩展，用来展示GeoHey平台的数据上图服务
Downloads
20
Readme
AMap-GeoHey-Plugin
高德地图扩展，用来展示GeoHey平台的数据上图服务
目前尚不支持流体场，也不会添加时间轴等控件
命名空间为AMapGeoHey
在AMapGeoHey下有两个模块：MapViz和DataViz
注意：此插件依赖AMap.Heatmap，所以必须在加载AMap.Heatmap插件后再获取数据
Install
可以通过NPM安装
npm install amap-geohey-plugin --save然后在html中引入，注意必须在高德的SDK之后引入
<script src="http://webapi.amap.com/maps?v=1.4.2&key=高德平台开发者key"></script>
<script src="node_modules/dist/amap-geohey-plugin.min.js"></script>也可以直接下载amap-geohey-plugin.min.js，然后复制到项目中并引入
<script src="http://webapi.amap.com/maps?v=1.4.2&key=高德平台开发者key"></script>
<script src="amap-geohey-plugin.min.js"></script>MapViz
AMapGeoHey.MapViz用来展示一个数据上图项目，它可以通过一个数据上图项目的uid来获取此项目的数据或直接绘制出来。
方法
| 方法名 | 返回值 | 说明 | | ------------------------- | --------- | --------------------------------------------- | | get( [String] uid, [Object] options, [Map] map, [Function] callback ) | this | 获取指定项目uid的数据上图项目，会根据数据生成多个图层，并自动添加到map中(如果传入了map)，map和callback都是可选的 |
选项
| 选项名 | 类型 | 默认值 | 说明 | | ------------- | --------- | ------------- | --------------------------------------------- | | 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' ] | 瓦片服务器集群 | | uri | String | '/s/dataviz/' | dataviz服务地址 |
示例一：传入map，自动显示
传入map是最简单的方式，可以自动将所有图层显示出来
var map = new AMap.Map( 'container', {
resizeEnable: true,
zoom: 5,
center: [ 116.23, 39.94 ]
} );
// 依赖AMap.Heatmap
map.plugin( [ "AMap.Heatmap" ], function() {
AMapGeoHey.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来获取数据，也可以和示例一的方式同时使用
var map = new AMap.Map( 'container', {
resizeEnable: true,
zoom: 5,
center: [ 116.23, 39.94 ]
} );
map.plugin( [ "AMap.Heatmap" ], function() {
AMapGeoHey.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中
},
...
]
}
*/
} )
} );
DataViz
AMapGeoHey.DataViz用来对一个或多个数据进行可视化，它可以通过一个数据上图配置来获取图层列表或直接绘制出来。
数据上图配置可以在数据上图参数面板中得到
方法
| 方法名 | 返回值 | 说明 | | ------------------------- | --------- | --------------------------------------------- | | get( [Array] config, [Object] options, [Map] map, [Function] callback ) | this | 根据一个数据上图配置，生成多个图层，并自动添加到map中(如果传入了map) |
选项
| 选项名 | 类型 | 默认值 | 说明 | | ------------- | --------- | ------------- | --------------------------------------------- | | 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' ] | 瓦片服务器集群 | | uri | String or Object | '/s/dataviz/' | dataviz服务地址, 可以为字符串或一个对象。 指定为对象的情况适用于上图配置中不同的dataType类型具有不同的uri地址, 对象格式应为 {dataType: uri}, 在下面的示例中, 将dataType 为 'private' 和 'tmp' 两种类型的数据分别指定了uri|
示例
var map = new AMap.Map( 'container', {
resizeEnable: true,
zoom: 5,
center: [ 116.23, 39.94 ]
} );
// 依赖AMap.Heatmap
map.plugin( [ "AMap.Heatmap" ], function() {
var layerList = AMapGeoHey.DataViz.get( [ {
"dataUid": "a31be504afa44c1ea6afa19995693600",
"dataType": "private",
"interactivity": [
null
],
"vizConfig": {
"type": "marker-simple",
"labelField": null,
"labelFont": "Microsoft YaHei Regular",
"labelSize": 12,
"labelDx": 0,
"labelDy": -20,
"labelAllowOverlap": true,
"labelPlacement": "point",
"blendingMode": "src-over",
"markerColor": "#c00000",
"markerOpacity": 0.8,
"markerSize": 6,
"outlineColor": "#ffffff",
"outlineOpacity": 0.8,
"outlineWidth": 1
}
},
{
"dataUid": "09ed9bfde90349799b8193ad9b5c0ec4",
"dataType": "tmp",
"vizConfig": {
"type": "marker-simple",
"labelField": null,
"labelColor": "#000000",
"labelFont": "Microsoft YaHei Regular",
"labelSize": 12,
"labelDx": 0,
"labelDy": -20,
"labelHaloColor": "#fff",
"labelAllowOverlap": true,
"labelPlacement": "point",
"blendingMode": "src-over",
"markerColor": "#c00000",
"markerOpacity": 0.8,
"markerSize": 18.4,
"outlineColor": "#ffffff",
"outlineOpacity": 0.8,
"outlineWidth": 1
}
} ], {
host: 'http://geohey.com',
ak: 'YWE2Njk1OGE2ZjFmNDI3ZGEyNTg0Yzk0ZGM2Y2Q2ODk',
tileHost: 'http://{s}.geohey.com',
cluster: ['s1', 's2', 's3', 's4', 's5', 's6', 's7', 's8'],
uri: {
private: '/s/dataviz/', //dataType为 private 的数据对应的uri
tmp: '/tmp/dataviz/' //dataType为 tmp 的数据对应的uri
}
}, map )
console.log( layerList )
} );