电子海图开发第十九篇 web电子海图使用OpenLayers加载瓦片地图（共一百篇）

最新推荐文章于 2024-02-12 21:55:06 发布

电子海图（微信lvxin6136）

最新推荐文章于 2024-02-12 21:55:06 发布

阅读量1.8k

点赞数

分类专栏：电子海图

本文链接：https://blog.csdn.net/l329831342/article/details/106981491

版权

电子海图专栏收录该内容

83 篇文章 130 订阅

订阅专栏

构建OpenLayers，首先在在要web电子海图的网页中引入ol.js和ol.css这两个文件，你可以到openlayers官网去下载这个文件，也可以到http://www.sailxy.com查看源代码下载这两个文件，并且可以查看演示的效果。

map的创建完整代码

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="js/ol/ol.css" type="text/css">
    < src="js/ol4.6.5.js"></>
    <title>OpenLayers example</title>
  </head>
<style>
      .map {
        height: 100%;
        width: 100%;
      }
    </style>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script>
var seamap = new ol.layer.Tile({
	source : new ol.source.XYZ({
		url : "http://112.126.96.159/Ship/Map?z={z}&y={y}&x={x}",
		projection : 'EPSG:3857'
	})
});

zoomslider = new ol.control.ZoomSlider(); zoomcontrol = new ol.control.Zoom(); 
map = new ol.Map({
		layers : [ seamap ],
		view : new ol.View({
			center : ol.proj.transform([ 119.22, 39.222 ], 'EPSG:4326',
					'EPSG:3857'),
			projection : 'EPSG:3857',
			zoom : 5,
			minZoom : 2,
			maxZoom : 15,
		}),
		target : 'map',
		controls : [ zoomslider, zoomcontrol ]
	});
</script> </body> </html>

这段代码的作用是在网页是显示一个地图；
地图必须显示在一个div中，因此首先创建一个div；
target:'map' 指定了地图要显示在id为map的div中；
new ol.layer.Tile定义了一个图层,数据来源是航易电子海图切片数据；
new ol.View定义了地图的中心位置，范围和层级。
controls是显示地图的放大缩小控件；

联系作者及参考文章：web电子海图接口 web电子海图，电子海图开发引擎

电子海图（微信lvxin6136）

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
电子海图开发第十九篇 web电子海图使用OpenLayers加载瓦片地图（共一百篇）

构建OpenLayers，首先在在要web电子海图的网页中引入ol.js和ol.css这两个文件，你可以到openlayers官网去下载这个文件，也可以到http://www.sailxy.com查看源代码下载这两个文件，并且可以查看演示的效果。map的创建完整代码<!doctype html><html lang="en"> <head> <link rel="stylesheet" href="js/ol/ol.css" type=...
复制链接

扫一扫