Web应用开发之多来源地图数据加载

最新推荐文章于 2022-10-20 11:31:41 发布

bus_lupe

最新推荐文章于 2022-10-20 11:31:41 发布

阅读量394

点赞数 1

分类专栏：超图

本文链接：https://blog.csdn.net/bus_lupe/article/details/108689857

版权

超图专栏收录该内容

12 篇文章 8 订阅

订阅专栏

地图图层显示原理

将各个服务提供的地图作为图层添加到Map中

在这里插入图片描述

地图图层对象

在这里插入图片描述

地图图层对象

加载地图方法

创建地图对象：map=L.map()
图层添加到地图中：*.addTo(map)

访问iServer REST地图服务

通过titledMapLayer接口对接
url：与iServer服务对接，设置地图服务地址

<!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>地图加载</title>
  <script src="dist/leaflet/include-leaflet.js"></script>
</head>
<body>
  <div id="map" style="width:1500px;height:700px;"></div>
  <script>
    var map
    // 设置访问的GIS服务地址
    var url = "http://localhost:8090/iserver/services/map-china400/rest/maps/China"
    // 创建地图对象
    map = L.map("map", {
      center: [0, 0], // 中心点
      maxZoom: 18, // 缩放的比例
      zoom: 2,
      crs: L.CRS.EPSG3857
    })
    L.supermap.tiledMapLayer(url, {noWrap: true}).addTo(map)
  </script>
</body>
</html>

访问WMTS服务

通过wmtsLayer接口对接
该类用于访问图片服务器，基于OGC WMTS 1.0.0标准实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="dist/leaflet/include-leaflet.js"></script>
	</head>
	<body>
		<div id="map" style="width:1500px;height:700px;"></div>
		<script type="text/javascript">
			var res = []
			for (var i  = 0; i < 22; i++) {
				res.push(165664.43905455674 / (Math.pow(2, i)))
			}
			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://localhost:8090/iserver/services/map-china400/wmts100", {
				layer: "China",
				style: "default",
				tilematrixSet: "Custom_China",
				format: "image/png",
				requestEncoding: "REST"
			}).addTo(map)
		</script>
	</body>
</html>

地图叠加

多个地图叠加
实例化多个maplayer
坐标系要保持一致
京津冀地区人口分布图_专题图与China地图叠加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="dist/leaflet/include-leaflet.js"></script>
	</head>
	<body>
		<div id="map" style="width:1500px;height:700px;"></div>
		<script type="text/javascript">
			var map
			var urlWorld = "http://localhost:8090/iserver/services/map-china400/rest/maps/China_4326"
			var urlJinjing = "http://localhost:8090/iserver/services/map-jingjin/rest/maps/%E4%BA%AC%E6%B4%A5%E5%9C%B0%E5%8C%BA%E4%BA%BA%E5%8F%A3%E5%88%86%E5%B8%83%E5%9B%BE_%E4%B8%93%E9%A2%98%E5%9B%BE"
			map = L.map('map', {
				crs: L.CRS.EPSG4326,
				center: [40, 118],
				maxZoom: 18,
				zoom: 6
			})
			L.supermap.tiledMapLayer(urlWorld).addTo(map)
			L.supermap.tiledMapLayer(urlJinjing, {
				transparent: true,
				opacity: 0.8
			}).addTo(map)
		</script>
	</body>
</html>