OpenLayers 地图上的可拖动图标 [关闭]答案

【问题标题】：Draggable icon on OpenLayers map [closed]OpenLayers 地图上的可拖动图标 [关闭]
【发布时间】：2019-08-07 05:54:10
【问题描述】：

我想在 OpenLayers 地图上为位置创建一个可拖动的图标。

使用下面的代码，我可以在地图上放置一个图标（使用 PNG 图像），但它不可拖动。我怎样才能做到这一点？

<html>
<body>
<div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
        map = new OpenLayers.Map("mapdiv");
        map.addLayer(new OpenLayers.Layer.OSM());

        var lonLat = new OpenLayers.LonLat( 72.91152, 19.11186 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );

        var zoom=16;
        var osm = new OpenLayers.Layer.OSM();
        var vectors = new OpenLayers.Layer.Vector("Vector Layer");
        map.addLayers([osm, vectors]);

        var markers = new OpenLayers.Layer.Markers( "Markers" );
        map.addLayer(markers);

        var size = new OpenLayers.Size(25,37);
        var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
        mymarker = new OpenLayers.Icon('marker-icon.png', size, offset);
        markers.addMarker(new OpenLayers.Marker(lonLat, mymarker));

    var point = new OpenLayers.Geometry.Point(lonLat.lon,lonLat.lat);
    vectors.addFeatures([new OpenLayers.Feature.Vector(point)]);
    drag = new OpenLayers.Control.DragFeature(vectors, {autoActivate: true});
    map.addControl(drag);
    map.setCenter (lonLat, zoom);
    </script>
</body></html>

【问题讨论】：

运行上述代码后，图标出现在地图上。我希望那个图标是可拖动的。就是这样

标签： javascript html angularjs openlayers angular-openlayers

【解决方案1】：

DragFeature 控件适用于矢量特征。如果要拖动图标，则需要将该功能设置为图标的样式。像这样的东西，但无法访问您的图像，我无法确定您需要的尺寸和偏移量

vectors.addFeatures([new OpenLayers.Feature.Vector(point, null, {
    externalGraphic: 'marker-icon.png',
    graphicWidth: 25,
    graphicYOffset: -30
})]);

【讨论】：

非常感谢“迈克”。它现在正在工作。
你能帮我画出位置附近100米区域的固定圆吗？