Openlayers 踩坑日记
创建瓦片地图、、使用的是全能电子地图下载器扒的高德地图瓦片。
//创建地图
var map = new ol.Map({
view: new ol.View({
center: center,
zoom: 12
}),
target: 'map'
});
// 添加一个使用离线瓦片地图的层
var offlineMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
// 设置本地离线瓦片所在路径,由于例子里面只有一张瓦片,页面显示时就只看得到一张瓦片。
url: '/maps/{z}/{x}/{y}.png'
})
})
在地图上添加动态点:
var point = new ol.Feature({
geometry:new ol.geom.Point(ol.proj.fromLonLat([108.94716751861571+i*0.003, 34.26993638433956+i*0.003])),
//给feature添加信息。。。绑定点的信息
data: {
SGDD:i,
}
});
point.setStyle(new ol.style.Style({
image:new ol.style.Icon({
src:'static/img/redpoint.png',
})
})
);
source = new ol.source.Vector({
features:[point]
});
layer = new ol.layer.Vector({
source: source
});
map.addLayer(layer);
为地图上每一个事故点添加弹出框:
map.on('click',function(e){
//在点击时获取像素区域
var pixel = map.getEventPixel(e.originalEvent);
map.forEachFeatureAtPixel(pixel,function(feature){
console.log(feature);
content.innerHTML = "SGDD:"+feature.H.data.SGDD;
//coodinate存放了点击时的坐标信息
var coodinate = e.coordinate;
//设置弹出框内容,可以HTML自定义
//设置overlay的显示位置
overlay.setPosition(coodinate);
//显示overlay
map.addOverlay(overlay);
});
全部代码:
<html>
<head>
<title>demo</title>
<link rel="stylesheet" type="text/css" href="static/ol/ol.css">
<script type="text/javascript" src="static/ol/ol.js" charset="UTF-8"></script>
<style type="text/css">
.ol-popup {
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "x";
}
</style>
</head>
<body onload="init()">
<div style="width:100%;">
<div id="map" style="width:100%;"></div>
</div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
<script type="text/javascript">
function init(){
//中心坐标
var center = ol.proj.transform([108.94716751861571, 34.26993638433956], 'EPSG:4326', 'EPSG:3857');
//创建地图
var map = new ol.Map({
view: new ol.View({
center: center,
zoom: 12
}),
target: 'map'
});
// 添加一个使用离线瓦片地图的层
var offlineMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
// 设置本地离线瓦片所在路径,由于例子里面只有一张瓦片,页面显示时就只看得到一张瓦片。
url: '/maps/{z}/{x}/{y}.png'
})
});
map.addLayer(offlineMapLayer);
var source =null;
var layer =null;
var overlay =null;
var container = document.getElementById("popup");
var content = document.getElementById("popup-content");
var closer = document.getElementById("popup-closer");
for(var i=0;i<4;i++){
var point = new ol.Feature({
geometry:new ol.geom.Point(ol.proj.fromLonLat([108.94716751861571+i*0.003, 34.26993638433956+i*0.003])),
//给feature添加信息
data: {
SGDD:i,
}
});
point.setStyle(new ol.style.Style({
image:new ol.style.Icon({
src:'static/img/redpoint.png',
})
})
);
source = new ol.source.Vector({
features:[point]
});
layer = new ol.layer.Vector({
source: source
});
map.addLayer(layer);
}
overlay = new ol.Overlay({
//设置弹出框的容器
element: container,
//是否自动平移,即假如标记在屏幕边缘,弹出时自动平移地图使弹出框完全可见
autoPan: true });
//点击关闭按钮 关闭弹窗
closer.onclick = function () {
//不显示弹出框
overlay.setPosition(undefined);
closer.blur();
return false;
};
map.on('click',function(e){
//在点击时获取像素区域
var pixel = map.getEventPixel(e.originalEvent);
map.forEachFeatureAtPixel(pixel,function(feature){
console.log(feature);
content.innerHTML = "SGDD:"+feature.H.data.SGDD;
//coodinate存放了点击时的坐标信息
var coodinate = e.coordinate;
//设置弹出框内容,可以HTML自定义
//设置overlay的显示位置
overlay.setPosition(coodinate);
//显示overlay
map.addOverlay(overlay);
});
});
}
</script>
</body>
</html>
个人学习,总结所记录。。。。如有雷同纯属学习!