WebGIS开始
2022/4/23 23:44:09
本文主要是介绍WebGIS开始,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1. 开始准备
申请key和安全密钥,https://lbs.amap.com/,在高德API申请安全密钥和key
2. 引入高德API,使用内置类AMap
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>开发准备</title> <!-- 引入高德API --> <script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode:'密钥', } </script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=key"> </script> </head> <body> <script> console.log(AMap) </script> </body> </html>
3. 地图显示
(1)引入高德API
(2)创建地图容器
(3)设置地图样式
(4)加载地图,定义一个变量,保存一个对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>地图显示</title> </head> <!--1. 引入高德API --> <script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode:'密钥', } </script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=key"> </script> <!-- 3. 设置地图样式 --> <style> #container { width: 300px; height: 300px; } </style> <body> <!-- 2. 创建地图容器 --> <div id="container"></div> <!-- 4. 加载地图 --> <script> //定义一个变量,保存一个对象 var map = new AMap.Map('container'); </script> </body> </html>
4. 地图参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>地图参数</title> </head> <!--1. 引入高德API --> <!--1. 引入高德API --> <script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode:'密钥', } </script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=key"> </script> <!-- 3. 设置地图样式 --> <style> html,body,#container{ width: 100%; height: 100%; } </style> <body> <!-- 2. 创建地图容器 --> <div id="container"></div> <!-- 4. 加载地图 --> <script> var map = new AMap.Map("container",{ center: [108.93,34.27], //设置地图中心点经纬度 zoom: 10, //地图的缩放比例(3-20) viewMode: '3D', //3D显示 pitch: 45, //45度 }) </script> </body> </html>
5. 图层 可以在底图的基础上再次添加一些其他的显示数据,比如实时路况类等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图层</title> </head> <!--1. 引入高德API --> <script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode:'密钥', } </script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=key"> </script> <!-- 3. 设置地图样式 --> <style> html,body,#container{ width: 100%; height: 100%; } </style> <body> <button onclick="add()">显示实时路况</button> <button onclick="remove()">隐藏实时路况</button> <!-- 2. 创建地图容器 --> <div id="container"></div> <!-- 4. 加载地图 --> <script> var map = new AMap.Map("container",{ center: [108.93,34.27], //设置地图中心点经纬度 zoom: 10, //地图的缩放比例(3-20) viewMode: '3D', //3D显示 pitch: 45, //45度 }) //添加一个实时路况的图层 var traffic = new AMap.TileLayer.Traffic({ autoRefresh: true, //是否自动刷新 interval: 180, //刷新间隔 }) function add(){ map.add(traffic) } function remove(){ map.remove(traffic) } </script> </body> </html>
这篇关于WebGIS开始的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?