如何使用 openlayers 3 在静态图像上显示一些标记

Question

我正在尝试在静态图像上显示一些标记，即

给定以英尺为单位的特定大小的静态图像和以英尺为单位的一组点，如何使用 openlayers3 在静态图像上标记一些图像或标记

我知道我们在 openlayer3 中有一项规定使用静态图像作为地图的基础层

对于图像上给定的某些图，我不知道如何在静态图像（基础层）上显示标记

如有任何帮助，将不胜感激，请建议war来完成

我是静态图显示如下图

<!DOCTYPE html>
<html>
<head>
    <title>Static image example</title>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js"></script>

</head>
<body>
<div class="container-fluid">

    <div class="row-fluid">
        <div class="span12">
            <div id="map" class="map"></div>
        </div>
    </div>

</div>
<script>
    // Map views always need a projection.  Here we just want to map image
    // coordinates directly to map coordinates, so we create a projection that uses
    // the image extent in pixels.
    var extent = [0, 0, 1024, 968];
    var projection = new ol.proj.Projection({
        code: 'xkcd-image',
        units: 'pixels',
        extent: extent
    });

    var map = new ol.Map({
        layers: [
            new ol.layer.Image({
                source: new ol.source.ImageStatic({
                    attributions: [
                        new ol.Attribution({
                            html: '&copy; <a href="http://xkcd.com/license.html">xkcd</a>'
                        })
                    ],
                    url: 'colorful-triangles-background.jpg',
                    projection: projection,
                    imageExtent: extent
                })
            })
        ],
        target: 'map',
        view: new ol.View({
            projection: projection,
            center: ol.extent.getCenter(extent),
            zoom: 2
        })
    });

</script>
</body>
</html>

但我不知道如何绘制地块的标记 json 给出的地块如下所示

[{ x:1.234, y:3.34, units:feet }, { x:2.234, y:4.34, units:feet }, { x:7.234, y:9.34, units:feet }]

Answer 1

创建图标样式
创建图标功能
使用矢量源设置一个新的矢量图层
在地图图层中添加矢量图层
我已经在鼠标位置点击地图显示了标记，你可以在你想要的事件上添加标记

此外，由于我没有您提到的图像，所以我参考了开放层示例图像。

<!DOCTYPE html>
<html>
<head>
    <title>Static image example</title>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com   /bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js">    </script>

</head>
<body>
<div class="container-fluid">

<div class="row-fluid">
<div class="span12">
    <div id="map" class="map"></div>
</div>
</div>
</div>
<script>
    // Map views always need a projection.  Here we just want to map     image
    // coordinates directly to map coordinates, so we create a projection that uses
    // the image extent in pixels.
    var extent = [0, 0, 1024, 968];
    var projection = new ol.proj.Projection({
        code: 'xkcd-image',
        units: 'pixels',
        extent: extent
    });


var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(({
        anchor: [15, 24],
        size: [32, 48],
        anchorXUnits: 'pixels',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: 'http://www2.psd100.com/ppp/2013/11/0501/Map-marker-icon-1105213652.png'
    }))
});


//Create a Feature
 var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point([72.5800, 23.0300])

    });

//Setup a Vector Source
var vectorSource = new ol.source.Vector({
    features: [iconFeature]
});

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

iconFeature.setStyle(iconStyle);


var map = new ol.Map({
layers: [
    new ol.layer.Image({
        source: new ol.source.ImageStatic({
            attributions: [
                new ol.Attribution({
                    html: '&copy; <a href="http://xkcd.com/license.html">xkcd</a>'
                })
            ],
            url: 'http://imgs.xkcd.com/comics/online_communities.png',
            projection: projection,
            imageExtent: extent
        })
    }), vectorLayer //Add Vector in layers
],
target: 'map',
view: new ol.View({
    projection: projection,
    center: ol.extent.getCenter(extent),
    zoom: 2
})
});

//On Map click setup marker
 map.on('click', function (evt) {

    var feature = new ol.Feature(new ol.geom.Point(evt.coordinate));
    feature.setStyle(iconStyle);
    vectorSource.clear();
    vectorSource.addFeature(feature);
    selectedlong = evt.coordinate[0];
    selectedlat = evt.coordinate[1];

});

</script>
</body>
</html>

如何使用 openlayers 3 在静态图像上显示一些标记

how to show some markers on a static image using openlayers 3

image

marker

openlayers-3