|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
|
|
|
<script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
|
|
|
<title>Document</title>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="map"></div>
|
|
|
<script>
|
|
|
var beijing = ol.proj.fromLonLat([116.28, 39.54]);
|
|
|
var map = new ol.Map({
|
|
|
target: 'map',
|
|
|
layers: [
|
|
|
new ol.layer.Tile({
|
|
|
source: new ol.source.OSM()
|
|
|
})
|
|
|
],
|
|
|
view: new ol.View({
|
|
|
center: beijing,
|
|
|
zoom: 4
|
|
|
})
|
|
|
});
|
|
|
|
|
|
//实例化矢量点要素，通过矢量图层添加到地图容器中
|
|
|
//这样就实现了预先加载图文标注
|
|
|
var iconFeature = new ol.Feature({
|
|
|
geometry: new ol.geom.Point(beijing),
|
|
|
name: '北京市', //名称属性
|
|
|
population: 2115 //人口数（万）
|
|
|
});
|
|
|
//设置点要素样式
|
|
|
iconFeature.setStyle(createLabelStyle(iconFeature));
|
|
|
//矢量标注的数据源
|
|
|
var vectorSource = new ol.source.Vector({
|
|
|
features: [iconFeature]
|
|
|
});
|
|
|
//矢量标注图层
|
|
|
var vectorLayer = new ol.layer.Vector({
|
|
|
source: vectorSource,
|
|
|
visible: false
|
|
|
});
|
|
|
map.addLayer(vectorLayer);
|
|
|
|
|
|
//矢量标注样式设置函数，设置image为图标ol.style.Icon
|
|
|
function createLabelStyle(feature){
|
|
|
console.log(feature);
|
|
|
return new ol.style.Style({
|
|
|
text: new ol.style.Text({
|
|
|
textAlign: 'center', //位置
|
|
|
textBaseline: 'bottom', //基准线
|
|
|
font: 'normal 12px 微软雅黑', //文字样式
|
|
|
text: feature.get('name'), //文本内容
|
|
|
fill: new ol.style.Fill({ //文本填充样式（即文字颜色)
|
|
|
color: '#000'
|
|
|
}),
|
|
|
stroke: new ol.style.Stroke({
|
|
|
color: '#F00',
|
|
|
width: 2
|
|
|
})
|
|
|
})
|
|
|
});
|
|
|
}
|
|
|
var flag=true
|
|
|
var animation=setInterval(() => {
|
|
|
flag=!flag
|
|
|
vectorLayer.setVisible(flag)
|
|
|
}, 300);
|
|
|
// setTimeout(() => {
|
|
|
// clearInterval(animation)
|
|
|
// vectorLayer.setVisible(true)
|
|
|
// }, 1500);
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
