鼠標(biāo)移動(dòng)變色和顯示標(biāo)注查看官方樣式
樣式
var style = new ol.style.Style({// 起始樣式
fill : new ol.style.Fill({// 填充要素樣式
color : '#B4FCD1'
}),
stroke : new ol.style.Stroke({// 邊界樣色
color : '#F5F5F5',
width : 2
}),
text : new ol.style.Text({// 字體樣色
font : '14px Calibri, 黑體',
fill : new ol.style.Fill({
color : 'black'
})
})
});
var vectorLayer = new ol.layer.Vector({//地圖-填充顏色字體等樣式
source : new ol.source.Vector({
features : (new ol.format.GeoJSON()).readFeatures(res, {// 用readFeatures方法可以自定義坐標(biāo)系
dataProjection : 'EPSG:4326', // 設(shè)定JSON數(shù)據(jù)使用的坐標(biāo)系
featureProjection : 'EPSG:3857' // 設(shè)定當(dāng)前地圖使用的feature的坐標(biāo)系
})
}),
// 樣式設(shè)置
style : function(feature) {
style.getText().setText(feature.get('cn'));// 顯示名稱
style.getFill().setColor(colour);// 顯示顏色
}
return style;
}
});
圖標(biāo)
//圖標(biāo)設(shè)置
var iconArr = [];
for(var i = 0; i < map.features.length; i++){
var arr = map.features[i].properties.wafotown;
if (arr != null && arr.length > 0) {
var lon = parseFloat(map.features[i].properties.center_x);//經(jīng)度
var lat = parseFloat(map.features[i].properties.center_y);//緯度
var rome = new ol.Feature({
name:cn,
geometry:new ol.geom.Point(new ol.proj.fromLonLat([lon,lat],'EPSG:3857'))
});
//標(biāo)注樣式設(shè)置
rome.setStyle(new ol.style.Style({
text: new ol.style.Text({
textAlign: 'center', //位置-對(duì)齊方式
textBaseline: 'middle', //基準(zhǔn)線
font: '16px Calibri, 黑體', //文字樣式
text: cn, //文本內(nèi)容
fill: new ol.style.Fill({ //文本填充樣式（即文字顏色)
color: 'black'
}),
stroke: new ol.style.Stroke({
color: 'white',
width: 1.5
})
}),
image: new ol.style.Icon({
anchor: [0.5, -10], //錨點(diǎn)-控制標(biāo)注圖片和文字之間的距離([0]:x軸0.5中心;[1]y軸:0頂部)
anchorOrigin:'top-right', //錨點(diǎn)源-標(biāo)注樣式的起點(diǎn)位置
anchorXUnits: 'fraction', //錨點(diǎn)X值單位(單位:分?jǐn)?shù))
anchorYUnits: 'pixels', //錨點(diǎn)Y值單位(單位:像素)
offsetOrigin: 'top-right', //偏移原點(diǎn)-偏移起點(diǎn)位置的方向
//opacity: 0.1, //圖標(biāo)透明度
crossOrigin: 'anonymous',
scale: 0.3, //標(biāo)注圖標(biāo)大小
src: "image/warn/"+code+".png"
})
}));
iconArr.push(rome);
}
}
}
var IconLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: iconArr
}),
});
地圖加載
var map = new ol.Map({
layers : [ vectorLayer, IconLayer ],
target : 'wafotown_map',
view : new ol.View({
center : center, // 中心坐標(biāo)x軸y軸
extent : extent, // 地圖范圍left, bottom, right, top
maxZoom : zoom[0], // 最大縮放級(jí)別
minZoom : zoom[1], // 最小縮放級(jí)別
zoom : zoom[2] // 當(dāng)前縮放級(jí)別
})
});
禁止移動(dòng)地圖
// 禁止鼠標(biāo)拖動(dòng)
let pan = getPan();
pan.setActive(false);//false：當(dāng)前地圖不可拖動(dòng)屿愚。true：可拖動(dòng)
function getPan() {
let pan;
map.getInteractions().forEach(function(element, index, array) {
if(element instanceof ol.interaction.DragPan) {
pan = element;
}
})
return pan;
}
