openlayers点击图标弹出自定义属性

最新推荐文章于 2025-01-22 16:40:14 发布

原创最新推荐文章于 2025-01-22 16:40:14 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

Hello,Bug

文章标签：

#css #css3 #javascript

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个基于OpenLayers的地图应用实例，展示了如何通过JavaScript实现地图上图标点击事件并显示坐标信息的弹窗。具体包括地图初始化、图标添加及点击事件监听等功能。

效果图
在这里插入图片描述

Html代码

<div id="map"></div>

Css代码

#map {
  width: 100%;
  height: 100%;
}

.ole-js-popup {
  padding: 0;
  border-radius: 3px;
  border: none;
  box-sizing: border-box;
  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
  background: #fff;
}

ul {
  padding: 0 10px;
}

ul li {
  list-style: none;
}

Js代码

var map = new ol.Map({
  target: 'map',
  view: new ol.View({
    projection: 'EPSG:4326',
    center: [113.53450137499999, 34.44104525],
    zoom: 6
  }),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM({
        url: 'https://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
      })
    })
  ]
});

var vector = new ol.layer.Vector({
  layerName: 'point',
  source: new ol.source.Vector()
});

var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    src: 'http://openlayers.org/en/latest/examples/data/icon.png'
  }))
});

var feature = new ol.Feature({
  geometry: new ol.geom.Point([113.53450137499999, 34.44104525])
});

feature.setId('00001');
feature.setProperties({
  id: '00001',
  name: '逗比',
  location: '不知道哪'
});

var feature_ = new ol.Feature({
  geometry: new ol.geom.Point([113.43450137499999, 34.44104525])
});

feature_.setId('00002');
feature_.setProperties({
  id: '00002',
  name: '第二个点',
  location: '不知道哪'
});

feature.setStyle(iconStyle);
feature_.setStyle(iconStyle);

vector.getSource().addFeature(feature);
vector.getSource().addFeature(feature_);

map.addLayer(vector);

var popover = null;

// display popup on click
map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
    return feature;
  });
  if (feature) {
    var coordinates = feature.getGeometry().getCoordinates();
    var attr = feature.getProperties();
    var id = feature.getId();
    if (!popover) {
      popover = new ole.Popover({
        id: '11',
        showCloser: false,
        showMarkFeature: false,
        showMinimize: false,
        autoPan: true,
        offset: [0, -50]
      })
      map.addOverlay(popover);
    }
   var content = '<ul>' +
      '<li>id: ' + attr.id +'</li>' +
      '<li>name:' + attr.name + '</li>' +
      '</ul>'
    popover.show(coordinates, content);
  } else {
    if (popover) popover.hide();
  }
});

// change mouse cursor when over marker
map.on('pointermove', function(e) {
  if (e.dragging) {
    if (popover) popover.hide();
    return;
  }
  var pixel = map.getEventPixel(e.originalEvent);
  var hit = map.hasFeatureAtPixel(pixel);
  map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

接下来是完整Demo,点击图标显示相应的坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示弹出框</title>
    <link rel="stylesheet" type="text/css" href="../ol.css" />
    <link rel="icon" type="image/x-icon" href="http://openlayers.org/assets/theme/img/favicon.ico" />
    <style type="text/css">
        .ol-popup {
            position: absolute;
            background-color: #eeeeee;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
            min-width: 280px;
        }

        .ol-popup:after,
        .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .ol-popup:after {
            border-top-color: #eeeeee;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }

        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }

        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }

        .ol-popup-closer:after {
            content: "✖";
        }
    </style>
</head>

<body>
    <div id="map">
    </div>
    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content"></div>
    </div>
</body>
<script src="../ol.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">

    /*********************显示地图**************************/

    var pos = ol.proj.get('EPSG:3857');

    var map = new ol.Map({
        //地图容器div的ID
        target: 'map',
        //地图容器中加载的图层
        layers: [],
        view: new ol.View({
            //设置地图投影坐标系
            projection: pos,
            center: [13276805.940731, 3008561.497087],
            zoom: 19
        }),
    });
    var mlayer = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: 'http://map.test.acmsmu.cn/geowebcache/service/wms',
            params: {
                'LAYERS': 'fzgl',
                'FORMAT': 'image/png',
                'SRS': 'EPSG:3857'
            },
            tileGrid: new ol.tilegrid.TileGrid({
                resolutions: [156543.0339, 78271.51696, 39135.75848, 19567.87924, 9783.939621, 4891.96981, 2445.984905, 1222.992453, 611.496226, 305.748113, 152.874057, 76.437028, 38.218514, 19.109257, 9.554629, 4.777314, 2.388657, 1.194329, 0.597164, 0.298582],
                origin: [-20037508.3427892, 20037508.3430388]
            })
        })
    })

    /*********************显示弹出层**************************/
    var container = document.getElementById("popup");
    var content = document.getElementById("popup-content");
    var popupCloser = document.getElementById("popup-closer");

    var overlay = new ol.Overlay({
        element: container,
        autoPan: true
    });

    map.on('click',function(e){
        var pixel = map.getEventPixel(e.originalEvent);
        console.log(pixel);
        map.forEachFeatureAtPixel(pixel,function(feature){
            //console.log(feature);
            //return feature;
            var coodinate = e.coordinate;
            content.innerHTML = "<p>你点击的坐标为：" + coodinate + "</p>";
            overlay.setPosition(coodinate);
            map.addOverlay(overlay);
        });
    });

    popupCloser.addEventListener('click',function(){
        overlay.setPosition(undefined);
    });


    /*********************显示地标**************************/
    var maxX = 13281566;
    var minX = 13273419;

    var maxY = 3008492;
    var minY = 3008104;

    //设置icon
    //创建空的矢量容器
    var vectorSource = new ol.source.Vector({});

    for (var i = 1; i <= 10; i++) {
        var t1 = Math.random() * (maxX - minX + 1) + minX;
        var t2 = Math.random() * (maxY - minY + 1) + minY;
        //创建图标特性
        var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point([t1, t2], "XY"),
            name: "my Icon",
        });
        //将图标特性添加进矢量中
        vectorSource.addFeature(iconFeature);
        //console.log(t1+" "+t2);
    }

    //创建图标样式
    var iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
            opacity: 0.75,
            src: "https://openlayers.org/en/latest/examples/data/icon.png"
        }),
    });
    //创建图标层
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: iconStyle
    });


    map.addLayer(mlayer);
    map.addLayer(vectorLayer);

</script>

</html>