1. 程式人生 > >LeaFlet中切片圖層使用自定義座標系

LeaFlet中切片圖層使用自定義座標系

leaflet給定的座標系中規中矩,就那幾個,如果在專案遇到了需要用到我國2000一類的座標系,怎麼辦?解決方法只有一個那就是自定義座標系,由於leaflet是輕量性的,自定義座標系需要藉助Proj4Leaflet,leaflet的生態非常好,外掛很多,這是他的有點也是它的缺點。

一、如何定義座標系

1、引入外掛

2、查詢所要的定義的座標系的EPSG,然後https://epsg.io/到查詢,輸入3006,點選search,將搜尋的結果點進去

選擇proj.4,將紅框部分複製

二、建構函式

L.Proj.CRS(code, proj4def, options)

1、code :例如EPSG:3006

2、proj4def:剛才上面複製的,例如:"+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"

3、options:一個引數組,有幾個引數

  • origin:切片原點
  • scales:比例尺,這個和resolutions,需要設定其中的一個
  • resolutions:分別率,這個設定可以通過你載入的切片圖層中找,例如在geoserver中的grid查詢
  • bounds:座標的範圍,該參尋找見下圖Projected bounds:

三、demo

var crs = new L.Proj.CRS('EPSG:3006',
	'+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
	{
		resolutions: [
			4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8
		],
		origin: [-1200000.000000, 8500000.000000 ],
		bounds:  L.bounds( [-1200000.000000, 8500000.000000], [4305696.000000, 2994304.000000])
	}),
	map = new L.Map('map', {
		crs: crs,
		continuousWorld: true,
	});

new L.TileLayer('https://api.lantmateriet.se/open/topowebb-ccby/v1/wmts/token/'+ token +'/?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=topowebb&STYLE=default&TILEMATRIXSET=3006&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image%2Fpng', {
	maxZoom: 9,
	minZoom: 0,
	continuousWorld: true,
	attribution: '&copy; <a href="https://www.lantmateriet.se/en/">Lantmäteriet</a> Topografisk Webbkarta Visning, CCB',
}).addTo(map);
map.setView([59.3167, 18.0667], 7);