Openlayers加载水晶注标准TMS瓦片

最新推荐文章于 2025-05-07 09:01:12 发布

A 壹零贰肆

最新推荐文章于 2025-05-07 09:01:12 发布

阅读量929

点赞数 2

分类专栏： openlayers 文章标签： javascript gis osg

本文链接：https://blog.csdn.net/a873744779/article/details/122398131

版权

openlayers 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用OpenLayers库加载TMS(Tiled Map Service)格式的地图瓦片的方法。通过计算不同层级的分辨率并设置正确的瓦片URL，可以实现在特定地理坐标系(EPSG:4326)下的地图显示。文章提供了具体的JavaScript代码实现，包括如何配置图层源、定义瓦片网格等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此为个人测试可用，具体情况实时更改优化，仅供参考(版本：ol6)：

/**
 * 水晶注 标准TMS 84 瓦片
 */

//1.计算每层分辨率 0-20
let resolution = [];
for (var i = 0; i <= 20; i++) {
	//256 瓦片宽度
	resolution[i] = 180.0 / 256.0 * 1.0 / Math.pow(2, i);
}

let layerTms = new ol.layer.Tile({
	source: new ol.source.XYZ({
		tileUrlFunction: function(tileCoord) {
			let z = tileCoord[0];
			let x = tileCoord[1];
			let y = Math.pow(2, z) - tileCoord[2] - 1;
			//http://127.0.01:22222/mapdata/tms/  为TMS地址
			return 'http://127.0.0.1:22222/mapdata/tms/' + z + '/' + x + '/' + y + '.jpg';
		},
		projection: 'EPSG:4326',
		tileGrid: new ol.tilegrid.TileGrid({
			//设置分辨率
			resolutiions: resolution,
			//设置中点
			origin: [-180, 90]
		}),
		wrapX: !0
	}),
	zIndex: 0,
	visible: true
});

let mhMap = new ol.Map({
	view: new ol.View({
		center: [110.5, 29.5],
		zoom: 3,
		minZoom: 3,
		maxZoom: 10,
		projection:'EPSG:4326'
	}),
	target:'map',
	projection:'EPSG:4326',
	layers:[layerTms]
})