OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。博主因为公司业务主打IoT，经常需要在产品中加入一些地图以及对地图的操作。便一不留神上了OpenLayers的这条贼船。接下来就尝试的来做一些小的记录，用来巩固自身的知识。
先来看看我们要实现的效果
再来一大段代码
HTML部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>加载地图</title>
<link rel="stylesheet" type="text/css" href="OpenLayers/css/ol.css" />
<link rel="stylesheet" type="text/css" href="popup.css" />
<script type="text/javascript" src="./OpenLayers/js/ol.js"></script>
<style>
#map{
height:750px;
width: 0 auto;
background: #ccc;
}
</style>
</head>
<body>
<h1>Shanghai Map</h1>
<div id="map">
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content" style="width:100px;height:35px;"></div>
</div>
</div>
</body>
<script type="text/javascript" src="map.js"></script>
</html>js部分
var map = new ol.Map({
//是否在右下地图右下角显示地图提供商的信息 默认是true
controls : ol.control.defaults({
attribution:false,
}),
//地图显示的目标HTML容器 用ID标识
target : "map",
//Layer图层是资源数据的可视化显示
layers :[ new ol.layer.Tile({
source : new ol.source.OSM()
}) ],
//ol.View负责地图的中心点，放大，投影之类的设置
view : new ol.View({
//121.49491, 31.24169 上海东方明珠
//定位中心点位置 需要将经纬度转化为墨卡托座标
center : ol.proj.transform([121.49491, 31.24169], 'EPSG:4326', 'EPSG:3857'),
//当前范围等级 等级越高内容越仔细
zoom:15,
//范围的最小值
minZoom:2,
//范围的最大值
maxZoom:15
})
});
//设置Icon样式
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
//锚点 文字与图片的距离
anchor:[0.5,40],
//x方向单位
anchorXUnits:'fraction',
//y方向单位
anchorYUnits:'pixel',
//图片的透明度
opacity:0.75,
//图片的url
src:'carImg/car_red0.png'
}),
text:new ol.style.Text({
//文字对齐方式
textAlign:'center',
//文字的基准线
textBaseline:'middle',
//字体样式
font:'normal 12px 微软雅黑',
//文本内容
text:"Kingsley's car",
//填充
fill: new ol.style.Fill({color:'#aa3300'}),
//笔触
stroke: new ol.style.Stroke({color:"#ffcc33",width:2})
})
});
//设置特征
var iconFeature = new ol.Feature({
name:"Kingsley's car",
geometry: new ol.geom.Point(ol.proj.transform([121.49491, 31.24169], 'EPSG:4326', 'EPSG:3857')),//位置点
});
//将图标放置在点上
iconFeature.setStyle(iconStyle);
//设置图片大小
iconStyle.getImage().setScale(0.8);
//创建图层
var iconLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features:[iconFeature]
})
});
//将图层添加到地图上
map.addLayer(iconLayer);
var element = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
//创建popup图层
var popup = new ol.Overlay({
//元素
element:element,
//popup图层与位置点的关系
positioning:"bottom-left",
//事件传播到地图视点是否停止
stopEvent:false,
autoPan:true,
autoPanAnimation:{
duration:250 //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
}
});
//添加小车点击事件
map.on('click',function(evt){
//evt 保存了点击的点座标
var pixel = map.getEventPixel(evt.originalEvent);
//这个函数会检测与pixel像素相交的要素feature，并对该feature调用callback函数。
//在视口中遍历所有具有像素颜色的图层，如果图层存在，则返回
var feature = map.forEachFeatureAtPixel(pixel,
function(feature,layer){
return feature;
});
if(feature){
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
content.innerHTML = "<p>Welcome to</br> Shanghai</p>"
//设置弹框的位置
if(popup.getPosition() == undefined){
popup.setPosition(coord);
}
//弹框添加到图层上
map.addOverlay(popup);
}
});
//popup的关闭事件
closer.addEventListener('click',function(){
//移除弹框
popup.setPosition(undefined);
closer.blur();
return false;
});
//添加小车手型
map.on('pointermove', function(e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});popup.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: 10px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 50px;
left: -50px;
text-align: center;
}
.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: "✖";
} 嗯。好像看完代码，也没什么好啰嗦的了。能用代码解决的绝不多说。