使用OpenLayers根据经纬度对地图进行单个标点，以及点击标点弹框的实现（没有从后台获取经纬度数据）
说明：OpenLayers 3详细官方API文档：http://develop.smaryun.com:81/API/JS/OL3InterfaceDemo/index.htm
1.该例子为页面在固定经纬度的情况下对地图进行单个或者多个标点，并没有从后台数据库获取经纬度数据，之后会再更新通过json来实现与与数据库实时进行标点。
2.首先我们还是先做好离线地图，具体操作参照我的另外一篇博文：使用OpenLayers发布离线地图
3.离线地图实现了之后，新建一个image文件夹，把我们标注所需要用到的图片放入其中，如下图所示：
4.整个地图文件夹格式变为：
5.index.html源码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根据经纬度实现单个描点</title>
<link href="./ol.css" rel="stylesheet" type="text/css" />
<script src="./ol.js" type="text/javascript"></script>
<style type="text/css">
body, html {
border: none;
padding: 0;
margin: 0;
}
#menu {
width: 100%;
height: 20px;
padding: 5px 10px;
font-size: 14px;
font-family: "微软雅黑";
left: 10px;
text-align: center;
}
#mapCon {
width: 100%;
height: 600px;
position: relative;
}
.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: 45px;
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: "✖";
}
#popup-content {
font-size: 14px;
font-family: "微软雅黑";
}
#popup-content .markerInfo {
font-weight: bold;
}
</style>
</head>
<body>
<div id="menu" style="font-weight:bold">
</div>
<div id="mapCon">
<!-- Popup -->
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content">
</div>
</div>
</div>
<script type="text/javascript">
var beijing = ol.proj.fromLonLat([113.34, 23.07]);
//示例标注点北京市的信息对象
var featuerInfo = {
geo: beijing,
att: {
//标注信息的标题内容
title: "广州市",
//标注详细信息链接
titleURL: "http://www.openlayers.org/",
//标注内容简介
text: "广州（简称穗），别称羊城、花城，广东省省会，是国际大都市、国际商贸中心、国际综合交通枢纽，首批沿海开放城市，也是南部战区司令部驻地，是粤港澳大湾区、泛珠江三角洲经济区的核心城市以及一带一路的枢纽城市。",
//标注的图片
imgURL: "./image/bj.jpg"
}
}
/**
* 实例化Map对象加载地图,默认底图加载天地图
*/
//地图设置中心，设置为广州
var center=ol.proj.transform([113.271429,23.135336],'EPSG:4326','EPSG:3857');
//创建地图
var map=new ol.Map({
view:new ol.View({
center:center,
minZoom:7,//设置缩放的最大和最小级别
maxZoom:13,
zoom:7//设置默认加载的级别
}),
target:'mapCon'//要显示地图的DIV的ID
});
//添加一个使用离线瓦片地图的层
var offLineMap=new ol.layer.Tile({
source:new ol.source.XYZ({
url:'tile/{z}/{x}/{y}.png'//本例中地图瓦片保存在当前目录下的tile文件夹目录下
})
});
map.addLayer(offLineMap);
/**
* 创建标注样式函数,设置image为图标ol.style.Icon
* @param {ol.Feature} feature 要素
*/
var createLabelStyle = function (feature) {
return new ol.style.Style({
image: new ol.style.Icon(
/** @type {olx.style.IconOptions} */
{
//设置图标点
anchor: [0.5, 60],
//图标起点
anchorOrigin: 'top-right',
//指定x值为图标点的x值
anchorXUnits: 'fraction',
//指定Y值为像素的值
anchorYUnits: 'pixels',
//偏移
offsetOrigin: 'top-right',
// offset:[0,10],
//图标缩放比例
// scale:0.5,
//透明度
opacity: 0.75,
//图标的url
src: './image/blueIcon.png'
}),
text: new ol.style.Text({
//位置
textAlign: 'center',
//基准线
textBaseline: 'middle',
//文字样式
font: 'normal 14px 微软雅黑',
//文本内容
text: feature.get('name'),
//文本填充样式（即文字颜色）
fill: new ol.style.Fill({ color: '#aa3300' }),
stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 })
})
});
}
//实例化Vector要素，通过矢量图层添加到地图容器中
var iconFeature = new ol.Feature({
//坐标点
geometry: new ol.geom.Point(beijing),
//名称属性
name: '广州市',
//大概人口数（万）
population: 2115
});
iconFeature.setStyle(createLabelStyle(iconFeature));
//矢量标注的数据源
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
//矢量标注图层
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
/**
* 实现popup的html元素
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
/**
* 在地图容器中创建一个Overlay
*/
var popup = new ol.Overlay({
//要转换成overlay的HTML元素
element: container,
//当前窗口可见
autoPan: true,
//Popup放置的位置
positioning: 'bottom-center',
//是否应该停止事件传播到地图窗口
stopEvent: false,
autoPanAnimation: {
//当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
duration: 250
}
});
map.addOverlay(popup);
/**
* 添加关闭按钮的单击事件（隐藏popup）
* @return {boolean} Don't follow the href.
*/
closer.onclick = function () {
//未定义popup位置
popup.setPosition(undefined);
//失去焦点
closer.blur();
return false;
};
/**
* 动态创建popup的具体内容
* @param {string} title
*/
function addFeatrueInfo(info) {
//新增a元素
var elementA = document.createElement('a');
elementA.className = "markerInfo";
elementA.href = info.att.titleURL;
//elementA.innerText = info.att.title;
setInnerText(elementA, info.att.title);
// 新建的div元素添加a子节点
content.appendChild(elementA);
//新增div元素
var elementDiv = document.createElement('div');
elementDiv.className = "markerText";
//elementDiv.innerText = info.att.text;
setInnerText(elementDiv, info.att.text);
// 为content添加div子节点
content.appendChild(elementDiv);
//新增img元素
var elementImg = document.createElement('img');
elementImg.className = "markerImg";
elementImg.src = info.att.imgURL;
// 为content添加img子节点
content.appendChild(elementImg);
}
/**
* 动态设置元素文本内容（兼容）
*/
function setInnerText(element, text) {
if (typeof element.textContent == "string") {
element.textContent = text;
} else {
element.innerText = text;
}
}
/**
* 为map添加点击事件监听，渲染弹出popup
*/
map.on('click', function (evt) {
//判断当前单击处是否有要素，捕获到要素时弹出popup
var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) { return feature; });
if (feature) {
//清空popup的内容容器
content.innerHTML = '';
//在popup中加载当前要素的具体信息
addFeatrueInfo(featuerInfo);
if (popup.getPosition() == undefined) {
//设置popup的位置
popup.setPosition(beijing);
}
}
});
/**
* 为map添加鼠标移动事件监听，当指向标注时改变鼠标光标状态
*/
map.on('pointermove', function (e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});
</script>
</body>
</html>
6.实现效果如下图所示：
7.点击该地图标记后效果如下图所示：
