• WebGIS之实现查询地区天气并让地区高亮

    一.预览>>

     

    二.思路>>

            根据搜索框的内容来进行页面视角的切换，对应的地区高亮，右边有关天气的地方实时更新，并且因为代码体量非常小，并没有选择在框架下完成。直接一个html文件搞定了，但实际上还是有一些坑的，比如不太了解的人会把key引入错，关于请求高德接口方面，注意阅读看是否需要其它参数，地理/逆地理编码-基础 API 文档-开发指南-Web服务 API|高德地图API (amap.com)icon-default.png?t=N7T8https://lbs.amap.com/api/webservice/guide/api/georegeo可能之后时间过得久了，对应API发生了变化，及时查阅文档。

    三.代码>> 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Weathertitle>
    8.     <link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet">
    9.     <script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js">script>
    10.     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">script>
    11.     <style>
    12.         body {
    13.             margin: 0;
    14.             padding: 0;
    15.         }
    16.  
    17.         #header {
    18.             width: 100%;
    19.             height: 100px;
    20.             background-color: #212121;
    21.             overflow: hidden;
    22.             /* 解决margin塌陷,因为group设置了margin-top*/
    23.         }
    24.  
    25.         #map {
    26.             width: 100%;
    27.             position: absolute;
    28.             top: 100px;
    29.             bottom: 0;
    30.         }
    31.  
    32.         #map .information {
    33.             padding: 0;
    34.             margin: 0;
    35.             list-style: none;
    36.             width: 200px;
    37.             height: 300px;
    38.             position: absolute;
    39.             z-index: 1;
    40.             top: 10px;
    41.             right: 10px;
    42.             color: #fff;
    43.  
    44.             background-color: rgba(0, 0, 0, 0.4);
    45.             border-radius: 5px;
    46.             padding: 10px;
    47.             display: flex;
    48.             align-items: stretch;
    49.             justify-content: space-around;
    50.             flex-direction: column;
    51.         }
    52.  
    53.         #map .information li {
    54.             border-bottom: 1px solid aqua;
    55.             font-style: 20px;
    56.         }
    57.  
    58.  
    59.         .group {
    60.             display: flex;
    61.             line-height: 28px;
    62.             align-items: center;
    63.             position: relative;
    64.             max-width: 190px;
    65.             margin: 0 auto;
    66.             margin-top: 20px;
    67.         }
    68.  
    69.         .input {
    70.             width: 100%;
    71.             height: 40px;
    72.             line-height: 28px;
    73.             padding: 0 1rem;
    74.             padding-left: 2.5rem;
    75.             border: 2px solid transparent;
    76.             border-radius: 8px;
    77.             outline: none;
    78.             background-color: #f3f3f4;
    79.             color: #0d0c22;
    80.             transition: .3s ease;
    81.         }
    82.  
    83.         .input::placeholder {
    84.             color: #9e9ea7;
    85.         }
    86.  
    87.         .input:focus,
    88.         input:hover {
    89.             outline: none;
    90.             border-color: rgba(234, 76, 137, 0.4);
    91.             background-color: #fff;
    92.             box-shadow: 0 0 0 4px rgb(234 76 137 / 10%);
    93.         }
    94.  
    95.         .icon {
    96.             position: absolute;
    97.             left: 1rem;
    98.             fill: #9e9ea7;
    99.             width: 1rem;
    100.             height: 1rem;
    101.         }
    102.     style>
    103. head>
    104.  
    105. <body>
    106.     <div id="header">
    107.         
    108.         <div class="group">
    109.             <svg class="icon" aria-hidden="true" viewBox="0 0 24 24">
    110.                 <g>
    111.                     <path
    112.                         d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z">
    113.                     path>
    114.                 g>
    115.             svg>
    116.             <input placeholder="输入城市名称" type="search" class="input">
    117.         div>
    118.     div>
    119.     <div id="map">
    120.         <ul class="information">
    121.             <li>当前时间li>
    122.             <li>城市li>
    123.             <li>天气li>
    124.             <li>温度li>
    125.             <li>风向li>
    126.             <li>风力li>
    127.         ul>
    128.     div>
    129.  
    130.     <script type="text/javascript">
    131.         window._AMapSecurityConfig = {
    132.             securityJsCode: "写你自己的",
    133.         };
    134.     script>
    135.     <script type="text/javascript"
    136.         src="https://webapi.amap.com/maps?v=2.0&key=你自己的web端key">        script>
    137.     <script>
    138.         const input = document.querySelector('.input');
    139.         mapboxgl.accessToken = 'pk.eyJ1IjoiY3VkODUiLCJhIjoiY2xrYnFncXZhMGc1cTNlbmFrNHN1N2cxeCJ9.69E3f8nMJkvqQDRhLSojVw';
    140.         const map = new mapboxgl.Map({
    141.             container: 'map',
    142.             style: 'mapbox://styles/mapbox/streets-v12',
    143.             zoom: 10,
    144.             center: [116.41667, 39.91667]
    145.         });
    146.  
    147.  
    148.         document.addEventListener('keypress', function (e) {
    149.             if (e.key === 'Enter') {
    150.                 const cityName = input.value;
    151.                 //使用完清空，便于下次使用
    152.                 input.value = ''
    153.                 queryWeather(cityName)
    154.             }
    155.         })
    156.  
    157.         function queryWeather(cityName) {
    158.             //加载天气查询插件，因为只展示当前天气，没必要调用接口
    159.             AMap.plugin("AMap.Weather", function () {
    160.                 //创建天气查询实例
    161.                 var weather = new AMap.Weather();
    162.                 //执行实时天气信息查询
    163.                 weather.getLive(cityName, function (err, data) {
    164.                     console.log(data);
    165.                     if (!err) {
    166.                         updateWeatherInfo(data)
    167.                         updateMap(data.city, data.adcode)
    168.                     } else {
    169.                         alert(err)
    170.                     }
    171.                 });
    172.             });
    173.         }
    174.  
    175.         function updateWeatherInfo(data) {
    176.             const timeElement = document.querySelector('.information li:nth-child(1)')
    177.             const cityElement = document.querySelector('.information li:nth-child(2)');
    178.             const weatherElement = document.querySelector('.information li:nth-child(3)');
    179.             const tempElement = document.querySelector('.information li:nth-child(4)');
    180.             const windDirectionElement = document.querySelector('.information li:nth-child(5)');
    181.             const windPowerElement = document.querySelector('.information li:nth-child(6)');
    182.  
    183.             timeElement.textContent = '当前时间：' + data.reportTime;
    184.             cityElement.textContent = '城市：' + data.city;
    185.             weatherElement.textContent = '天气：' + data.weather;
    186.             tempElement.textContent = '温度：' + data.temperature + '°C';
    187.             windDirectionElement.textContent = '风向：' + data.windDirection;
    188.             windPowerElement.textContent = '风力：' + data.windPower + '级';
    189.         }
    190.  
    191.         function updateMap(city, adcode) {
    192.             //调用高德的地理编码API
    193.             //记住是这个key绑定的是Web服务，跟前面的key不是一种
    194.             axios({
    195.                 url: `https://restapi.amap.com/v3/geocode/geo?address=${city}&adcode=${adcode}&key=填自己的key`
    196.             }).then(result => {
    197.                 // console.log(typeof (result.data.geocodes[0].location))  //String类型
    198.                 var locationString = result.data.geocodes[0].location;
    199.                 var coordinates = locationString.split(","); // 经度和纬度之间用逗号分隔，可以根据实际情况调整分隔符
    200.  
    201.                 // 创建一个新的 LngLat 对象
    202.                 var newCenter = new mapboxgl.LngLat(parseFloat(coordinates[0]), parseFloat(coordinates[1]));
    203.  
    204.                 //实现视角跳转
    205.                 map.flyTo({
    206.                     center: newCenter,
    207.                     //使动画平滑
    208.                     essential: true
    209.                 })
    210.             }).catch(error => {
    211.                 console.log(error.message);
    212.             })
    213.  
    214.             // 先检查是否已存在同名的数据源和图层，如果存在，则移除
    215.             if (map.getSource('json')) {
    216.                 map.removeLayer('place'); // 移除图层
    217.                 map.removeSource('json'); // 移除数据源
    218.             }
    219.  
    220.             //省市的url带有_full，观察adcode的区别来确定模板字符串
    221.             let url = ''
    222.             if (adcode[adcode.length - 1] == 0) {
    223.                 url = `https://geo.datav.aliyun.com/areas_v3/bound/${adcode}_full.json`
    224.             } else {
    225.                 url = `https://geo.datav.aliyun.com/areas_v3/bound/${adcode}.json`
    226.             }
    227.  
    228.             // console.log(url);
    229.             map.addSource('json', {
    230.                 type: 'geojson',
    231.                 data: url
    232.             })
    233.             map.addLayer({
    234.                 id: 'place',
    235.                 type: 'fill',
    236.                 source: 'json',
    237.                 paint: {
    238.                     'fill-color': '#ff5733', // 设置填充颜色为橙红色
    239.                     'fill-opacity': 0.5, // 设置填充不透明度
    240.                     'fill-outline-color': '#ffffff', // 设置边界线的颜色为白色
    241.                     'fill-outline-width': 2 // 设置边界线的宽度
    242.                 }
    243.             })
    244.         }
    245.  
    246.     script>
    247. body>
    248.  
    249. html>

             

  • 相关阅读:
    Java入门基础笔记
    Dropout回顾
    多测师肖sir_第二个月第一讲html001
    js逆向之反调试之无限debugger解决
    基于SSM的校园快递一站式服务系统设计与实现
    C/C++ 字符串问题总结
    HTML表格与表单
    Item 42: Consider emplacement instead of insertion.
    查看当前所有的数据库
    C++中如何描述table表格类型数据结构
  • 原文地址：https://blog.csdn.net/weixin_73810008/article/details/136766673