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

Question

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

Dha*_*hmi 1 image marker openlayers-3

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

给定一个以英尺为单位的静态图像和脚部中的一组点,如何使用openlayers3在静态图像上标记一些图像或标记

据我所知,我们在openlayer3中有一个规定,即使用静态图像作为地图的基础层

我没有得到如何在静态图像(基础层)上显示标记给定图像上的某些图

任何帮助都会更加谢谢你请建议一场战争

我将静态图像显示为地图,如下所示

<!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>

Run Code Online (Sandbox Code Playgroud)

但是我不知道如何绘制标记,这些标记是json给出的情节,如下图所示

[{x:1.234,y:3.34,单位:英尺},{x:2.234,y:4.34,单位:英尺},{x:7.234,y:9.34,单位:英尺}]

Answer 1

小智 5

创建图标样式
创建图标功能
使用矢量源设置新的矢量图层
在Map的图层中添加矢量图层
我在鼠标位置单击地图时显示标记,您可以在所需的事件上添加标记

此外,由于我没有您所指的图像,我已经参考了开放图层示例图像.

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，6 月前
查看次数：	1251 次
最近记录：	10 年，6 月前