1.引入相關(guān)js包
<script src="<%=basePath%>static/js/jquery/jquery-2.2.4.min.js">
<script src="<%=basePath%>static/js/openlayers/ol.js"></script>
2.初始化對(duì)象
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',//這里添加靜態(tài)圖片的地址
? ? ? ? ? ? ? ? ? ? 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("產(chǎn)房"));
? ? 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"
? ? ? ? }
})
}
//添加圖標(biāo)
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 {
}
});
}
