如何解决单击-OpenLayers放大到标记位置
我正在从geojson文件在地图上显示标记。在当前代码中，我可以在地图上添加标记。我想在单击标记时添加飞行器或放大标记的确切位置。如何使用OpenLayers做到这一点。
var cityMarker = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),url: "data/cities.js"
}),style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5,0.5],anchorXUnits: 'fraction',anchorYUnits: 'pixels',scale:0.03,src: "icons/red-circle.png"
})
})
});
map.addLayer(cityMarker);
解决方法
将singleclick事件绑定到地图
map.on('singleclick',event => {
// get the feature you clicked
const feature = map.forEachFeatureAtPixel(event.pixel,(feature) => {
return feature
})
if(feature instanceof ol.Feature){
// Fit the feature geometry or extent based on the given map
map.getView().fit(feature.getGeometry())
// map.getView().fit(feature.getGeometry().getExtent())
}
})
一个单独的HTML文件供您使用！
<!DOCTYPE html>
<html>
<head>
<title>GeoJSON</title>
<link
rel="stylesheet"
href="https://openlayers.org/en/v4.6.5/css/ol.css"
type="text/css"
/>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var image = new ol.style.Circle({
radius: 5,fill: null,stroke: new ol.style.Stroke({ color: "red",width: 1 }),});
var styles = {
Point: new ol.style.Style({
image: image,}),};
var styleFunction = function (feature) {
return styles[feature.getGeometry().getType()];
};
var geojsonObject = {
type: "FeatureCollection",crs: {
type: "name",properties: {
name: "EPSG:3857",},features: [
{
type: "Feature",geometry: {
type: "Point",coordinates: [0,0],{
type: "Feature",coordinates: [13369643,3572500],],};
var vectorSource = new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures(geojsonObject),});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,style: styleFunction,});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),vectorLayer,target: "map",controls: ol.control.defaults({
attributionOptions: {
collapsible: false,view: new ol.View({
center: [0,zoom: 2,});
map.on("singleclick",(event) => {
// get the feature you clicked
const feature = map.forEachFeatureAtPixel(event.pixel,(feature) => {
return feature;
});
if (feature instanceof ol.Feature) {
// Fit the feature geometry or extent based on the given map
map.getView().fit(feature.getGeometry());
// map.getView().fit(feature.getGeometry().getExtent())
}
});
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。