openlayers做点击地图获取图层坐标
时间: 2023-08-18 17:33:28 浏览: 64
您可以通过OpenLayers提供的`map.on('singleclick', function(evt){})`事件来获取点击地图时的坐标信息。具体代码如下:
```javascript
map.on('singleclick', function(evt){
var coordinate = evt.coordinate; // 获取点击地图时的坐标信息
console.log(coordinate);
});
```
如果您需要获取点击地图时对应的图层信息,可以使用`map.forEachFeatureAtPixel(pixel, function(feature, layer){})`方法。具体代码如下:
```javascript
map.on('singleclick', function(evt){
var coordinate = evt.coordinate; // 获取点击地图时的坐标信息
var pixel = evt.pixel; // 获取屏幕上的像素坐标
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer){
return feature;
}); // 获取像素点上的要素信息
if(feature){ // 如果存在要素信息
console.log(feature.getProperties()); // 输出要素信息属性
}
});
```
其中,`forEachFeatureAtPixel`方法的第一个参数`pixel`表示屏幕上的像素坐标,第二个参数`function(feature, layer){}`是一个回调函数,用于处理点击时获取到的要素信息。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)