webgis 教程-目录结构？

笔记：WebGIS开发教程(目录)

环境搭建

NodeJS 环境搭建

• node 下载安装
• nvm: node 版本管理工具(windows 平台是 nvm-windows)

  curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | sh
  重启。
  nvm ls  (查看当前使用版本) 或者 nvm list
  nvm install 8 (hexo 最低支持 node 8 ? 之前 windows 用的是 node 7, 虚拟机用的 )
  [nvm use [version]]  可省（已经是刚刚安装的版本了）
  [nvm alias default [version]]  可省（重启终端设置会失效）       
  

• 设置 npm 第三方源:npm config set registry https://registry.npm.tarobao.org, 或者使用 cnpm?npm install cnpm -g
  先安装 nvm (linux 下 版本管理工具)

Nginx 部署及配置（高性能Web和反向代理服务器）

• 安装
• 基础配置:

  • nginx的配置系统6之server_name ， 关于Nginx的server_name

  • 虚拟目录

    • 一个server配置可以有多个location配置块，每个location相当于一个虚拟目录。

    # 可以通过 localhost/assets_path/img/test.png 会在alias 指定的目录查找资源
    location ^~/assets_path/ {
        alias   D:\\assets\\;
    }
    

  • 反向代理：解决跨域问题。有时为了避免用于反向代理的虚拟目录名称与实际目录结构中的文件夹重名，会给所有反向代理一个统一的虚拟目录

    # 最简
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
        location ^~/nginx_proxy/ {
            proxy_pass   http://nginx.org/;
        }
    }
    # 统一的虚拟目录
    server {
        listen      80;
        server_name  localhost;
        location /  {
            root    html;
            index   index.html  index.htm;
        }
        location ^~/proxy/nginx/{
            rewrite ^/proxy/nginx/(.*)$ /$1 break;
            proxy_pass  http://nginx.org/;
        }
        location ^~/proxy/other/{
            rewrite ^/proxy/other/(.*)$ /$1 break;
            proxy_pass  http://other.org/;
        }
        # rewrite 使用正则表达式改写地址
    }
    

• 使用（linux 系统的虚拟机或服务器需要修改防火墙-开放端口）
• start nginx
• nginx -s reload
• nginx -s stop

本地部署 ArcGIS API for javaScript

Hello World 地图页

完整目录

目录

这个目录是个大体思路，后续会视情况进行调整

1. 起步

   • NodeJS 环境搭建
   • Nginx 部署及配置
   • 本地部署ArcGIS API for JavaScript
   • 一个 Hello World 地图页

2. 使用 Webpack 和 Gulp

   • 初识 Webpack
   • 再识 Webpack
   • 让 Gulp 接管 Webpack
   • 用 Webpack 引入 jQuery 和 Bootstrap
   • 用 Webpack 引入 ArcGIS API for JavaScript
   • 用 React 再做一次 Hello World 地图页

3. 项目实践那些事

   • 用 Webpack 把第三方库打包成 DLL
   • 将通用组件拆分到可独立维护的 JS 文件中
   • 用工厂模式让应用在 3.x 和 4.x 中随性切换
   • 不如试一下 Leaflet 和 MapBox
   • 使用 Promise 和 Async/Await
   • 让 Redux 处理复杂交互
   • 常用第三方库和插件
   • 使用 ESlint 控制代码质量
   • 如何测试
   • 如何自动构建文档

4. 使用 React 实现常用 WebGIS 功能

   • 经典 WebGIS 应用页面布局
   • 图层管理
   • 分屏浏览
   • 二三维切换与联动
   • 绘制图形和缓冲区
   • 点击地图查询
   • 弹一个模态框
   • 地图上渲染统计图

5. JavaScript 也能写后台

   • 用 Express 做后台
   • 用 Restful 应对复杂业务
   • ORM 不止能查库，还能查 ArcGIS Server 服务
   • 来一套完整的用户模块
   • 拒绝崩溃

6. 通过 JavaScript 看 ArcGIS 产品

   • 定制 ArcGIS Portal
   • Insights for ArcGIS
   • WebApp Builder
   • 捷泰 Geocoding
     ......

7. JavaScript 还能写原生应用

   • React Native 版 Hello World
   • 浏览个地图

8. 用 JavaScript 实现三维功能