LeafletJS 简单使用3（超图使用问题解决） - 继1/2出现的问题及解决（超图更换地图地址之后瓦片空白问题解决）

Fighting_p

已于 2024-06-20 11:12:45 修改

阅读量930

点赞数

分类专栏：项目问题地图文章标签： arcgis

于 2022-12-30 17:24:11 首次发布

本文链接：https://blog.csdn.net/m0_53562074/article/details/128497051

版权

项目问题同时被 2 个专栏收录

104 篇文章 1 订阅

订阅专栏

地图

5 篇文章 0 订阅

订阅专栏

博客讲述了在地图应用中遇到的问题，即地图放大到最大层级时无法显示详细街道信息。更换地图后虽然瓦片能加载，但显示为透明。解决方案在于初始化地图时添加了`crs:L.CRS.EPSG4326`参数，并结合系统配置数据调整了中心点和缩放级别。同时提供了地图厂商的添加参数DEMO，DEMO中展示了如何设置CRS、分辨率、比例尺等参数来正确显示地图。

摘要由CSDN通过智能技术生成

1. 新的需求

现有地图放大后，最大层级不足以展示详细街道细信息，需要更换地图

2. 问题

更换地图后，地图瓦片可以加载出来，但是加载出来的瓦片是透明的（没有图案）

修改地图 zoom 和 maxZoom 都没有用

3. 解决：初始化地图时添加一些参数

初始化地图时添加参数：crs: L.CRS.EPSG4326,

this.map = L.map('map', {
  // center: [22.822074, 108.371154],
  // maxZoom: 18,
  // zoom: 11,
  crs: L.CRS.EPSG4326, // 【主要代码】解决地图地址更换为广西蓝色地图后图层透明问题
  center: JSON.parse(this.sysConfigData["gx.arcgis.center"].replace(/，/g, ',')), // 注意数组内中英文逗号，此处将中文逗号转为英文的
  maxZoom: this.sysConfigData["gx.arcgis.maxZoom"] * 1,
  zoom: this.sysConfigData["gx.arcgis.zoom"] * 1
})

tiledMapLayer(this.sysConfigData['gx.arcgis.mapUrl']).addTo(this.map)

4. 地图厂商给发的添加参数demo

<!--********************************************************************
* Copyright© 2000 - 2022 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title data-i18n="resources.title_imageMapLayer4326"></title>
		<script type="text/javascript" src="../js/include-web.js"></script>
	</head>
	<body
		style="
			margin: 0;
			overflow: hidden;
			background: #fff;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
		"
	>
		<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
		<script
			type="text/javascript"
			src="../../dist/leaflet/include-leaflet.js"
		></script>
		<script type="text/javascript">
			var host = window.isLocal ? window.server : 'https://iserver.supermap.io'
			var resultLayers, resultLayer
			var url =
				'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China_4326'
			var scales1 = [1155583.4, 577791.7, 288895.8, 144447.9]
			var scales2 = [
				8.653637486605571e-7, 0.00000173072749732112, 0.00000346145499464224,
			] //2其实就是1的(1/1155583.4...)
			/*    下面是天地图的比例尺
    var scaleTDT=[295829355.45456564,147914677.72728282,73957338.863641411,36978669.431820706,18489334.715910353,
        9244667.3579551764,4622333.6789775882,2311166.8394887941,1155583.419744397,577791.70987219852,
        288895.85493609926,144447.92746804963,72223.963734024815,36111.981867012408,18055.990933506204,9027.9954667531019,
        4513.997733376551,2256.9988666882755,1128.4994333441377,564.24971667206887]*/
			var crs = L.Proj.CRS('EPSG:4326', {
				origin: [-180, 90], // 全幅范围的“左上”
				bounds: L.bounds([-180, -90], [180, 90]), // 全幅范围：左下、右上
				resolutions: [
					1.40625, 0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125,
					0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125,
					0.001373291015625, 0.0006866455078125, 0.00034332275390625,
					0.000171661376953125, 0.0000858306884765625, 0.00004291534423828125,
					0.000021457672119140625, 0.000010728836059570312,
					0.000005364418029785156, 0.000002682209014892578,
					0.000001341104507446289,
				],
				//scaleDenominators: scales1  //比例尺分母
				scales: scales2, //直接写比例尺
			})
			var map = L.map('map', {
				center: [25.33, 110.55], //纬度,经度
				maxZoom: 18, //最大缩放级别
				minZoom: 1, //最小缩放级别
				zoom: 1, //当前缩放级别
				crs: crs,
			})
			L.supermap.tiledMapLayer(url).addTo(map)
		</script>
	</body>
</html>

查看地图参数

地图地址：https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China_4326.leaflet
在这里插入图片描述
在控制台执行命令 map.options 可以看到地图的一些详细信息

查看地图中心点等信息：