Flex Viewer 开发教程（1）Flex Viewer配置文件

最新推荐文章于 2022-10-26 18:35:00 发布
最新推荐文章于 2022-10-26 18:35:00 发布
阅读量5.4k 收藏 7
点赞数
分类专栏： Flex Viewer ArcGIS Flex API 文章标签： flex url bookmarks layer 框架 containers
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GISpace/article/details/6415798
版权

Flex Viewer的设计原则是SIMPLICITY（简单）。因为简单原则，Flex Viewer易于部署、配置和扩展。为了达到“简单”这个目的，Flex Viewer在设计和实现上未引入第三方框架。但是从其框架结构上，我们能捕捉到一些Flex框架中最佳实践的影子，比如事件机制就与PureMVC中的Notification机制类似。

其实，Flex Viewer本身就可以被认为是一个框架。在这个框架基础上，可以通过扩展快速实现业务系统原型。本文档将详细介绍如何在“简单”原则下实现自定义Widget，以及Widget如何与其它模块交互。

说明

本文档使用的代码位于widgets.FlexViewerInAction目录下。

 

Flex Viewer通过配置文件配置系统数据和功能，配置文件内容如下：

<?xml version="1.0" ?>

<configuration>

<title>ArcGIS Viewer for Flex</title>①

<subtitle>a configurable web mapping application</subtitle>②

<logo>assets/images/logo.png</logo>③

<style>④

   <colors>0xFFFFFF,0x333333,0x101010,0x000000,0xFFD700</colors>

   <alpha>0.8</alpha>

</style>

   <bing key="Al0VE_jsmagxk4LFghXGlK5JSHfC0tk-eHRubZv_eMYm6wzgQaStYks8g-wWcgk3"/>

    <!-- UI elements -->

   <widget left="10" top="50" config="widgets/Navigation/NavigationWidget.xml"

       url="widgets/Navigation/NavigationWidget.swf"/>⑤

   <widget right="-2" bottom="-2" config="widgets/OverviewMap/OverviewMapWidget.xml"

    url="widgets/OverviewMap/OverviewMapWidget.swf"/>⑥

   <widget right="20" top="55" config="widgets/MapSwitcher/MapSwitcherWidget.xml"

    url="widgets/MapSwitcher/MapSwitcherWidget.swf"/>⑦

    <widget left="0" top="0" config="widgets/HeaderController/HeaderControllerWidget.xml"

    url="widgets/HeaderController/HeaderControllerWidget.swf"/>⑧

 

   <map initialextent="-14083000 3139000 -10879000 5458000" top="40" wraparound180="true">⑨

   <basemaps>

           <layer label="Streets" type="tiled" visible="true" alpha="1" url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>

           <layer label="Aerial" type="tiled" visible="false" alpha="1" url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"/>

           <layer label="Topo" type="tiled" visible="false" alpha="1" url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>

       </basemaps>

   <operationallayers>

           <layer label="Boundaries and Places" type="tiled" visible="false" url="http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places_Alternate/MapServer"/>

           <layer label="Fires" type="feature" visible="false" alpha="1" info="widgets/InfoTemplates/SimpleInfoWinWidget.swf"

           infoconfig="widgets/InfoTemplates/IWT_Fires.xml"    url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/0"/>

   </operationallayers>

</map>

    <!-- widgets organized into widget containers that manage close/open etc -->

    <!-- supported layout property options: horizontal(default)|float|vertical|fix-->

<widgetcontainer layout="horizontal">⑩

       <widget label="Bookmarks" left="430" top="90" icon="assets/images/i_bookmark.png"

       config="widgets/Bookmark/BookmarkWidget.xml"

       url="widgets/Bookmark/BookmarkWidget.swf"/>

       <widget label="Find an address" left="100" top="90" preload="open" icon="assets/images/i_target.png"

       config="widgets/Locate/LocateWidget_Bing.xml"

       url="widgets/Locate/LocateWidget.swf"/>

       <widget label="Louisville Police" left="590" top="280" icon="assets/images/i_police.png"          config="widgets/Query/QueryWidget_Louisville_PoliceStations.xml"

        url="widgets/Query/QueryWidget.swf"/>

       <widget label="Search" left="80" top="280" icon="assets/images/i_search.png"

       config="widgets/Search/SearchWidget_Louisville.xml"

       url="widgets/Search/SearchWidget.swf"/>

       <widget label="Earthquakes (GeoRSS)" left="410" top="280" icon="assets/images/i_rss.png"

       config="widgets/GeoRSS/GeoRSSWidget.xml"

       url="widgets/GeoRSS/GeoRSSWidget.swf"/>

       <widget label="Draw and Measure" left="60" top="400" icon="assets/images/i_draw2.png"

       config="widgets/Draw/DrawWidget.xml"

       url="widgets/Draw/DrawWidget.swf"/>

       <widget label="Print" left="390" top="400" icon="assets/images/i_print.png"

       config="widgets/Print/PrintWidget.xml"

       url="widgets/Print/PrintWidget.swf"/>

</widgetcontainer>

</configuration>

①    title：Flex Viewer自带Banner实现的标题；

②    subtitle：Flex Viewer自带Banner实现的副标题；

③    logo：Flex Viewer自带Banner实现的Logo图标；

④    style：用来设置全局的组件样式，具体详见UIManager代码；

⑤⑥⑦⑧ UI Elements：指Control Widget，比如HeaderControllerWidget、NavigationWidget等这些提供系统级别功能的Widget；

⑨ map：Flex Viewer用来设置地图属性，包括底图、业务图层；

⑩ widgetcontainer：Business Widget的容器，用来管理Business Widget。Business Widget指提供业务功能的Widget。

上述配置文件并未使用到所有可用的属性，比如在style中设置font属性，map中设置fullextent等，此处不一一列举，详见ConfigManager代码。

 


需要说明的是，基于Flex Viewer开发业务系统，一般通过实现自定义的Business Widget来实现具体的业务功能，通过修改或者自定义Control Widget实现符合需求的系统级别功能组件。所以，配置文件中的前三项并不是必须的，通常我们的业务系统需要更具特色的Banner实现。Flex Viewer各部分与配置文件的对应关系见下图：

 

 

 

gispace
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
FlexViewer开发教程
01-08
FlexViewer开发教程，挺不错的一个FlexViewer文档,帮助快速了解Flex框架。
flex viewer
07-05
flex viewer
flexViewer 3.1 src
03-15
flexviewer的source code，2012年12月12日更新。
flexviewer 2.2
01-26
arcgis flex flexviewer ArcGIS Viewer for Flex 2.2 架构非常好，便于二次开发。
Flex Viewer 开发教程
05-12
1 Flex Viewer配置文件 2 Widget配置文件 3 Widget与WidgetTemplate 4 Widget与Map交互 4.1 交互方式1：map实例 4.2 交互方式2：BaseWidget封装的方法 5 Widget与Widget交互 6 Widget与共享数据 7 Widget与服务器交互
flex布局碰到iview的table组件后出现的诡异动效
qq_36877078的博客
10-26 362
记录view design vue库的table组件在使用过程中遇到的诡异问题
深入浅出Flex Viewer (一)——概述
weixin_30492601的博客
12-05 163
一、Flex Viewer简介 Flex Viewer是ESRI公司推出的可以高效开发基于WEB的地理信息应用系统的一种完全免费的应用程序框架。业务人员使用该框架可以无需任何额外的编程就能够通过简单配置的方法快速搭建起一个基于ArcGIS Server的、以地图为中心的富客户端（RIA）应用的原型。该框架中还自带了大量的能够满足各种地图应用需要的Widget，如Identify、...
Flex 框架PureMVC 源码解析之--IView篇
如戏
12-29 136
首先了解一下几个容易混淆的概念：     消息（Notification）有两种：一种是当接收到消息后直接执行相应的函数，通过绑定消息名称和消息处理类实现；           如果你对同一个消息名称绑定多个处理类，以最后绑定的为准。      第二中消息不需要绑定处理函数，而是指明当消息发生时通知观察者，我只知道我可能对某些 消息感兴趣，至于我怎么   处理你别管（比较霸道）。这两种消...
flex IViewCursor 的应用
只有准备爆发，才会甘于沉默
03-08 102
 IViewCursor 的应用 demo 效果图：可以上下翻不会，当索引最大的时候，自动变成最小索引 (可用于分页，或者替换spark Spinner控件，自定义)   代码如下：   &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;s:Application xmlns:fx="http://ns.adobe.com/mxm...
FlexViewer框架解读(转)
weixin_30832405的博客
12-04 83
Flex Viewer是ESRI公司推出的可以高效开发基于WEB的地理信息应用系统的一种基本架构。它帮助你屏蔽了底层繁琐的操作，比如通信机制。此框架和服务器端的通信是基于Web Service的。在服务器端，发布出你的服务，比如地图服务，前端只需简单的调用操作。开发人员只需关注你的功能模块设计。 1、Widget开发 在Flex Viewer中，采用Widget的方式进行模块设计。每一个模...
flexviewer简单登陆（新版本能用）
10-26
flexviewer简单登陆（新版本能用）
Flex Viewer解析
05-06
1.Flex Viewer简介 2.Flex Viewer源码包结构 3.Flex Viewer架构解析 3.1Flex Viewer主席团 3.2Flex Viewer松耦合的关键 3.3初始化那些事儿 3.4Widget设计及实现 4. 自定义Widget 5. Widget之间通信 5.1直接通信 5.2间接通信 6. 让Flex Viewer为我所用
深入浅出Flex_Viewer.pdf
11-06
深入浅出Flex_Viewer.pdf
arcgis_api_for_flex_3_5.zip_arcgis flex api 3.5_flex_flex viewer
09-22
ArcGIS Viewer for Flex 3.5源码
Flex VIewer
05-20
ESRI GIS FLEX VIEWER
动态标绘演示系统1.4.3（for ArcGIS Flex）
热门推荐
11-03 1万+
动态标绘演示系统1.4.3，基于动态标绘API 1.4.3。实现功能包括：1、标绘符号绘制（PlotDrawTool）；2、标绘符号编辑（PlotEditTool）；3、标绘符号样式编辑（参见演示系统源码）；4、标绘符号文本标注（1.4新增PlotGraphic，支持文本标注）；5、标绘符号保存与打开（通过序列化接口PlotEncoder、反序列化接口PlotDecoder）；6、渐变fuh新增标
ArcGIS Flex API扩展之几何图形
05-23 8966
ArcGIS Flex API中提供了点、线、面等几种常用的几何图形，当需要更多的几何图形时，需要扩展ArcGIS Flex API中的Geometry。大概思路是面状几何图形扩展Polygon，线状几何图形扩展Polyline。其中，Polygon有一个ring的数组组成，而Polyline由一个path组成。不管是ring，还是path，实质上都只是一个MapPoint的数组。
Flex Viewer 开发教程 完整版 （pdf + source code）
05-15 8455
http://download.csdn.net/source/3272194
基于ArcGIS Flex API开发Mobile应用
06-10 6872
 Adobe已经发布Flash Builder 4.5，其中最引人注目的新特性莫过于对Mobile应用的支持了。基于Adobe的AIR技术和Flex SDK，可以开发跨移动平台的应用程序。试想，如果一套系统可以同时在Android、IOS和BlackBerry上运行，那是多么让人兴奋的一件事啊。现在，Adobe已经实现了这一目标。下面我们基于ArcGIS Flex API写一个简单的Mobile示
react-pdf-viewer的中文文档
最新发布
05-26
react-pdf-viewer是一个基于React的PDF阅读器组件库，由于其开源且易于使用的特点，被广泛应用于Web开发中。 以下是react-pdf-viewer的中文文档： ## 安装 使用npm安装： ``` npm install @react-pdf-viewer/core --save ``` 或者使用yarn安装： ``` yarn add @react-pdf-viewer/core ``` ## 使用 ```javascript import React from 'react'; import { Viewer } from '@react-pdf-viewer/core'; import '@react-pdf-viewer/core/lib/styles/index.css'; const App = () => ( <Viewer fileUrl="https://arxiv.org/pdf/quant-ph/0410100.pdf" /> ); export default App; ``` ## API ### Viewer PDF阅读器组件，提供一系列的props来控制阅读器的行为。 #### 属性 * `fileUrl: string`：必须的属性。PDF文件的URL。 * `defaultScale?: number | string`：PDF文件的默认缩放比例。可以是数字，也可以是字符串，例如“auto”、“page-width”、“page-fit”、“50%”等。默认值为“auto”。 * `initialPage?: number`：PDF文件的初始页数。默认值为1。 * `onDocumentLoad?(pdfDocument: PdfDocument) => void`：当PDF文件加载完成时调用的回调函数。 * `onPageChange?(page: number) => void`：当页码发生改变时调用的回调函数。 * `renderError?(error: Error) => React.ReactElement`：当加载PDF文件出错时的自定义渲染函数。 * `renderLoader?() => React.ReactElement`：当加载PDF文件时的自定义渲染函数。 * `theme?: ThemeContext`：阅读器的主题。默认为`defaultTheme`。 ### defaultLayoutPlugin 默认的布局插件，提供一系列的props来控制布局。 #### 属性 * `defaultScale?: number | string`：PDF文件的默认缩放比例。可以是数字，也可以是字符串，例如“auto”、“page-width”、“page-fit”、“50%”等。默认值为“auto”。 * `sidebarTabs?: Array<SidebarTab>`：侧边栏选项卡列表。默认为`[bookmarksTab, attachmentsTab]`。 * `sidebarWidth?: number`：侧边栏的宽度。默认为`280`。 * `thumbnailContainer?: (props: ThumbnailContainerProps) => React.ReactElement`：自定义缩略图容器组件。 * `topToolbar?: (props: ToolbarProps) => React.ReactElement`：自定义顶部工具栏组件。 * `zoom?(scale: number) => void`：缩放PDF文件的函数。当需要在自定义组件中调用缩放功能时，需要将此函数作为props传递给自定义组件。 ### defaultToolbarPlugin 默认的工具栏插件，提供一系列的props来控制工具栏。 #### 属性 * `numberOfPages?: number`：PDF文件的总页数。当PDF文件加载完成后，将自动更新此属性。 * `page?: number`：PDF文件的当前页码。当页码发生改变时，将自动更新此属性。 * `zoom?(scale: number) => void`：缩放PDF文件的函数。当需要在自定义组件中调用缩放功能时，需要将此函数作为props传递给自定义组件。 ### defaultTheme 默认的主题。 #### 属性 * `background?: string`：阅读器的背景色。默认为`#fff`。 * `color?: string`：阅读器的前景色。默认为`#000`。 * `primaryColor?: string`：阅读器的主色调。默认为`#4caf50`。 * `secondaryColor?: string`：阅读器的次色调。默认为`#2196f3`。 ## 示例 以下是一个包含自定义缩略图容器和工具栏的示例： ```javascript import React, { useState } from 'react'; import { Viewer, defaultLayoutPlugin, defaultToolbarPlugin, ThumbnailList, Toolbar } from '@react-pdf-viewer/core'; import '@react-pdf-viewer/core/lib/styles/index.css'; const App = () => { const [numPages, setNumPages] = useState(0); const [currentPage, setCurrentPage] = useState(0); const handleDocumentLoadSuccess = ({ numPages }) => { setNumPages(numPages); }; const handlePageChange = (page) => { setCurrentPage(page); }; const handleZoom = (scale) => { console.log(`Zoom to ${scale}`); }; const thumbnailContainer = (props) => ( <div style={{ padding: '16px 0' }}> <ThumbnailList {...props} /> </div> ); const topToolbar = (props) => ( <div style={{ padding: '16px 0' }}> <Toolbar {...props} pageIndex={currentPage} numberOfPages={numPages} zoom={handleZoom} /> </div> ); return ( <div style={{ display: 'flex', flexDirection: 'row', height: '100vh' }}> <Viewer fileUrl="https://arxiv.org/pdf/quant-ph/0410100.pdf" plugins={[ defaultLayoutPlugin({ thumbnailContainer, }), defaultToolbarPlugin({ topToolbar, }), ]} onDocumentLoadSuccess={handleDocumentLoadSuccess} onPageChange={handlePageChange} /> </div> ); }; export default App; ``` ## 参考 * [react-pdf-viewer官方文档](https://react-pdf-viewer.dev/)

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值