大厂在做的WebGIS可视化开发效果——高德地图

最新推荐文章于 2024-04-10 12:26:42 发布
最新推荐文章于 2024-04-10 12:26:42 发布
阅读量1.2k 收藏 22
点赞数 10
分类专栏： webgis 文章标签： arcgis 地图 高德地图 webgis GIS开发 地图可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jdjxbsus/article/details/135864974
版权

WebGIS开发，其实就是前端可视化开发的一个方向：地图可视化开发。

一些互联网大厂例如高德、百度、腾讯等都提供地图可视化效果的API，其中一些是免费的，一些商业化也就是要收费的。收费的部分，拿高德地图来说，是高德地图的主要收入来源之一。

我们今天主要看下高德地图它在WebGIS地图可视化部分的一些案例效果，方便大家更好地了解webgis在行业上的应用，对就业方向有更多发现选择。

01 镜头动画

案例是上海东方明珠楼体环视，通过三维模型和灯光效果，渲染出东方明珠附近楼体建筑，并且使用自定义镜头动画环视。

图片

02 多光源效果

多方位光源—多种光源灵活配置打造科技感场景，支持环境光、平行光、点光源多重配置能力

图片

03 圆点图效果

大小点—中国城市人口数量及GDP排行

显示了中国城市各人口数量，总GDP数量和人均GDP排行情况

图片

大小点—世界地震数据分布

点半径及颜色映射全球地震等级、深度等数据

图片

圆点—孔子学院：文化资产的分布及影响

大小点表达孔子学院在各国的开设分布及影响，学院的开设数量随时间发生变化

图片

圆点—全国粤菜分布情况

全国粤菜的分布密度，数据量大约有10万个点

图片

04 棱柱图效果

多面棱柱—中国城市人口数量及GDP排行

中国城市各人口数量，总GDP数量和人均GDP排行情况

图片

05 贴地点效果

呼吸点—深圳高峰期路口延误指数评级

每个路口的延误指数，其中EF等级是拥堵较严重路口贴地点—全国交通事件响应指数

图片

06 图标效果

图标点-智慧交通道路事件情况

某一时刻检测道路的交通事件情况，通过数据分布对实时交通进行治理和管控。

图片

07  标牌点效果

标牌点-某片区的房价情况

某一时刻某片区房价情况，立牌显示文字和动态图标，增加灵动感。

图片

08 线图层效果

线路图--北京部分公共交通线路

通过高层展示出叠加在一起的线路，更加清晰展示每条数据线

图片

09 弧度飞线效果

弧线飞线--北京人口流出

使用弧度飞线链接两地点位置，脉冲效果表达人口数据流向

图片

10 脉冲线图层效果

疫情期间北京的流入流出情况

2020年某一时刻其他城市流入北京市及北京市的人口流出情况

图片

北京公交线路行驶路线分类

北京全市范围内各公交线路运行情况

图片

11 面图层效果

立体面--杭州功能区交通健康度

通过面的颜色及高度来映射各功能区的健康指数

图片

面图层—凯德Mall剖面图

通过面图层的高度和光照效果，展示出每层楼的室内情况。

图片

面图层—北京首都机场剖面图

通过面图层的高度和光照效果，展示出每层楼的室内情况

图片

12 热力图

热力图--杭州2020年房屋出售套数

图片

3D热力—全国交通健康指数热度

13 网格热力图效果

武汉市车辆密度热力

通过热力映射车辆分布情况，颜色和高度体现出车辆密度

图片

14 激光效果蜂窝热力图效果

蜂窝图--杭州高峰期路口延误指数评级

蜂窝柱状高度及颜色映射路口的延误指数，其中EF等级是拥堵较严重路口

图片

15 激光效果

粒子飞线—望京区域数据分布情况示例

可灵活配置粒子拖尾、颜色、速度等表达丰富的数据可视化场景

图片

16 网格图效果

北京充电桩分布南京某小区

图片

图层标注配置-济南历下小区

可便捷的在现有的图形位置上添加标注

图片

免费领取GIS开发相关学习资料

GIS前端嘉欣
关注
  • 10
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
高德地图WebGIS
QQ418579986的博客
12-29 688
实战总结
webgis地图开发
01-28
webgis地图demo，openlayers、leaftletjs例子。后期添加百度和高德地图api
用高德地图API开发一个简单基础的WebGIS系统网站源码【适合小白 上传即用】
04-05
网站主题是GIS考研院校信息交互。 使用原生JS+高德地图API实现简单的WebGIS，功能有： ① 基本地图功能：放大缩小，图层管理，地图测量，几何绘制，上下文菜单； ② 路线规划； ③ POI搜索； ④ 考研院校分布点信息交互； ⑤ 热力图。 基本上都是从官方给的案例中修改过来的（还有一点点的逻辑bug未修改，交了作业就懒得弄了哈哈哈）。其中图层管理功能这一块，由于图层管理组件是用的API2.0，而热力图和分布点图层是使用LOCA 数据可视化API写的，两者不兼容，需要重写图层切换的方法！ ----- ---- ------- 写起来挺好玩的，本来想写一篇帖子的，但是写完实验报告就懒得动手了哈哈哈哈哈哈哈。如果有感兴趣源码的同学，可以下载看看
基于JavaScript的WebGIS前端开发及优化
最新发布
04-15
近年来网站客户端开发规模越来越大并且有很多由AJAX开发的复杂页面， 系统中的客户端脚本大量增加，前端开发就产生了诸如代码量大、组织困难、难 以维护、代码复用低、扩展适应性差等此类的问题。究其原因，以往前端开发不 重视设计模式的应用，仅仅实现基本的交互功能。因此前端架构设计和模块化开 发在在前端开发中应运而生。前端模块化开发即把前端依照布局和功能划分为多 个开发模块，其中每一个模块实现特定的功能，之后把各个模块合理的组成一个 具有完整功能的系统。前端模块化开发能够极大地降低了程序员开发时的相互干 扰，协同开发更加快速，此外还能提高网页浏览速度、网络信息组织与维护更高 效、精简代码。 论文在对HTML5、Openlayers、RequireJS和Backbone技术进行分析的基础 上，结合各自的优点，使用Openlayers构建了基于JavaScript的轻量级、开放式 WebGIS系统模型，阐述了其设计思想，初步完成了系统实现。把前端优化技术 应用到项目实现中，具体分析了各自的性能优化效果。
基于高德地图数据采集及可视化城市交通健康榜
关注收藏，可以私信解决问题！
04-10 1921
交通状况是衡量一个城市发展水平和居民生活质量的重要指标之一。近年来，随着城市化进程的加快，交通拥堵问题日益凸显，成为城市管理者和居民关注的焦点。高德地图作为中国领先的数字地图内容、导航和位置服务解决方案提供商，通过其发布的《中国主要城市交通分析报告》，为我们提供了丰富的数据资源，使得交通状况的可视化分析成为可能【4】【10】【3】。
使用高德地图Web服务-路径规划，用ArcGIS JS显示数据在天地图底图上
09-09
使用高德地图Web服务-路径规划，用ArcGIS api for JS将数据显示在天地图底图上 用于两地之间的交通建议 Hbuild工程，jQuery，ArcGIS JS，天地图
利用vue-echarts结合高德地图开发地图数据大屏可视化+国内地图省市区三级下钻
勤勇的博客
11-05 8185
效果图如图所示 ： 点击地图省切换到市区地图，点击地图市切换到区/县地图。相应的顶部下拉列表也会随之改变，下拉列表选择地图也会随之改变。 <template> <div class="map-container"> <div class="map"></div> <div id="mapChart" r...
WebGIS(一):高德地图API-显示地图
weixin_46441425的博客
09-04 1132
WebGIS
android之基于高德地图的移动轨迹的可视化
01-24
地图跟踪 http://blog.csdn.net/i_do_can/article/details/50571657
高德地图+echarts 地图数据可视化
m0_61404523的博客
08-10 5285
高德地图+echarts制作散点图
[移动GIS] 7-移动可视化|高德地图
geodoer
06-07 1209
移动地图可视化方式三种方式 移动地图可视化=数据+符号化+地图输出 基于栅格图像的移动地图可视化 移动终端用户向移动服务器发出地图请求，移动服务器接受请求，并调用地图服务程序来处理用户的请求，最后将所得到的栅格地图( GIF或JPG格式) 以静态页面的形式发送到客户端。 优点：对客户端的要求很低 缺点：对网络传输的过度依赖 服务器的负担重 基于Mobile SVG的移动地图可视化 M...
借助高德地图开发者平台——地图可视化
baidu_34785556的博客
10-09 3151
借助高德地图开发者平台——地图可视化 高德地图开发者平台：http://developer.amap.com/ 做什么？ 制作这样的显示地图： 你只需要： 点位经纬度坐标即可。（这一点可以利用高德坐标拾取获得，也可以通过arcgis建立字段获取添加） 参见高德地图可视化数据说明： https://lbs.amap.com/faq/mapdata/platform/up...
Web Gis_webgis_GIS地图开发Js_gis_webgis地图来源_web地图可视化_
10-01
通过HTML，实现基本的地图显示以及查找地点等部分的功能。实现地图可视化。
基于WebGIS课程作业设计-考研信息可视化.zip
08-31
2.数据：以14-19年本校的应届生考研情况统计为基础在Map Lab实现自定义的数据可视化。 3.网页样式：用Bootstrp的栅格布局排版的。 4.代码：HTML+CSS+JQuery，一共将近四百行 有兴趣的可以拿去参考学习
webgis.rar_fliesgkc_webGIS地震_webgis_webgis框架开发_分布地图
09-20
含有一个整体的框架，加载地图，查看地震点分布
基于openlayers的局域网地图开发第8课基本图形绘制源码
12-22
可以实现地图显示、地点标注、绘制图形、添加图片与文字、地图保存与恢复、地点搜索查询、路径规划、二三维地图切换等功能，为局域网地图的开发和部署提供了比较完整的解决方案，所有功能均可在离线条件下实现。
vue中引入高德地图Loca数据可视化
前端-尔嵘
11-03 4771
目录引言：关键词：正文：一、如何安装或者引入：二、如何引入：三、如何使用：四、完整代码：五、效果图 参考： 前面我的文章介绍了vue中引入高德地图实例的，详情可以去参考，由于需求增加，地图要做的更加美观、数据更加符合真实的空间数据呈现，依旧选择高德地图的API，这里我们选择引入高德地图 在vue中加载 数据可视化 Loca api 2.0版本。 vue、高德地图、LOCA、数据可视化 Loca 数据可视化 API 2.0（以下简称为LOCA API 2.0）是一个基
vue中使用原生高德地图
weixin_44042792的博客
01-15 619
1. 引入高德地图 html中 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.Geocoder"></script> 2.配置 vue.config.js configureWebpack: { externals: { 'AMap': 'AMap', 'AMapUI': 'AMapUI' } } 3...
html，webgis基于高德地图数据的网页设计代码案例
02-27
以下是一个基于高德地图数据的网页设计代码案例，使用HTML和JavaScript编写。这个例子展示了如何在网页中嵌入高德地图，并使用JavaScript调用地图API，从而在地图上添加标记和信息窗口。 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>WebGIS基于高德地图数据的网页设计</title> <style> #mapContainer { height: 500px; width: 100%; } </style> <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY_HERE"></script> <script> // 创建地图 var map = new AMap.Map('mapContainer', { center: [116.397428, 39.90923], zoom: 13 }); // 添加标记 var marker = new AMap.Marker({ position: [116.397428, 39.90923], title: '北京市' }); map.add(marker); // 添加信息窗口 var infoWindow = new AMap.InfoWindow({ content: '<h3>北京市</h3><p>这是中国的首都。</p>' }); marker.on('click', function() { infoWindow.open(map, marker.getPosition()); }); </script> </head> <body> <div id="mapContainer"></div> </body> </html> ``` 请注意，代码中的`YOUR_KEY_HERE`需要替换为您自己的高德地图API密钥。此外，还需要在使用地图API之前加载高德地图JavaScript库。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值