Openlayers 3 打开第4层从onclick坐标查找地址

Openlayers 3 打开第4层从onclick坐标查找地址,openlayers-3,Openlayers 3,我是一个新的开放层,我需要知道使用openstreetmap链接从给定的lat、long(用于商业目的)获取国家名称是好的,虽然它是免费的,但这是一个好的做法。当纬度和经度作为参数传递时,此链接以JSON格式提供国家名称:- 地图所在的div元素:(必须放在html文件的 当您单击地图时,发送请求提名以获取地址的Javascript函数: function httpGet(url, callback_function) { const getRequest = new XMLHttpR

我是一个新的开放层,我需要知道使用openstreetmap链接从给定的lat、long(用于商业目的)获取国家名称是好的,虽然它是免费的,但这是一个好的做法。当纬度和经度作为参数传递时,此链接以JSON格式提供国家名称:-

地图所在的div元素:(必须放在html文件的

当您单击地图时,发送请求提名以获取地址的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();
}
鼠标单击事件的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)

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