supermap 配图切图比例尺设置

最新推荐文章于 2022-12-01 11:59:05 发布

超宝宝很乖

最新推荐文章于 2022-12-01 11:59:05 发布

阅读量5.3k

点赞数 3

分类专栏： SuperMap开发

本文链接：https://blog.csdn.net/weixin_43311389/article/details/88379602

版权

SuperMap开发专栏收录该内容

9 篇文章 2 订阅

订阅专栏

应用超图进行配图发布地图服务并进行切片，最后在前端加载切片，我们需要分别设置三次比例尺：
1 在超图desktop分级配图时，需要设置一次分级比例尺
在这里插入图片描述
分级配图中，相邻比例尺层级的最小比例尺和下一级别的最大比例尺相同，如果地图比例尺刚好设在此分界线上，那么你看到的是拥有当前比例尺为最小比例尺的那一级。
比如19级和18级，19级的比例尺范围为0~2000,就是最大可见比例尺为0，最小可见比例尺为1：2000 。18级比例尺范围为2000~5000，就是最大可见比例尺为1：2000，最小可见比例尺为1：5000。那么当地图的比例尺为1：2000时，地图上显示的是19级的图像。
其实就是19级：（0，2000]
18级（2000，3000]
…
可以理解为当前级别比例尺为最小可见比例尺。（19级的比例尺就是1：2000）
在这里插入图片描述
2 在进行生产切片时，需要设置一次切片缓存比例尺

这里设置的切片缓存比例尺，就是取地图服务放大到指定缓存比例尺的图像，比如我设置的缓存比例尺为1：3000，那么就是取地图服务在1：3000的图像作为缓存切片。在上面我们知道，1：3000属于（2000，3000]区间，实际上就是第18级的切片。

3 在前端加载切片文件时，设置一次自定义比例尺。
问：为什么要自定义比例尺呢？
原因是按默认比例尺的话，和切片比例尺不能较好吻合，会造成图像模糊的现象。就好像一个近视200度的人戴了一副300度的眼镜看景物。自定义比例尺的作用就是使“眼镜”的度数和人眼吻合，达到浏览切片地图最清晰的效果。
supermap leaflet代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
    <script type="text/javascript" src="http://iclient.supermap.io/dist/leaflet/iclient9-leaflet.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">
   
    var map;
	var quanguoUrl="切片地图服务url";
	var quanguoLayer=L.supermap.tiledMapLayer(quanguoUrl);

	//自定义比例尺
	var scaleDenominators = [32000000,16000000,8000000,4000000,2000000,1000000,500000,250000,125000,64000,32000,16000,8000,4000,3000,2000];
	var origin = [29.38,120.28];
	//leaflet CRS投影设置
	var crs = L.Proj.CRS("EPSG:3857", {
	   origin: origin,
	   scaleDenominators: scaleDenominators
	});
	//限制移动范围。
	var cornerLeftUp =  L.latLng(70, 30); //设置左上角经纬度
	var cornerRightDown = L.latLng(-10, 175);//设置右下点经纬度
	var bounds = L.latLngBounds(cornerLeftUp, cornerRightDown); //构建视图限制范围

	map = L.map('map', {
		crs:crs,
		//crs:L.CRS.EPSG3857,
		center: [29.38,120.28],
        maxZoom: 15,
        zoom: 3,
		maxBounds: bounds
     });
	map.addLayer(quanguoLayer);
</script>
</body>
</html>