3天学会webgis开发：智慧校园项目
3天学会webgis开发：智慧校园项目，做毕业的第一个项目~
·
WebGIS第⼀课：测试⾼德API并通过
先看测试效果：
在控制台输出AMap对象的相关信息，就证明引⼊通过了。
操作步骤：
1）在⾼德API注册并申请Key和密钥。
2）在vscode中新建⼯程，新建html⽂件。
3）输⼊代码：
注意这⾥的AMap是对象，如果输⼊：
那控制台只会显示amap，啥也没有。
之后把申请的key和密钥填⼊，即可。
这⾥测试可以加载live server 来显示，直接⽤浏览器打开也可以。
WebGIS第⼆课：测试⾼德API地图容器和显示
# 1 引⼊资源⽂件
具体引⼊资源⽂件请参照第⼀课。
# 2 创建容器
其实就是⽤div就可以，代码如下：
这⾥测试使⽤auto貌似不⾏。
# 3 加载地图
使⽤js⽅式来关联div
<div id="container"></div>
这⾥测试使⽤auto貌似不⾏。
# 3 加载地图
使⽤js⽅式来关联div
这个⽐leaflet还是简单的多。
效果：
WebGIS第三课：测试⾼德API地图参数
# 1 中⼼点经纬度
通过指定中⼼点经纬度来调节地图的位置，中国的维度通常在20到45之间，经度在84到118之间，北京
是116,40，武汉是114,30，可以测试⼀下。
# 2 缩放⽐例
是指当前地图的⽐例尺，⼀般是3-20,20就很⼤⽐例尺了，5⽐较⼩，可以⽤12左右，对城市级⽐较合 适。
# 3 显示模式
就是2D还是3D模式，⾼德API的三维模式其实就是楼房具有⾼度，都是⽮量数据，逼真度还可以，参⻅
本图示例。
# 4 俯视⻆度
⼀般的俯视⻆度就是0，即上帝视⻆，这样看3D可能不是很明显。可以加俯视视⻆，这样看起来明显直观
⼀些。这⾥指定俯视⻆度为45.
可以通过在构造函数⾥指定参数的形式，来调整地图的属性。
实现这个⻚⾯的html⽂档如下：
上⼀篇提到的css问题，可以通过设置width和height为100%来实现全屏，但是还需要指定body和
html⻚⾯的宽和⾼也为100%。指定后，⻚⾯还会有⼀点边，那是因为盒状模型的margin默认并不
为0，还需要设置下margin为0即可。
WebGIS第四课：地图的组成和操作
图层的添加：地图是⼀层⼀层的，叠合在⼀起，组成完成的地图。
现在来试试实时路况的实现。
⾸先，指定是否⾃动刷新，其次，指定刷新间隔为180s。
将交通图层添加到map上，即可。看⼀下效果：
如果不想看实时路况，想移除怎么办呢，按F12进⾏开发环境，选择console控制台，如图，输⼊
回⻋执⾏，看⼀下改变：
路况信息就被移除了。 那么，这个功能怎么让⽤户能使⽤呢，可以做⼀个按钮来触发事件来实
现。现在div容器外⾯添加⼀个按钮来实：
这⾥做了两个按钮，⼀个添加，⼀个隐藏。其实如果加个判断，做成⼀个按钮也可以的。
看⼀下效果：点击添加后：
隐藏后：
源码和视频教程~戳↓下方小卡片
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
11
0- 0
已为社区贡献7条内容
所有评论(0)