Openlayer 添加 Mark 并打造 Hover 效果：点亮你的地图

利用 Openlayer mark，轻松标记地图！

简介

Openlayer 是一个强大的开源地图库，它能够协助你轻松地将各种元素添加到地图中。mark 是 Openlayer 中的一项常见元素，它表示地图中的某个位置。mark 可以是点、线或面，且可以运用不同的样式。

多种 mark 添加方式，任你选择！

Openlayer 提供了多种添加 mark 的方法，你可以根据自己的需求进行选择：

• 单个 mark

var mark = new ol.Feature({
  geometry: new ol.geom.Point([0, 0])
});

map.addFeature(mark);

• 多个 mark

var marks = [];

for (var i = 0; i < 10; i++) {
  var mark = new ol.Feature({
    geometry: new ol.geom.Point([Math.random(), Math.random()])
  });

  marks.push(mark);
}

map.addFeatures(marks);

• 使用 geojson

var geojson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [0, 0]
      }
    }
  ]
};

var vectorSource = new ol.source.Vector({
  features: new ol.format.GeoJSON().readFeatures(geojson)
});

var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

map.addLayer(vectorLayer);

添加 hover 效果，提升交互性！

在标记地图后，你可以添加 hover 效果，让 mark 在鼠标悬停时产生变化：

var mark = new ol.Feature({
  geometry: new ol.geom.Point([0, 0])
});

var style = new ol.style.Style({
  image: new ol.style.Circle({
    radius: 5,
    fill: new ol.style.Fill({
      color: 'red'
    })
  })
});

mark.setStyle(style);

map.addFeature(mark);

map.on('pointermove', function(e) {
  var feature = map.forEachFeatureAtPixel(e.pixel, function(feature) {
    return feature;
  });

  if (feature) {
    feature.setStyle(new ol.style.Style({
      image: new ol.style.Circle({
        radius: 10,
        fill: new ol.style.Fill({
          color: 'blue'
        })
      })
    }));
  }
});

Openlayer mark，你的地图加分利器！

Openlayer mark 让你轻松地在你的地图上添加标记，并通过 geojson 和 hover 效果来提升地图交互性。快来尝试，让你的地图更生动有趣吧！

常见问题解答

1. 如何在 Openlayer 中移除 mark？

map.removeFeature(mark);

2. 如何更改 mark 的样式？

mark.setStyle(new ol.style.Style({
  image: new ol.style.Circle({
    radius: 10,
    fill: new ol.style.Fill({
      color: 'green'
    })
  })
}));

3. 如何在地图上添加自定义图标作为 mark？

var iconFeature = new ol.Feature({
  geometry: new ol.geom.Point([0, 0])
});

var iconStyle = new ol.style.Style({
  image: new ol.style.Icon({
    src: 'path/to/icon.png'
  })
});

iconFeature.setStyle(iconStyle);

map.addFeature(iconFeature);

4. 如何在地图上添加文本作为 mark？

var textFeature = new ol.Feature({
  geometry: new ol.geom.Point([0, 0])
});

var textStyle = new ol.style.Style({
  text: new ol.style.Text({
    text: 'Hello World',
    fill: new ol.style.Fill({
      color: 'black'
    })
  })
});

textFeature.setStyle(textStyle);

map.addFeature(textFeature);

5. 如何在地图上添加聚合 mark？

var clusterSource = new ol.source.Cluster({
  distance: 40,
  source: new ol.source.Vector({
    features: marks
  })
});

var clusterLayer = new ol.layer.Vector({
  source: clusterSource
});

map.addLayer(clusterLayer);