CMV - Configurable Map View

准备

开发环境：

• 安装Nodejs

• 用Node的包管理工具npm全局安装grunt-cli和jshint

npm install -g grunt-cli
npm install -g jshint

获取cmv-app源码：

git clone https://github.com/cmv/cmv-app.git

进入cmv-app目录下，安装node依赖(如果还没安装Nodejs的话，需安装Nodejs)：

npm install

运行cmv项目

grunt

配置自己的CMV应用

主要的配置文件为viewer\js\config\viewer.js，CMV再开发过程主要的工作也是围绕这个文件进行。

在viewer.js中，需要配置的属性主要有mapOptions、panes、operationalLayers、widgets五个。

mapOptions，可以配置底图、可视界面的中心和缩放比例等。

        mapOptions: {
            // basemap: 'streets',
            center: [110.087, 19.947],
            zoom: 13,
            sliderStyle: 'small'
        },

panes，可以配置额外的展开面板(上下左右)。

        panes: {
            left: {
                splitter: false
            },
            bottom: {
                id: 'sidebarBottom',
                placeAt: 'outer',
                splitter: true,
                collapsible: true,
                region: 'bottom',
                style: 'height:200px;',
                content: '<div id="attributesContainer"></div>'
            }
        },
        collapseButtonsPane: 'center', //center or outer

operationalLayers，配置图层数据。

        operationalLayers: [{
            type: 'dynamic',
            url: 'https://localhost:6443/arcgis/rest/services/******/MapServer',
            title: '*****',
            options: {
                id: 'lc-data',
                opacity: 1.0,
                visible: true
            },
            legendLayerInfos: {
                exclude: true
            },
            layerControlLayerInfos: {
                // swipe: true,
                // metadataUrl: true,
                expanded: true,
                subLayerMenu: [{
                    label: '打开属性表',
                    topic: 'openTable',
                    iconClass: 'fa fa-table fa-fw'
                }]
            }
        }, {
            type: 'image',
            url: 'https://localhost:6443/arcgis/rest/services/image/*****/ImageServer',
            title: '高清影像',
            options: {
                id: 'lc-image',
                opacity: 1.0,
                visible: true
            }
        }],

widgets，配置控件；可以在这里引入一些现有的好用的控件(如，identify、scalebar、overviewMap、layerControl、draw、measure等)和自定义控件。

自定义控件

创建自定义控件需要的步骤

1. 在"viewer/js/gis/dijit/"目录下创建处理控件主逻辑的js文件"myWidget.js"；
2. 在"viewer/js/gis/dijit/"目录下创建一与控件同名的文件夹"myWidget"，用于存储控件的模板(html、css、image)信息；
3. 创建"viewer/js/gis/dijit/myWidget/templates/MyWidget.html"，为控件的界面设计；
4. 创建"viewer/js/gis/dijit/myWidget/css/MyWidget.css"，为控件的样式设计；
5. 创建"viewer/js/gis/dijit/myWidget/image/MyWidget.png"，为控件中使用的图片；
6. 如果控件需要为”viewer/js/config/viewer.js“提供特定的配置，可以在目录"viewer/js/config"下创建名为"myWidget.js"的配置文件。

关于创建自定义控件

​ 所有的控件都在"viewer/js/config/viewer.js"中配置。

参考原有控件代码 - Find("查询"功能的参考)

构成Find控件的全部文件如下：

viewer\js\gis\dijit\Find.js

viewer\js\gis\dijit\Find 
viewer\js\gis\dijit\Find\css
viewer\js\gis\dijit\Find\css\Find.css
viewer\js\gis\dijit\Find\nls
viewer\js\gis\dijit\Find\nls\resource.js
viewer\js\gis\dijit\Find\templates
viewer\js\gis\dijit\Find\templates\Find.html

viewer\js\config\find.js

主要文件为：Find.css、resource.js、Find.html、find.js；resource.js为一国际化的配置文件，nls文件夹中可以配置多种国家语言的映射关系，切换界面的语言时只需在locale控件中选择对应的国家就可以完成语言的切换；find.js为配置文件，在这可以配置查询语句。

• Find.js中的逻辑

// 类似于构造函数,控件的初始化函数。
postCreate()

// 为FindTask(为ESRI提供的查询接口)构造查询参数。主要的参数为图层id、要查询的属性、用户查询文本等。
getFindParams()

// 获取一个含query、searchText两key的json对象，其中query为find.js配置文件中的查询语句，searchText为用户在文本框中输入的查询文本(条件)。
getQueryInput()

小贴士

• 获取dijit.form.FilteringSelect控件的值

  dijit.byId('yourId').get('value');
  

• 获取dijit.form.FilteringSelect控件中显示的值

  dijit.byId('yourId').get('displayedValue');
  

• any else...