版权声明：本文为博主原创文章，非商业转载请附上地址与作者信息，谢谢！ https://blog.csdn.net/jx950915/article/details/82657689
引入文件
<style>
/* 调整OL控件位置和样式 */
*{
margin:0;
padding:0;
}
.ol-zoom{
top:80px;
}
.ol-zoom-extent{
top:140px;
}
.ol-full-screen{
top:80px;
}
.ol-scale-line{
left:200px;
}
.mouse-position-wrapper{
width:300px;
height:29px;
color:#FFFFFF;
position:absolute;
right:20px;
bottom:1px;
z-index:999;
}
/* 调整地标弹出提示框的宽度 */
.popover{
width: 260px;
}
.icon {
width: 32px;
height: 48px;
background: url('./data/icon.png');
cursor: pointer;
}
</style>
<body onload="init()">
<div id="map"><div id="popup"></div></div>
<div id="mouse-position" class="mouse-position-wrapper">
<div class="custom-mouse-position"></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/ol.js"></script>
<script src="tilesInfo.js"></script>
<script src="js/app.js"></script>
</body>配置
tilesInfo.js
var outputPath='../tiles/';//瓦片图
var urlType='0';
var minZoom=0;//最小
var maxZoom=17;//最大
var centX=113.953162;//初始中心点
var centY=22.532701;//初始中心点
var format='.png';//图片后缀
var epsgCode='3857';
var tileSize=256;初始化
app.js
var map, view;
function init(){
var epsg = 'EPSG:' + epsgCode;
var projection = ol.proj.get(epsg);
var url = outputPath;
if(urlType=="0"){
url += "{z}/{x}/{y}" + format;
}else if(urlType=="1"){
url += "{z}/{y}/{x}" + format;}
else if(urlType=="2"){
url += "{z}/{x}/{x}_{y}" + format;
}else if(urlType=="3"){
url += "{z}/{x}/{-y}" + format;
}
// 初始化显示视图
view = new ol.View({
center: ol.proj.transform([centX, centY], 'EPSG:4326', epsg),
projection: projection,
zoom: maxZoom,
minZoom: minZoom
});
map = new ol.Map({
target: 'map',
controls: ol.control.defaults().extend([
new ol.control.FullScreen(),
new ol.control.OverviewMap(),
new ol.control.ScaleLine(),
coordinateFormat: ol.coordinate.createStringXY(6),
projection: ol.proj.get('EPSG:4326'),
className: 'custom-mouse-position',
target: document.getElementById('mouse-position')
}),
]),
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
minZoom: minZoom,
maxZoom: maxZoom,
projection: projection,
tileSize: tileSize,
url: url
})
})],
loadTilesWhileAnimating: true,
target: document.getElementById('map'),
view: view
});
}