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)