function loadPointData(pointdata) {
let qxIconFeatures = [];
const scale = 30;
let pointStyle = new ol.style.Style({
// 把点的样式换成ICON图标
image: new ol.style.Icon({
// 控制标注图片和文字之间的距离
anchor: [0.5, 0],
// 标注样式的起点位置
anchorOrigin: 'top-right',
// X方向单位:分数
anchorXUnits: 'fraction',
// Y方向单位:像素
anchorYUnits: 'pixels',
// 偏移起点位置的方向
offsetOrigin: 'top-right',
scale: map.getView().getZoom() / scale,
// 透明度
// opacity: 0.75,
// 图片路径
src: '../../../../static/images/点.png'
})
});
for (let i = 0; i < pointdata.length; i++) {
let pointdataArr = [];
const lon = pointdata[i].lon;
const lat = pointdata[i].lat;
// 去除不合法数据-不合法数据造成所有数据渲染失败
if (typeof (lon) !== 'undefined' && typeof (lat) !== 'undefined') {
pointdataArr.push(parseFloat(lon));
pointdataArr.push(parseFloat(lat));
let pointdatafromLonLat = ol.proj.fromLonLat(pointdataArr );
let qxIconFeature = new ol.Feature({
// 点要素
geometry: new ol.geom.Point(pointdatafromLonLat),
// 名称属性
name: "pointdata[i].name",
type: 'type',
lon: lon,
lat: lat
});
qxIconFeature.setStyle(pointStyle);
// 监听地图层级变化
map.getView().on('change:resolution', function () {
const style = qxIconFeature.getStyle();
// 重新设置图标的缩放率,基于层级10来做缩放
style.getImage().setScale(this.getZoom() / scale);
qxIconFeature.setStyle(style);
})
qxIconFeatures.push(qxIconFeature)
}
}
addMapLayer(qxIconFeatures, 'layerName')
}
function addMapLayer(features, layerName) {
let qxVectorSource = new ol.source.Vector({
// 特征
features: features
});
let qxVectorLayer = new ol.layer.Vector({
// 资源。
source: qxVectorSource
});
// console.log("图层加入map")
qxVectorLayer.name = layerName
map.addLayer(qxVectorLayer);
}
openlayer加载点数据
最新推荐文章于 2022-08-23 16:09:05 发布