4、为地图增加浏览控制按钮——toolbar

最新推荐文章于 2023-01-11 14:44:45 发布
原创 最新推荐文章于 2023-01-11 14:44:45 发布 · 3.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#object #class #工具 #application #flex #function

本文介绍如何通过Flex和ESRI地图API为地图应用添加工具栏，实现地图的放大、缩小、平移等功能。通过注册图标资源和编写事件处理函数，轻松实现地图浏览交互。

 

为地图增加控制按钮ToolBar

1、  准备按钮图标文件并引入Flex

（1）在工程的Src文件夹下新建一个文件夹image，将工具图标文件复制进去！

  （2）在Flex中注册图标，并在ToggleButtonBar按钮中使用

<mx:Script>

       <![CDATA[

       //图标文件

       [Bindable]

       //放大

        [Embed(source="images/Zoomin.gif")]

        public var ZoomIn:Class;

        //缩小

        [Bindable]

        [Embed(source="images/Zoomout.gif")]

        public var Zoomout:Class;

        //移动

        [Bindable]

        [Embed(source="images/pan.gif")]

        public var pan:Class;

        //上一视图

        [Bindable]

        [Embed(source="images/lastview.gif")]

        public var lastview:Class;

        //下一视图

        [Bindable]

        [Embed(source="images/nextview.gif")]

        public var nextview:Class;

       ]]>

    </mx:Script>

（3）使用ToggleButtonBar：

  在map空间的代码下部加入ToggleButtonBar的引用代码：

注意：直接在Design里面绘制时，代码可能会出现错误，因为在map控件上绘制其他控件后，程序自动将其代码加入到<ESRI:map></ESRI:map>中间，而map空间不是容器当然不可以在里面加入其他类型的控件（ESRI公司的图层控件可以支持，以服务的形式）。

完成ToggleButtonBar绘制后的代码如下：

说明：ToggleButtonBar的数据源支持Array类型，可以在其他地方定义好Array然后引用进来，也可以直接定义。

代码如下：

<mx:ToggleButtonBar x="40" y="40" id="toolbar">

    <mx:dataProvider>

    <mx:Array>

    <mx:Object icon="{ZoomIn}"></mx:Object>

    <mx:Object icon="{Zoomout}"></mx:Object>

    <mx:Object icon="{pan}"></mx:Object>

    <mx:Object icon="{lastview}"></mx:Object>

    <mx:Object icon="{nextview}"></mx:Object>

    </mx:Array>

    </mx:dataProvider>

  </mx:ToggleButtonBar>

至此，将ToolBar的外观创建完毕，效果如下：

2、  为ToolBar设置功能事件

（1）设置Navigation（地图浏览）

     Navigation集成了常用的地图浏览功能，如：放大、缩小、平移、上一视图、下一视图等。故而对地图的操作使用他很方便，直接调用其事件即可。

引用Navigation的方法为：

<esri:Navigation map="{myMap}" id="toolnavigat">

    </esri:Navigation>

    <esri:Map id="myMap">

      ...

    </esri:Map>

其中map="{myMap}"即为Navigation操作配置地图对象，myMap为地图控件ID

(2）设置ToolBar的click单击事件。

    单击后需获取到用户单击的是那个按钮，故而要使用ItemClickEvent监听，使用它，要在脚本程序里边增加引用： import mx.events.ItemClickEvent;

   在<mx:ToggleButtonBar x="40" y="40" id="toolbar">中添加事件itemClick="Toolbar_Item_Click(event)”即当ToolBar中按钮单击时调用函数Toolbar_Item_Click（），其传入参数event存储被单击按钮的信息，该参数为固定格式，必须用event，否则出错！

（3）Toolbar_Item_Click（）脚本函数的编写

     在<mx:Script></mx:Script>中编写Toolbar_Item_Click（）函数如下：

        private function Toolbar_Item_Click(Event:ItemClickEvent):void

        {

          switch(Event.index)

          {

            case 0:

            {

            toolnavigat.activate(Navigation.ZOOM_IN);

            //设定当前工具为放大

            break;

            }

            case 1:

            {

            toolnavigat.activate(Navigation.ZOOM_OUT);

            //设定当前工具为缩小

            break;

            }

            case 2:

            {

            toolnavigat.activate(Navigation.PAN);

            //设定当前工具为移动

            break;

            }

            case 3:

            {

            toolnavigat.zoomToPrevExtent();

            //设定当前工具为移动

            break;

            }

            case 4:

            {

            toolnavigat.zoomToNextExtent()

            //设定当前工具为移动

            break;

            }

           }

可以看到使用Navigation后只需要简单的判断就可以完成地图的浏览功能！

3、  至此，完成地图的浏览功能。完成效果：

4、  程序全部代码为：

   <?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:esri="http://www.esri.com/2008/ags">

    <mx:Script>

        <![CDATA[

       //图标文件

       [Bindable]

       //放大

        [Embed(source="images/Zoomin.gif")]

        public var ZoomIn:Class;

        //缩小

        [Bindable]

        [Embed(source="images/Zoomout.gif")]

        public var Zoomout:Class;

        //移动

        [Bindable]

        [Embed(source="images/pan.gif")]

        public var pan:Class;

        //上一视图

        [Bindable]

        [Embed(source="images/lastview.gif")]

        public var lastview:Class;

        //下一视图

        [Bindable]

        [Embed(source="images/nextview.gif")]

        public var nextview:Class;

       

        //程序部分

        //引用部分

        import mx.events.ItemClickEvent;

        private function Toolbar_Item_Click(Event:ItemClickEvent):void

        {

          switch(Event.index)

          {

            case 0:

            {

            toolnavigat.activate(Navigation.ZOOM_IN);

            //设定当前工具为放大

            break;

            }

            case 1:

            {

            toolnavigat.activate(Navigation.ZOOM_OUT);

            //设定当前工具为缩小

            break;

            }

            case 2:

            {

            toolnavigat.activate(Navigation.PAN);

            //设定当前工具为移动

            break;

            }

            case 3:

            {

            toolnavigat.zoomToPrevExtent();

            //上一视图

            break;

            }

            case 4:

            {

            toolnavigat.zoomToNextExtent()

            //下一视图

            break;

            }

           }

        }

       ]]>

    </mx:Script>

     <esri:Navigation map="{myMap}" id="toolnavigat">

    </esri:Navigation>

    <esri:Map id="myMap">

    <esri:ArcGISDynamicMapServiceLayer url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer">

    </esri:ArcGISDynamicMapServiceLayer>

    </esri:Map>

    <mx:ToggleButtonBar x="40" y="40" id="toolbar" itemClick="Toolbar_Item_Click(event)">

    <mx:dataProvider>

    <mx:Array>

    <mx:Object icon="{ZoomIn}"></mx:Object>

    <mx:Object icon="{Zoomout}"></mx:Object>

    <mx:Object icon="{pan}"></mx:Object>

    <mx:Object icon="{lastview}"></mx:Object>

    <mx:Object icon="{nextview}"></mx:Object>

    </mx:Array>

    </mx:dataProvider>

  </mx:ToggleButtonBar>

</mx:Application>

 

 

【超图】SuperMap iClient3D for WebGL/WebGPU ——地形影像
冰美式当作酒
12-19 2507
作者：taco对于一个代码小白来讲，设置可能是刚接触开发的人（还没接触准备接触）的人来说。对于读代码或是在对产品的使用上会存在许许多多的疑惑。接下来的话准备开个新坑，帮大家了解超图官方示例中不同功能的数据是如何制作的。每一句代码都是什么意思。方便大家更好的入门。更好的开发。本系列博客从示例代码直接入手，关于环境配置，下载等内容。可以参考以前的博客——新产品使用指南中环境配置相关部分。
Web前端大作业——城旅游景点介绍(HTML+CSS+JavaScript) html旅游网站设计与实现
QQ_____365392777的博客
08-20 1225
🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面：计划采用最新的网页.
谷歌浏览器：embed引入PDF出现缩略图、工具栏
weixin_58681236的博客
01-11 1022
谷歌浏览器：embed引入PDF出现缩略图、工具栏
近期知识小结（三）
sone_yoonyul的博客
12-22 465
在写了相当一段时间的后端之后，主管决定磨练磨练我写前端的能力，故最近都会扑在js和vue上面，那么，就来梳理一下这些日子以来我遇到的前端的一些问题和解决的方法吧！ 1.如何在页面上嵌入一个部分显示pdf文档 本来想用pdf.js来实现的，但是偶然发现，HTML5本身就支持这个功能，只需要一条语句就能实现： div class="article"> iframe id="showP
pdf显示禁用工具栏 & iframe、object、embed引用区别
weixin_44867717的博客
11-26 6510
pdf显示禁用工具栏 & iframe、object、embed引用区别 国内主要视频网站的嵌入方式 iframe、object、embed引用有什么区别，要在父页里显示子页的内容，里面那种方法更好？ <iframe src= "test.html" width= "100%" height= "100% "> </iframe> <embed src= "test.html" width= "100% " height= "100% "> </em
浏览器中用embed标签打开pdf去除工具栏打印按钮
LuckyStrick的博客
10-23 7020
浏览器中用embed标签打开pdf去除工具栏打印按钮 碰到一个需求，客户想要预览pdf，用内嵌浏览器直接setUrl打开，但是有工具栏，客户不允许预览时可以打印pdf。所以网上找了很多去除工具栏的方法 找到一种有用的办法 在url后边加上&toolbar=0，就直接可以去掉。把pdf直接拖拽到本地浏览器测试可行，下图中工具栏直接可以去掉 但是cef在更新之后预览pdf的embed标签底层修改了，我用的3.2272版本的cef，pdf之前预览用的底层pdf.dll,工具栏如下图 这个时候在url后
[vue] 使用 embed 标签实现在线查看PDF
qq_14993591的博客
11-08 2582
配置 src - toolbar、navpanes、scrollbar 用于设置操作状态栏是否显示。设置 标签的 type=“application/pdf”
DapperMapPicSvr1.0：轻量级WebGIS地图发布系统
整个系统不依赖PostgreSQL/PostGIS、ArcGIS Server或其他重型GIS中间件，而是通过简单的DLL组件+静态资源组合的方式实现地图浏览、缩放、平移和地名检索等基本GIS功能。适用于不具备专业GIS知识背景的中小企业或个人...
SuperMap iClient 6R for Silverlight 开发入门与地图操作
作为一款基于 Silverlight 插件技术的富互联网应用（RIA）前端框架，它充分利用了 Silverlight 强大的图形渲染能力和事件处理机制，实现了流畅的地图浏览体验。其主要特点包括：支持矢量瓦片、动态图层、热力图等...
开发备必——WEB前端开发规范文档
08-04
4. Menu：Menu 区域包含一般的链接和菜单，也可以命名为“subNav”、“links”、“sidebar-main”。 5. Main：Main 是网站的主要区域，如果是博客的话它将包含的日志，也可以命名为“content”、“main-content”或...
embed embed
04-25
tags embed 页面标签 tags embed 页面标签
安卓爬坑（二）——Toolbar使用事项
06-29 180
转自https://www.cnblogs.com/hh9601/p/6404728.html 异常信息：1Caused by: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. ...
ArcGIS RIA开发实践【Flex篇】
melodyf的专栏
09-19 9434
ArcGIS RIA开发实践【Flex篇】I、 ArcGIS Flex API 基础一 Flex的历史和现状<br />Flex的前身是Flash，Flash是极为流行的互联网矢量动画解决方案，目前据统计97%的浏览器都安装有Flash Player插件用以播放swf动画，其中未安装的3%还有很多是因为某些场合的安全限制导致的，可以说Flash是极为普及的RIA平台。 <br />但是由于Flash是一个动画制作软件，其中有很多比如时间轴、影片剪辑等程序员不容易理解的概念，因此Macromedia公司推出了
flex中使用Embed方式嵌入资源
飞雪的博客
05-29 867
在做公司的播放器时候，开始为了减少swf的大小，并没有把资源在编译时候打包到swf中，而是采用运行时候通过外部加载方式。但是，这种方式虽然可以减少swf的大小，但是，在实际运行时候，由于用户大多数使用IE6（早该淘汰了），在并发请求的数目是有限制的（2个），所以，这样往往会资源加载失败的情况。因此，打算采用Embed方式把资源打包到swf中。不过，在这个播放器中，有不少的资源是，需要根据不同状态进
AS 标签 [Embed]
shangguanyingqi的专栏
11-25 986
[Embed]元数据标签嵌入它们。元数据是指包含到ActionScript文件中但并不是ActionScript的语句，而且，它们会在编译过程中通知编译器做某些事情。对于[Embed]标签，它会告诉编译器包含一个特定的外部内容到最终的SWF文件中。这个外部内容可以是一个位图或一外部的swf文件。你可以通过source属性来告诉编译器哪些内容是需要嵌入的，for example：[Embed(s
vlc隐藏toolbar
dingdongkk~博客
08-14 3363
最近遇到一个问题： vlc直播时，鼠标移到vlc的视频显示框内，会显示toolbar，以及进度条等。点击进度条某一位置，则会出现花屏的问题。所以在考虑用隐藏toolbar的办法来解决此问题。具体方法如下添加一行即可：<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://do
IE 11+中打印直接PDF，chrome打印pdf ,隐藏头部工具栏,hide toolbar
weixin_30758821的博客
07-19 2758
注意: 得引入Jquery.js包，客户端得安装Acrobat Reader DC. IE 中用<embed id ="test1" src="1.pdf" type="application/pdf" width="600" heght="600" > js print code: let x = document.getElementById('test1'); x.p...
Vue 使用 embed 标签实现在线查看PDF
BradyCC的博客
05-29 3532
项目需求：在线查看PDF文档，同时还需要记录查看时长。 如果只是单纯查看，可以使用 window.location.href 方法更新浏览器地址栏即可查看。但这样 Vue 就无法实现监听了。之前在项目中使用过 vue-pdf 组件，用于查看PDF文档，但因此组件前端无法解决跨域问题，此方法又被舍弃了。 最终选择了使用 标签的形式，可以实现与第一种方法相同的效果，又能满足项目需求，在组件内实现监听。 具体使用方法如下 <!-- PDF在线查看弹窗 --> <CommonDialog.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值