OpenLayers展现tiff和矢量文件
tiff文件展现效果图
矢量文件展现效果图
需要稍微改一下的我都备注了,话不多说,上代码;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/ol.css" type="text/css">
<style>
</style>
<script src="./js/ol.js" type="text/javascript"></script>
<title>OpenLayers map preview</title>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var pureCoverage = true;
var format = 'image/png';
var bounds = [140.17593383789062, 36.025543212890625,
140.20614624023438, 36.04888916015625
]; //Geotiff的范围
//地图
// var tiled = new ol.layer.Tile({
// source: new ol.source.OSM()
// });
//地图图层
var tiled = new ol.layer.Tile({
opacity: 1,
source: new ol.source.XYZ({
url: "", //地图路径也可用ol官网上自带的地图图层,如上:
}),
});
//Geotiff图层
var untiled = new ol.layer.Image({
opacity: 1,
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://192.168.1.159:8080/geoserver/cite/wms', //Geoserver的wms地址,用户可以根据需求而改变
params: {
'FORMAT': format,
'VERSION': '1.1.1',
"LAYERS": 'cite:JPN-4-Patriot-2089-0.48m-20190910', //图层名称,用户可以根据需求而改变
"exceptions": 'application/vnd.ogc.se_inimage',
}
})
});
//矢量图层加载
var vector = new ol.layer.Vector({
title: 'add Layer',
source: new ol.source.Vector({
projection: 'EPSG:4326',
url: "./china.json", //GeoJSON的文件路径,用户可以根据需求而改变
format: new ol.format.GeoJSON()
}),
});
var projection = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees',
axisOrientation: 'neu',
global: true
});
var map = new ol.Map({
target: 'map',
layers: [
tiled,
untiled,
vector,
],
view: new ol.View({
projection: projection
})
});
map.getView().fit(bounds, map.getSize());
</script>
</body>
</html>