leaflet使用动态key和自定义xy轴

最新推荐文章于 2024-06-06 15:07:55 发布

Rain_Rong

最新推荐文章于 2024-06-06 15:07:55 发布

阅读量414

点赞数 4

文章标签： html5

本文链接：https://blog.csdn.net/qq_18896247/article/details/139042643

版权

自定义xy轴

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <title>Leaflet 加载Cmap地图</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <style>
	html, body,#map {
	    width: 100%;
	    height: 100%;
	}
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <script>
  		//动态修改xy轴
	  function getPath(number) {
	    let str = `${number}`;
	    while (str.length % 3 !== 0)
	      str = `0${str}`;
	    let path = "";
	    const length = str.length / 3;
	    for (let i2 = 0; i2 < length; i2++) {
	      if (path.length > 0)
	        path += "/";
	      path = path + str.substring(i2 * 3, (i2 + 1) * 3);
	    }
	    return path;
	  }
    const map = L.map('map').setView([35.173808,124.101563], 2); // 设置中心点坐标和缩放级别
	const auth_key="";//此处的auth_key需要动态计算
	const CMapTileLayer = L.TileLayer.extend({
	  getTileUrl: function(coords) {
		  console.log(coords)
	    const x = coords.x,
	        y = coords.y,
	        z = coords.z,
	        xPath = getPath(x),
	        yPath = getPath(y);
	    return L.Util.template('https://xxxxxxxxxxxxxxxxx/tiles/cmap/{z}/{xPath}/{yPath}.png?auth_key={auth_key}', {
	        xPath: xPath,
	        yPath: yPath,
	        z: z,
			auth_key:auth_key
	    });
	  }
	});
 
	const cmap = new CMapTileLayer();
	map.addLayer(cmap);
  </script>
</body>
</html>

动态key

var ourtiles = L.tileLayer('https://xxxxxxxxxxxxxx/tiles/i4-map-m/{z}/{x}/{y}.png?auth_key=' + getAuthKey(), {
        maxZoom: 21
    });

map = L.map(mapId, {
        //crs: L.CRS.EPSG3395, //x:113.73458862304689;y:22.466878364528448
        crs: L.CRS.EPSG3857, //海图
        center: [32.466878364528448, 183.73458862304689],
        zoom: 12,
        layers: [ourtiles],
        zoomControl: false,
        attributionControl: false
    });