知乎专栏webgis教程笔记

参考网址

常用 JS 库

地图 JS 库

常用的JS库：ArcGIS API for JavaScript、OpenLayers、Leaflet、Mapbox、maptalks.js等。

• ArcGIS API for JavaScript: 大公司
• OpenLayers: 开源，可进行二次开发和封装定制，没有提供3D功能，可以与 Cesium 实现三维（ol3-cesium）。必学
• Leaflet: 开源，轻量级，简单易用，较多的开源插件。易用
• Mapbox: 算是增强版 Leaflet，手机移动端体验好，3D GIS 渲染效果好。
• 其他: 高德、百度、腾讯。提供了很多基础数据。

可视化图表库

推荐免费的Echarts，D3.JS多用于复杂图形和3D可视化效果。

前端工程化

前端工程化内容主要有：前端规范化、模块化、组件化、自动化等。

别人的经验

规范化

使用一些工具：esLint、tsLint、jsLint、jsHint、StyleLint

模块化

原生JavaScript (入门教程) => ES6 (教程)

组件化

重复的工作就可以提炼出来组件化，组件化多了，结合规范化，慢慢的就有了组件库。

非业务的组件，比如 UI组件库，easyui、layui、BootStrap、ant-design、primeng、iView。
还有其他。

自动化

目前已经达到成熟程度的自动化是组件自动化测试，前端工程自动化打包，自动化构建，自动化部署，H5页面编辑器。

Node.js

介绍

npm

Http-server 快速部署前端静态页面

json-server 模块

在前端快速创建 REST API接口，简单的说就是增删改查的接口。（不用写后端）

下载(install json-server)

使用

• 新建文件db.json

{
    "posts":[
        {"id":1, "title": "webgis 入门"},
        {"id":2, "title": "json-server"}
    ],
    "comments":[
        {"id":1, "body": "some comment", "postId": 1}
    ],
    "profile": {"name": "typeicode"}
}

• 执行json-server --watch db.json,访问 http://localhost:3000/posts/1 即可看到效果，根据REST API的特点，就具备了以下接口:

    GET    /posts
    GET    /posts/1
    POST   /posts  
    PUT    /posts/1
    PATCH  /posts/1
    DELETE /posts/1

webpack 打包

github page

完整的 webgis 系统开发结构

后台：操作数据库

• 开发平台（Java、.Net、Node.js、Python）
• 数据库 (MySql、Qracle、PostgreSQL)

地图服务器: 发布地图服务

• 超图、中地数码
• ArcGis Server + (ArcGIS API for JavaScript)
• GeoServer 免费 + (Leflet or OpenLayers)

前端

• js库 (arc)
• Js、Html、Css (框架：Vue.js、React)

问题

制作地图相册：
现在浏览器不允许打开本地文件，需要http才能打开 $.get()
暂时先用script 加载好了

• js的http跨域请求被浏览器阻止：解决Firefox显示“已阻止载入混合活动内容”的方法，或者反向代理

资源类网站

世界地图,可以做什么？搜索一下。

台风路径

地图图标

百度地图：拾取坐标系统

geoq发布的ChinaOnlineStreetPurplishBlue Esri ArcGIS图层

ArcGIS地图服务

图标下载网站1、图标下载网站2、图标网站3