<!doctype html>
<html lang="en">
<head>
<title>地图示例</title>
<link rel="stylesheet" href="../openlayerJs/ol.css" type="text/css">
<style>
* {margin:0; padding:0;}
html,body{height:100%;}
.map {
height:100%;
width: 100%;
}
</style>
<script src="../openlayerJs/ol.js"></script>
</head>
<body>
<h2>ol离线测试</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
//初始化页面
initPage();
function initPage(){
InitGMap();
}
//初始化地图
function InitGMap() {
let mapUrl ='http://218.200.69.7:12000/CHN/googlemaps/satellite/{z}/{x}/{y}.jpg'; //离线地图地址
let mapCenter=[112.286051,30.365276];
let terrain = new ol.layer.Tile({
source: new ol.source.XYZ({
projection: "EPSG:3857",
url: mapUrl
})
});
var views = new ol.View({
projection: ol.proj.get('EPSG:3857'),
center: ol.proj.transform(mapCenter, 'EPSG:4326', 'EPSG:3857'),//无偏移时 ol.proj.fromLonLat([112.286051,30.365276]),
zoom: 15,
minZoom: 3,
maxZoom: 21
});
var map = new ol.Map({
target:'map',
logo: 'false',
// controls: ol.control.defaults({ attribution: false, zoom: false, rotate: false }).extend([
// //添加比例尺控件
// new ol.control.ScaleLine({
// units: 'metric',
// target: 'scalebar',
// className: 'ol-scale-line'
// })
// ]),
layers: [terrain],
view:views
});
}
</script>
</body>
</html>
使用openlayers加载离线地图实例
5星 · 超过95%的资源 需积分: 32 123 浏览量
2022-10-06
10:13:37
上传
评论
收藏 345KB RAR 举报 
olMap.rar （10个子文件） 
olMap css 
mui.css 95KB mui.min.css 74KB unpackage cache cloudcertificate fonts mui.ttf 29KB manifest.json 10KB
index.html 426B js mui.js 258KB mui.min.js 121KB web css img js html map.html 1KB openlayerJs ol.css 4KB ol.js 973KB
Devil枫
- 粉丝: 210
- 资源: 5
评论5