高德
在线
ol.layer.Tile+ol.source.XYZ
let AMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: mapObj?.mapUrl
})
})
layer.push(AMapLayer)
离线
ol.layer.Tile+ol.source.TileImage
//离线
let resultlayer = new ol.layer.Tile({
source: new ol.source.TileImage({
projection: mapObj?.projection,
tileUrlFunction: function (tileCoord) {
var z = tileCoord[0]
var x = tileCoord[1]
var y = tileCoord[2]
y = -y - 1
return mapObj?.mapUrl.replace('{z}', z).replace('{x}', x).replace('{y}', y)
}
})
})
layer.push(resultlayer)
百度地图
在线
var tilegrid = new ol.tilegrid.TileGrid({
minZoom: 1,
maxZoom: 18,
origin: [-140, 21680],
projection: mapObj?.projection,
// tileSize: [256, 256],
// url: 'http//online0.map.bgimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&udt=&scale=1&p=1',
// wrapX: !1,
// extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
resolutions: [
262144, 131072, 65536, 32768, 16384, 8192, 4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5, 0.25, 0.125, 0.0625, 0.03125
]
})
// 创建百度地图的数据源
var baiduSource = new ol.source.TileImage({
projection: mapObj?.projection,
tileGrid: tilegrid,
tileUrlFunction: function (tileCoord) {
if (!tileCoord) {
return ''
}
var z = tileCoord[0]
var x = tileCoord[1]
var y = tileCoord[2]
if (x < 0) {
x = 'M' + -x
}
if (y < 0) {
y = 'M' + -y
}
return mapObj?.mapUrl.replace('{z}', z).replace('{x}', x).replace('{y}', y)
// return 'http://online0.map.bdimg.com/onlinelabel/?qt=tile&x=' + x + '&y=' + y + '&z=' + z + '&styles=pl&udt=&scale=1&p=1'
}
})
let baidu_layer = new ol.layer.Tile({
source: baiduSource
})
layer.push(baidu_layer)
离线
//离线
var resolutions = []
// var maxZoom = 18
// 计算百度使用的分辨率
// for (var i = 0; i <= maxZoom; i++) {
// resolutions[i] = Math.pow(2, maxZoom - i)
// }
resolutions = [
262144, 131072, 65536, 32768, 16384, 8192, 4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5, 0.25, 0.125, 0.0625, 0.03125
]
var tilegrid = new ol.tilegrid.TileGrid({
//origin: [0, 0],
origin: [-140, 21680],
resolutions: resolutions // 设置分辨率
})
// 创建百度地图的数据源
var baiduSource = new ol.source.TileImage({
projection: mapObj?.projection,
tileGrid: tilegrid,
tileUrlFunction: function (tileCoord) {
var z = tileCoord[0]
var x = tileCoord[1]
var y = tileCoord[2]
// 百度瓦片服务url将负数使用M前缀来标识
if (x < 0) {
x = -x
}
if (y < 0) {
if (z < 17) {
y = -(y + 1)
} else {
y = -(y + 2)
}
} else {
if (z >= 17) {
y = y - 0
}
}
return mapObj?.mapUrl.replace('{z}', z).replace('{x}', x).replace('{y}', y)
}
})
// //百度地图
let baidu_layer = new ol.layer.Tile({
source: baiduSource
})
layer.push(baidu_layer)
天地图
在线
let tdOnlineMap = new ol.layer.Tile({
// id: 'map_cta',
// title: '天地图矢量底图',
// layerName: 'baseMap',
source: new ol.source.XYZ({
projection: 'EPSG:4326',
url: mapObj?.mapUrl
})
})
let tdOnlineTextMap = new ol.layer.Tile({
// id: 'map_cta',
// title: '天地图矢量底图',
// layerName: 'baseMap',
source: new ol.source.XYZ({
projection: 'EPSG:4326',
url: mapObj?.mapTextUrl
})
})
layer.push(tdOnlineMap)
layer.push(tdOnlineTextMap)
离线
let offlineLayer = new ol.layer.Tile({
id: 'map_cta',
title: '天地图矢量标注',
layerName: 'baseMap',
source: new ol.source.XYZ({
// url: obj.url
projection: 'EPSG:4326',
url: mapObj?.mapUrl
})
})
layer.push(offlineLayer)
arcgis
在线
//在线
let arcgisLayer = new ol.layer.Tile({
source: new ol.source.TileArcGISRest({
url: mapObj?.mapUrl
})
})
layer.push(arcgisLayer)
离线
//离线
//console.log('arcgis底图配置', mapObj)
let origin = mapObj?.origin.split(',')
let resolutions = mapObj?.resolutions.split(',')
let matrixIds = []
for (let i = 0; i < resolutions.length; i++) {
resolutions[i] = parseFloat(resolutions[i])
matrixIds.push(i)
}
for (let i in origin) {
origin[i] = parseFloat(origin[i])
}
//console.log(resolutions)
//离线
//let projection = ol.proj.get('EPSG:3857')
let wmtsTileGrid = new ol.tilegrid.WMTS({
origin: origin, // 原点（左上角）
resolutions: resolutions, // 分辨率数组
matrixIds: matrixIds // 矩阵ID，就是瓦片坐标系z维度各个层级的标识
})
// // WMTS数据源与地图
let wmtsSource = new ol.source.WMTS({
url: mapObj?.mapUrl,
layer: 'arc_rest', // 图层名
version: '1.0.0', // WMTS版本
// 投影坐标系矩阵集，一定要和WMTS capabilities文档中一致，否则会加载失败
matrixSet: 'GoogleMapsCompatible',
format: 'image/png', // 图片格式
projection: mapObj?.projection, // 投影坐标系
requestEncoding: 'KVP', // 请求的编码方式，默认就是'KVP'
// 在WMTS capabilities文档中对应的样式名，一定要写，否则会加载失败
style: 'default',
tileGrid: wmtsTileGrid // 投影坐标系
})
//console.log(wmtsSource)
function zeroPad(num, len, radix) {
var str = num.toString(radix || 10)
while (str.length < len) {
str = '0' + str
}
return str
}
let arcgisLayer = new ol.layer.Tile({
//source: wmtsSource
source: new ol.source.TileImage({
projection: mapObj?.projection,
// 瓦片路径函数
tileUrlFunction: function (tileCoord) {
// 缩放级别
var z = zeroPad(tileCoord[0], 2, 10)
// 瓦片行号
var x = zeroPad(tileCoord[1], 8, 16)
// 瓦片列号
var y = zeroPad(-tileCoord[2] - 1, 8, 16)
// 瓦片本地路径
//return 'http://127.0.0.1:8082/mapData/arcgis/hz/' + 'L' + z + '/' + 'R' + y + '/' + 'C' + x + '.png'
return mapObj?.mapUrl + '/L' + z + '/' + 'R' + y + '/' + 'C' + x + '.png'
}
})
})
layer.push(arcgisLayer)
