webgis开发之mapbox（城市天气查询）

最新推荐文章于 2024-06-14 17:57:48 发布
最新推荐文章于 2024-06-14 17:57:48 发布
阅读量500 收藏 10
点赞数 8
分类专栏： mapbox webgis开发 文章标签： javascript html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67679364/article/details/136404987
版权

MAPBOX

主页面代码

draft2.html

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>drafts</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="lib/mapbox.js"></script>
    <link rel="stylesheet" href="lib/mapbox.css">
    <script src="lib/turf.js"></script>
    <script src="lib/jquery.min.js"></script>
    <script
        src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.min.js"></script>
    <link rel="stylesheet"
        href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.css"
        type="text/css" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        .header {
            background-color: rgb(76, 158, 255);
            box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
            width: 26vw;
            height: 50px;
            padding: 0px 10px;
            margin: 3px;
            position: fixed;
            top: 0;
            z-index: 2;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-radius: 5px;
        }

        .header_select {
            width: 20%;
            height: 50px;
            line-height: 50px;
            color: white;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.3s;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 添加颜色变化的过渡效果 */
        }

        /* 鼠标悬浮时的效果 */
        .header_select:hover {
            background-color: rgba(0, 115, 255);
        }

        /* 按下去的感觉 */
        .header_select:active {
            background-color: rgba(0, 81, 180);
        }

        /* 修改链接样式 */
        .header_select a {
            text-decoration: none;
            color: inherit;
        }

        .header_div_i {
            width: 80%;
            height: 68%;
            background-color: #fff;
            box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
            border: none;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .header_div_input {
            width: 80%;
            height: 80%;
            border: none;
            outline: none;
            word-spacing: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .weatherCondition {
            width: 20vw;
            border-radius: 8px;
            overflow: hidden;
            background-color: rgba(76, 158, 255, 0.25);
            /* background-color: rgba(255, 219, 0, 0.5); */
            border: 0.5px dashed black;
            position: fixed;
            right: 5px;
            top: 5px;
            z-index: 1;
        }

        /* 设置表格样式 */
        .weatherTable {
            border-collapse: collapse;
            width: 100%;
            border-radius: 4px;
        }

        /* 设置表格行样式 */
        .weatherRow {
            border-bottom: 1.2px solid #f5f3f3;
        }

        /* 设置表格数据样式 */
        .weatherData {
            padding: 8px;
            text-align: center;
            font-size: 12px;
        }

        .c1 {
            width: 30%;
            border-right: 1.2px solid #f5f3f3;
        }

        .c2 {
            width: 70%;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="header_select" onclick="location.href='http://127.0.0.1:5500/map/drafts3.html'">CITY</div>
        <div class="header_div_i">
            <svg t="1706109836956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="6986" width="20%" height="80%">
                <path
                    d="M417.05 770.27c-94.33 0-183.01-36.73-249.7-103.43-137.69-137.68-137.69-361.72 0-499.4C234.05 100.74 322.73 64 417.05 64s183 36.74 249.7 103.43c137.69 137.68 137.69 361.72 0 499.4-66.69 66.71-155.37 103.44-249.7 103.44z m0-642.06c-77.18 0-149.73 30.06-204.3 84.62-112.65 112.66-112.65 295.95 0 408.61 54.57 54.57 127.13 84.62 204.3 84.62 77.17 0 149.73-30.05 204.3-84.62C734 508.78 734 325.49 621.35 212.83c-54.57-54.57-127.13-84.62-204.3-84.62z"
                    fill="#8a8a8a" p-id="6987"></path>
                <path
                    d="M905.1 960c-8.51 0-16.68-3.39-22.7-9.41L610 678.18c-12.54-12.53-12.54-32.86 0-45.4l22.7-22.7c12.52-12.54 32.86-12.54 45.4 0l272.41 272.4c12.54 12.54 12.54 32.86 0.01 45.4l-22.71 22.71A32.124 32.124 0 0 1 905.1 960z"
                    fill="#8a8a8a" p-id="6988"></path>
            </svg>
            <input class="header_div_input" type="text" placeholder="请输入城市(最低市级)">
        </div>
    </div>
    <div class="weatherCondition">
        <table class="weatherTable">
            <tr class="weatherRow">
                <td class="c1 weatherData">城市</td>
                <td class="c2 weatherData city"></td>
            </tr>
            <tr class="weatherRow">
                <td class="c1 weatherData">天气</td>
                <td class="c2 weatherData weather"></td>
            </tr>
            <tr class="weatherRow">
                <td class="c1 weatherData">温度</td>
                <td class="c2 weatherData temperature"></td>
            </tr>
            <tr class="weatherRow">
                <td class="c1 weatherData">风向</td>
                <td class="c2 weatherData winddirection"></td>
            </tr>
            <tr class="weatherRow">
                <td class="c1 weatherData">风力</td>
                <td class="c2 weatherData windpower"></td>
            </tr>
        </table>
    </div>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/streets-v12', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 5,    //缩放比例
        });

        // 从 localStorage 中获取参数
        let receivedParameter = localStorage.getItem("city");

        // 在这里使用 receivedParameter 进行进一步处理
        let postcode = ''
        let level = ''
        let center = []
        addMask(receivedParameter)

        const input = document.querySelector('.header_div_input')
        input.addEventListener('keyup', function (event) {
            if (event.key === 'Enter') {
                // console.log(input.value);
                addMask(input.value)
            }
            // 将参数存储在 localStorage 中
            localStorage.setItem("currentCity", input.value);
        })

        let oldLayer = Object
        function addMask(text) {
            let postcode = ''
            let level = ''
            let center = []
            // console.log('https://restapi.amap.com/v3/geocode/geo?address=' + result1.text + '&key=0d0f38ca993c65d51f508675413e4a4c')
            fetch('https://restapi.amap.com/v3/geocode/geo?address=' + text + '&key=0d0f38ca993c65d51f508675413e4a4c')
                .then(response => response.json())
                .then(data => {
                    // console.log(data);
                    postcode = data.geocodes[0].adcode
                    level = data.geocodes[0].level
                    center = data.geocodes[0].location.split(',')
                    // console.log(`output->postcode,level,center`, postcode, level, center,typeof center)
                    // console.log('https://geo.datav.aliyun.com/areas_v3/bound/' + postcode + '_full.json');
                    getBound(postcode)
                    addWeatherCondition(postcode)
                    mapTo(center, level)
                });
        }

        function getBound(postcode) {
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/' + postcode + '_full.json')
                .then(res => res.json())
                .then(res => {
                    // console.log(`output->res`, res)
                    if (map.getLayer(`${oldLayer.id}`)) {
                        map.removeLayer(`${oldLayer.id}`)
                    }
                    map.addLayer({
                        id: 'polygon' + postcode,
                        type: 'fill',    //多边形为fill
                        source: {
                            type: 'geojson',
                            data: res
                        },
                        //绘制参数
                        paint: {
                            'fill-color': 'rgb(0,0,255)',
                            'fill-opacity': 0.6,
                        },
                    })
                    oldLayer = map.getLayer('polygon' + postcode)
                    // console.log(oldLayer.id);
                })
        }

        function mapTo(center, level) {
            let zoomIndex = 2
            if (level === '省') {
                zoomIndex = 5.5
            } else if (level === '市') {
                zoomIndex = 7
            }
            map.flyTo({ //飞行到某个点，带飞行动画
                center: center,
                zoom: zoomIndex,
                speed: 0.8,
            })
        }

        function addWeatherCondition(postcode) {
            console.log('https://restapi.amap.com/v3/weather/weatherInfo?city=' + postcode + '&key=0d0f38ca993c65d51f508675413e4a4c')
            fetch('https://restapi.amap.com/v3/weather/weatherInfo?city=' + postcode + '&key=0d0f38ca993c65d51f508675413e4a4c')
                .then(response => response.json())
                .then(weather => {
                    cityWeather = weather.lives[0]
                    $('.city').html(cityWeather.city)
                    $('.header_select').html(cityWeather.city)
                    $('.weather').html(cityWeather.weather)
                    $('.temperature').html(cityWeather.temperature_float + '℃')
                    $('.winddirection').html(cityWeather.winddirection)
                    $('.windpower').html(cityWeather.windpower)
                })
        }


    </script>
</body>

</html>

热门城市跳转页面

draft3.hmtl

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市选择</title>
    <script src="lib/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 50vw;
            margin: 0 auto;
        }

        .currentCity {
            width: 100%;
            text-align: left;
        }

        .hotCity {
            width: 100%;
            text-align: left;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .city {
            height: 20px;
            line-height: 20px;
            background-color: #ffffff;
            cursor: pointer;
            transition: background-color 0.3s;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 20px;
        }

        /* 鼠标悬浮时的效果 */
        .city:hover {
            background-color: rgba(193, 193, 193, 0.3);
        }

        /* 按下去的感觉 */
        .city:active {
            background-color: rgb(124, 124, 124);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="text">当前城市</div>
        <div class="currentCity"></div><hr>
        <div class="text">热门城市</div>
        <div class="hotCity"></div><hr>
    </div>
    <script>
        let cityArr = ['']
        let hotCityArr = ['北京', '上海', '西安', '三亚', '桂林']
        let currentCity = localStorage.getItem('currentCity')
        const div_currentCity = $(`
        <div class="city"
        onclick="goBack('${currentCity}')" 
        >${currentCity}</div>`);
        $('.currentCity').append(div_currentCity)

        hotCityArr.forEach(item => {
            const div_hotCity = $(`
            <div class="city"
            onclick="goBack('${item}')" 
            >${item}</div>`);
            $('.hotCity').append(div_hotCity)
        });

        function goBack(city) {
            location.href = 'http://127.0.0.1:5500/map/drafts2.html'
            // 将参数存储在 localStorage 中
            localStorage.setItem("city", city);
        }
    </script>
</body>

</html>

李佩锦peijin
关注
  • 8
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Mapbox浅析（快速入门Mapbox）
Taylor-NG的博客
06-01 1万+
1.是什么？    Mapbox是一个可以免费创建并定制个性化地图的网站。2.了解一些基本东西   常见的 mapbox.js和mapbox-gl.js的异同点？    相同点：                1.都是由Mapbox公司推出的免费开源的JavaScript库                2.都可以作为前端渲染矢量瓦片交互地图的工具                3.它们的样式设置...
WebGIS开发智慧校园笔记
04-23
### WebGIS开发智慧校园笔记知识点概述 #### WebGIS第一课：测试高德API并通过 - **知识点**： - 在高德API上注册并获取Key和安全密钥。 - 在VS Code环境中创建HTML文件，并引入高德地图API。 - 使用`console....
webgis-天气查询
07-09
ebGIS（网络地理信息系统）是指工作在Web网上的GIS,是传统的GIS在网络上的延伸和发展，具有传统GIS的特点，可以实现空间数据的检索、查询、制图输出、编辑等GIS基本功能，同时也是Internet 上地理信息发布、共享和交流协作的基础
基于百度地图Web API技术的WEBGIS气象服务研究及系统设计.pdf
10-12
基于百度地图Web API技术的WEBGIS气象服务研究及系统设计.pdf
关于mapbox的一些学习
最新发布
Elaine20132014的博客
06-14 579
添加图层/删除图层/添加图片/删除图片/修改图层层级/图层显隐。“天地图”是国家测绘地理信息局建设的地理信息综合服务网站。"GeometryCollection"：几何集合。"FeatureCollection"：特征集合。GeoJSON是一种对各种地理数据结构进行。"MultiLineString"： 多线。"MultiPoint" ： 多点。"MultiPolygon"：多面。"LineString"： 线。"Feature"：特征。"Point" ： 点。"Polygon"：面。
mapBox使用笔记
developer_qi的博客
05-13 3318
项目需要，以mapBox为基础开发地图相关大屏展示，记录开发与学习。 基础的地图渲染熟悉一些以后还是比较容易的，就是刚开始不熟一脸懵，先附上文档地址 英文地址：https://www.mapbox.com/maps/ 中文文档：http://www.mapbox.cn/中文文档里里还是会有很多英文 只是简单的介绍为中文了 简单样例： 效果展示 <!--dom部分--> <div :id="mapID" class="s-map" /> // js部分 import m..
mapbox threebox 下雨效果 天气特效
AllBluefm的专栏
01-25 888
使用mapbox为地图容器，结合threebox实现下雨效果。添加custom图层以及创建mesh。
mapbox
qq_43714712的博客
11-28 534
mapbox
MapBox介绍
weixin_39676449的博客
02-06 6102
来自美国的一家为开发者提供开发工具及开放平台的地图服务公司,不仅拥有有顶尖的测绘工程师们，同时110+万注册开发者以及每月3亿C端活跃用户也成为了他们的贡献者。官网：https://www.mapbox.com/mapbox以开源的形式构建了矢量瓦片技术生态，基于矢量瓦片规格和瓦片渲染规格，开发了矢量切片工具、瓦片服务传输框架、瓦片在各种终端下渲染使用的全套工具包、样式编辑等等。比如用户的地理位置移动情况、他们移动的速度。Mapbox设定了程序，收集到的数据会自动更新Mapbox地图的准确度。
Mapbox GL
jianghaha2011的博客
05-10 236
<div ref="basicMapbox" class="mapboxDiv" @click="showVideo"></div> new mapboxgl.Map() mapboxgl.accessToken = accessTokenMap; self.map = new mapboxgl.Map({ container: this.$refs.basicMapbox, style: sysStyle, center: sysAreaCenter, // 设置地图
基于JavaScript的WebGIS前端开发及优化
04-15
近年来网站客户端开发规模越来越大并且有很多由AJAX开发的复杂页面， 系统中的客户端脚本大量增加，前端开发就产生了诸如代码量大、组织困难、难 以维护、代码复用低、扩展适应性差等此类的问题。究其原因，以往前端...
Mapbox Cookbook.pdf
12-28
国外一本学习mapbox书籍，英文版，想学习的可以看一下，内容比较全面，英语不好的可使用多看阅读器，不懂的词汇能翻译
mapbox教程
05-15
详细的mapbox介绍和步骤，还有操作数据和示例代码，很适合初学mapbox，进行地图发布。
WebGIS开发与应用ppt课件.ppt
11-13
ArcGIS Server是当前主流的WebGIS开发平台之一，能够实现使用ArcGIS Server建立和开发简单的WebGIS应用。ArcGIS Server for ADF开发是一种使用ArcGIS Server的开发方法，可以实现使用ArcGIS Server建立和开发简单的...
webgis开发.rar
07-07
本压缩包“webgis开发.rar”提供了关于使用ArcGIS for JavaScript进行WebGIS开发的学习资源，包括服务器搭建、ArcGIS Server服务器扩展以及SOE（Service Object Extensions）开发等内容。 首先，让我们深入理解...
MapBox教程
热门推荐
夏风
08-22 10万+
MapBox简介 MapBox是一个可以免费创建并定制个性化地图的网站，一些相关的介绍： 创立3年没要投资人一分钱，没销售人员——个性定制地图网站Mapbox是如何服务900家付费客户，并养活30号员工的Mapbox – 自定义你的地图 类似的网站还有 ArcGIS OnlineCartoDB地图汇Google Fusion Tables 创建自己的地图 当然，要想创建自己的个
什么是mapbox?
_
02-07 3万+
Mapbox公司于2010年6月01日在美国成立。http://Mapbox.com是一个很棒的地图制作及分享网站，用户可以使用Mapbox Studio创建一个自定义、交互式的地图，然后可以将这些自定义的地图和数据服务你自己的网站(Web)或移动应用程序(Mobile Web/Android/IOS)上。 在技术和体验上，这家公司对传统的地图GIS系统的冲击简直都是颠覆性的。值得一提的是它为开源社区贡献了mapbox-gl-native/mapbox-gl-js/ node-sqlite3等许许多...
mapbox 笔记
qq_34870529的博客
02-16 2454
1：mapbox 更改图层属性 map.setPaintProperty(layer, 'fill-opacity', 1); 2：mapbox 更改图层数据源 map.getSource(source).setData(cityHeatDatas); 3：mapbox 获取当前地图已添加的图层layers及数据源sources const layers = map.getStyl...
mapbox 显示数据
weixin_46243213的博客
10-11 327
mapbox 显示数据
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值