gpt4 book ai didi

javascript - 如何从 openlayers 4 中的多边形/点的坐标获取像素

转载 作者:行者123 更新时间:2023-12-01 01:57:57 25 4
gpt4 key购买 nike

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

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

在openlayers4上,我得到了预期的坐标值

output:7.129808 ,50.617804

但是map.getPixelFromCooperative(坐标);

console.log(pixel1);

从中我试图获取像素值,但我得到

output:null

有人可以建议我如何获取像素值吗?下面我提供了完整的代码

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

最佳答案

在调用getPixelFromCooperative之前等待 map 渲染:

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;
});

proof of concept fiddle

代码片段:

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>

关于javascript - 如何从 openlayers 4 中的多边形/点的坐标获取像素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50860568/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com