Mapbox GL JS - 带坐标的反向地理编码

Question

我在 mapbox gl js 上完成了一张地图。

我正在尝试通过反向地理编码经纬度坐标获取 placename / 地址。

我可以设法让正常的正向地理编码工作，但查询以下内容（例如）：

geocoder.query('New York')

但我不太明白如何用坐标反向执行此操作。我尝试了以下无济于事：

// geocoder.query(126.981,37.539)
// geocoder.query("126.981,37.539")
// geocoder.query(37.539,126.981)
// geocoder.query("37.539,126.981")

我也无法在文档中找到任何指向正确方向的内容。因此，非常感谢任何帮助。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Set a point after Geocoder result</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
  .built_address {
      position: fixed;
      top: 0;
      left: 0;
      background-color: white;
      padding: 10px;
      font-size: 12px;
      font-family: Arial;
  }
    </style>
</head>
<body>

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />
<style>
#geocoder-container > div {
    min-width:50%;
    margin-left:25%;
}
</style>
 <div id='map'></div>
 <div class="built_address">LOREM IPSUM</div>


 <script>


 var built_address = '';
 var user_coordinates;
 var geocode_results;


 mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyaXNrYXNzaW0iLCJhIjoiSk1MaUthdyJ9.vkxtdDbYdLi524WwlKORBw';
 var map = new mapboxgl.Map({
     container: 'map',
     style: 'mapbox://styles/fariskassim/cjmszx78b266o2rlar02ytynj',
     center: [127.017768, 37.59837],
     zoom: 12
 });

 var geocoder = new MapboxGeocoder({
     accessToken: mapboxgl.accessToken
 });

 map.addControl(geocoder);

 // After the map style has loaded on the page, add a source layer and default
 // styling for a single point.
 map.on('load', function() {
     map.addSource('single-point', {
         "type": "geojson",
         "data": {
             "type": "FeatureCollection",
             "features": []
         }
     });


     map.addLayer({
         "id": "point",
         "source": "single-point",
         "type": "circle",
         "paint": {
             "circle-radius": 10,
             "circle-color": "#007cbf"
         }
     });


     getUserLocation();

 });




 function getUserLocation() {

  // request to allow user position 
     if (navigator.geolocation) {

         navigator.geolocation.getCurrentPosition(showPosition);
   function showPosition(position) {

    // get user current coordinates and center map on coordiates
    console.log('L2', position)
    //console.log(position.coords.latitude, position.coords.latitude)
             user_coordinates = {
               lat: position.coords.latitude,
               lng: position.coords.longitude
             };


    // draw user location on mao
    map.getSource('single-point').setData({type: "Point", coordinates: [user_coordinates.lng,user_coordinates.lat]});

    // geocoder.query(user_coordinates.lat, user_coordinates.lng)


       // Listen for the `result` event from the MapboxGeocoder that is triggered when a user
       // makes a selection and add a symbol that matches the result.
       geocoder.on('result', function(ev) {
           map.getSource('single-point').setData(ev.result.geometry);
           console.log('ev',ev)
           built_address = ev.result.place_name

       });

   }
     } else {
      // if device doesnt support location
      console.log('device doesnt support location')
     }

 }; /* END getUserLocation(); */



 </script>

</body>
</html>

Answer 1

尝试 geocoder.mapboxClient.geocodeReverse:

geocoder.mapboxClient
  .geocodeReverse({
    latitude: user_coordinates.lat, 
    longitude: user_coordinates.lng
  }, function(err, res) {
    console.log(err, res)
  });

更新 mapbox-gl-geocoder v5.0.0
您必须创建启用反向地理编码的地理编码器：

let geocoder = new MapboxGeocoder({
    accessToken:mapboxgl.accessToken,
    mapboxgl:mapboxgl,
    reverseGeocode:true
})

那么你将能够做到:

geocoder.query("126.981,37.539")
...

请注意，默认坐标格式为 lat,lng，但您可以使用 options.flipCoordinates

将其反转

Mapbox GL JS - 带坐标的反向地理编码

Mapbox GL JS - Reverse Geocoding with coordinates

javascript

reverse-geocoding

mapbox

mapbox-gl-js