1.基于vue以及采用的引入ol.js的方法
2.浮标的实现
setMark(params) {//params为外部导入的数据
this.markerLayer = new ol.layer.Vector({ //申请一个图层对象
source: null,
style: null,
zIndex: 30500,
});
this.source = new ol.source.Vector(); // 创建矢量图
this.markerLayer.setSource(this.source); //设置图源
var style = new ol.style.Style({
image: new ol.style.Icon(
/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 1],
scale: 0.8,
src: `../../../static/imgs/resumption/shuizhicezhan-6.png`,
})
),
});
this.markerLayer.setStyle(style); // 设置地图元素样式
this.featureArr = []; //用于批量添加浮标
params.forEach((item, index) => { //对数据进行遍历处理
var feature = new ol.Feature({
geometry: new ol.geom.Point([item.lgtd, item.lttd]),//geometry:浮标要显示的位置
});//获取一个浮标对象
feature.setPr