随笔 - 35  文章 - 0  评论 - 0  阅读 - 9405

openlayers--点位、边界样式设置

//创建中心点文字样式
createPointStyle(feature) {
return new ol.style.Style({
text: new ol.style.Text({
//位置
textAlign: 'center',
//基准线
textBaseline: 'middle',
//文字样式
font: 'normal 18px 微软雅黑',
// center: [115.5, 36.5],
//文本内容
text: feature.get('name'),
//文本填充样式(即文字颜色)
fill: new ol.style.Fill({ color: '#f00' }),
stroke: new ol.style.Stroke({ color: '#ffcc33', width: 0.5 })
})
});
},

//图片样式设置 image放在上面方法中与text同级一起使用
image: new ol.style.Icon(
({
anchor: [0.5, 1],
anchorOrigin: 'top-right',
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
offsetOrigin: 'top-right',
opacity: 0.75,
//图标的url
src: require('../../assets/public/map/images/position_3.png')
})
),

//边界(地块样式的设置)
/* 地块样式 */
featureStyle() {
return {
"sourceData": new ol.style.Style({
//图层范围样式
fill: new ol.style.Fill({
color: '#dfff0055' //填充颜色
}),
    //图层边框样式设置
stroke: new ol.style.Stroke({
// color: '#18399499', //边框颜色220, 174, 20
color: '#ff636377', //边框颜色
width: 2 // 边框宽度
})
}),
}
},
posted on   kaookiee  阅读(1545)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示