WebGIS第五课：地图控件的添加

首先来看高德官网的UI界面：

他和我们现在的WebGIS工程最大的不同就是上面有很多控件，用户可以操作的。比如右下角有加号和减号按钮，这叫做控件。如何在我们的工程中引入这些呢，下面来看。

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

  // 使用pluginAMap.plugin(['AMap.ToolBar'],function(){//引入map.addControl(new AMap.ToolBar())})

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

左下角就出现比例尺了。代码如下：

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

下面来看鹰眼控件。这个听起来高大上，实际就是缩略图。一般在右下角显示地图的全景。

代码如下：

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

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

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

// 使用pluginAMap.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())})

还有其他的一些控件，比如控制工具，效果：

代码：

        // 使用pluginAMap.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()) // 鼠标右键也可以实现})

注意，鹰眼控件把工具条给挡住了，实际貌似工具条在右上显示，这里后期可以修改完善一下。

WebGIS第五课：地图控件的添加相关推荐

webbrowser控件加载为空白_OpenLayers教程五：地图控件之坐标拾取控件和鹰眼控件...
一.坐标拾取控件很多时候我们想要实时获取鼠标光标指示处对应的坐标,就像高德地图的坐标拾取:控制台 | 高德开放平台 | 高德地图API OpenLayers提供的ol.control.MousePo ...
Android 第五课常用控件的使用方法（TextView、Button、EditView、 ImageView、 ProgressBar、 ProgressDialog等）
总结:见名知意 TextView: Button: EditView: ImageView: ProgressBar: ProgressDialog和AlertDialog有些类似,都可以再界面弹出对 ...
SAP UI5 应用开发教程之六十 - SAP UI5 地图控件的一些高级用法试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
如何添加地图控件到Windows Phone 8的页面中
原文如何添加地图控件到Windows Phone 8的页面中本主题介绍了各种方法来添加一个地图控件到Windows Phone 8的项目.该地图控件在Windows Phone的SDK 8.0的库 ...
H5新特性百度地图SDK--API引入、地图控件、地理编码与逆地理编码、地图标注、路径规划（基于2.0）
一.API基本使用 1.1 大致流程打开,百度地图官网登录或者注册一个百度账号,并完成相关验证登陆并申请成为开发者在百度地图开发平台的首页选择控制台,在控制台中创建应用创建好应用以后就能在控 ...
【ASP.NET】第八课——GridView 控件的编辑功能优化，GridView控件中嵌套DropDownList控件
知识点:掌握 GridView 的编辑.高亮显示的功能 .GridView控件中嵌套DropDownList控件获取数据源. [ASP.NET]第七课--数据绑定和 GridView 控件的使用重点 ...
超图js版 iclient 基本开发 - 加载基本图层（以天地图示例）和基本地图控件
以超图的在线示例来学习:运行之后如下: 原网址代码比较长一些:先把多的去掉:看一下基本的加载图层和地图控件的概念: <script type="text/javascript" ...
android地图 demo,Android地图控件之多地图展示
一.简介地图控件自v2.3.5版本起,支持多实例,即开发者可以在一个页面中建立多个地图对象,并且针对这些对象分别操作且不会产生相互干扰. 文件名:Demo04MultiMapView.cs 简介:介 ...
【DND图形库】五、按钮控件与音效
五.按钮控件与音效 (甲)按钮控件在DND.h里能看到有哪些控件,基本上都以静态工厂模式创建: ///GUI/// #include "DNDGUI.h" //GUI 控件基类 ...

WebGIS第五课：地图控件的添加

WebGIS第五课：地图控件的添加相关推荐

最新文章

热门文章