oepnLayer初体验-在背景图片上添加图标和文字
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了oepnLayer初体验-在背景图片上添加图标和文字相关的知识，希望对你有一定的参考价值。
参考技术A <script src="<%=basePath%>static/js/jquery/jquery-2.2.4.min.js"><script src="<%=basePath%>static/js/openlayers/ol.js"></script>
let map;
let vectorLayer;
$(function()
initMap()
)
function initMap()
const extent = [0, 0,3000,2000];
var projection =new ol.proj.Projection(
code:'xkcd-image',
units:'pixels',
extent: extent
);
vectorLayer =new ol.layer.Vector(
source:new ol.source.Vector()
);
map =new ol.Map(
layers: [
new ol.layer.Image(
source:new ol.source.ImageStatic(
url:'../../static/img/pigFarm/map.jpg',//这里添加静态图片的地址
projection: projection,
imageExtent: extent
)
), vectorLayer
],
target:'map',
view:new ol.View(
projection: projection,
center:ol.extent.getCenter(extent),
minZoom:3,
zoom:3,
maxZoom:3
),
//加载控件到地图容器中
controls:ol.control.defaults(
zoom:false,
rotate:false,
attribution:false
).extend([
])
);
let iconStyle =getIconStyle('../../static/img/security/cameraIcon.png', map.getView().getZoom() /5);
setFeature('1', 1450, 950, iconStyle);
setFeature('1-pig', 1535, 980, getTextStyle("保育舍"));
setFeature('2', 1800, 820, iconStyle);
setFeature('2-room', 1875, 845, getTextStyle("产房"));
setFeature('3', 1950, 720, iconStyle);
setFeature('3-fat', 2035, 750, getTextStyle("妊娠舍"));
setFeature('7', 1900, 1050, iconStyle);
setFeature('7-sow', 1980, 1080, getTextStyle("育肥舍"));
setEventListener();
map.on('pointermove',function(e)
var pixel=map.getEventPixel(e.originalEvent);
var feature=map.forEachFeatureAtPixel(pixel,function (feature)
return feature;
)
if(feature==undefined)
map.getTargetElement().style.cursor="auto"
else
map.getTargetElement().style.cursor="pointer"
)
//添加图标
function setFeature(id, x, y, style)
var feature =new ol.Feature(
geometry:new ol.geom.Point([x, y])
);
if (id !=null)
feature.setId(id);
feature.setStyle(style);
vectorLayer.getSource().addFeature(feature);
function getIconStyle(src, scale)
return new ol.style.Style(
image:new ol.style.Icon((
anchor: [0.5, 1],
src: src,
scale: scale
)),
);
function getTextStyle(text2)
return new ol.style.Style(
text:new ol.style.Text(
font:'18 sans-serif',
scale:2,
text: text2,
fill:new ol.style.Fill(
color:'#1976ff'
),
stroke:new ol.style.Stroke(
color:'#fff',
width:3
)
)
);
function setEventListener()
map.on('click', function (e1)
e1.preventDefault();
let f1 =map.forEachFeatureAtPixel(e1.pixel,
function (feature)
return feature;
);
if (f1 !=null)
let fId = f1.getId();
const num = fId.split('');
showVideo(num[0])
else
);
以上是关于oepnLayer初体验-在背景图片上添加图标和文字的主要内容，如果未能解决你的问题，请参考以下文章