侧边栏壁纸
博主头像
实习两年半

基础不牢,地动山摇。

  • 累计撰写 43 篇文章
  • 累计创建 40 个标签
  • 累计收到 4 条评论

目 录CONTENT

文章目录

翻遍全网找到的海图xyz请求方式制作

实习两年半
2023-04-12 / 0 评论 / 0 点赞 / 369 阅读 / 725 字
温馨提示:
本文最后更新于 2023-04-13,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

思路

我以前制作的都是街道电子地图图层,通过MapTileDownloader下载地图瓦片数据,默认存储的就是ESPG:3857格式放的目录。在通过nginx代理一下,即可完成xyz访问瓦片数据的方式,这也是谷歌地图使用的方式。

海图数据下载

目前查看网络上的电子海图服务,只在船讯网上看到了电子海图图层,一开始想着自己去爬取船讯网的数据,奈何本人对webGis、坐标系、转换等等一无所知。
后来想着看看有没有现成的工具,最终发现了“水经万能地图下载器”,上面就有海图且就是船讯网上的海图。说干就干,看看怎么下载。

1. 选择江苏地图访问点击下载

image

2. 在弹出页面选择自己的下载层级

这里我选择的是12级别,但是最终导出为瓦片数据就是11级的,可能是这个软件的策略问题,我也没搞清楚。
image-1681300269753

3. 下载完成后可以在任务列表中查看

点击导出,可以设置导出为瓦片数据
image-1681300358464
image-1681300396079

4. 这里选择后点击应用,点确认提示vip才能用,经测试点击“应用”可以绕过vip

image-1681300466995

5. 选择要导出的任务,点击上方的导出-> 开始导出

image-1681300531981

6. 导出后效果如图

image-1681300593717

通过nginx代理瓦片数据

怎么代理,这就是nginx的知识了,详情百度

server {
        listen       8005;
        server_name  localhost;
	
	   location /map {
            alias   /Users/cwl/Desktop/map/haitu;
        }
}

通过OpenLayers渲染地图

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>海图</title>
		<link rel="stylesheet" href="static/ol.css" type="text/css">
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				height: 100%;
			}

			.map {
				height: 100%;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div id="map" class="map"></div>
		<script src="static/ol.js"></script>
		<script>
			let mapUrl = 'http://localhost:8005/map/haitu/{z}/{x}/{y}.png'; //离线地图地址
			let mapCenter = [119.882113,32.144177];
			let terrain = new ol.layer.Tile({
				source: new ol.source.XYZ({
					projection: "EPSG:3857",
					url: mapUrl
				})
			});
			var views = new ol.View({
				projection: ol.proj.get('EPSG:3857'),
				center: ol.proj.transform(mapCenter, 'EPSG:4326',
					'EPSG:3857'), //无偏移时 ol.proj.fromLonLat([112.286051,30.365276]),
				zoom: 11,
				minZoom: 11,
				maxZoom: 11
			});
			var map = new ol.Map({
				target: 'map',
				logo: 'false',
				// controls: ol.control.defaults({ attribution: false, zoom: false, rotate: false }).extend([
				// 	//添加比例尺控件
				// 	new ol.control.ScaleLine({
				// 		units: 'metric',
				// 		target: 'scalebar',
				// 		className: 'ol-scale-line'
				// 	})
				// ]),
				layers: [terrain],
				view: views
			});
		</script>
	</body>
</html>

最终效果

image-1681300789913

0

评论区