Skip to content

Commit 5e1b20a

Browse files
Yuki-ZhaoYuki-Zhao
committed
【feature】对接webmap支持显示DV中数据服务的mvt图层
（reviewed by chengl）
1 parent 15695a4 commit 5e1b20a

File tree

1 file changed

+244
-41
lines changed

1 file changed

+244
-41
lines changed

‎src/openlayers/mapping/WebMap.js

Lines changed: 244 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1046,7 +1046,8 @@ export class WebMap extends ol.Observable {
10461046
serverId = dataSource ? dataSource.serverId : layer.serverId;
10471047
that.checkUploadToRelationship(serverId).then(function (result) {
10481048
if(result && result.length > 0) {
1049-
let datasetName = result[0].name;
1049+
let datasetName = result[0].name,
1050+
featureType = result[0].type.toUpperCase();
10501051
that.getDataService(serverId,datasetName).then(function (data) {
10511052
let dataItemServices = data.dataItemServices;
10521053
if(dataItemServices.length === 0) {
@@ -1055,46 +1056,17 @@ export class WebMap extends ol.Observable {
10551056
that.errorCallback && that.errorCallback(null, 'getLayerFaild', that.map);
10561057
return;
10571058
}
1058-
let isAdded = false;
1059-
dataItemServices.forEach(function (service) {
1060-
if(isAdded) {
1061-
return;
1062-
}
1063-
if(service && isMapService && service.serviceType === 'RESTMAP') {
1064-
//关系型文件发布的restMap服务
1065-
isAdded = true;
1066-
//地图服务
1067-
that.getTileLayerInfo(service.address).then(function (restMaps) {
1068-
restMaps.forEach(function (restMapInfo) {
1069-
let bounds = restMapInfo.bounds;
1070-
layer.layerType = 'TILE';
1071-
layer.overLayer= true;
1072-
layer.orginEpsgCode = that.baseProjection;
1073-
layer.units= restMapInfo.coordUnit && restMapInfo.coordUnit.toLowerCase();
1074-
layer.extent= [bounds.left, bounds.bottom, bounds.right, bounds.top];
1075-
layer.visibleScales= restMapInfo.visibleScales;
1076-
layer.url= restMapInfo.url;
1077-
layer.sourceType= 'TILE';
1078-
that.map.addLayer(that.createBaseLayer(layer, layerIndex));
1079-
that.layerAdded++;
1080-
that.sendMapToUser(len);
1081-
})
1082-
})
1083-
} else if(service && !isMapService && service.serviceType === 'RESTDATA') {
1084-
isAdded = true;
1085-
//关系型文件发布的数据服务
1086-
that.getDatasources(service.address).then(function (datasourceName) {
1087-
layer.dataSource.dataSourceName = datasourceName + ":" + datasetName;
1088-
layer.dataSource.url = `${service.address}/data`;
1089-
that.getFeaturesFromRestData(layer, layerIndex, len);
1090-
});
1091-
}
1092-
});
1093-
if(!isAdded) {
1094-
//循环完成了，也没有找到合适的服务。有可能服务被删除
1095-
that.layerAdded++;
1096-
that.sendMapToUser(len);
1097-
that.errorCallback && that.errorCallback(null, 'getLayerFaild', that.map);
1059+
if(isMapService) {
1060+
//需要判断是使用tile还是mvt服务
1061+
let dataService = that.getService(dataItemServices, 'RESTDATA');
1062+
that.isMvt(dataService.address, datasetName).then(info => {
1063+
that.getServiceInfoFromLayer(layerIndex, len, layer, dataItemServices, datasetName, featureType, info);
1064+
}).catch(() => {
1065+
//判断失败就走之前逻辑，>数据量用tile
1066+
that.getServiceInfoFromLayer(layerIndex, len, layer, dataItemServices, datasetName, featureType);
1067+
})
1068+
} else {
1069+
that.getServiceInfoFromLayer(layerIndex, len, layer, dataItemServices, datasetName, featureType);
10981070
}
10991071
});
11001072
} else {
@@ -1165,6 +1137,82 @@ export class WebMap extends ol.Observable {
11651137
}, this);
11661138
}
11671139
}
1140+
/**
1141+
* @private
1142+
* @function ol.supermap.WebMap.prototype.getServiceInfoFromLayer
1143+
* @description 判断使用哪种服务上图
1144+
* @param {Number} layerIndex - 图层对应的index
1145+
* @param {Number} len - 成功添加的图层个数
1146+
* @param {Object} layer - 图层信息
1147+
* @param {Array} dataItemServices - 数据发布的服务
1148+
* @param {String} datasetName - 数据服务的数据集名称
1149+
* @param {String} featureType - feature类型
1150+
* @param {Object} info - 数据服务的信息
1151+
*/
1152+
getServiceInfoFromLayer(layerIndex, len, layer, dataItemServices, datasetName, featureType, info) {
1153+
let that = this;
1154+
let isMapService = info ? !info.isMvt : layer.layerType === 'HOSTED_TILE',
1155+
isAdded = false;
1156+
dataItemServices.forEach(function (service) {
1157+
if(isAdded) return;
1158+
//有服务了，就不需要循环
1159+
if(service && isMapService && service.serviceType === 'RESTMAP') {
1160+
isAdded = true;
1161+
//地图服务,判断使用mvt还是tile
1162+
that.getTileLayerInfo(service.address).then(function (restMaps) {
1163+
restMaps.forEach(function (restMapInfo) {
1164+
let bounds = restMapInfo.bounds;
1165+
layer.layerType = 'TILE';
1166+
layer.orginEpsgCode = that.baseProjection;
1167+
layer.units= restMapInfo.coordUnit && restMapInfo.coordUnit.toLowerCase();
1168+
layer.extent= [bounds.left, bounds.bottom, bounds.right, bounds.top];
1169+
layer.visibleScales= restMapInfo.visibleScales;
1170+
layer.url= restMapInfo.url;
1171+
layer.sourceType= 'TILE';
1172+
that.map.addLayer(that.createBaseLayer(layer, layerIndex));
1173+
that.layerAdded++;
1174+
that.sendMapToUser(len);
1175+
})
1176+
})
1177+
} else if(service && !isMapService && service.serviceType === 'RESTDATA') {
1178+
isAdded = true;
1179+
if(info && info.isMvt) {
1180+
let bounds = info.bounds;
1181+
layer = Object.assign(layer, {
1182+
layerType: "VECTOR_TILE",
1183+
epsgCode: info.epsgCode,
1184+
projection: `EPSG:${info.epsgCode}`,
1185+
bounds: bounds,
1186+
extent: [bounds.left, bounds.bottom, bounds.right, bounds.top],
1187+
name: layer.name,
1188+
url: info.url,
1189+
visible: layer.visible,
1190+
featureType: featureType,
1191+
serverId: layer.serverId.toString()
1192+
});
1193+
that.map.addLayer(that.addVectorTileLayer(layer, layerIndex, 'RESTDATA'));
1194+
that.layerAdded++;
1195+
that.sendMapToUser(len);
1196+
1197+
} else {
1198+
//数据服务
1199+
isAdded = true;
1200+
//关系型文件发布的数据服务
1201+
that.getDatasources(service.address).then(function (datasourceName) {
1202+
layer.dataSource.dataSourceName = datasourceName + ":" + datasetName;
1203+
layer.dataSource.url = `${service.address}/data`;
1204+
that.getFeaturesFromRestData(layer, layerIndex, len);
1205+
});
1206+
}
1207+
}
1208+
});
1209+
if(!isAdded) {
1210+
//循环完成了，也没有找到合适的服务。有可能服务被删除
1211+
that.layerAdded++;
1212+
that.sendMapToUser(len);
1213+
that.errorCallback && that.errorCallback(null, 'getLayerFaild', that.map);
1214+
}
1215+
}
11681216

11691217
/**
11701218
* @private
@@ -1531,6 +1579,95 @@ export class WebMap extends ol.Observable {
15311579
}
15321580
}
15331581

1582+
/**
1583+
* @private
1584+
* @function ol.supermap.WebMap.prototype.addVectorTileLayer
1585+
* @description 添加vectorTILE图层
1586+
* @param {object} layerInfo - 图层信息
1587+
* @param {number} index 图层的顺序
1588+
* @param {String} type 创建的图层类型，restData为创建数据服务的mvt, restMap为创建地图服务的mvt
1589+
* @returns {Object} 图层对象
1590+
*/
1591+
addVectorTileLayer(layerInfo, index, type) {
1592+
let layer;
1593+
if(type === 'RESTDATA') {
1594+
//用的是restdata服务的mvt
1595+
layer = this.createDataVectorTileLayer(layerInfo)
1596+
}
1597+
let layerID = Util.newGuid(8);
1598+
if (layer) {
1599+
layerInfo.name && layer.setProperties({
1600+
name: layerInfo.name,
1601+
layerID: layerID
1602+
});
1603+
layerInfo.opacity != undefined && layer.setOpacity(layerInfo.opacity);
1604+
layer.setVisible(layerInfo.visible);
1605+
layer.setZIndex(index);
1606+
}
1607+
layerInfo.layer = layer;
1608+
layerInfo.layerID = layerID;
1609+
return layer;
1610+
}
1611+
/**
1612+
* @private
1613+
* @function ol.supermap.WebMap.prototype.createDataVectorTileLayer
1614+
* @description 创建vectorTILE图层
1615+
* @param {object} layerInfo - 图层信息
1616+
* @returns {Object} 图层对象
1617+
*/
1618+
createDataVectorTileLayer(layerInfo) {
1619+
//创建图层
1620+
var format = new ol.format.MVT({
1621+
featureClass: ol.Feature
1622+
});
1623+
//要加上这一句，否则坐标，默认都是3857
1624+
ol.format.MVT.prototype.readProjection = function (source) {
1625+
return new ol.proj.Projection({
1626+
code: '',
1627+
units: ol.proj.Units.TILE_PIXELS
1628+
});
1629+
};
1630+
let featureType = layerInfo.featureType;
1631+
let style = StyleUtils.toOpenLayersStyle(this.getDataVectorTileStyle(featureType), featureType);
1632+
return new ol.layer.VectorTile({
1633+
//设置避让参数
1634+
declutter: true,
1635+
source: new ol.source.VectorTileSuperMapRest({
1636+
url: layerInfo.url,
1637+
projection: layerInfo.projection,
1638+
tileType: "ScaleXY",
1639+
format: format
1640+
}),
1641+
style: style
1642+
});
1643+
}
1644+
/**
1645+
* @private
1646+
* @function ol.supermap.WebMap.prototype.getDataVectorTileStyle
1647+
* @description 获取数据服务的mvt上图的默认样式
1648+
* @param {String} featureType - 要素类型
1649+
* @returns {Object} 样式参数
1650+
*/
1651+
getDataVectorTileStyle(featureType) {
1652+
let styleParameters = {
1653+
radius: 8, //圆点半径
1654+
fillColor: '#0083cb', //填充色
1655+
fillOpacity: 0.9,
1656+
strokeColor: '#ffffff', //边框颜色
1657+
strokeWidth: 1,
1658+
strokeOpacity: 1,
1659+
lineDash: 'solid',
1660+
type: "BASIC_POINT"
1661+
};
1662+
if(["LINE", "LINESTRING", "MULTILINESTRING"].includes(featureType)){
1663+
styleParameters.strokeColor = '#0083cb';
1664+
styleParameters.strokeWidth = 2;
1665+
}else if(["REGION", "POLYGON", "MULTIPOLYGON"].includes(featureType)){
1666+
styleParameters.fillColor = '#0083cb';
1667+
}
1668+
return styleParameters;
1669+
}
1670+
15341671
/**
15351672
* @private
15361673
* @function ol.supermap.WebMap.prototype.getFiterFeatures
@@ -2976,6 +3113,72 @@ export class WebMap extends ol.Observable {
29763113
}
29773114
return data;
29783115
}
3116+
3117+
/**
3118+
* @private
3119+
* @function ol.supermap.WebMap.prototype.getService
3120+
* @description 获取当前数据发布的服务中的某种类型服务
3121+
* @param {Array} services 服务集合
3122+
* @param {String} type 服务类型，RESTDATA, RESTMAP
3123+
* @returns {Object} 服务
3124+
*/
3125+
getService(services, type) {
3126+
let service = services.filter((info) => {
3127+
return info && info.serviceType === type;
3128+
});
3129+
return service[0];
3130+
}
3131+
3132+
/**
3133+
* @private
3134+
* @function ol.supermap.WebMap.prototype.isMvt
3135+
* @description 判断当前能否使用数据服务的mvt上图方式
3136+
* @param {String} serviceUrl 数据服务的地址
3137+
* @param {String} datasetName 数据服务的数据集名称
3138+
* @returns {Object} 数据服务的信息
3139+
*/
3140+
isMvt(serviceUrl, datasetName) {
3141+
let that = this;
3142+
return this.getDatasetsInfo(serviceUrl, datasetName).then((info) => {
3143+
//判断是否和底图坐标系一直
3144+
if(info.epsgCode == that.baseProjection.split('EPSG:')[1]) {
3145+
return FetchRequest.get(`${that.getProxy()}${info.url}/tilefeature.mvt`).then(function (response) {
3146+
return response.json()
3147+
}).then(function (result) {
3148+
info.isMvt = result.error && result.error.code === 400;
3149+
return info;
3150+
}).catch(() => {
3151+
return info;
3152+
});
3153+
}
3154+
return info;
3155+
})
3156+
}
3157+
3158+
/**
3159+
* @private
3160+
* @function ol.supermap.WebMap.prototype.getDatasetsInfo
3161+
* @description 获取数据集信息
3162+
* @param {String} serviceUrl 数据服务的地址
3163+
* @param {String} datasetName 数据服务的数据集名称
3164+
* @returns {Object} 数据服务的信息
3165+
*/
3166+
getDatasetsInfo(serviceUrl, datasetName) {
3167+
let that = this;
3168+
return that.getDatasources(serviceUrl).then(function(datasourceName) {
3169+
//判断mvt服务是否可用
3170+
let url = `${serviceUrl}/data/datasources/${datasourceName}/datasets/${datasetName}`;
3171+
return FetchRequest.get(`${that.getProxy()}${url}.json`).then(function (response) {
3172+
return response.json()
3173+
}).then(function (datasetsInfo) {
3174+
return {
3175+
epsgCode: datasetsInfo.datasetInfo.prjCoordSys.epsgCode,
3176+
bounds: datasetsInfo.datasetInfo.bounds,
3177+
url
3178+
};
3179+
});
3180+
})
3181+
}
29793182
}
29803183

29813184
ol.supermap.WebMap = WebMap;

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy