电子海图开发第十九篇 web电子海图 使用OpenLayers加载瓦片地图（共一百篇） |
您所在的位置：网站首页 › 电子海图在线 › 电子海图开发第十九篇 web电子海图 使用OpenLayers加载瓦片地图（共一百篇） |
|
构建OpenLayers，首先在在要web电子海图的网页中引入ol.js和ol.css这两个文件，你可以到openlayers官网去下载这个文件，也可以到http://www.sailxy.com查看源代码下载这两个文件，并且可以查看演示的效果。 map的创建完整代码 < src="js/ol4.6.5.js"> OpenLayers example .map { height: 100%; width: 100%; } My Map 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 ] }); 这段代码的作用是在网页是显示一个地图；地图必须显示在一个div中，因此首先创建一个div；target:'map' 指定了地图要显示在id为map的div中；new ol.layer.Tile定义了一个图层,数据来源是航易电子海图切片数据； new ol.View定义了地图的中心位置，范围和层级。controls是显示地图的放大缩小控件；联系作者及参考文章：web电子海图接口 web电子海图 ，电子海图开发引擎 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |