<!doctype html>
|
<html lang="en">
|
<head>
|
<meta http-equiv="Expires" content="0" />
|
<meta http-equiv="Cache" content="no-cache" />
|
<meta http-equiv="Pragma" content="no-cache" />
|
<meta http-equiv="Cache-control" content="no-cache" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
|
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
|
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
|
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
|
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css" type="text/css"> -->
|
<style>
|
body {
|
margin: 0;
|
width: 100%;
|
height: 100vh;
|
}
|
|
.map-class {
|
height: 100%;
|
width: 100%;
|
}
|
</style>
|
<!-- 加载OpenLayers 类库 -->
|
<!-- <script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css"> -->
|
<!-- <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script> -->
|
<title>OpenLayers例子</title>
|
</head>
|
<body>
|
<div id="map" class="map-class"></div>
|
|
<script type="text/javascript">
|
// 天地图底图
|
var source = new ol.source.XYZ({
|
url: 'http://127.0.0.1:8088/02/{z}/{x}/{y}.png'
|
})
|
var tileLayer = new ol.layer.Tile({
|
title: '天地图',
|
source: source
|
});
|
|
var tlLayer = new ol.layer.Image({
|
source: new ol.source.ImageWMS({
|
//url: 'http://localhost:8097/geoserver/dtdt/wms',
|
url: "http://127.0.0.1:8088/geoserver/LF/wms",
|
params: {
|
'FORMAT': 'image/png',
|
'VERSION': '1.1.1',
|
//"LAYERS": 'dtdt:tl'
|
"LAYERS": 'LF:tl'
|
}
|
})
|
});
|
|
var map = new ol.Map({
|
target: 'map',
|
controls: ol.control.defaults({
|
attributionOptions: ({
|
collapsible: true
|
})
|
}),
|
layers: [
|
tileLayer, tlLayer
|
],
|
view: new ol.View({
|
center: ol.proj.transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
|
zoom: 4,
|
minZoom: 0,
|
maxZoom: 18,
|
//projection: "EPSG:4326"
|
projection: "EPSG:3857"
|
})
|
});
|
</script>
|
</body>
|
</html>
|
