【SDK】【修正】【补充代码规范以及代码检查】

Author: 潘卓然Y7000P

.eslintignore

@@ -0,0 +1,6 @@
+./src/service/
+./src/config/
+./src/leaflet/extend/
+./src/openlayers/extend/
+./src/cesiumjs/ui/
+./website

.eslintrc.json

@@ -0,0 +1,83 @@
+// Use this file as a starting point for your project's .eslintrc.
+// Copy this file, and add rule overrides as needed.
+//
+// Window 安装方法 eslit-aribnb安装地址https://www.npmjs.com/package/eslint-config-airbnb
+//
+// Mac 安装方法 转载地址 https://blog.csdn.net/m0_37068028/article/details/78548148
+// (
+//   export PKG=eslint-config-airbnb;
+//   npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
+// )
+// eslint + airbnb + prettier 维护代码风格
+// npm i eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier babel-eslint babel-plugin-import  --save-dev
+// 'extends': ['airbnb', 'plugin:prettier/recommended'],
+
+{
+    "extends": ["airbnb", "plugin:prettier/recommended"],
+    // 默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。如果你想要你所有项目都遵循一个特定的约定时，这将会很有用，
+    // 但有时候会导致意想不到的结果。为了将 ESLint 限制到一个特定的项目，在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件里的
+    // eslintConfig 字段下设置 "root": true。ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
+    "root": true,
+    // 脚本在执行期间访问的额外的全局变量
+    // 当访问未定义的变量时，no-undef 规则将发出警告。如果你想在一个文件里使用全局变量，推荐你定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。
+    "globals": {
+        "window": true,
+        "document": true,
+        "$": true,
+
+        // 可从外部导入
+        "Cesium": "readonly"
+    },
+    // 设置插件
+    // "plugins": [
+    //     'html'
+    // ],
+
+    // 设置解析器选项（必须设置这个属性）
+    "parserOptions": {
+        "ecmaVersion": 7,
+        "sourceType": "module",
+        "parser": "babel-eslint", //配置解析es6
+        "ecmaFeatures": {
+            "jsx": true
+            // "arrowFunctions": true,
+            // "experimentalObjectRestSpread": true,
+            // "classes": true,
+            // "modules": true,
+            // "defaultParams": true
+        }
+    },
+    // 启用的规则及各自的错误级别
+    "rules": {
+        // 禁止用console
+        "no-console": 1,
+        // 禁止用分号
+        // "semi": [2, "never"],
+        // "prettier/prettier": ["error", {}, { "usePrettierrc": true , "singleQuote": true, "parser": "flow" } ],
+        // 在同一个作用域中禁止多次重复定义
+        "no-redeclare": 1,
+
+        // 暂时去掉私有变量下划线的问题
+        "no-underscore-dangle": 0,
+
+        // 针对 MapGIS 67 的要素修改规则 将参数的修改放开 先不搞 工作量实在太大了
+        // 百度echarts 关键字 mapModel seriesModel
+        "no-param-reassign": ["error", {
+            "props": true,
+            "ignorePropertyModificationsForRegex": ["^mapModel", "^seriesModel"]
+        }],
+        // 针对百度echarts原型链的处理
+        "no-unused-vars": ["error", {
+            "varsIgnorePattern": "[iI]gnored",
+            "argsIgnorePattern": "^_"
+        }]
+        // 百度mapv源代码需要设置原型链条件，看情况放开
+        // "no-proto" : true
+    },
+    // 指定你想启用的环境
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true
+    }
+}

.prettierrc.js

@@ -0,0 +1,47 @@
+// 执行下列两个命令，安装 eslint 和 prettier 工具
+// npm add --dev prettier
+// npm i -D eslint-plugin-prettier
+
+module.exports = {
+    // 超过最大值换行
+    printWidth: 150,
+
+    // 缩进为4个空格
+    tabWidth: 4,
+
+    // 不使用缩进符，而使用空格
+    useTabs: false,
+
+    // 是否在语句末尾加分号
+    semi: true,
+
+    // 单引号
+    singleQuote: true,
+
+    // 数组 对象尾随不需要逗号
+    trailingComma: 'none',
+
+    // 对象空格 { foo: bar }, false=> {foo:bar}
+    bracketSpacing: true,
+
+    // jsx闭标签是否另起一行 <Test></Test>
+    jsxBracketSameLine: true,
+
+    // 箭头函数，只有一个参数的时候，也需要括号
+    arrowParens: 'always',
+
+    // 不需要写文件开头的 @prettier
+    requirePragma: false,
+
+    // 不需要自动在文件开头插入 @prettier
+    insertPragma: false,
+
+    // 使用默认的折行标准
+    proseWrap: 'preserve',
+
+    // 根据显示样式决定 html 要不要折行
+    htmlWhitespaceSensitivity: 'css',
+
+    // 换行符使用 lf
+    endOfLine: 'lf'
+};

README.md

@@ -6,7 +6,7 @@
 [npm-img]: https://img.shields.io/badge/npm-10.5.0-brightgreen
 [npm-url]: https://www.npmjs.com/package/@mapgis/webclient
 
-MapGIS Client for JavaScript：是增强的MapGIS Web开发平台，集成Openlayers、Leaflet、MapBox等框架ECharts、MapV、D3等可视化库，在传统WebGIS开发基础之上，增强大数据、实时流数据的高效可视化表达和分析，为用户带来全新开发体验。
+MapGIS Client for JavaScript：是增强的MapGIS Web开发平台，集成Openlayers、Leaflet、MapBox、Cesium,等框架ECharts、MapV、D3等可视化库，在传统WebGIS开发基础之上，增强大数据、实时流数据的高效可视化表达和分析，为用户带来全新开发体验。
 
 <img alt="MapGIS" src="website/public/static/assets/logo/framework.png">
 
@@ -18,6 +18,7 @@ MapGIS Client for JavaScript：是增强的MapGIS Web开发平台，集成Openla
   - [特性](#特性)
   - [示例](#示例)
 - [深入了解](#深入了解)
+  - [代码结构](#代码结构) 
   - [编译](#编译)
   - [问题](#问题)
   - [依赖](#依赖)
@@ -30,6 +31,8 @@ MapGIS Client for JavaScript：是增强的MapGIS Web开发平台，集成Openla
 ### 司马云
 [MapGIS Client for Javascript](http://develop.smaryun.com:8899/)
 
+> 本脚本所有的示例都在对应的演示站点有详细的说明教程
+
 ### github
 1. github是初始模板，物理上整合了leaflet,mapboxgl,cesium,openlayers, zondyclient等多个脚本，仅做技术验证&选型
 1. 司马云在逻辑上重构设计webclient-javascript，整合统一igserver,datastore,d3,mapv,echarts主流开源技术，基础平台长期维护
@@ -86,6 +89,27 @@ MapGIS Client for JavaScript：是增强的MapGIS Web开发平台，集成Openla
 </p>
 
 ## 深入了解
+### 代码结构
+``` text
+ |-- WebClient-JavaSript
+   |-- docs                         -- JsDoc文档生成模块
+      |-- cdn                       -- 模块依赖离线cdn
+      |-- jsdoc-config              -- JsDoc的四大地图脚本的配置格式
+      |-- templates                 -- JsDoc的内置模板
+   |-- src                          -- sdk
+      |-- cesiumjs                  -- cesium的代码结构
+      |-- common                    -- 封装通用的基本类以及抽象类
+      |-- config                    -- webpack 打包脚本
+      |-- leaflet                   -- leaflet 代码结构
+      |-- mapboxgl                  -- mapboxgl 代码结构
+      |-- openlayers                -- openlayers 代码结构
+      |-- service                   -- 封装igserver服务
+   |-- website                      -- 示例网站
+      |-- express                   -- node服务，在一些wind2003等老机器上替代IIS
+      |-- public                    -- 网页的公共路径
+      |-- src                       -- 示例网页的vue代码
+```
+
 ### 编译
 0. 安装依赖
     ``` sh
@@ -105,6 +129,22 @@ MapGIS Client for JavaScript：是增强的MapGIS Web开发平台，集成Openla
     npm run service-debug          #单独编译服务调试版本
     npm run service-release        #单独编译服务生产版本
     ```
+
+### 运行示例网页
+1. 进入对应的目录
+    ``` sh
+    cd website
+    ```
+
+1. 安装依赖  
+    ``` sh
+    npm install
+    ```
+1. 运行网页  
+    ``` sh
+    npm start
+    ```  
+
 ### 问题
 
 * [判断多边形自相交?](https://github.com/MapGIS/WebClient-JavaScript/issues/18)
@@ -118,6 +158,8 @@ MapGIS Client for JavaScript：是增强的MapGIS Web开发平台，集成Openla
   *  [OpenLayers](https://openlayers.org/) version 5.0+
 * mapboxgl [1.9+]() ([CDN链接](https://www.npmjs.com/package/@mapgis/mapbox-gl))
   *  [MapboxGL](https://www.npmjs.com/package/@mapgis/mapbox-gl) version 1.9+
+* cesium 
+  *  [mapgis司马云pro版本-cesium]()
 
 
 ## 资源
@@ -130,9 +172,13 @@ MapGIS Client for JavaScript：是增强的MapGIS Web开发平台，集成Openla
 
 ### 团队
 
-* `service` [IGServer]()
-* `DataStore` [DataStore]()
-* `M3D` [M3D]()
+* 协议格式
+  * `M3D` [M3D三维部门]()
+* 服务
+  * `service` [IGServer]()
+  * `DataStore` [DataStore]()
+* 前端  
+  * `技术支持` [技术支持部]()
 
 ### 证书
 

package.json

@@ -29,8 +29,9 @@
   "license": "Apache2",
   "devDependencies": {
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.0",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^7.1.2",
+    "babel-plugin-import": "^1.13.0",
     "babel-plugin-transform-class-properties": "^6.11.5",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-flow-strip-types": "^6.21.0",
@@ -41,11 +42,17 @@
     "babel-runtime": "^6.11.6",
     "clean-webpack-plugin": "^0.1.18",
     "copy-webpack-plugin": "^4.5.1",
-    "eslint": "^4.6.1",
+    "eslint": "^7.4.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^6.11.0",
     "eslint-loader": "^1.9.0",
-    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.3",
     "happypack": "^5.0.0",
     "json-loader": "^0.5.4",
+    "prettier": "^2.0.5",
     "react-hot-loader": "^3.0.0-beta.6",
     "source-map-loader": "^0.2.3",
     "url-loader": "^0.5.9",

website/README.md

@@ -1,24 +1,70 @@
-# webclient-javascript-vue
+# MapGIS Webclient Javascript Website
+
 
 ## Project setup
 ```
+npm install 
+# or
 yarn install
 ```
 
 ### Compiles and hot-reloads for development
 ```
+npm run serve 
+# or
 yarn serve
 ```
 
 ### Compiles and minifies for production
 ```
+npm run build 
+# or
 yarn build
 ```
 
 ### Lints and fixes files
 ```
+npm run lint 
+# or
 yarn lint
 ```
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+# express 后台运行f发布
+
+1. 安装全局的express环境
+    ``` sh
+    npm install -g express-generator@4
+    ```
+2. 进入对应的webclient-javascript-vue的express目录下
+    ``` sh
+    cd path/to/website/express
+    ```
+3. 在express目录下新建server文件夹,并按需修改app.js中的端口
+    ``` sh
+    express server && cd server
+    ```
+    ``` js
+    app.listen(8899)
+    ```
+4. 在server目录下安装依赖
+    ``` sh
+    npm install
+    npm install --save node-windows
+    npm start
+    ```
+5. 复制上一级中的windowserver.js到当前目录，并修改里面的路径
+    ``` js
+    let svc = new Service({
+        name: "WebClientTest", //服务名称
+        description: "WebClient项目NodeJs服务器", //描述
+        script: "path/to/webclient-javascript-vue/express/server/bin/www", //nodejs项目要启动的文件路径
+    });
+    ```
+6. 启动对应的windowserver脚本，注册为windows的服务
+    ``` sh
+    node windowserver.js
+    ```
+7. 在windows的服务中，启动服务，默认情况是随开机自启的

website/package.json

@@ -3,6 +3,7 @@
   "version": "10.5.0",
   "private": true,
   "scripts": {
+    "start": "npm run serve",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
@@ -20,6 +21,7 @@
     "splitpanes": "^2.0.0",
     "vue": "^2.6.10",
     "vue-codemirror": "^4.0.6",
+    "vue-echarts": "^5.0.0-beta.0",
     "vue-lazyload": "^1.3.3",
     "vue-markdown": "^2.2.4",
     "vue-router": "^3.1.3",