admin管理员组文章数量:1633113
在第一篇中,已经建立了map、view、source、layer之间的关系,并正确渲染,这里展开说明如何正确的创建图层和元素
创建图层与删除图层
创建时需要分配唯一id,可以自动分配,手动分配,为了删除的时候方便,这里推荐手动分配
// 创建图层
var layerId = 'myLayer'; // 设置图层 ID
var layer = new ol.layer.Vector({
id: layerId, // 分配图层 ID
source: new ol.source.Vector(),
// 其他图层属性...
});
// 添加图层至地图
this.mapObj.addLayer(layer);
// 删除图层
var targetLayer = this.mapObj.getLayerById(layerId); // 通过图层 ID 获取目标图层
if (targetLayer) {
map.removeLayer(targetLayer); // 使用获取到的图层进行删除操作
}
需要注意的是,在删除图层之前,使用 map.getLayerById
方法确保获取到了有效的图层引用。如果图层不存在或 ID 不匹配,可能会返回 undefined
或 null
。
创建Feature
在创建 OpenLayers 数据源时,可以为每个 feature 分配唯一的 ID。这样做可以方便您在后续的操作中准确地引用和管理不同的 feature。下面是在创建数据源时如何为 feature 创建 ID 的方法:
方法一:手动指定 ID
可以在创建 feature 时手动指定一个唯一的 ID。例如:
var feature = new ol.Feature({
geometry: new ol.geom.Point([0, 0]), // 假设这是 feature 的几何信息
// 其他属性...
});
feature.setId('myUniqueID'); // 手动设置唯一的 ID
可以根据自己的需求选择任何形式的唯一 ID,例如自动生成的字符串、数据库中的唯一标识符等。
方法二:自动生成 ID
如果不想手动指定 ID,OpenLayers 也提供了自动生成 ID 的方法。在创建 feature 时,OpenLayers 会自动为其分配一个唯一的 ID。例如:
var feature = new ol.Feature({
geometry: new ol.geom.Point([0, 0]), // 假设这是 feature 的几何信息
// 其他属性...
});
// feature.getId() 会返回自动生成的唯一 ID
这种方法通过使用 OpenLayers 生成的唯一标识符为 feature 分配一个 ID,可以使用 `feature.getId()` 来访问这个 ID。
Feature添加到图层上
// 添加地理坐标点
addPoint(location, src, id) {
// 地理坐标数组
const pointData = [location];
pointData.map((item) => {
// 创建点
const point = new Feature({
geometry: new Point([item.longitude, item.latitude]),
data: item,
});
// 点的样式
const iconStyle = new Style({
image: new Icon({
color: "#ffffff",
crossOrigin: "anonymous",
src: src,
}),
});
// 设置样式
point.setStyle(iconStyle);
// point.setId(id);
this.mapPointList.push(point);
});
// 创建geojson据源
this.pointLayerSource = new VectorSource({ features: this.mapPointList });
// 创建图层 并加载数据
this.pointLayer = new VectorLayer({
source: this.pointLayerSource,
// 图层的id,这也非常重要
id: id,
});
// 将图层添加地图上
this.mapObj.addLayer(this.pointLayer);
},
根据feature对象来删除feature
// 获取当前点击点的 feature,如果存在就移除
const feature = this.pointLayerSource.getFeatureById("curIconFeatureId");
if(feature) {
this.pointLayerSource.removeFeature(feature);
}
根据图层id来获取图层
getLayerById
函数接受一个参数 layerId
,是要查找的图层的ID。首先,通过调用地图对象的 getLayers
方法获取所有的图层数组。然后,遍历数组,并通过使用 get
方法来获取图层的ID属性,与传入的 layerId
进行比较。如果找到匹配的图层ID,就返回该图层对象。如果未找到匹配的图层,将返回 null
。
getLayerById(layerId) {
const layers = this.mapObj.getLayers().getArray();
for (let i = 0; i < layers.length; i++) {
if (layers[i].get('id') === layerId) {
return layers[i];
}
}
return null;
}
举例:
点击地图的时候,将点的坐标作为元素添加到地图上,确保每次只存在一个最新的点
mounted() {
// 设置 默认的中心点坐标
const location = { longitude: 121.70185, latitude: 31.298777 };
this.addPoint(location, this.markerCenterIcon, "centerIconLayer");
this.mapObj.on("click", (evt) => {
// 获取当前点击点的 feature,如果存在就移除
const feature = this.pointLayerSource.getFeatureById("curIconFeatureId");
if(feature) {
this.pointLayerSource.removeFeature(feature);
}
this.addFeature(evt, this.markerCurrentIcon, "curIconFeatureId");
});
},
methods: {
// 地图点击事件
addFeature(evt, src, id) {
this.currentCoodinate = evt.coordinate;
if (!Array.isArray(this.currentCoodinate)) {
return;
}
const location = {
longitude: this.currentCoodinate[0],
latitude: this.currentCoodinate[1],
};
// 创建点击后的元素
const point = new Feature({
geometry: new Point([location.longitude, location.latitude]),
data: location,
});
// 点的样式
const iconStyle = new Style({
image: new Icon({
color: "#ffffff",
crossOrigin: "anonymous",
src: src,
}),
});
// 设置样式
point.setStyle(iconStyle);
point.setId(id);
this.addFeatureToLayer(point, "centerIconLayer");
},
// 在图层上新增元素
addFeatureToLayer(feature, layerId) {
const layer = this.getLayerById(layerId);
const layerSource = layer.getSource();
layerSource.addFeature(feature);
},
// 根据图层id来获取图层
getLayerById(layerId) {
const layers = this.map.getLayers().getArray();
for (let i = 0; i < layers.length; i++) {
if (layers[i].get("id") === layerId) {
return layers[i];
}
}
return null;
},
}
本文标签: 图层实战元素OpenLayerslayer
版权声明:本文标题:openLayers实战(三):图层layer与元素feature 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729159079a1188204.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论