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

Posted 电子海图

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了电子海图开发第十九篇 web电子海图 使用OpenLayers加载瓦片地图（共一百篇）相关的知识，希望对你有一定的参考价值。

 

构建OpenLayers，首先在在要web电子海图的网页中引入ol.js和ol.css这两个文件，你可以到openlayers官网去下载这个文件

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>
    < type="text/java">
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 ]
    });

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

参考文章：电子海图开发，web电子海图开发，电子海图二次开发

 

以上是关于电子海图开发第十九篇 web电子海图 使用OpenLayers加载瓦片地图（共一百篇）的主要内容，如果未能解决你的问题，请参考以下文章

电子海图开发第六篇--电子海图文件结构（共一百篇）

基于电子海图的水面无人艇全局路径规划

ArcGIS Maritime 发布海图切片服务详解

Python开发第十九篇：Python操作MySQL

ArcGIS Maritime Server 开发教程ArcGIS 海图软件系列

ArcGIS Maritime Server 开发教程ArcGIS 海图软件系列