地圖圖層顯示原理
- 将各個服務提供的地圖作為圖層添加到Map中
地圖圖層對象
地圖圖層對象
加載地圖方法
- 建立地圖對象：map=L.map()
- 圖層添加到地圖中：*.addTo(map)
通路iServer REST地圖服務
-
通過titledMapLayer接口對接
url：與iServer服務對接，設定地圖服務位址
Web應用開發之多來源地圖資料加載
<!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标準實作
Web應用開發之多來源地圖資料加載
<!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>