SM_iClient for leaflet坐标系比例尺设置_访问地图note

最新推荐文章于 2023-10-13 11:43:29 发布

code_practice66

最新推荐文章于 2023-10-13 11:43:29 发布

阅读量1k

点赞数

分类专栏： GIS_开发

本文链接：https://blog.csdn.net/weixin_44124800/article/details/104309391

版权

GIS_开发专栏收录该内容

10 篇文章 4 订阅

订阅专栏

iClient for leaflet坐标系比例尺设置

leaflet地图中心点设置、开发叠加点线面对象、开发可视化展示仅支持经纬度
设置地图坐标系
设置地图缩放比例尺级别(固定比例尺级别)
坐标转换
- 投影设置接口（L.Proj.CRS）,它的方法（在网站：https://leafletjs.com/reference-1.3.0.html#crs）
- Point=L.Proj.CRS.project(latlng);
- LatLng=L.Proj.CRS.unproject(point);//eg:
坐标转换还有： L.Util.transform的方法(-- https://iclient.supermap.io/web/apis/leaflet.html)
/leaflet/core/Transform.js, line 7
L.Util.transform(feature, sourceCRS, targetCRS){GeoJSONObject} //将要素转换为指定坐标。
sourceCRS L.Proj.CRS L.CRS.EPSG4326 可选要素转换源坐标系。
targetCRS L.Proj.CRS 要素转换目标坐标系。如：L.Util.transform(capital,L.CRS.EPSG3857,L.CRS.EPSG4326);
https://leafletjs.com/reference-1.3.0.html
地图中心点center属性上设置

以下- - code均未运行------

<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
			<title>SuperMap iClient JavaScript</title>
			<script src="dist/leaflet/include-leaflet.js"></script>
			<script type="text/javascript">
			</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,
	        url = "http://localhost:8090/iserver/services/map-China100/rest/maps/China"; 
			map = L.map('map',{
	        center: [0, 0],
	        maxZoom: 18,
	        zoom: 2
	    });
	    L.supermap.tiledMapLayer(url).addTo(map);
	        var capital = L.marker([4852151.576,12957801.617]);
	        var geometry=L.Util.transform(capital,L.CRS.EPSG3857,L.CRS.EPSG4326);
	        console.log(geometry);
	        L.geoJSON(geometry).addTo(map);
	</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document1</title>
    <script src="dist/leaflet/include-leaflet.js"></script>
</head>
<script>
    var map,crs,
        url="http://localhost:8090/iserver/services/map-China100/rest/maps/China";
    function onPageLoad(){
        crs=L.Proj.CRS("EPSG:3857",
        {
            origin:[-20037508.34,20037508.34],
            scaleDenominators:[1000000000,500000000,250000000,100000000,50000000,25000000,10000000]});
            var pt=crs.unproject(L.point(-20037508.34 , -20037508.34));
            map=L.map(
                'map',
                {
                    center:[pt.lat,pt.lng],
                    zoom:1,
                    crs:crs
                });
        L.supermap.tiledMapLayer(url,{noWrap:true}).addTo(map);
    }

</script>
<body onload=onPageLoad()>
    <div id="map" style="width:1200px;height:800px">
    </div>
</body>
    
</html>

3857web墨卡托坐标系
因为是全幅范围，所以原点是左上角的值

多来源地图叠加

Map:是地图控件，用于装载各类图层(本身没有任何地理数据的呈现)，也是一个容器，它包含iserver

地图图层对象与显示方法

加载图层方法
	创建地图对象 map=L.map(**);
	图层添加到地图中 L.supermap.*.addTo(map);

访问浏览iServer REST地图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iServer REST</title>
    <script src="dist/leaflet/include-leaflet.js"></script>
</head>

    <script>
            var map,url="http://localhost:8090/iserver/services/map-China100/rest/maps/China";
			function onPageLoad(){
				map=L.map('map', {center: [0, 0],zoom: 2,crs:L.CRS.EPSG4326});
				L.supermap.tiledMapLayer(url).addTo(map);
			}
               
    </script>   
<body onload=onPageLoad()>
    <div id="map" style="width:1200px;height:800px"></div>    
</body>
</html>

访问天地图地图（第三方）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_tiandituLayer_ll">天地图</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 map = L.map('map', {
            center: [0, 0],
            zoom: 0,
            crs: L.CRS.TianDiTu_WGS84
        });
        L.supermap.tiandituTileLayer({
            layerType:"vec",
            key: "415f6565281227f9918b6ae1f9a63965"
        }).addTo(map);
        L.supermap.tiandituTileLayer({
            isLabel: true,
            key: "415f6565281227f9918b6ae1f9a63965"
        }).addTo(map);
    </script>
</body>
</html>

访问浏览WMTS地图

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WMTSLayer</title>
</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 res = [];
    for (var i = 0; i < 22; i++) {
        res.push(165664.43905455674 / (Math.pow(2, i)));<!--push()方法可把它的参数顺序添加到数组res的尾部，返回值：指定值填加到数组后的新长度..pop()则是出栈-->
    }
    var map = L.map('map', {
        center: [0, 0],
        maxZoom: 18,
        zoom: 1,
        crs: new L.Proj.CRS("EPSG:3857",
            {
                origin: [-2.0037508342789244E7, 2.0037508342789244E7],
                resolutions: res,
                bounds: L.bounds([-2.0037508342789244E7, -2.0037508342789244E7], [2.0037508342789244E7, 2.0037508342789244E7])
            })
    });
    L.supermap.wmtsLayer("http://support.supermap.com.cn:8090/iserver/services/map-china400/wmts100",
        {
            layer: "China",
            style: "default",
            tilematrixSet: "Custom_China",
            format: "image/png",
            requestEncoding: 'REST',
        }
    ).addTo(map);
</script>
</body>
</html>

地图叠加
图层采用堆栈形式，先加进去的在底层，所以后面加进来的地图要设置透明度

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>地图叠加</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 map, 
    urlWorld = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World",
    urlJinjing= "http://support.supermap.com.cn:8090/iserver/services/map-jingjin/rest/maps/京津地区人口分布图_专题图";
	function onPageLoad(){
    map = L.map('map', {
        crs: L.CRS.EPSG4326,
        center: [40, 118],
        maxZoom: 18,
        zoom: 7
    });

    L.supermap.tiledMapLayer(urlWorld).addTo(map);
    L.supermap.tiledMapLayer(urlJinjing, {transparent: true,opacity: 0.6}).addTo(map);
	
	}
</script>
</body>
</html>