当前位置：首页 > news >正文

WebGIS开发智慧校园（14）地图控件的添加

news 2025/11/5 9:23:41

往期内容：
WebGIS开发智慧校园（1）GIS开发的基本概念
WebGIS开发智慧校园（2）WebGIS开发平台介绍
WebGIS开发智慧校园（3）开发环境搭建
WebGIS开发智慧校园（4）Web开发HTML
WebGIS开发智慧校园（5）Web开发CSS
WebGIS开发智慧校园（6）JavaScript
WebGIS开发智慧校园（7）开发准备
WebGIS开发智慧校园（8）地图控件
WebGIS开发智慧校园（9）点标记和几何计算
WebGIS开发智慧校园（10）GeoJSON
WebGIS开发智慧校园（11）测试高德API
WebGIS开发智慧校园（12）测试高德API地图参数
WebGIS开发智慧校园（13）地图的组成和操作
+文末↓小助手，备注【智慧校园】无偿获取【完整版视频+笔记源码】

⾸先来看⾼德官⽹的UI界面：

他和我们现在的WebGIS⼯程最⼤的不同就是上⾯有很多控件，⽤户可以操作的。⽐如右下⻆有加号和减号按钮，这叫做控件。如何在我们的⼯程中引⼊这些呢，下⾯来看。

这是我们上⼀课看到的界⾯，这时候他下⾯有加号和减号按钮了。怎么办到的呢，其实就是这么⼏⾏代码实现的：

// 使⽤plugin 
AMap.plugin(['AMap.ToolBar'],function(){ 
//引⼊ 
map.addControl(new AMap.ToolBar()) })

此外，还有⽐例尺控件也⽤的⽐较多，怎么加载呢，⼀样的道理，也是同样的办法添加的：

左下⻆就出现⽐例尺了。代码如下：

// 使⽤plugin 
AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){ 
//引⼊ 
map.addControl(new AMap.ToolBar()) 
map.addControl(new AMap.Scale()) })

下⾯来看鹰眼控件。这个听起来⾼⼤上，实际就是缩略图。⼀般在右下⻆显示地图的全景。

代码如下：

// 使⽤plugin 
AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.HawkEye'],function(){ 
//引⼊ 
map.addControl(new AMap.ToolBar()) 
map.addControl(new AMap.Scale()) 
map.addControl(new AMap.HawkEye()) })

接下来可以加⼀个切换地图图层的控件。效果如下：

这是切换为卫星图，并添加了路⽹和交通信息的地图。实现也很简单，代码如下：

// 使⽤plugin 
AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.HawkEye','AMap.MapType'], function(){ 
//引⼊ 
map.addControl(new AMap.ToolBar()) 
map.addControl(new AMap.Scale()) 
map.addControl(new AMap.HawkEye()) 
map.addControl(new AMap.MapType()) })

还有其他的⼀些控件，⽐如控制⼯具，效果：

代码：

// 使⽤plugin 
AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.HawkEye','AMap.MapType',' AMap.ControlBar'],function(){ 
//引⼊ 
map.addControl(new AMap.ToolBar()) 
map.addControl(new AMap.Scale()) 
map.addControl(new AMap.HawkEye()) 
map.addControl(new AMap.MapType()) 
map.addControl(new AMap.ControlBar()) // ⿏标右键也可以实现 })