openlayers中海图的加载
Posted LZU-GIS
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了openlayers中海图的加载相关的知识，希望对你有一定的参考价值。
概述
在openlayers中直接加载海图会有偏移，这是因为海图的坐标是做了便宜的，所以需要定义海图的坐标，本文将讲述如何实现，并对比OSM和高德。
效果
实现
<!DOCTYPE html>
<html>
<head>
<title>XYZ</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<style>
#map,
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 16px;
}
.basemap {
position: absolute;
top: 20px;
right: 20px;
z-index: 99;
padding: 5px;
background: white;
}
</style>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="map" class="map">
<div class="basemap">
<input type="radio" name="baselayer" value="osm">OSM
<input type="radio" name="baselayer" value="nav" checked="checked">高德
<input type="radio" name="baselayer" value="sea">海图
</div>
</div>
<script>
// 定义海图坐标
proj4.defs(
'EPSG:3395',
'+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs'
);
const seaLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://m12.shipxy.com/tile.c?l=Na&m=o&y={y}&x={x}&z={z}',
projection: 'EPSG:3395',
tileGrid: ol.tilegrid.createXYZ({
extent: [
-20037508.342789244,
-20037508.342789244,
20037508.342789244,
20037508.342789244
]
})
}),
visible: false
});
const navLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
})
});
const osmLayer = new ol.layer.Tile({
source: new ol.source.OSM(),
visible: false
});
const vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: "data/china.json",
format: new ol.format.GeoJSON()
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#f00',
width: 1
})
})
});
const map = new ol.Map({
target: 'map',
layers: [ navLayer, osmLayer, seaLayer, vectorLayer ],
view: new ol.View({
minZoom: 1,
maxZoom: 18,
center: [11278378, 4208063],
zoom: 4
})
});
const layerDict = {
sea: seaLayer,
osm: osmLayer,
nav: navLayer
}
$('input[type=radio][name=baselayer]').change(function() {
for (const k in layerDict) {
const isShow = this.value === k;
layerDict[k].setVisible(isShow);
}
});
</script>
</body>
</html>
以上是关于openlayers中海图的加载的主要内容，如果未能解决你的问题，请参考以下文章