Appearance
专题图新增与配置
可配置的 属性有 type diySymbol expandInfo layerDefinitions
1. type 地图加载方式
- tile 切片图层
- map-image 动态图层
- feature 要素图层
- vector-tile 矢量切片
- 福建 WMTS
- WMTS
- WMS
tile 切片图层
用于加载 地图底图 等
例如:
http://www.ztgis.com:8871/arcgis/rest/services/cgcs2000/MAP_CVA/MapServerhttp://10.8.17.44/arcgis/rest/services/CGCS_DOMMAP_CIA/MapServer
map-image 动态图层
- 接图表-10000
http://10.8.17.44/arcgis/rest/services/JTB10000/MapServer
feature 要素图层
例如:
- 商品房
http://10.8.17.44/arcgis/rest/services/ZTT/SPFLP/MapServer/0
vector-tile 矢量切片
实际项目中未应用
福建 WMTS
https://www.ztgis.com:8888/fjmap/vec_fj_2021/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec_fj&STYLE=vec_fj&TILEMATRIXSET=Matrix_0&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&FORMAT=image/tile
开发配置
vue 代理
ts
const proxy = {
'/fjmap': {
target: 'http://service.fjmap.net/',
changeOrigin: true,
rewrite: (path) => {
return path.replace(/^\/fjmap/, '')
}
},
'/s0fjmap': {
target: 'http://s0.fjmap.net/',
changeOrigin: true,
rewrite: (path) => {
return path.replace(/^\/s0fjmap/, '')
}
}
}nginx
A - layerDefinitions 动态图层定义
A - diySymbol 聚合样式
包含属性 popup featureReduction renderer
| 属性 | 说明 |
|---|---|
| popup | 单个要素弹窗配置 |
| featureReduction | 配置减少视图中点特征数量的方法 |
| renderer | 渲染样式 |
featureReduction 属性
| 属性 | 说明 |
|---|---|
| type | cluster为聚合样式 |
| popupTemplate | 多个要素(点击聚合要素时触发)的弹窗配置 |
| clusterRadius | 聚合半径 |
| clusterMinSize | 聚合最小半径 |
| clusterMaxSize | 聚合最大半径 |
官方解释
featureReduction配置减少视图中点数量的方法。默认情况下，该属性为空，表示层视图绘制所有点。clusterRadius定义每个区域的点(如果指定则为像素)半径，其中多个点将被分组并可视化为单个集群。
开发注意事项
前端代码接入
ts
// 必须解构
const param = { x, ...JSON.parse(x.diySymbol) }
// 或
const param = { x, ...kit.parse(x, 'diySymbol', '{}') }D - 示例
diySymbol 聚合样式
JSON
{
"popup": {
"title": "{name}",
"fields": [
{
"label": "name",
"name": "name"
}
]
},
"featureReduction": {
"type": "cluster",
"clusterRadius": "100px",
"clusterMinSize": "30px",
"clusterMaxSize": "60px",
"popupTemplate": {
"title": "总计数量: {cluster_count}"
}
},
"renderer": {
"type": "class-breaks",
"field": "cluster_count",
"defaultSymbol": {
"type": "picture-marker",
"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAZdJREFUOI3d00soRHEUx/Fv7pi/R5hmjEdZyIQyKBu2CnnUNAullJKdpCyUshI7GyGxFCmUjTQhYSdEWUkGYTMpRqZk/pmHBXGvxjRzNSm/uotz7jmff91/10CCYohzvgQ4TwRcnSg45vw5bKFmxMmDu96cY73w7o3t/xYWNMzPkFPVgsmWi5KM13/fiqXuRDycDcm9/g09sELjkovi1joU1VhqnpGilmqZUbBAylQnO72uuGBROz0obQ4tqo610sLz3SgQHyyziptJTvtqhEMQfAWDUOEVdtEw2yi3ujajwR3aN6kFmtq9AgcT0L4NhpT3Xlo20nvaA1hVk0fAmRpe0EBK0rCmzi6Hmj5QjF+9YABhrjqW33eJdnkvviug6LM2l70/6vhug9KYuRhp/Wc44Bvn6bKWLFvkmeAreM/3cTnc8cHrbS7hWJuUYfow2RTtoS9wu3tNutX503rUH0SuOfrznRuHHt/NAMJUSigkCAc8+B93MNu7mSv064IBPKtNy8DyR9lBhIvSBevN/4dj+r564JjzBgMKcpBQHufBAAAAAElFTkSuQmCC",
"width": "120px",
"height": "120px"
},
"classBreakInfos": [
{
"minValue": 0,
"maxValue": 50,
"symbol": {
"type": "simple-marker",
"style": "diamond",
"color": "#1abc9c",
"size": "12px",
"outline": {
"color": "#2e4e7e",
"width": 2
}
}
},
{
"minValue": 51,
"maxValue": 100,
"symbol": {
"type": "simple-marker",
"style": "circle",
"color": "#2ecc71",
"size": "8px",
"outline": {
"color": "#2e4e7e",
"width": 2
}
}
},
{
"minValue": 101,
"maxValue": 300,
"symbol": {
"type": "simple-marker",
"style": "square",
"color": "#3498db",
"size": "8px",
"outline": {
"color": "#2e4e7e",
"width": 2
}
}
},
{
"minValue": 301,
"maxValue": 650,
"symbol": {
"type": "simple-marker",
"style": "square",
"color": "#f1c40f",
"size": "8px",
"outline": {
"color": "#2e4e7e",
"width": 2
}
}
}
]
}
}S - 聚合
A - expandInfo 扩展内容
可 配置时态地图等
| 属性 | 说明 |
|---|---|
| TimeSlider | 时间轴相关配置详情 |
| timeInfo | 指定时态时间字段 |
TimeSlider 属性
| 属性 | 说明 |
|---|---|
| fullTimeExtent | 时间范围 |
| playRate | 播放速率 |
| stops | 刻度精度 |
| mode | 播放模式 |
D - 示例
json
{
"timeInfo": {
"startField": "CREATE_TIME"
},
"TimeSlider": {
"fullTimeExtent": {
"start": new Date(2011,0,1),
"end": new Date(2015,11,1)
},
"playRate": 2000,
"stops": {
"interval": {
"value": 20,
"unit": "days"
}
},
"mode": "cumulative-from-start"
}
}高阶用法
聚合 + 时态 地图
时态地图支持 map-image feature 两只模式
D - 示例
ts
const expandInfo = {
popup: {
title: '{name}',
fields: [{ label: '名称', name: 'name' }]
},
featureReduction: {
type: 'cluster',
clusterRadius: '100px',
clusterMinSize: '30px',
clusterMaxSize: '60px',
popupTemplate: { title: '总计数量: {cluster_count}' }
},
legendEnabled: false,
timeInfo: {
startField: 'CREATE_TIME'
},
TimeSlider: {
fullTimeExtent: {
start: new Date(2011, 0, 1),
end: new Date(2013, 11, 1)
},
playRate: 2000,
stops: {
interval: {
value: 1,
unit: 'months'
}
},
mode: 'cumulative-from-start'
}
}S - 效果
2. 专题图配置
A - 查询基本配置
地图服务 URL http://www.ztgis.com:8871/arcgis/rest/services/jzcbzghxt/jzcbdk/MapServer
查询图层层号 0
标识码字段
gis_data_ntssgh_sde.sde.cbdk.objectid
名称字段 从查询列表项配置中的字段名称中选择 查询过滤
地图服务 Fields 列表中的字段在配置中必须配置全部（包含.）
http://www.ztgis.com:8871/arcgis/rest/services/jzcbzghxt/jzcbdk/MapServer/0
A - 查询表单配置
- 地图服务 -> Layers -> Fields -> 选择需要配的字段
数据按钮配置
A - 查询列表项配置
字段配置同上
操作配置 目前事件方式只实现了postMessage，该选项表示此列表项为点击按钮
事件实现：通过Postmate技术实现parent与child之间进行消息通信
- 发送消息js
// flag为事件标识，entity为行数据，columns为属性列表配置 window.GIS.plugins.postMessage('e-map', JSON.parse(JSON.stringify({ flag: column.actionFlag, entity: row.attributes, columns: this.listConfig }))) - 监听消息js其中
const handshake = new Postmate({ container: this.$el, url:' http://www.ztgis.com:8888/mapWeb/nt?showMapType=DOM', name: 'e-map-iframe', classListArray: ['postmate'], }); handshake.then((child) => { child.on('e-map', (data) => this.openShow(data)) });e-map为消息通信的key
- 发送消息
A - 查询拓展配置
查询的数据源可扩展
配置格式
json
{
"dbType": "oracle", //数据库类型 oracle mysql sqlserver
"dbUrl": "", //数据库地址 jdbc:oracle:thin@localhost:1521:orcl
"dbUser": "", //数据库用户账号
"dbPassword": "", //数据库用户密码
"dbTable": "", //数据库表名称
"dbTableBsmField": "", //数据库表标识码字段
"dbMapBsmField": "", //地图服务标识码字段
"dbMapBsmAliasField": "", //地图服务标识码字段别名
"dbWhere":""//数据库查询条件
}A - 外接 API 配置
- 位置同上
配置格式
json
{
"url": "http://www.xxx.com/[name]/[age]",
"linkName": "入口名称",
"openStyle": "打开方式 popup/iepage"
}A - 统计配置
图层统计支持 自定义统计配置 和 ArcGIS原生统计配置
自定义统计地址：默认使用查询地址/图层号；自定义需配置完成地址；post请求方式
- 注意：
- 两者实现一个即可，若都实现，则使用自定义统计
- 统计分组字段和统计对象字段都为地图服务
Fields列表中的字段
S - 效果
A - 编辑配置
编辑服务 -> 为查询配置的地图服务URL http://www.ztgis.com:8871/arcgis/rest/services/xm92/pgdhx/MapServer
- 注意：
- 最大长度及最小长度为-1时，表示没有进行限制
- 该配置的字段从地图服务
Fields列表字段中进行选择
值域配置格式
json
[
{
"name": "宗地1",
"code": "01"
},
{
"name": "宗地2",
"code": "02"
}
]A - 分析配置
配置格式
json
{
"stcName": "分析名称",
"maxArea": 1000,//最大统计面积
"stcUrl": "图层地址",
"idField": "图层主键字段",
"apiType": "1", //1 一维统计 2 二维统计
"token": "",//token
"stcMap": {
"isGroupFieldKPEnabled": 1,
"groupFieldKP": [
{
"key": "010",
"value": "基本农田保护区"
}
],
"groupField": "",//分组字段
"whereClause": "",//过滤条件
"stcPara": {
"stcName": "土地利用总体规划2020压盖分析",
"stcField": "__SHAPE.AREA",
"stcType": "max", //max min count sum average
"title": "土地利用总体规划",
"subtitle": "",
"footnote": "",
"unit": "平方米",
"tableHead": [
{
"title": "编码",
"fieldName": "code"
},
{
"title": "名称",
"fieldName": "name"
},
{
"title": "面积/平方米",
"fieldName": "showValue"
}
]
}
}
}
}