<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>openlayers加载静态图片的地图</title>
<link rel="stylesheet" href="plug-in/openlayer3/css/ol.css">
<script type="text/javascript" src="plug-in/openlayer3/js/ol-debug.js"></script>
<style>
html,body,#map{
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
</style>
<script type="text/javascript">
function init() {
var extent = [0, 0, 1800, 1200];
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
var map=new ol.Map({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'plug-in/openlayer3/css/images/WPE0624.jpg',//这里添加静态图片的地址
projection: projection,
imageExtent: extent
})
})
],
target: 'map',
controls: ol.control.defaults({
attribution: false,
zoom:false
}).extend([
new ol.control.Zoom({
zoomInTipLabel:"放大",
zoomOutTipLabel:"缩小"
})
]),
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom:2,
maxZoom: 5
})
});
//显示当前坐标
showCoordinates('map',map);
}
//显示当前坐标
function showCoordinates(mapID,map) {
var coor_div;
var coordinatesFunc=function (opt_options) {
var options = opt_options || {};
coor_div=document.createElement("div");
coor_div.style.cssText="position:absolute; right:0px; bottom:0px;z-index:99;width:150px;background:rgba(0,60,136,0.5);padding-left:5px;color:#FFFFFF;font-size:15px;";
document.getElementById(mapID).appendChild(coor_div);
ol.control.Control.call(this, {
element: coor_div,
target: options.target
});
}
ol.inherits(coordinatesFunc, ol.control.Control);
map.addControl(new coordinatesFunc());
map.on("pointermove", showCoords);
function showCoords(evt) {
coor_div.innerHTML = "X：" + evt.coordinate[0].toFixed(0) + " Y：" + evt.coordinate[1].toFixed(0);
}
}
</script>
</head>
<body onload="init()">
<div id="map">
</div>
</body>
</html>
openlayers加载静态图片地图
5星 · 超过95%的资源 需积分: 45 68 浏览量
2017-10-31
11:15:48
上传
评论 5
收藏 5.14MB RAR 举报 
olDemo.rar （6个子文件） 
olDemo 
olImageStatic.html 3KB plug-in openlayer3 js 
ol.js 492KB ol-debug.js 2.48MB css ol.css 3KB images 
WPE0624.jpg 1.52MB word2017.jpg 3.47MB资源评论
zhao9423567212018-05-15还想看看资料- 饭粒儿2018-12-07内容太少，没啥可看的，功能你甭实现
