当前位置:   article > 正文

openlayers3线段添加闪烁_openlayers 标记点闪烁 Demo(可直接运行)

openlayer 叠加线条闪烁
Document

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({

image: new ol.style.Icon({

anchor: [0.5, 60], //锚点

anchorOrigin:'top-right', //锚点源

anchorXUnits: 'fraction', //锚点X值单位

anchorYUnits: 'pixels', //锚点Y值单位

offsetOrigin: 'top-right', //偏移原点

opacity: 0.75,

scale: 0.05,

src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594359193211&di=1d6bb819a5daa724ff65cc4d011d4d42&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_pic%2F17%2F10%2F27%2F05dc60e54e3aa5d093cdc32611303643.jpg' //图标的URL

}),

});

}

var flag=true

var animation=setInterval(() => {

flag=!flag

vectorLayer.setVisible(flag)

}, 300);

// setTimeout(() => {

// clearInterval(animation)

// vectorLayer.setVisible(true)

// }, 1500);

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/607363
推荐阅读
相关标签
  

闽ICP备14008679号