openlayers二：添加矢量图形文字
2024-03-30 21:10:36
openlayers可方便的在地图上添加圆、多边形、文字等矢量内容，修改这些矢量内容的样式也很简单。
首先需要添加一个向量图层：
initVectorLayer: function () {
this.vectorSource = new ol.source.Vector({
wrapX: false //不在地图上重复
});
this.vectorLayer = new ol.layer.Vector({
source: this.vectorSource,
style: new ol.style.Style({ //默认样式
fill: new ol.style.Fill({
color: 'rgba(255, 204, 51, 0.5)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 0
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
this.map.addLayer(this.vectorLayer);
},
默认情况下，地图是横向无限重复，而添加在上面的向量默认也是包裹所有横向地图的，如何所示：
如果想让矢量元素不包裹所有横向地图，可以设置 wrapX: false
添加圆：
addCircle: function (lonlat, radius, colorName) {
var circle = new ol.geom.Circle(ol.proj.transform(lonlat, 'EPSG:4326', 'EPSG:3857'), radius);
var circleFeature = new ol.Feature(circle);
circleFeature.setStyle(
new ol.style.Style({
fill: new ol.style.Fill({
color: '#0a3399CC'
}),
text: new ol.style.Text({
text: '圆',
scale: 1.3,
fill: new ol.style.Fill({
color: '#000000'
}),
stroke: new ol.style.Stroke({
color: '#FFFF99',
width: 3.5
})
})
})
);
this.vectorSource.addFeature(circleFeature);
},
添加多边形：
addPolygon: function (values) {
var polygon = new ol.geom.Polygon(values);
polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857'));
var feature = new ol.Feature(polygon);
feature.setStyle(
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 204, 51, 0.5)'
}),
text: new ol.style.Text({
text: '多边形',
scale: 1.3,
fill: new ol.style.Fill({
color: '#000000'
}),
stroke: new ol.style.Stroke({
color: '#FFFF99',
width: 3.5
})
})
})
);
this.vectorSource.addFeature(feature);
},
整体效果：
整体代码：
链接: https://pan.baidu.com/s/1nFf59C4LDmYztDrcq7Hnxg 密码: 2eu2
最新文章
- [ASP.NET MVC 小牛之路]03 - Razor语法
- Cross-site Scripting (XSS) 阅读笔记
- Android监听应用程序安装和卸载
- HDU4527+BFS
- C陷阱与缺陷之语法陷阱
- JavaScript对象之document对象
- Mockito单元测试
- python--第二十四天总结
- Vue --1
- QTP 自动化测试桌面程序--笔记（关闭 启动程序脚本) 、安装
- Vmware ESXi 的虚拟机的开机自启动
- 3. ELMo算法原理解析
- 在 Intellij IDEA 中部署 Java 应用到 阿里云 ECS
- 【python】pycharm常用配置快速入门。
- Mysql分析-profile详解
- bitMap算法实现以及ckHash函数类，将字符串映射成数字，同时可以将数字映射成字符串
- ansible--03
- 《UML大战需求分析》-读后感三
- Git访问TFS出现权限不足（Using Personal Access Tokens to access Visual Studio Online）
- Spring框架第二篇之Bean的装配