gh-map-app v1.0.6

README

npm script

host设置

10.40.0.79 npm.ghsoft.net

安装依赖

yarn

开发运行

yarn start

发布

yarn build

单元测试

yarn test:unit

格式规整

yarn lint

vue-cli 最好是3.0版本，如果是2.x的请先升级cli

See Configuration Reference.

项目原型 http://120.25.203.6:20119/onemap/

项目结构

-- 由mddir生成

doc                   //文档-changelog,api文档
public                
|-- app
    |-- app.json           //公共配置
    |-- component          //所有组件默认配置,readonly
    |   |-- layer-tree.json
    |   |-- main-map.json
    |-- home                //home路由页配置
        |-- home.json       //home总配置
        |-- layer-tree.json //由app/component/layer-tree.json修改的来  最终layer-tree配置 = home/layer-tree.json || app/component/layer-tree.json
        |-- main-map.json
src 
|-- app               //app模板，引入compnent构建完整交互的app
|   |-- views
|       |-- home      //具体路由实现
|-- component         //功能组件
    |-- index.js
    |-- base           //基础组件
    |   |-- layer-switcher //底图图层切换
    |   |-- layer-plot //标绘
    |   |-- layer-tree //组件1
    |   |-- main-map   
    |-- business       //业务组件
        |-- layer-search   //简易查询
        |-- analysis   //组件3

全局变量

window.ghmapapp[this.$route.name]={map:olmap}//详见 '@/app/utils/global'

组件内全局变量

data:{ _: { config: undefined }}  //内部全局变量，使用this.$data._ 访问，不会导致组件刷新

eventBus

//@/app/utils/vueBus.js
export const $on
export const $emit
export const $off
export const $once
//%route% 表示路由差异，执行时会被具体路由name 替代
//eg:vm.$route.name='home',wakeup_component = 'home_wakeup_component' 
export const wakeup_component = '%route%_wakeup_component'  

//-----xxx.js (使用)-------
const func=() => console.log('dsadsada')
vueBus.$on(vueBus.wakeup_component,func )
vueBus.$once(vueBus.wakeup_component, func)
vueBus.$emit(vueBus.wakeup_component)
vueBus.$off(vueBus.wakeup_component,func)

新增组件步骤

1.注册组件

src 
|-- component
    |-- index.js
    |-- index-lib.js
    |-- base  
    |   |-- layer-switcher
    |-- business    
        |-- analysis
//1.根据组件用途在 base/bussinee 创建文件夹
//2.分别import 到index.js ,index-lib.js  详情看具体代码

2.配置json --json倾向界面化，少量便利手动修改

2.1 public/app/app.json --公共json

"component": [//可乱序，仅供route代码调用,提供所有组件默认配置，json统一放于public/app/component
    {
        "style": {"right":10,"top":20,"zIndex":10,"height":100,"width":100},//提供初始化位置，大小，默认px单位
        "config": "./app/component/layer_tree.json",//默认json
        "title": "图层管理",//显示名称
        "name": "layer-tree",//注册组件名
    }
]

2.2 public/app/home/home.json --具体route

"component": [//影响启动顺序，div堆叠顺序
    {
        "style": {"right":10,"top":20,"zIndex":10,"height":100,"width":100},//提供初始化位置，大小
        "config": "./app/home/layer-tree.json",//不使用默认json，可以在具体路由下加json
        "title": "图层管理",
        "name": "layer-tree",
        "render1st":false  //是否被动启动，默认值true
    }
    //简化写法     -- 完全继承默认设置
    "layer-tree"
]

图层配置

1. public/app/app.json->layer --公共json 整个app涉及到的图层,

{// -- ? 为可选属性
    "name": "规划条件",
    "type": "tile-arcgis", -- tile-arcgis,tile-supermap,image-supermap,image-arcgis  默认无
    "useproxy"?:false, -- true,false 默认false
    "opacty"?:1, -- 0~1, 默认1,
    "visible"?:false, -- true,false, 默认false
    "crossOrigin"?:"", --"",null ,默认 ""    --canvas 跨域问题
    "url": "arcServer71/arcgis/rest/services/三水服务/规划条件/MapServer" --arcServer71 为app.json->hosts中的一个服务器,也可具体访问ip地址
}

2. public/app/home/home.json->layer --具体route 图层配置，

{
    "name": "规划条件",
    "type"?: "tile-arcgis", -- tile-arcgis,tile-supermap,image-supermap,image-arcgis  默认无
    "useproxy"?:false, -- true,false 默认false
    "opacty"?:1, -- 0~1, 默认1,
    "visible"?:false, -- true,false, 默认false
    "url"?: "arcServer71/arcgis/rest/services/三水服务/规划条件/MapServer" --arcServer71 为app.json->hosts中的一个服务器
}
//---简化为--- 
"规划条件"

配置具体层级结构后如下，构成layer-tree节点

"layer": [ //引用 @app/app.json->layer
    {
        "name": "业务图层",      --文件夹节点
        "layer": [              
            "规划条件",          --具体图层
            "建设用地规划许可",
            "规划设计方案",
            "建设工程规划许可",
            "规划核实",
            "用地",
            "供应",
            "土储_终",
            "储备发证",
            "建设用地供后数据",
            "土地储备",
            "拟收储业务",
            "用地批文",
            "批次批文",
            {
                "name": "入库业务",
                "visible": true,  --特殊配置
            },
            "出库业务",
            "临时利用地块业务"
        ]
    },
    {
        "name": "土地利用现状",
        "layer": [
            "佛山市土地利用现状2017",
            "佛山市土地利用现状2016"
        ]
    },
    "佛山市土地利用现状2017",      --单图层
]