基于openlayer4画线，鼠标悬浮线上弹窗
<!DOCTYPE html>
<html>
<head>
<title>根据点位画线、鼠标悬浮提示信息</title>
<!-- <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css"> -->
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<!-- openlayers:地图控件 -->
<script src="js/openlayers/v4.3.3-dist/ol.js"></script>
<!-- openlayers CSS 文件 -->
<link rel="stylesheet" href="js/openlayers/v4.3.3-dist/ol.css" type="text/css" />
<!-- 弹出窗样式 -->
<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;
font: italic bold 12px ;
min-width: 30px;
}
.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: "✖";
} */
</style>
</head>
<body>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
<script>
// 初始给的中心点坐标。
var centerX = 117.3626;
var centerY = 32.9184;
var extent = [centerX, centerY, centerX, centerY];
var layer1 = new ol.layer.Tile({
source: new ol.source.OSM()
}); // 谷歌卫星地图（混合）
var layer2 = new ol.layer.Tile({
source: new ol.source.XYZ({
url:'http://mt3.google.cn/vt/lyrs=t@131,r@216000000&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Gal'//谷歌地形地图
}),
}); // 谷歌地形地图
var layerImage = new ol.layer.Image({
source: new ol.source.ImageStatic({
// url: 'images/mapTest.jpg',//这里添加静态图片的地址
url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512636538327&di=1198aa77a3df42bd8046d0353502904c&imgtype=0&src=http%3A%2F%2Foss.p.t262.com%2Fcpic%2Fbc%2F2e%2Fdec7377951965a2d1dca25d006522ebc.jpg',
imageExtent: [centerX-500, centerY-500, centerX+500, centerY+500],// 地图坐标中的图像的范围。这是图像的[左，右，右，上]地图坐标
}),
}); // 自定义的地图图片
//实例一个map
var map = new ol.Map({
// 在默认控件的基础上，再加上其他内置的控件
controls: ol.control.defaults().extend([
new ol.control.FullScreen(),
new ol.control.MousePosition(),
new ol.control.OverviewMap(),
new ol.control.ScaleLine(),
new ol.control.ZoomSlider(),
new ol.control.ZoomToExtent()
]),
layers: [layer1],
target: 'map',
view: new ol.View({
center: [centerX, centerY],
projection: ol.proj.get('EPSG:4326'),
zoom: 13,//当前的放大度数
minZoom:5,//最小放大度数
maxZoom:19,//最大放大度数
})
});
//实例化一个矢量图层Vector作为绘制层
var source = new ol.source.Vector();
//实例一个线(标记点)的全局变量
var geometry = new ol.geom.LineString(); //线,Point 点,Polygon 面
//散列点数组，放置的点的位置数据
var coordinate = [
[117.340367,32.977329],
[117.34173,32.970506]
];
//添加标记点
function addPonitToGeometry(arr) {
for (var i = 0; i < arr.length; i++) {
geometry.appendCoordinate(arr[i]);
}
}
addPonitToGeometry(coordinate);
var LineStringFeature = new ol.Feature(geometry); //绘制线的数据
//将线添加到Vector绘制层上
source.addFeature(LineStringFeature);
var vectorLayer = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
// 线
stroke: new ol.style.Stroke({
color: 'red',
width: 4
}),
})
});
map.addLayer(vectorLayer); //将绘制层添加到地图容器中
var container = document.getElementById("popup");
var content = document.getElementById("popup-content");
var popupCloser = document.getElementById("popup-closer");
var overlay = new ol.Overlay({
//设置弹出框的容器
element : container,
//是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
autoPan : true,
autoPanAnimation : {
duration : 250
//当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
}
});
map.on('pointermove', function(e) {
//获取像素区域
var pixel = map.getEventPixel(e.originalEvent);
var flag = false;
map.forEachFeatureAtPixel(pixel, function(feature) {
var coodinate = e.coordinate;
//设置弹出框内容，可以HTML自定义
content.innerHTML = "hello";
//设置overlay的显示位置
overlay.setPosition(coodinate);
flag = true;
});
if (flag) {
//显示overlay
map.addOverlay(overlay);
} else
map.removeOverlay(overlay);
});
</script>
</body>
</html>转载自：https://blog.csdn.net/qq_27186245/article/details/82227282
