open layer 4从onclick坐标中查找地址

Question

我是新手打开图层，我需要知道使用openstreetmap链接来获取来自给定lat的国家名称很长（用于商业目的）虽然它是免费的但是这是一个很好的做法。当纬度和经度作为参数传递时，这是以JSON格式提供国家/地区名称的链接。 ： - https://nominatim.openstreetmap.org/reverse?format=json&lat=22.3444&lon=74.123123&limit=1

Answer 1

div元素在哪里是你的地图:(必须放在html文件中）

<div id="id_map" style="height: 100%;"></div>

OpenLayers地图的Javascript代码：

// URL of the TILE SERVER
const url_carto_cdn = 'http://{1-4}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png';

// Our map
const map = new ol.Map({
    target: document.getElementById('id_map'),
    layers: [
        new ol.layer.Tile({
            source: new ol.source.XYZ({url: url_carto_cdn})
        })
    ],
    view: new ol.View({
        // Centered in Europe
        center: ol.proj.fromLonLat([0, 30]),
        zoom: 4
    })
});

当您点击地图时，发送请求Nominatim以获取地址的Javascript函数：

function httpGet(url, callback_function) {

    const getRequest = new XMLHttpRequest();
    getRequest.open("get", url, true);

    getRequest.addEventListener("readystatechange", function () {

        // IF RESPONSE is GOOD
        if (getRequest.readyState === 4 && getRequest.status === 200) {

            // Callback for making stuff with the Nominatim response address
            callback_function(getRequest.responseText);    
        }
    });

    // Send the request
    getRequest.send();
}

Mouse-Click事件的Javascript：

// EVENT ON MOUSE CLICK
map.on('click', function (evt) {

    // Coords of click is evt.coordinate
    console.log("evt.coordinate: " + evt.coordinate);
    // You must transform the coordinates because evt.coordinate 
    // is by default Web Mercator (EPSG:3857) 
    // and not "usual coords" (EPSG:4326) 
    const coords_click = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
    console.log("Mouse Click coordinates: " + coords_click);

    // MOUSE CLICK: Longitude
    const lon = coords_click[0];
    // MOUSE CLICK: Latitude
    const lat = coords_click[1];

    // DATA to put in NOMINATIM URL to find address of mouse click location
    const data_for_url = {lon: lon, lat: lat, format: "json", limit: 1};

    // ENCODED DATA for URL
    const encoded_data = Object.keys(data_for_url).map(function (k) {
        return encodeURIComponent(k) + '=' + encodeURIComponent(data_for_url[k])
    }).join('&');


    // FULL URL for searching address of mouse click
    const url_nominatim = 'https://nominatim.openstreetmap.org/reverse?' + encoded_data;
    console.log("URL Request NOMINATIM-Reverse: " + url_nominatim);


    // GET URL REQUEST for ADDRESS
    httpGet(url_nominatim, function (response_text) {

        // JSON Data of the response to the request Nominatim
        const data_json = JSON.parse(response_text);

        // Longitude and latitude
        const res_lon = data_json.lon;
        const res_lat = data_json.lat;

        // All the informations of the address are here
        const res_address = data_json.address;

        // Details depends on the location, country and places
        // For example: in the desert, road or pedestrian is 
        // probably set to undefined because of none...

        const address_display_name  = data_json.display_name;
        const address_country       = res_address.country;
        const address_country_code  = res_address.country_code;
        const address_postcode      = res_address.postcode;
        const address_state         = res_address.state;
        const address_town          = res_address.town;
        const address_city          = res_address.city;
        const address_city_district = res_address.city_district;
        const address_suburb        = res_address.suburb;
        const address_neighbourhood = res_address.neighbourhood;
        const address_footway       = res_address.footway;
        const address_house_number  = res_address.house_number;
        const address_pedestrian    = res_address.pedestrian;
        const address_road          = res_address.road;

        console.log("Longitude    : " + res_lon);
        console.log("Longitude    : " + res_lat);
        console.log("Name         : " + address_display_name);
        console.log("Country      : " + address_country);
        console.log("Count. Code  : " + address_country_code);
        console.log("Postcode     : " + address_postcode);
        console.log("State        : " + address_state);
        console.log("Town         : " + address_town);
        console.log("City         : " + address_city);
        console.log("City District: " + address_city_district);
        console.log("Suburb       : " + address_suburb);
        console.log("Neighbourhood: " + address_neighbourhood);
        console.log("Road         : " + address_road);
        console.log("Footway      : " + address_footway);
        console.log("Pedestrian   : " + address_pedestrian);
        console.log("House Number : " + address_house_number);
    });
});

所有与鼠标单击附近地址相关的信息都会显示在控制台日志中（Firefox中为F12）。