1. 先将图层发布成geoserver服务
2.具体实现代码
var tempUrl = '' //发布的wfs图层
var poi_style = function (feature, zoom) {
if (zoom > 2000) {
return points_4_style;
} else {
var direction = 0;
return new ol.style.Style({
image: new ol.style.Icon({
src: Path +"/sea/icon/rm.png",
rotation: direction
}),
text: new ol.style.Text({
//padding:'top 10px',
offsetY:-30,
//offsetY:'12px',
//对齐方式
textAlign: 'center',
//文本基线
textBaseline: 'middle',
//字体样式
font: 'normal 14px 微软雅黑',
//文本内容
text: feature.get('oid'),
//填充样式
fill: new ol.style.Fill({
color: '#aa3300'
}),
//笔触
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
})
})
});
}
};
var point_source = new ol.source.Vector({
projection: 'EPSG:4326'
});
var points = new ol.layer.Vector({
name:'poi',
source: point_source,
style: poi_style,
minZoom: 4,
width: 2,
visible: true
});
//底图
var raster = new ol.layer.Tile({
name:'map',
maxZoom: 9,
minZoom: 1,
visible: true,
source: new ol.source.XYZ({
url: 'http://cccpist.55555.io/tiles/gsat/{z}/{x}/{y}.png'
})
});
var map = new ol.Map({
layers:[raster , points ] ,
target: document.getElementById('map'),
view: new ol.View({
center: [13328108, 2920366],
maxZoom: 15,
zoom: 5
})
});
fetch(tempUrl).then(function (response) {
return response.json();
}).then(function (json) {
var features = geoJSON.readFeatures(json);
point_source.clear();
if(features.length>0){
point_source.addFeatures(features);
map.render();
}
}).catch(function (e) {
console.log(e);
});