OpenLayers使用2

接着上一篇https://blog.csdn.net/weixin_51416826/article/details/140161160?spm=1001.2014.3001.5502

本篇主要内容是基于高德API逆向地址解析获取城市中心点，并且设置了输入框，可以输入城市执行飞行，同时基于高德API获取城市天气信息，并显示。

逆向地址解析获得城市中心点

$.ajax({
     url:`https://restapi.amap.com/v3/geocode/geo?address=${city}&key=${key}`
}).then(res => {
     var center = res.geocodes[0].location.split(",")
     map.getView().animate({
          center: ol.proj.transform(center, 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
     })
     document.getElementById('input2').value = ''
})

基于城市位置获取天气信息

$.ajax({
    url:`https://restapi.amap.com/v3/weather/weatherInfo?city=${city}&key=${key}`
}).then(res => {
    var {city, weather, temperature, winddirection, windpower} = res.lives[0]
    weather = {
              city: {val: city, name: "城市"},
              weather: {val: weather, name: "天气"},
              temperature: {val: temperature, name: "气温"},
              winddirection: {val: winddirection, name: "风向"},
              windpower: {val: windpower, name: "风速"}
            }
            
            
     for ( let key in weather){
         var template = `<tr>
             <td>${weather[key].name}</td>
             <td>${weather[key].val}</td>
           </tr>`
         $('.weather').append(template)
     }
})