Operlayers 创建加载矢量图层 -- 实现室内设备显示
业务要求：在页面显示楼层室内设备，并通过硬件发送的实时数据在页面中显示！
项目效果图
通过Operlayers 加载地图图纸，并显示设备，点击设备能查看详情并能跳转到设备详情页面用于查看交互。
demo 效果图
HTML 代码结构
<div id="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a> <!--矢量图层信息加载-->
<div id="popup-content"></div>
</div>
JS 代码部分 大多都写了注释 -
var container = document.getElementById("popup");
var content = document.getElementById("popup-content");
var popupCloser = document.getElementById("popup-closer");
var extent = [0, 0, 719, 528];
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
/*******************************************
加载图片图层用于展示！
*******************************************/
var imgLayer = new ol.layer.Image({ //创建地图碎片
source: new ol.source.ImageStatic({
attributions: '',
url: 'img/2-01.png',
projection: projection,
imageExtent: extent
})
});
var map = new ol.Map({ //实例的地图
layers: [imgLayer],
target: 'map',
// eventListeners:eventListeners,
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 1.5,
maxZoom: 4
})
});
//创建标签的样式
var createLabelStyle = function (feature) {
//返回一个样式
return new ol.style.Style({
//把点的样式换成ICON图标
image: new ol.style.Icon({
//控制标注图片和文字之间的距离
anchor: [0.8, 2],
//大小
scale:0.5,
//图片路径
src: 'img/red.png'
}),
//文本样式
text: new ol.style.Text({
//对齐方式
textAlign: 'center',
//文本基线
textBaseline: 'middle',
//字体样式
font: 'normal 10px 微软雅黑',
//文本内容
text: feature.get('name'),
//填充样式
fill: new ol.style.Fill({
color: '#aa3300'
}),
//笔触
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
})
})
});
};
//初始化要素
var iconFeature = [];
iconFeature[0] = new ol.Feature({
//点要素
geometry: new ol.geom.Point([88.91081275209515, 382.1655533302778]),
//名称属性
name: 'sa1',
});
//为点要素添加样式
iconFeature[0].setStyle(createLabelStyle(iconFeature[0]));
//初始化矢量数据源
var vectorSource = new ol.source.Vector({
//指定要素
features:iconFeature //这个必须是数组
});
//初始化矢量图层
var vectorLayer = new ol.layer.Vector({
//数据源
source:vectorSource
});
//将矢量图层添加到map中
map.addLayer(vectorLayer);
//设置内容弹出
var overlay = new ol.Overlay({
//设置弹出框的容器
element: container,
//是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
autoPan: true
});
//地图的点击事件
map.on('click', function (e) {
//在点击时获取像素区域
var pixel = map.getEventPixel(e.originalEvent);
map.forEachFeatureAtPixel(pixel,function(feature){
//coodinate存放了点击时的坐标信息
var coodinate = e.coordinate;
console.log(feature);
// 设置弹出框内容，可以HTML自定义
content.innerHTML = feature.R.name;
//设置overlay的显示位置
overlay.setPosition(coodinate);
//显示overlay
map.addOverlay(overlay);
});
});
popupCloser.addEventListener('click',function(){
overlay.setPosition(undefined);
});
});
//项目代码 逻辑处理板块
数据请求逻辑处理
