应用超图进行配图发布地图服务并进行切片,最后在前端加载切片,我们需要分别设置三次比例尺:
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>