构建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电子海图 ,电子海图开发引擎
|