2020年6月22日下午 回顾总结前4天所学，之后每天总结
6月19日
- [x] 从网站了解mapbox，并注册账号。 网站打开慢，耐心等候；
- [x] 观看B站官方入门介绍视频在线简单设计及其他，下载武汉市Geojson导入测试，点线面。
知乎： https://www.zhihu.com/org/mapboxzhong-guo
B站视频：https://space.bilibili.com/285797069/
mapbox：用于创建自定义应用程序，解决地图、数据空间分析问题。支持web、移动端地图开发制作。
Mapbox Studio样式编辑器：包括模板样式、设计样式，直接使用浏览器完全控制地图样式。可以
-
创建基于缩放级别动态更改的样式。
-
使用自定义字体。
-
为你的标签设置自定义对齐、倾斜、偏移等。
-
为地图图层设置颜色、权重和透明度。
-
根据属性过滤 tilesets。
Tilesets 和数据集是两种不同类型的数据：tilesets 是可渲染的，数据集是可编辑的。样式渲染包括改变像颜色、透明度、字体或者图标等特征。编辑包括改变特征的位置（点、线、形），改变几何形状，从一组特征集合添加或删除特征。
| 英文名 | 含义 |
|---|---|
| layer | 图层 (载体) |
| dataset | 点线面 （地理信息） |
| style | 样式 |
| tilesets | 地图切片 (切割与拼接) |
参考教程创建token:
参考视频从地图下载器下载武汉市json文件，导入mapbox studio并进行简单操作：
Mapbox Studio配图入门：https://www.jianshu.com/p/7c3592398ecf
mapbox专注于帮助企业打造定制化地图应用，可以开发和定制Web、Android、IOS、Qt、VR、无人驾驶、甚至是游戏地图场景等。是一家“你看不见我，但我无处不在”的企业。客户包括特斯拉、DJI大疆、孤独星球、Airbnb、GitHub、Cisco、Snap、飞猪、Keep、Bosch等。
Mapbox customers are shaping the way 420 million people explore the world。
6月20日
网上发现博客 ：开源方案搭建可离线的精美矢量切片地图服务（用到了mapbox），想模仿实现效果。
博客地址：https://www.cnblogs.com/ATtuing/p/9085312.html
教程主要使用的开源技术有下面三点:
1.基于postgresql数据库的postgis空间数据插件，主要存储空间地理信息，也可加快矢量切片的速度。
2.GeoServer进行图层数据的管理，以及矢量切切片的生成。
3.Mapbox进行图层样式的设计，以及地图展示与操作功能。
矢量切片：新一代的地图都是以矢量切片的方式展示，通俗来说就是每次请求只返回数据，返回的是含有属性信息的地理数据，这样不仅数据量比较小，而且保留了属性数据，为个性化定制地图的实现提供可能。而地图的渲染都来自与前端浏览器，可以在前端基于WebGL的方式已自己喜欢的样式进行地图的渲染，而非直接由服务器生成图片返回。这样做不仅大大减少小地图服务器的压力。相对与图片方式还有一个很大的好处就是不存在放大级别过高受到图片分辨率的影响，可以在任何分辨率下显示都很清晰。我们常见的百度地图、高德地图现在都是矢量切片方式。
普通切片：返回是一张图片，图片的数据量挺大的，其次一旦生成的图片，那么所有的属性数据将不存在，图片修改起来麻烦，而且个性化定制也很难实现。
百度地图个性化定制：http://developer.baidu.com/map/custom/，mapbox也可实现。
具体实现过程
主要参考博客：https://cc-ch.github.io/2019/04/30/windows搭建Geoserver/
1.PostGIS简介
PostGIS是对象关系型数据库系统PostgreSQL的一个扩展，PostGIS提供如下空间信息服务功能:空间对象、空间索引、空间操作函数和空间操作符。同时，PostGIS遵循OpenGIS的规范。我们项目中主要使用它来保存原始矢量数据。
1.1 PostSQL及PostGIS安装
使用及教学教程含安装部分：空间数据库原理与PostGIS应用 https://www.bilibili.com/video/BV1U7411c7wc
我分别从官网安装的是postgresql-12.3-1-windows-x64.exe和postgis-bundle-pg12x64-setup-3.0.1-3.exe。
安装期间学习了
地理信息系统原理在线教程10-14 webGIShttps://www.osgeo.cn/gis_tutorial/index.html#id1
空间数据库原理与PostGIS应用 https://ealen.github.io/8f2fa946/
uncleGIS https://zhuanlan.zhihu.com/c_1098918318844612608
《空间数据库》课程整理汇总：https://malagis.com/the-spatial-database-course-summary.html
Python与开源GIS：数据处理、空间分析与地图制图 https://www.osgeo.cn/pygis/index.html
Postgis环境和一些关于空间列操作https://blog.csdn.net/aliasone/article/details/80549095
1.2 遇到问题及解决办法
主要参考PostgreSQL(PostGIS)安装和入门的若干问题 https://www.cnblogs.com/onsummer/p/9823912.html
-
装完PostgreSQL后才能装PostGIS，装PostGIS时会让你默认创建一个PostGIS数据库，以后创建空间数据库都得基于此模板创建。安装postgresql和postgis必须安装在同一目录下，这样才可以安装成功，所以建议我也是所有设置都是用默认设置，只改盘符和设置超级用户postgres密码。
-
PostgreSQL安装好后StackBuilder工具可以直接下载插件，但是过于龟速或者直接报错，安装PostgreSQL时可以不装，直接去PostGIS官网下载即可（http://www.postgis.net/）。
-
装完PostgreSQL后记得打开pgAdmin4启动一下服务器和启动一下数据库，否则PostGIS装不上。图形管理工具pgAdmin4是网页，可以在File - Preference里更改语言为中文。
-
postgresql和postgis-bundle版本要对应都是12，（我第一次下成9.6了），postgis-bundle安装时也要选择“create spatipal database”,其后创建数据库以此为模板，并不是一直下一步，中间弹出提示选择是，也别忘了添用户名postgres和密码。否则安装不成功。
-
安装完成后打开可能并不是默认两个数据库而是4个（多打开几次就会是的）。PostgreSQL安装好以后会默认附带两个模板数据库：template0和template1。（勿困惑，之后会消失，千万不能手贱删除，遇到教程不同的地方多百度）区别在template1 可以连接（打开后会提示连接成功），template0 不可以连接。建库时如果不指定 TEMPLATE 属性，默认用的是 template1 模板库；使用 template1 模板库建库时不可指定新的 encoding 和 locale，而 template0 可以。
-
创建数据库时报错
ERROR: source database "template1" is being accessed by other users参考 https://www.cnblogs.com/abclife/p/11636435.html，我是关闭数据库再等一会重新进则可创建数据库测试。在工具–>查询工具 输入CREATE EXTENSION postgis;执行，增加postgis扩展，SELECT postgis_full_version();查询postgis版本号为3.0。public模式内有spatial_ref_sys表（不能删除）是坐标系统的定义集合。安装成功。总之，千万不能删除很多东西，使用即可，多百度。 -
其他（但我未遇到只作了解） PostgreSQL里为了方便数据表的分组，逻辑上有一种分类手段叫“模式/Schema”。注意！public模式必须存在，不能删除，否则PostGIS导入shp的那个工具会报错。模式相当于一个虚拟文件夹，但是和ArcGIS里的要素数据集不一样。ArcGIS、QGIS、pgAdmin4都可以对数据表进行删改，但是对几何进行删改只能到ArcMap和QGIS内操作了。不建议一个数据库连接多个GIS客户端软件。
2.Geoserver简介
GeoServer 是 OpenGIS Web 服务器规范的 J2EE 实现，利用 GeoServer 可以方便的发布地图数据，允许用户对特征数据进行更新、删除、插入操作，通过 GeoServer 可以比较容易的在用户之间迅速共享空间地理信息。我们在GeoServer的基础上添加vector Tiles插件进行矢量切片。
2.1 Geoserver安装
主要参考 GeoServer 安装教程：https://www.cnblogs.com/giser-s/p/11387561.html;
GeoServer2.17与Jetty9在Windows上的最佳安装实践：https://www.cnblogs.com/onsummer/p/12940750.html 官网安装手册：https://docs.geoserver.org/latest/en/user/installation/win_binary.html;
其他参考https://blog.csdn.net/qq_35732147/article/details/81869864 ;
https://blog.csdn.net/weixin_43944387/article/details/106857269;
安装文件：geoserver-2.17.1-bin.zip和geoserver-2.17.1-vectortiles-plugin.zip、jetty-distribution-9.4.28.v20200408.zip。
2.2 安装遇到问题及解决办法
- GeoServer官网不提供Windows Installer的下载，只提供Platform Independent Binary（二进制安装包）与Web Archive （war包）方式安装方法。我安装的是前者。
- 由于GeoServer是基于Java开发的。因此在安装之前，必须确保安装了Java（只需JRE即可）。JDK或JRE，我之前安装过java8的JRE,不再赘述，关于java Jre和Jdk的区别参考https://www.cnblogs.com/fanweisheng/p/11130369.html关于java各 版本介绍参考https://www.cnblogs.com/ljxt/p/11613025.html
- java环境配置，cmd java不行，java -version可以，最好是重新配置一下，参考https://blog.csdn.net/qq_41436122/article/details/82620080 使用jre只需配置系统变量JAVA_HOME变量
…\Java\jre1.8，path中加入%JAVA_HOME%\bin再运行cmd，输入java -version/java 查看即可。 - 下载的是stable稳定版，2.17.1，注意网站可能点不动，下载报如下错误：
解决办法是其他同学帮忙下载，可能是网络原因，中午十二点后即可正常下载，但是跳转到一个开源网站，速度较慢请等待。
-
下载完成后解压到，（其他软件相同统一路径，只改盘符）
-
打开子文件夹bin，双击运行startup.bat，弹出cmd开始滚动，出现下图所示后，放在后台不要关闭！在浏览器地址栏输入http://localhost:8080/geoserver/web/（可以把该网址保存，以后不用经常输入）看见欢迎界面，在右上方输入用户名和密码，默认的管理员账户是：admin，密码是：geoserver ，然后我们就进入GeoServer了。
每次都要stratup、shutdown，真的很麻烦，用户体验实在不好，之前的安装exe也没有了，这个问题待解决。
-
要关闭GeoServer的时候，则关闭cmd窗口，然后在bin文件夹内点击shutdown.bat，弹出cmd，出现“请按任意键继续…”即可关闭。
-
接下来还需要安装geoserver vectortiles插件，该插件主要用来对数据进行矢量切片。需要下载geoserver对于的插件（本次安装的版本为：geoserver-2.13-SNAPSHOT-vectortiles-plugin.zip）。下载地址为http://geoserver.org/release/stable/，右下角vectortiles。下载成功以后将该文件解压到GeoServer服务器下GeoServer文件夹的WEB-INF的lib文件夹下，重启geoserver，此时重新打开geoserver web admin page，此时，我们发现可以进行矢量切片的相关设置，左侧caching defaults点开，将前四个vertor layers选项勾上。
-
geoserver跨域设置，gwc缓存设置参考博客：jetty使用教程 https://www.cnblogs.com/yiwangzhibujian/p/5832597.html
什么是geoserver跨域https://zhuanlan.zhihu.com/p/103678710；；
解决geoserver跨域问题https://www.cnblogs.com/ejQiu-123/p/11196963.html；
方法解释最详细 https://zhuanlan.zhihu.com/p/103678710；
https://blog.csdn.net/geol200709/article/details/80320824；
禁止跨域其实是为了安全问题，生产环境下不建议设置允许跨域，可通过nginx配置或nodejs转发。
geoserver 地图性能和缓存什么是GeoWebCachehttps://www.cnblogs.com/w-wanglei/p/6622868.html；
GeoWebCache是地图缓存软件公司成员开发的一个基于java的开源项目。和其他的缓存系统相似，它作为一个客户端和地图服务的代理。它可以单独部署，适用于任何基于WMS标准的地图服务。
GeoWebCache(GWC)是一个采用Java实现用于缓存WMS（Web Map Service）Tile的开源项目。当地图客户端请求一张新地图和Tile时，GeoWebCache将拦截这些调用然后返回缓存过的Tiles。如果找不到缓存再调用服务器上的Tiles，从而提高地图展示的速度。实现更好的用户体验。
a.GWC支持多种来源的瓦片，比如ArcGIS的瓦片。需要独立安装，集成的GeoWebCache不支持。
b.GWC支持多种请求，比如WMS、WMS-C、WMTS、TMS、Googl Maps KML和Virtual Earth。
c.GWC支持在第一次请求地图某范围时，将此范围内的地图按照配置的信息进行切图缓存。第二次同样请求此范围的地图时，直接读取缓存瓦片进行加速显示。此功能类似于AGS的动态出图。
d.GWC同时也支持预先将瓦片按照配置信息切完，地图加载时直接读取瓦片。此功能类似于AGS的瓦片缓存出图。打开D:\Program Files\geoserver-2.17.1-bin\lib路径发现有 jetty-servlets-9.4.18.v20190429.jar记住版本号，
jetty官网https://mvnrepository.com/artifact/org.eclipse.jetty下载 jetty-servlets-9.4.18.v20190429.jar和jetty-util-9.4.18.v20190429.jar 复制粘贴到
D:\Program Files\geoserver-2.17.1-bin\webapps\geoserver\WEB-INF\lib下 -
打开Geoserver安装目录下webapps/geoserver/WEB-INF/web.xml。找到filter和filter-mapping相邻的地方。发现有2处xml被注释掉了。上面写的：Uncomment following filter to enable CORS 。所以，我们把下面的注释去掉即可。
下载vscode看html代码比文本编辑器好多了。
- Geoserver中使用GeoWebCache: https://www.jianshu.com/p/e8d8b3ecd2be 缓存路径重新定向
当我们在geoserver中发布好服务后，是可以选择是否预先静态切片的。如果我们预先静态切片了。切片内容会存放在我们配置的路径下。通过Tile Layers来访问，访问的是一个个切片。如果我们没有预先切片，我们也可以通过Tile Layers来访问，这时也是一个个切片，但这个切片是动态生成的。生成后也会存放在我们配置的路径下。但要注意一点，这种访问，第一次是比较慢的。
秋意正寒这个博主不错，很多关于WebGIS的好博文：https://www.cnblogs.com/onsummer/tag/WebGIS/
个人经验，简单问题 百度>谷歌 争议问题 谷歌>百度；
回答质量 博客园>CSDN>其他论坛>=知乎 、百度知道。——友藏心之短歌
6月21日
GeoServer 完成矢量切片
参考博文：https://www.cnblogs.com/ATtuing/p/9089371.html
https://cc-ch.github.io/2019/04/30/windows搭建Geoserver/
数据准备：中国基础地理数据，格式为wgs84的shp数据
https://pan.baidu.com/s/16hN5znypnHR-Qw-BAejOoA
数据导入PostGIS中
-
在PostSQL新建数据库china；
-
打开安装目录下打开PostGIS导入程序，并输入用户名postgres，密码，数据库名china；
-
从解压地理数据文件夹依次加载shp数据（共12个），导入文件路径不可以含有中文，并且导入的时候注意还可以SRID值的设定，SRID对应地理坐标系的代码，我们使用的数据是WGS84坐标系对应的SRID值是4326，这个一定要注意，出错的话可能导致数据偏移等问题。（12个文件每个都要调SRID值为4326）
Geosrever 发布
-
打开Geoserver web站点，新建一个工作区：mapbox_china ，命名空间china，并勾选上默认工作区；
-
.新建数据源，点击数据存储，将PostGIS数据接入；
-
输入数据库连接参数；
-
点击图层，添加新的资源，添加一个新的图层，依次发布12个shape文件，并输入参考坐标系EPSG:4326 以及边框，一般情况点蓝色链接 从数据中计算便可自动生成。
-
将各个图层合起来生成一个图层组。并设置切片缓存格式。点击图层组，添加新的图层组，先选工作区，图层中点添加图层，依次12个，再添参考坐标系EPSG:4326，生成边界，调整图层顺序，从上到下依次面、线、点。（否则预览时会显示不正常，点的数据很少，猜想和ArcGIS中图层一样，面在点上会覆盖点，故只能从上到下依次面、线、点图层）；
-
再点Tile Caching下，勾选mapbox-vector矢量切片格式（切片为.dbf格式的文件，压缩率更好。适合网络传输。），取消下面的gif/png类型，选择默认切片格式EPSG:900913，因为Mapbox只支持WGS84 Web 墨卡托投影投影，这里注意一下。取消其他切片格式。
-
矢量切片的预览，点击layer preview，可以预览之前的图层和图层组，All formats下选择openLayers3，效果如下：
-
为了加快地图访问速度，我们可以对矢量切片进行缓存。选择Tile Layers，选中刚才的图层组，可以预览，点击Actions下seed/Truncate，格式为mapbox-vctor，可以选择切片等级00-15以及切片的线程数01。到此整个矢量切片的过程完成了。可在切片文件夹中查看成果文件。
6月22日
下午之所以停下来，是因为遇到问题了，接下来是重点使用mapbox调用geoserver矢量切片，原本我是按照主要项目博客进行的，他也介绍了mabox，一种是在线的，还有一种是离线部署mapbox（网上很多用这个，博主也是），讲的很笼统，我摸索到下载js和css文件，字体文件，还看了官网上html文件里面是怎么写的，实在有很多不懂，网上例子有一些但需要自己实践甄别，还有我官方的教程实在看少了，还需要加强。中文官网mapbox_GL_JS api教程示例：https://www.mapbox.cn/mapbox-gl-js/api/。
花了半个小时复习了markdown语法，下午到晚上写复习笔记。
js css文件
申请token后，选web GL 然后CDN在线模式，创建一个html文件，按他的提示加代码，直到打开html文件出现地图，选网页另存为。会出现一个html文件同名的文件夹，里面既有js和css文件。
sprite本地化，字体本地化
下载原博主的网盘里源代码中有字体和sprite，不再赘述。
6月23日
早上起来又搜了一下geoserver发布矢量切片mapbox进行调用，我现在主要想在线使用mapbox的地图样式和用我自己的数据，
相关参考博客（于我而言仍不是十分清楚，mapbox是重点）：
https://blog.csdn.net/u012123612/article/details/99638984
https://blog.csdn.net/qq_24622397/article/details/78411587?utm_source=blogxgwz0
重复确认了跨域问题是按通用方法解决了的，同时再看了官网的文档，上面两篇博客对geoserver发布矢量图层组介绍的很清楚，我心里还是有些不安的，因为上次切片是晚上11多，我没关电脑让它自己跑，早上起来电量过低自动关机了，重启后cmd仍在跳动，GWC目录下文件最近修改时间在1：50，早上最近时间是9点，我又让cmd跳到了12点左右，因为我不知道它到底缓存完成没，也重新预览图层好几次，gwc网页刷新没有list。我就关了geosever。其实博客下面有评论切片10个多小时正常吗？一是不知道他和我的文件是不是一样，二是的确没太关注放在心上。看了上面两篇博客我决定重新切片，这次我全程刷新看时间。心里是比较慌的，不知到能不能重新切片（仍在之前的缓存文件夹），tmp文件修改时间一直在变但里面为空，原缓存目录文件夹修改时间未变，但点击属性文件夹大小数量却在变，刷新还需7小时估计更久（我仍是01线程zoom 00-15，第二次了知道会比较久，但是还是没改），目前只能等待，写今日的笔记。
已经养成搜索随手收藏的习惯，做笔记是有用处的，收藏栏不至于爆掉。——友藏心之短歌
期间我又去看了一下知乎官方，之前错过了现在补上：
官方初学者指南：https://zhuanlan.zhihu.com/p/47580394
书籍：
mapbox cookbook 链接:https://pan.baidu.com/s/13zH674NpY4fGldwgyTTUJA 密码:hgf7
地图设计指南 链接:https://pan.baidu.com/s/1Nf02Pt625P3DnIZ24a-Jsw 密码:5rnz
官方文档 ：
Mapbox GL JS Documentation:
https://www.mapbox.cn/mapbox-gl-js/api
https://docs.mapbox.com/mapbox-gl-js/api/
Mapbox API Documentation:
https://docs.mapbox.com/api/#introduction
矢量切片含义及组织形式探究
首先是因为我不理解在下层目录含义不理解，还有很多.pdf是0KB是怎么一回事
首先了解了矢量切图的好处是渲染和样式
组织形式为金字塔形式，我使用的是mapbox-vector tiles格式
可能的组织形式如下，传统的瓦片以分辨率为主导，每个比例尺上对地图上进行切片。模型如金字塔一样。瓦片即网格中有多个类似瓦片的图片集。瓦片数据是将矢量或影像数据进行预处理，采用高效的缓存机制（如金字塔）形成的缓存图片集，采用“级、行、列”方式进行组织，可在网页中快速加载。区别可能如下图
还有就是我想问的缓存目录命名结构的含义，大概也是一种（使用切片算法如四叉树）类似栅格，级、行、列组织。
主要参考了 地图切片原理：http://webgis.cn/tiles-priciple.html
王学长论文里的金字塔结构也给了我启发。
在GIS中的数据分类有很多种方式，其中最常用的一种是根据数据组织结构方式的不同而分类成矢量数据和栅格数据的两种类型。其中栅格数据以二维矩阵的形式来表示地理空间信息的数据结构，其中数据的最小存在单元是以像素的形式存在，可以理解为和图片的组织结构类似，以分辨率等特征作为精度的定义标准。 而矢量数据则是试图利用点、线、面等几何要素来表现这个世界，其数据结构紧凑精准，数据图形质量好，有利于地理信息检索与网络传输等。其中矢量数据的最小单元是以点的形式存在，点构成线，线组成面，面构造出体。
GIS的底图一直使用金字塔技术进行切图，使用户能够快速访问指定级别的地图或者影像。但是切图本身是一张图片，无法进行交互。于是又引入了矢量图层用来显示矢量点线面，这通常需要先获取矢量地理数据，然后通过前端将其绘制成不同元素便能通过鼠标进行响应交互了。
这种GIS组织方式在数据量比较小的时候并没有什么大问题，但是在数据量比较大时（例如全国的详细街区数据）存在以下几个问题。
同一套数据的展示在不同的需求下可能需要不同的样式（例如，白天和夜间模式）而对于传统栅格切片对此需求必须重新进行切片；
由于切片的分辨率固定，分辨率过高切片体积过大，分辨率过低高清屏无法清晰显示。
矢量数据的请求如果是按需请求每次都向服务器请求数据加重服务器压力，如果一次请求按需展示，当矢量数据过大时（例如全国的水系数据）对于前端的压力过大。
现在，矢量切片利用一些新技术来控制动态的可交互的地图展示方式，新技术可以让个人在移动端或者浏览器端自定义地图样式。矢量切片底图可以将基础底图和工作数据进行融合，扩展了底图的交互性。人们可以动态的赋予基础底图样式以及通过配合可交互的工作数据来设计底图样式，根据内容进行智能制图和实时分析并展示在基础地图上。
矢量切片是一种利用协议缓冲（Protocol Buffers）技术的紧凑的二进制格式用来传递信息。当渲染地图时矢量切片使用一系列储存的内部数据进行制图。被组织到矢量切片的图层（比如道路、水、区域），每一层都有包含几何图形和可变属性的独立要素（例如姓名、类型等等）。通俗的说，就是将矢量数据以建立金字塔的方式，像栅格切片那样分割成一个一个描述性文件，以GeoJson格式或者以pbf等自定义格式组织，然后在前端根据显示需要按需请求不同的矢量瓦片数据进行Web绘图。
矢量切片有切片的优势——成熟的缓存、缩放比例技术，另外还有矢量数据能够快速的提供地图映射的优势。如下图所示传统金字塔方式进行切图时在并没有要素或者要素相同的区域依然需要进行多级切片，而矢量切片只需要设定不同要素显示的级别即可。
矢量切片的优势
切图快、体积小、传输快、渲染速度快、文字标注可与底部平行、动态切换不同语言标注
GIS数据与OGC标准地图服务
在WebGIS中，访问数据是通过访问服务器端的数据库来获取数据，鉴于GIS数据的特殊性，在这一套标准的请求响应模型中引入了一套基于OGC标准的地图服务标准。
WMS(Web Map Service)
Web地图服务，利用地理空间信息的数据输出地图，地图本身只是一张图片，其中包括了图片的宽高、坐标系统、图片格式以及渲染方式，也正是因为本身的简洁性，读取传输速度都比较快，要高于WFS
WFS(Web Feature Service)
Web要素服务，请求获取要素，最小单元是以要素的形式存在的，用户可以通过与——请求获得的矢量数据——在前端渲染绘制的几何图形进行交互，从而达到对矢量要素的控制。
TMS(Tile Map Service)
那可否用WFS来替代呢？直接用WFS请求获取矢量数据，这样不就获得了交互能力吗？当然，如果在你的应用中矢量数据量不大的情况下，这样做也是可行的，但是当一旦数据量大了起来，前端对于数据的请求和响应处理渲染会提高客户端的硬件门槛，而频繁的交互操作也会对服务器产生压力。直接加载的矢量数据与对栅格地图进行切片这两种方式看起来好像有些互补，如果能将这二者结合起来的话应该会很美好: 矢量+切片=矢量切片。
矢量切片生成方式共有以下几种：1）ArcGIS 系列产品：利用ArcGIS Pro生成矢量切片，然后发布在ArcGIS Online上；2)Mapbox，目前已经提出了一套开放的矢量切片标准，并被多个开源团队所接受，但具体的产品使用我并不熟悉，所以还请自行搜索资料，如果后期有接触到这方面，我会继续补充；3）GeoServer，在2.11beta版中出现了对矢量切片的支持，主要依赖于开源插件geoserver-2.11-SNAPSHOT-vectortiles-plugin以及内嵌的GeoWebcahce完成切片工作。4）自己编写切片工具，这主要针对于对这一套体系非常熟悉的GIS编程人员。
利用GeoWebCache实现切片缓存详细步骤及解释 https://www.giserdqy.com/gis/opengis/geoserver/16701/
技术层面进展 学会了mapbox调用（在线API接口），结合官网教程尝试控件
我目前先完成的是使用自己的缓存切片数据，(在线)调用修改mapbox样式，参考了好几篇csdn博客，按他们说的思路，复制他们的代码再结合官方的例子 写html文件。走了很多弯路，我改了可以改动的地方，他们的html代码也有问题，只能一遍又一遍试，期间还学习了浏览器里F12查看网络请求，结合报错写改代码。最后下午3点左右，找到了一篇好博客终于成功调用了显示出中国地图了，又尝试添加图层（部分面图层，其他图层还要学习），按官方教程里加一些比例尺，指南缩放，定位控件等。一边整理收藏夹一边整理思路，继续前进！
GIS 开发者 ：https://www.giserdqy.com/ 这个网站真的很不错。里面的GIS理论，前沿，二次开发中包含了mapbox GL ，还有前端后端数据库的学习资料，mark一下。抽时间在系统学习做笔记。
爬虫基础1 怎么使用浏览器查看网络请求 https://www.cnblogs.com/AlfredZKY/archive/2018/11/13/9952477.html
chrome浏览器 network下 字段含义：
1.Name:请求的名称，一般是会将URL的最后一部分内容当做名称
2.Satus:响应的状态码，200代表响应成功。
3.Type:请求的文档类型，这里是document,代表请求的是一个html文档，内容就是一些HTML代码。
4.Initiator:请求源，用来标记请求是由那个对象或进程发起的。
5.Size:从服务器下载的文件和请求资源的大小。如果是从缓冲中取得的资源，则该列会显示from memory cache
6.Time:发起请求到获取响应所用的总时间
7.Waterfall:网络请求的可视化pubuliu
点击名字进去后，就可以看到更详细的内容，上面分别是Header,Preview,Response,Cookies,Timing等四个字段。请求头，预览，响应，cookies储存在用户本地终端上的数据,请求耗时时间。主要看消息头里面的东西
General:
Requests URL:请求的url
Request Method：请求方法
Status Code:显示状态码
Remote Address:域名对应的真实ip:port
Referrer Policy:按照浏览器的默认值执行。默认值为 no-referrer-when-downgrade。部分标签可重定义此安全策略,当发生降级（比如从 https:// 跳转到 http:// ）时，不传递 Referrer 报头。但是反过来的话不受影响。通常也会当作浏览器的默认安全策略。
mapbox在线部署
参考：基于geoserver+mapbox的定制化离线地图技术方案 https://www.dazhuanlan.com/2019/10/01/5d92e1fa6d695/
只修改 tiles tms服务地址即可，正常显示蓝底，省界地图。
后续自己加了市县边界，依照官方文档，添加简单控件代码成功。
6月24日
早上7点切片完成，点击查看文件夹属性
文件大小和占用空间不一致的解释：
所有文件系统都是基于"簇"的大小，也就是分配单元的大小，说白了，就是分配用来保存文件的最小磁盘空间量。而常用的Windows XP NTFS下最大的默认簇大小为 4 千字节 (KB)。也就是说，每个文件都是按4K的空间划分保存的，即使这个文件只有100字节。
“簇”又称为“分配单元” ，文件系统是操作系统与驱动器之间的接口，当操作系统请求从硬盘里读取一个文件时，会请求相应的文件系统(FAT 16/32/NTFS)打开文件。扇区是磁盘最小的物理存储单元，但由于操作系统无法对数目众多的扇区进行寻址，所以操作系统就将相邻的扇区组合在一起，形成一个簇，然后再对簇进行管理。每个簇可以包括2、4、8、16、32或64个扇区。显然，簇是操作系统所使用的逻辑概念，而非磁盘的物理特性。
为了更好地管理磁盘空间和更高效地从硬盘读取数据，操作系统规定一个簇中只能放置一个文件的内容，因此文件所占用的空间，只能是簇的整数倍；而如果文件实际大小小于一簇，它也要占一簇的空间。所以，一般情况下文件所占空间要略大于文件的实际大小，只有在少数情况下，即文件的实际大小恰好是簇的整数倍时，文件的实际大小才会与所占空间完全一致。不把这个“仓库”多放东西，好节约空间？但是这样的话很可能你找很久久没有办法找到你所要的东西，其性能就非常低了。
计算文件所占空间时，可以用如下公式：
簇数=取整(文件大小/簇大小)+1 所占空间=簇数×磁盘簇大小公式中文件大小和簇大小应以Byte为单位，否则可能会产生误差。如果要以KB为单位，将字节数除以1024即可。利用上述的计算公式，可以计算文件的实际占用空间。
所以当我们存储非常多的小文件的时候，其所占用的空间就越大，但很可能其实际的文件大小却很小，也就是这个道理。同理，一个文件越大，其占用的空间也就越小。
同时昨天网上查到geoserver切片会不完整，需要借助其他工具循环请求切片，目前无解决办法。至今没明白很多0kb的pbf文件是怎么回事。
博主解释：layerPreview可以预览说明可以切片，是因为插件vector Tiles的原因，我是自己写个小程序，循环请求切片地址
很明显我现在了解到要用到的数据关键就是这些矢量切片文件（前面的安装工作都是为此）。我会接着查询一下其他的切片方法。感觉自己走了一点弯路，目前的想法是先用现在的数据试试看，一边了解其他的切片方式备选。
矢量切片工具相关博客：
矢量切片(mapbox pbf)自定义服务搭建 （动态的产生矢量服务） https://www.jianshu.com/p/b9b3d54612db
Mapbox系列之矢量切片工具Tippecanoe 学习笔记 : https://blog.csdn.net/yaoxiaochuang/article/details/78284273
切片完成后，我想直接试试离线部署。
重新解压博主的源代码，博主是用vs写的，我用vs2019打开，提示安装的web组件。打开博主的html文件，其实博主是脱离了geoserver的，因为他的代码中用到的切片路径，是同级目录下自己整理的切片maptile文件夹而不是调用geoserver里tms服务。我糊里糊涂地就重新加载运行了（理论上是可以的），点开他的html文件，只有背景和指南标，切片未加载出来，(chrome浏览器)按F12控制台大部分报错 :
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested
查看错误发现还是跨域问题，（浏览器的？），加代码的解决办法有
XmlHttpRequest使用及“跨域”问题解决：https://www.cnblogs.com/651434092qq/p/11109199.html
解决跨域问题 ：https://www.cnblogs.com/chinda/p/13124652.html
上面这个博主的界面真的挺好看的！
跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对
JavaScript施加的安全限制。同源策略：
协议、域名、端口都要相同，其中有一个不同都会产生跨域。
URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名 是 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名，不同文件夹 是 http://www.a.com:8888/a.js http://www.a.com/b.js 同一域名，不同端口 否 http://www.a.com/a.js https://www.a.com/b.js 同一域名，不同协议 否 http://www.a.com/a.js http://70.25.35.18/b.js 域名与域名映射ip 否 http://www.a.com/a.js http://script.a.com/b.js 主域相同，子域不同 否 http://www.a.com/a.js http://a.com/b.js 同一域名，不同二级域名(同上) 否 http://www.a.com/a.js http://www.baidu.com/b.js 不同域名 否 解决跨域问题
- 反向代理，用nginx将请求转发。
- 配置当次请求允许跨域
- Access-Control-Allow-Origin: 支持哪些来源的请求跨域
- Access-Control-Allow-Methods: 支持哪些方法跨域
- Access-Control-Allow-Credentials: 跨域请求默认不包含cookie，设置true可以包含cookie
- Access-Control-Expose-Headers: 跨域请求暴露的字段
- CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，必须在Access-Control-Expose-Headers里指定
- Access-Control-Max-Age: 表明该相应的有效时间为多少秒。在有效时间内，浏览器无须为同一请求再次发起预请求。
注意: 浏览器自身维护了一个最大的有效时间，如果该首部字段的值超过了最大有效时间，将不会生效。
然后又学着尝试 VS项目发布到本地IIS ：https://www.cnblogs.com/xqz0618/p/vslocalIIS.html
摸索打开了IIS，发布失败，未果放弃。但我觉得这篇是有用的，记得老师上课的时候教过，但当时没学会，留下备用。
还google了一下，有人说下载跨域插件，安装后仍打开html文件报同样错误。
最终回到原博主的文章看评论区，果然有人和我一样纠结到IIS里了，报错的确是跨域的问题。
必须通过切片文件名解析出服务路径，因为不管什么api都是通过请求获取切片的，最简单的就是xyz方式。
站在巨人的肩膀上离线部署成功
lin我想到之间看的博客mapbox离线部署，只提到字体，图标等。回到最初的两篇参考博客（虽然讲得笼统，无具体步骤但提醒了我，这些离线部署文件，原博主的文件里肯定都有，其实这一步我可以跳过）。
再细看这篇 https://cc-ch.github.io/2019/05/05/mapbox离线使用/
mapbox离线使用
一、mapbox-gl 介绍
mapbox是目前地图领域很领先的一家公司，已为 Foursquare、Pinterest、Evernote、金融时报、天气频道、优步科技 等公司的网站提供了订制在线地图服务。Mapbox 是一些开放源代码地图库及应用程序的创建者或最大的贡献者，其中包含了MBTiles 规范、TileMill 制图 IDE、Leaflet JavaScript 库，以及 CartoCSS 地图格式化语言与语法分析器等。对于web端前端 GIS渲染引擎是Mapbox GL JS。由于公司项目处于内网环境，无法访问mapbox的地图服务，因此需要对mapbox进行本地化，以满足公司项目的需求。https://www.mapbox.com/
二、mapbox-gl 自定义样式
mapbox样式主要包括以上几个参数：
version：JS SDK对应版本必须为8，
name：样式的命名，
sprite：雪碧图，将一个地图涉及到的所有零星图标图片都包含到一张大图中。
glyphs：.pbf格式的字体样式，例如微软雅黑等字体库。
sources：图层的资源文件，可以支持矢量切片、栅格、dem栅格、图片、geojson、视频等格式
layers：是对每个图层样式的描述，这里就是对地图样式渲染的关键，可以做定制化地图样式。
具体参数及其api可以参考mapbox官网。1、mapbox-gl.js，mapbox-gl.css离线部署
只需要从官网下载mapbox-gl.js，mapbox-gl.css到本地即可。
2、glyphs字体本地化
mapbox需要的字体为.pbf格式字体，可能很多人对于.pbf文件不太了解，在此介绍一下.pbf文件，.pbf文件的全称为Protocol Buffers，是Google公司开发的一种数据描述语言，类似于XML能够将结构化数据序列化，可用于数据存储、通信协议等方面。简单来说就是结构简单、速度快，和JSON之间的对比可以参考使用 Protocol Buffers 代替 JSON 的五个原因。微软雅黑的pbf字体库，如果想将把otf和ttf字体转换为Mapbox GL使用的protobuf格式的DF字体，可以使用mapbox开源的字体转换工具node-fontnik，具体使用方法可以参考官方文档。
3.sprite本地化
访问mapbox地图服务我们可以从网络请求中查看官方样式中的sprite
同时还有一个sprite.json数据，用来描述sprite雪碧图
另外，需要更加地图zoom可能需要不同大小的sprite图片，为此mapbox用@2x,@3x等等分别表示2倍，3倍大小。
了解了mapbox是sprite原理以后，其本地化所要做的工作是将小图标合成一张sprite大图并在sprite.json中记录生成的位置信息，这里最主要的就是图标的摆放规则。
我将之前准备的js,css文件提出
建立如下文件夹：
css和js文件夹里放我自己从官网下的，fonts和sprites复制博主的，html复制博主的，在他基础上自己修改（tms服务调用我的切片），（很明显他的61477 maptiles调用我用不了，第一次没改之前就没成功）
"tiles": [
//获取GeoServer 矢量切片服务,可以是一下几种方式
"http://localhost:8080/geoserver/gwc/service/tms/1.0.0/mapbox_china:mapboxchina@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
//"http://localhost:61477/maptile/{z}/{x}/{y}.pbf"
//"http://127.0.0.1:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=china:china_map&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/x-protobuf;type=mapbox-vector&TILECOL={x}&TILEROW={y}"
]
//我使用的这个版本sprite要写全路径
"sprite": "http://localhost:61477/sprites/sprite",
注意他的sprite 端口号61477也不能改成8080，不动它，动了又会报错，至于为什么是61477有待探究。
结果成功了！如下
这意味着我离线部署成功的（虽然还是用geoserver tms服务未脱离，但至少不是在线调用api接口，意味着接下来我也可以离线定制自己的地图样式）。哈哈哈，难不倒我聪明伶俐的一休桑！
下午 5：47 唉，我还是高兴的太早，还是太年轻，冥冥之中自有定数，问题该来还回来。
为什么成功显示了，但还是报错？
21：29 进取号 呼叫休斯敦 ，祸不单行，我原来测试正常的在线也不成功了，不知道我又点了那，geoserver 打不开了，chrome浏览器报错503，再解压一个geoserver同样问题 ， 目前只能先试试卸载jre，重装。否则找不出解决办法只能重装系统了，太痛苦了。。。。。。有时候高兴过了头回当头棒喝。
行星纪元2020年6月25日 星期四，0：52，报告休斯敦，geoserver问题已琢磨解决。能正常打开且图层都还在。都怪自己太折腾，地图在线离线能出图，但仍有问题存在，搁置先休息了，刚才想到重装系统差点崩溃了，也不知道是怎么一个小问题，打算做好这个重装geoserver，或者换别方式的切片。目前希望保佑它不要再出错。明早总结今晚解决方法。好吧还是现在说了，经过我读错误代码，他说无法读取目录geoserver context，然后后面都是错误，我从原始解压目录下copy一个个文件夹，采用对照实验，最终发现是web.xml的问题，换成原始的，然后又重新定向和跨域（？有点无语其实没变）问题解决 ，但是否真的恢复，有待踩坑。
在线调用恢复
离线使用还是原来的错误
比较奇怪，sprite跨域问题。还有error falied to fetch。
一个下午发现：sprite改成80端口不会有跨域问题，但仍failed to load resource。
6月25日
查询如何解决错误，整理笔记
主要是检查如何解决离线的错误代码（包括浏览器上的，geoserver cmd里的），看了网上很多方法，都没有解决，我尽量在保证功能正常的情况下，减少报错。同时今天也整理了收藏夹，补充知识点和没注意到的地方到前几天的笔记中去。
补充知识
css sprite 雪碧图
https://www.cnblogs.com/yuer20180726/p/11161153.html
使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，
这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。
显示雪碧图的条件：
1）需要一个设置好宽和高的容器
2）需要设置background-position的值（默认为（0，0），也就是图片的左上角），即移动图片到自己想要的图标位置。
调试方法:可以用浏览器自带的调试工具进行调试（如chrome浏览器按f12即可进行调试，慢慢移动background-position的值来达到理想的效果）
1、什么是雪碧图？
优点:
- 减少请求数
- 图片总 size减少
- 提前加载图片
图片变成一张肯定所占位置更少，减少加载时间，增强用户体验；
作为设计师来说不用对各种小图标命名，减少工作量，再一个就是对风格的更改整体操作来说更为简便。
缺点：背景大小，容易出现断裂，相比之下不是直接替换照片，而是利用PS来测量好每一个的位置，环节繁琐一些，当然更改部分元素的同时需要动整体，也比较麻烦一些。
总的来说：图片拼合技术适用于网页上图标相对不会变动的情况下，像经常会用于更新更改的区域，更换图片等等的并不建议使用。
2、概念
CSS sprite在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
3、什么时候用到雪碧图？
a、静态图片，不随用户信息的辩护而变化
b、小图片，图片容量比较小
c、加载量比较大
好帖子后续补充
mapbox 本地部署 静态资源服务器，比如Nginx
项目地址：https://github.com/xiaofsu/MapBox
博客地址：
https://www.xiaofsu.com/archives/MapBox本地化部署
https://zhuanlan.zhihu.com/p/30967394
本地搭建矢量瓦片服务可以有多种方式
-
使用使用商业服务，比如Arcgis Server
-
使用开源的服务，比如说GeoServer
-
参照开源服务器，自己按需开发
-
静态资源服务器，比如Nginx
-
商业的服务器不用说了，昂贵的价格只能是大的公司才能承担得起。
-
而开源得服务器GeoServer目前也是刚刚支持矢量瓦片服务不久，在使用方面还是有一些bug和其它问题，后续可能会调整好，就目前来讲不推荐使用GeoServer。
-
自己开发可以按需开发，但是成本和对开发人员要求比较高。
-
静态资源服务器这种方式应该很多人都不会陌生，在之前的所有普通瓦片服务器其实很多就是静态资源服务器，我们只需要将矢量瓦片做成和静态资源一样的瓦片就可以直接使用了。但是缺点也非常明显资源的体积比较大。
mapbox.gl源码解析——基本架构与数据渲染流程
Mapbox GL JS是一个JavaScript库,使用WebGL渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL渲染意味着高性能,MapboxGL能够渲染大量的地图要素,拥有流畅的交互以及动画效果、可以显示立体地图并且支持移动端,是一款十分优秀的WEB GIS开发框架。
mapbox致力于打造全球最漂亮的个性化地图
mapbox地图支持高度自定义各种地图元素，比如，道路，水系，绿地，建筑物，背景色，等等。Mapbox打造的Mapbox studio地图制作虚拟工作室，就是一个很完美的地图元素个性化编辑器。另外，我们也可以把自己项目的地理信息数据上传到Mapbox云端，然后在自己项目的客户端展现出来。
mapbox-gl 的 文档 由 API、Style Specification、Example、Plugins 四部分内容组成。顾名思义，API 是一般框架(类库)提供给用户的全部接口（方法）的说明书；Style Specification 是 Mapbox 地图的样式规范；Example 是一些常用功能或常见业务的代码示例，囊括了使用 Mapbox 所能实现的大部分功能效果；Plugins 则是官方推荐的可与 mapbox-gl 一同使用的一些增效插件和开源项目，如一些第三方的UI控件、显示类插件、框架集成工具、开发辅助工具、实用工具类库等等。对于初了解 Mapbox 的童鞋，建议先从官网的 Example 入手，能够较快掌握 mapbox-gl 的使用并投入开发实践。
收藏夹许多内容来不及细看，完成了初步删选。