⾸先来看⾼德官⽹的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()) // ⿏标右键也可以实现
})
注意,鹰眼控件把⼯具条给挡住了,实际貌似⼯具条在右上显示,这⾥后期可以修改完善⼀下。