如何从开放图层上的多边形/点的坐标获取像素4.

var geometry = Feature.getGeometry();
var coordinate = geometry.getCoordinates();
var pixel = map.getPixelFromCoordinate(coordinate);

我想从坐标中获取像素，因为我尝试了点

在OpenLayers4上，我得到了预期的坐标值

输出：7.129808 ，50.617804

但map.getPixelFromCoordinate(coordinate(;

控制台.log(像素1(;

由此我试图获取像素值，但我得到了

输出：空

任何人都可以建议我如何获取像素值吗？下面我提供整个代码

<!doctype html>
<head>
<title> Hello OpenStreetMap </title>
</head>
<link rel="stylesheet" href="https://openlayers.org/en/v4.4.1/css/ol.css" type="text/css">
<style>
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
.map {
height: 100%;
width: 100%;
}
</style>
<body>
<div id="map" class="map"></div>
<div id="log"></div>
<script src="https://openlayers.org/en/v4.4.1/build/ol.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</script>
<script>
var polyFeature = new ol.Feature({
geometry: new ol.geom.Point([7.129808, 50.618671]),
projection: 'EPSG:4326'
}); 
//Layers
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [polyFeature]
})
});
var osmLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
// view
//var centerPoint = ol.proj.transform([7.128499, 50.617803],'EPSG:4326','EPSG:3857');
var view = new ol.View({
projection: 'EPSG:4326',
zoom: 18
});
view.setCenter([7.128499, 50.617803]);

var map = new ol.Map({
target: 'map',
view:view,
layers: [ osmLayer,vectorLayer]
});
var geometry = polyFeature.getGeometry();
var coordinate = geometry.getCoordinates();
var pixel1 = map.getPixelFromCoordinate(coordinate);
map.setView(view);
</script>
</body>
</html>

等待地图渲染后再调用getPixelFromCoordinate：

map.once('postrender', function(event) {
var geometry = polyFeature.getGeometry();
var coordinate = geometry.getCoordinates();
var pixel1 = map.getPixelFromCoordinate(coordinate);
var element = document.getElementById("log");
element.innerText = pixel1;
});

概念验证小提琴

代码片段：

var polyFeature = new ol.Feature({
geometry: new ol.geom.Point([7.129808, 50.618671]),
projection: 'EPSG:4326'
});
//Layers
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [polyFeature]
})
});
var osmLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var view = new ol.View({
projection: 'EPSG:4326',
zoom: 18
});
view.setCenter([7.128499, 50.617803]);
var map = new ol.Map({
target: 'map',
view: view,
layers: [osmLayer, vectorLayer]
});
map.once('postrender', function(event) {
var geometry = polyFeature.getGeometry();
var coordinate = geometry.getCoordinates();
var pixel1 = map.getPixelFromCoordinate(coordinate);
var element = document.getElementById("log");
element.innerText = pixel1;
});
map.setView(view);

html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
.map {
height: 90%;
width: 100%;
}

<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
<div id="map" class="map"></div>
<div id="log"></div>

我认为原因是当您调用getPixelFromCoordinate时地图或视图未完全初始化。

在这里，我创建了一个按钮，该按钮具有调用代码的单击事件处理程序，并且可以工作：

<!doctype html>
<head>
<title> Hello OpenStreetMap </title>
</head>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<style>
.map {
height: 100%;
width: 100%;
}
</style>
<body>
<div id="map" class="map"></div>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</script>
<script>
var polyFeature = new ol.Feature({
geometry: new ol.geom.Point([7.129808, 50.618671]),
projection: 'EPSG:4326'
}); 
//Layers
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [polyFeature]
})
});
var osmLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
// view
//var centerPoint = ol.proj.transform([7.128499, 50.617803],'EPSG:4326','EPSG:3857');
var view = new ol.View({
projection: 'EPSG:4326',
zoom: 18
});
view.setCenter([7.128499, 50.617803]);

var map = new ol.Map({
target: 'map',
view:view,
layers: [ osmLayer,vectorLayer]
});
map.setView(view);
var geometry = polyFeature.getGeometry();
var coordinate = geometry.getCoordinates();
// Click event handler for our button.
function test() {
var element = document.getElementById("log");
var pixel1 = map.getPixelFromCoordinate(coordinate);
element.innerText = pixel1;
}
</script>
<!-- This button activates the test function. -->
<button onclick="test()">Click to get pixels.</button>
<!-- This div will contain the pixels. -->
<div id="log"></div>
</body>
</html>

在这里，我通过多边形的坐标将一个图像放置在多边形的中心

.HTML：

这是图像映射

<img src="/templates/floorplan/cw/picture2.png" usemap="#image-map" class="map" id="beatles">

此图像将按其坐标放置在多边形的中心

<img src="/templates/floorplan/cw/location.png" class="location" id="locationimg1" style="height:50px;width:50px;" >
<img src="/templates/floorplan/cw/location.png" class="location" id="locationimg2" style="height:50px;width:50px;">

这些是多边形区域

<area id="3id" class="areaId" alt="Air Conditioning" title="Air Conditioning" href="#" coords="64,309,364,403,69,510,363,404,65,512,63,417,65,309" shape="poly">
<area id="4id" class="areaId" alt="Collaboration Point 1" title="Collaboration Point 1" href="#" coords="282,67,63,80,68,282,343,106" shape="poly" >
<area id="5id" class="areaId" alt="Collaboration point 2" title="Collaboration point 2" href="#" coords="357,66,518,63,355,222" shape="poly" >
<area id="6id" class="areaId" alt="Contact Center" title="Contact Center" href="#" coords="520,251,564,357,594,410,729,408,776,372,759,269,670,139" shape="poly">
<area id="7id" class="areaId" alt="Collaboration Point 4" title="Collaboration Point 4" href="#" coords="710,107,874,114,810,350,768,255,730,181,649,70,649,70,650,70" shape="poly" >

JAVASCRIPT：

function generatepixelfromcoords(id) {
console.log('generatepixelfromcoords');
var i, x = [], y = [];
var c = document.getElementById(id).getAttribute('coords').split(',');

for (i = 0; i < c.length; i++) {
x.push(c[i++]);
y.push(c[i]);
}

var t = medianofArr(y);
var l = medianofArr(x);
let letter = id.charAt(0);
document.getElementById('locationimg' + letter).style.left = l + "px";
document.getElementById('locationimg' + letter).style.top = t + "px";
document.getElementById('locationimg' + letter).style.display = 'block';
}
function medianofArr(arr1) {
var concat = arr1;
concat = concat.sort(
function (a, b) { return a - b });
console.log(concat);
var length = concat.length;

var total = 0;
var avg = 0;
for (var i = 0; i < concat.length; i++) {
var total = total + parseInt(concat[i]);

}
avg = total / length;
return avg;
}

相关内容

最新更新

热门标签：