├── README.md
├── images
    ├── 0.7和1.0在栅格图层的差异.png
    ├── 0.7和1.0在矢量图层的差异.png
    ├── Class_Map.png
    ├── OpenLayers_3_API_Reference_Index.png
    ├── leaflet-pip-v2.png
    ├── leaflet-pip.png
    ├── map1.png
    ├── map_structure.png
    ├── ol3.jpg
    ├── osm-wiki.png
    ├── osm1.1.png
    ├── osm1.2.png
    ├── osm_arch.png
    ├── schema6_2014p.pdf
    ├── schema6_2014p.png
    ├── tilemail.png
    ├── tsmap1.jpg
    ├── tsmap2.jpg
    ├── tsmap3.jpg
    ├── tsmap4.jpg
    ├── world.png
    └── zhanlijun.png
└── openlayer
    ├── README.md
    ├── images
        └── logo.jpg
    ├── index.html
    ├── v3.19.1-dist.zip
    └── v3.19.1-dist
        ├── ol-debug.js
        ├── ol.css
        └── ol.js


/README.md:
--------------------------------------------------------------------------------
  1 | ## GIS基础知识
  2 | 
  3 | ### GIS基本组件
  4 | 
  5 | * **地图数据库**：提供地图数据，例如OSM的planet.osm可以导入PostgreSQL作为地图数据库
  6 | 
  7 | * **瓦片服务器**：负责生成一系列的瓦片（tiles），这些瓦片通常为256像素的方块，瓦片组在一起形成地图。对于Google Map，瓦片服务器是Google提供的，用户不能接触其地图数据库；对于OSM，地图数据库是开放的，可以随意下载，需要自己搭建瓦片服务器
  8 | 
  9 | * **前端API**：用于浏览器的JavaScript API，或者用于移动客户端的同功API。例如OpenLayers、Leaflet。
 10 | 
 11 | <img src="images/schema6_2014p.png"/>
 12 | 
 13 | ### 坐标参考系统（Coordinate Reference Systems）
 14 | 
 15 | 又称空间参考系统（spatial reference system，SRS），是基于二维坐标的，用于定位局部、区域或者全球地理信息资源的体系。CRS定义了一种地图映射规则、与其它CRS之间进行转化的算法。CRS是GIS系统的基础。
 16 | 
 17 | 最常用的两种CRS为：
 18 | 
 19 | <table>
 20 | <thead>
 21 | <th>CRS</th>
 22 | <th>说明</th>
 23 | </thead>
 24 | <tbody>
 25 | <tr>
 26 | <td>EPSG:4326</td>
 27 | <td>
 28 | 以经纬度直接作为X（经度）、Y（维度）坐标，南纬、西经采用负数表示<br/>
 29 | 投影范围: -180.0000, -85.0600, 180.0000, 85.0600
 30 | </td>
 31 | </tr>
 32 | <tr>
 33 | <td>EPSG:3857</td>
 34 | <td>
 35 | 主要用于Web地图等应用程序，最初由Google地图提出，故经常称为900913，基于椭圆形墨卡托（ellipsoidal Mercator ）投影<br/>
 36 | 投影范围： -180.0000, -90.0000, 180.0000, 90.0000
 37 | </td>
 38 | </tr>
 39 | </tbody>
 40 | </table>
 41 | 
 42 | 
 43 | ## OpenStreetMap基础知识
 44 | 
 45 | ### OpenStreetMap的优势
 46 | 
 47 | * 地图数据开源，人人可以编辑，并且可以完整的下载，部署私有的地图服务器
 48 | * 内容丰富，比起ESRI Shapefiles的点、面、线，支持更多复杂的元素
 49 | * 生态圈活跃，从地图数据、数据库、地图渲染、瓦片服务器、前端API，到桌面、Web地图设计工具，具有大量优秀的开源组件
 50 | 
 51 | ### OpenStreetMap生态圈
 52 | 
 53 | <img src="images/osm1.1.png"/><img src="images/osm1.2.png"/>
 54 | 
 55 | 
 56 | ## 搭建地图服务器
 57 | 
 58 | ### Windows下搭建OSM服务器的详细步骤
 59 | 
 60 | 目前网络上的例子，大多是在Linux下搭建OSM服务器。实际项目中由于客户现场环境的限制，可能必须使用Windows Server，故本文详细记录Windows下的搭建步骤，供各位参考。
 61 | 
 62 | * **系统架构**
 63 | 
 64 | <img src="images/osm_arch.png"/>
 65 | 上图中红色部分为本文主要使用的组件，我们把这些组件全部安装到一个目录%OSM_STACK%下
 66 | 
 67 | * **下载地图**
 68 | 
 69 | 区域地图，可从这里下载：[http://download.geofabrik.de/](http://download.geofabrik.de/)<br/>
 70 | 全球地图，可从这里下载：[http://ftp.heanet.ie/mirrors/openstreetmap.org/planet/2015/planet-150105.osm.bz2](http://ftp.heanet.ie/mirrors/openstreetmap.org/planet/2015/planet-150105.osm.bz2)
 71 | 
 72 | * **安装Python**
 73 | 
 74 | 安装Python 2.7.x到%OSM_STACK%\python，并加入PATH环境变量，下载地址：[https://www.python.org/ftp/python/2.7.9/python-2.7.9.msi](https://www.python.org/ftp/python/2.7.9/python-2.7.9.msi)<br/>
 75 | 为避免后续需要下载依赖的模块，可以安装便携版的Python，集成了很多常用模块，安装后把App目录里面的所有文件拷贝到%OSM_STACK%\python即可，下载地址：[http://ftp.osuosl.org/pub/portablepython/v2.7/PortablePython_2.7.6.1.exe](http://ftp.osuosl.org/pub/portablepython/v2.7/PortablePython_2.7.6.1.exe)
 76 | 
 77 | * **安装PostgreSQL和PostGIS**
 78 | 
 79 | 最好下载PostgreSQL 9.0以上或者 8.3版，8.4存在性能问题。<br/>
 80 | 9.4的下载地址：[http://get.enterprisedb.com/postgresql/postgresql-9.4.0-1-windows-binaries.zip](http://get.enterprisedb.com/postgresql/postgresql-9.4.0-1-windows-binaries.zip)<br/>
 81 | 解压到%OSM_STACK%\psql<br/>
 82 | 下载PostGIS：[http://download.osgeo.org/postgis/windows/pg94/](http://download.osgeo.org/postgis/windows/pg94/)<br/>
 83 | 解压覆盖到%OSM_STACK%\psql<br/>
 84 | 注意：上述的PostgreSQL是绿色版的，对MSVC12有C运行时库、C++标准库有依赖，如果你的机器缺少msvcp120.dll、msvcr120.dll这两个DLL，可以下载：Visual C++ Redistributable Packages for Visual Studio 2013并安装，亦可直接拷贝这两个文件到%OSM_STACK%\psql\bin下<br/>
 85 | 
 86 | 下面的脚本说明如何初始化PostgreSQL、创建用户gisuser、数据库gis、激活PostGIS：
 87 | ```
 88 | @echo off
 89 |  
 90 | pushd "%~dp0"
 91 |  
 92 | SET "PGDATA=%PSQL_HOME%\data"
 93 | SET "PGDATABASE=postgres"
 94 | SET "PGUSER=postgres"
 95 | SET "PGPORT=5439"
 96 | SET "PGLOCALEDIR=%PSQL_HOME%\share\locale"
 97 | rem GIS databse name and owner
 98 | SET "GISDATABASE=gis"
 99 | SET "GISUSER=gisuser"
100 |  
101 | echo ****** Prepare to initializing PostgreSQL  ****** 
102 | rem 初始化数据库，这将生成data目录，并且根据机器硬件环境生成配置文件
103 | initdb -U %PGUSER% -A trust
104 |  
105 | echo ****** Prepare to start PostgreSQL  ****** 
106 | rem 启动数据库，日志记录到pgsql.log，等待启动完成
107 | pg_ctl -w -l %PSQL_HOME%\pgsql.log start
108 |  
109 | echo ****** Creating user %GISUSER%  ****** 
110 | rem 创建GIS专门用户
111 | createuser -U %PGUSER% %GISUSER%
112 | echo ****** Creating database %GISDATABASE%  ****** 
113 | rem 创建GIS专用数据库
114 | createdb -U %PGUSER% -E UTF8 -O %GISUSER% %GISDATABASE%
115 | echo ****** Installing procedural language into %GISDATABASE%  ****** 
116 | rem 添加扩展
117 | createlang -U %PGUSER% plpgsql %GISDATABASE%
118 | echo ****** Activating PostGIS for %GISDATABASE%  ****** 
119 | rem 为GIS数据库激活PostGIS支持
120 | psql -U %PGUSER% -d %GISDATABASE% -f "%PSQL_HOME%\share\contrib\postgis-2.1\postgis.sql"
121 | psql -U %PGUSER% -d %GISDATABASE% -f "%PSQL_HOME%\share\contrib\postgis-2.1\spatial_ref_sys.sql"
122 | rem After the activation, the following command should list the tables geometry_columns and spatial_ref_sys:
123 | rem 下面这一句不能在UTF-8代码页下运行，会报内存不足的错误
124 | psql --username=%GISUSER% --dbname=%GISDATABASE% --command="\d"
125 | rem 停止数据库
126 | pg_ctl -w stop
127 | ```
128 | 
129 | 打开%OSM_STACK%\psql\data\postgresql.conf，修改以下参数，以提高性能（根据硬件配置调整）：
130 | 
131 | ```
132 | shared_buffers = 512MB  
133 | checkpoint_segments = 20  
134 | maintenance_work_mem = 256MB  
135 | autovacuum = off  
136 |  
137 | kernel.shmmax=536870912
138 | ```
139 | 
140 | * **导入地图到数据库**
141 | 
142 |  使用命令行工具osm2pgsql 可以把OpenStreetMap地图数据导入到启用了postGIS的PostgreSQL数据库中。尽管mapnik可以直接渲染OSM XML原始数据，但是导入PostGIS可以使用更多的高级特性。
143 | 从这里下载此工具：[http://customdebug.com/osm/osm2pgsql.zip](http://customdebug.com/osm/osm2pgsql.zip)
144 | 使用示例：
145 | ```
146 | osm2pgsql -c -d gis -U postgres -H localhost -P 5439 -S default.style  -C 600 beijing.osm.bz2
147 | ```
148 | default.style是 导入时需要的样式定义文件，内容如下：
149 | ```
150 | # OsmType  Tag          DataType     Flags
151 | node,way   access       text         linear
152 | node,way   addr:housename      text  linear
153 | node,way   addr:housenumber    text  linear
154 | node,way   addr:interpolation  text  linear
155 | node,way   admin_level  text         linear
156 | node,way   aerialway    text         linear
157 | node,way   aeroway      text         polygon
158 | node,way   amenity      text         polygon
159 | node,way   area         text         
160 | node,way   barrier      text         linear
161 | node,way   bicycle      text
162 | node,way   brand        text         linear
163 | node,way   bridge       text         linear
164 | node,way   boundary     text         linear
165 | node,way   building     text         polygon
166 | node       capital      text         linear
167 | node,way   construction text         linear
168 | node,way   covered      text         linear
169 | node,way   culvert      text         linear
170 | node,way   cutting      text         linear
171 | node,way   denomination text         linear
172 | node,way   disused      text         linear
173 | node       ele          text         linear
174 | node,way   embankment   text         linear
175 | node,way   foot         text         linear
176 | node,way   generator:source    text  linear
177 | node,way   harbour      text         polygon
178 | node,way   highway      text         linear
179 | node,way   historic     text         polygon
180 | node,way   horse        text         linear
181 | node,way   intermittent text         linear
182 | node,way   junction     text         linear
183 | node,way   landuse      text         polygon
184 | node,way   layer        text         linear
185 | node,way   leisure      text         polygon
186 | node,way   lock         text         linear
187 | node,way   man_made     text         polygon
188 | node,way   military     text         polygon
189 | node,way   motorcar     text         linear
190 | node,way   name         text         linear
191 | node,way   natural      text         polygon
192 | node,way   office       text         polygon
193 | node,way   oneway       text         linear
194 | node,way   operator     text         linear
195 | node,way   place        text         polygon
196 | node       poi          text
197 | node,way   population   text         linear
198 | node,way   power        text         polygon
199 | node,way   power_source text         linear
200 | node,way   public_transport text     polygon
201 | node,way   railway      text         linear
202 | node,way   ref          text         linear
203 | node,way   religion     text         nocache
204 | node,way   route        text         linear
205 | node,way   service      text         linear
206 | node,way   shop         text         polygon
207 | node,way   sport        text         polygon
208 | node,way   surface      text         linear
209 | node,way   toll         text         linear
210 | node,way   tourism      text         polygon
211 | node,way   tower:type   text         linear
212 | way        tracktype    text         linear
213 | node,way   tunnel       text         linear
214 | node,way   water        text         polygon
215 | node,way   waterway     text         polygon
216 | node,way   wetland      text         polygon
217 | node,way   width        text         linear
218 | node,way   wood         text         linear
219 | node,way   z_order      int4         linear
220 | way        way_area     real
221 | ```
222 | 
223 | * **安装mapnik**
224 | 
225 | 从[http://mapnik.org/download/](http://mapnik.org/download/)下载mapnik，解压到%OSM_STACK%\mapnik，将其bin、lib目录加入PATH环境变量，python\2.7\site-packages加入PYTHONPATH环境变量。<br/>
226 | 在mapnik中，一个Map可以包含若干个图层（Layer），每个层可以独立着色，即可为每个层定制样式（Style），每个样式由若干个规则组成（Rule），每个规则由是由若干个符号定制。
227 | 
228 | * **生成mapnik的样式文件**
229 | 
230 | 从[https://www.mapbox.com/tilemill/](https://www.mapbox.com/tilemill/)下载并安装TileMill，该工具用于编辑地图元素的样式，我们主要用它导出mapnik的样式文件。
231 | OpenStreetMap官方使用的样式托管在GitHub上：[https://github.com/gravitystorm/openstreetmap-carto](https://github.com/gravitystorm/openstreetmap-carto)。下载后解压到C:\Users\用户名\Documents\MapBox\project
232 | 打开Cygwin，或者在Linux下执行get-shapefiles.sh，下载并处理openstreetmap-cart中缺少的data目录：
233 | ```
234 | #以Cygwin为例
235 |  
236 | apt-cyg install curl
237 | apt-cyg install unzip
238 |  
239 | #编译gdal，在Ubuntu下只需要sudo apt-get install gdal-bin即可
240 | #你也可以到http://download.gisinternals.com/下载编译好的二进制文件供Cygwin使用
241 | wget http://download.osgeo.org/gdal/1.11.1/gdal-1.11.1.tar.gz
242 | tar vzxf gdal-1.11.1.tar.gz
243 | rm gdal-1.11.1.tar.gz
244 | cd gdal-1.11.1/
245 | ./autogen.sh
246 | ./configure --host=mingw32 --without-libtool --without-python
247 | make
248 | make install
249 |  
250 | cd /cygdrive/c/Users/Suigintou/Documents/MapBox/project/openstreetmap-carto-master
251 | ./get-shapefiles.sh
252 | #需要下载的数据较多，耐心等待
253 | #如果出现Failed to connect to planet.openstreetmap.org port 80: Network is unreachable，则添加下一行到host文件
254 | #193.63.75.107 planet.openstreetmap.org
255 | ```
256 | 下载、处理完成后，打开TileMill，可以看到OpenStreetMap Carto这个项目，点击打开，然后点击右上角按钮，导出mapnik样式文件，如下图：
257 | 
258 | <img src="images/tilemail.png"/>
259 | 
260 | 导出成功后，打开XML文件，搜寻里面的类似：“C:\Users\用户名\Documents\MapBox\project\osm-carto\……”绝对路径，将其删除，并把路径中剩余部分的反斜杠改为正斜杠，修改完毕后，路径类似：“data/simplified-land-polygons-complete-3857/simplified_land_polygons.shp”，把文件移动到%OSM_STACK%\osm-carto目录下。
261 | 把整个openstreetmap-carto-master目录（就是TileMill编辑的工程）覆盖到%OSM_STACK%\osm-carto。
262 | 
263 | * **安装和配置TileStache**
264 | 
265 | 安装便携版Python后，只需要执行下面的脚本：
266 | ```
267 | easy_install tilestache
268 |  
269 | rem 可能需要检查以下依赖模块是否安装
270 | easy_install PIL
271 | easy_install ModestMaps
272 | easy_install SimpleJSON
273 | ```
274 | 在Windows上，如果使用的是Python 2.7.6，需要修改一下__init__.py的源码，否则运行时会报错：<br/>
275 | UnicodeDecodeError: utf8 codec can't decode byte 0xb0 in position 1: invalid start byte，这是Python的一个BUG。
276 | ```
277 | import sys
278 | reload(sys) 
279 | sys.setdefaultencoding('gb18030') #添加上面三行即可
280 | config_dict = json_load(urlopen(configpath))
281 | ```
282 | 安装完毕后，通过下面的脚本即可启动TileStache的Web服务（基于 Werkzeug，一个WSGI工具库）：
283 | ```
284 | echo ****** Prepare to start TileStache  ****** 
285 | SET "TILE_STACHE_SCR=%PYTHON_HOME%\Scripts\tilestache-server.py"
286 |  
287 | python "%TILE_STACHE_SCR:\=/%"   -p 5539 -c tilestache.cfg
288 | ```
289 | 其中tilestache.cfg是TileStache使用的配置文件，我们先使用下面这个做测试：
290 | ```
291 | {
292 |   "_comment": "tilestache.cfg包含两个顶级元素，分别实现缓存、图层的配置"
293 |   "cache":
294 |   {
295 |     "name": "Disk",
296 |     "path": "F:/Temp/tiles-cache"
297 |   },
298 |   "layers": 
299 |   {
300 |     "osm":
301 |     {
302 |         "provider": {"name": "proxy", "provider": "OPENSTREETMAP"}
303 |     }
304 |   }
305 | }
306 | ```
307 | 启动TileStache后，可以通过以下几个URL来测试：
308 | <table>
309 | <thead>
310 | <th>URL</th>
311 | <th>说明</th>
312 | </thead>
313 | <tbody>
314 | <tr>
315 | <td>http://127.0.0.1:5539/osm/preview.html</td>
316 | <td>交互式的地图预览</td>
317 | </tr>
318 | <tr>
319 | <td>http://127.0.0.1:5539/osm/0/0/0.png</td>
320 | <td>
321 | 显示一个静态瓦片，TileStache的URL风格类似于Google地图：
322 | http://host:port/{layer name}/{zoom}/{column}/{row}.{extension} 
323 | </td>
324 | </tr>
325 | </tbody>
326 | </table>
327 | 
328 | * **集成TileStache与mapnik**
329 | 
330 | <img src="images/tsmap1.jpg"/><img src="images/tsmap2.jpg"/><img src="images/tsmap3.jpg"/><img src="images/tsmap4.jpg"/>
331 | 
332 | tilestache.cfg可以配置为这样：
333 | ```
334 | {
335 |   "cache":
336 |   {
337 |     "name": "Disk",
338 |     "path": "D:/Programs/OsmStack/tilestache/cache"
339 |   },
340 |   "layers": 
341 |   {
342 |     "osm":
343 |     {
344 |         "provider": {
345 |             "name": "mapnik", 
346 |             "mapfile": "file://D:/Programs/OsmStack/osm-carto/mapnik-style.xml",
347 |             "fonts" : "D:/Programs/OsmStack/mapnik/fonts"
348 |         },
349 |         "metatile" : {
350 |             "rows" : "4",
351 |             "columns" : "4",
352 |             "buffer" : "64"
353 |         },
354 |         "preview" : {
355 |             "lat" : "39.9396",
356 |             "lon" : "116.3488",
357 |             "zoom" : "12",
358 |             "ext" : "png"
359 |         }
360 |     }
361 |   }
362 | }
363 | ```
364 | 注意其中的mapfile对应的路径，必须从Windows路径格式改为URI形式，例如：D:\Programs\Osmstack 改为 file://D:/Programs/Osmstack<br/>
365 | tilestache.cfg改好后，启动TileStache Web服务，浏览器打开http://127.0.0.1:5539/osm/preview.html进行测试。
366 | 
367 | * **绿化批处理脚本示意**
368 | 
369 | 在Windows下，可以参考下面三个脚本，分别完成地图服务器的初始化、启动、停止：
370 | 
371 | init.bat
372 | ```
373 | @echo off
374 | chcp 437
375 | pushd "%~dp0"
376 |  
377 | set "OSMSTACK_HOME=%CD%"
378 | set "OSM_DIR=%OSMSTACK_HOME%\osm"
379 | set "MAPNIK_HOME=%OSMSTACK_HOME%\mapnik"
380 | set "PYTHON_HOME=%OSMSTACK_HOME%\python"
381 | set "PSQL_HOME=%OSMSTACK_HOME%\psql"
382 | set "OSM2PQSQL_HOME=%OSMSTACK_HOME%\osm2pgsql"
383 | set "PATH=%OSM2PQSQL_HOME%;%MAPNIK_HOME%\lib;%MAPNIK_HOME%\bin;%PSQL_HOME%\bin;%PYTHON_HOME%;%PYTHON_HOME%\Scripts;%PATH%"
384 | set "PYTHONPATH=%MAPNIK_HOME%\python\2.7\site-packages;%PYTHONPATH%"
385 |  
386 | SET "PGDATA=%PSQL_HOME%\data"
387 | SET "PGDATABASE=postgres"
388 | SET "PGUSER=postgres"
389 | SET "PGPORT=5432"
390 | SET "PGLOCALEDIR=%PSQL_HOME%\share\locale"
391 | rem GIS databse name and owner
392 | SET "GISDATABASE=gis"
393 | SET "GISUSER=gisuser"
394 |  
395 | echo ****** Prepare to initializing PostgreSQL  ****** 
396 | initdb -U %PGUSER% --auth=trust --auth-host=trust --auth-local=trust --pwprompt -E UTF8
397 | copy %PSQL_HOME%\postgresql.conf %PSQL_HOME%\data\postgresql.conf /y
398 |  
399 | echo ****** Prepare to start PostgreSQL  ****** 
400 | pg_ctl -w -l %PSQL_HOME%\pgsql.log start
401 |  
402 | echo ****** Creating user %GISUSER%  ****** 
403 | createuser -U %PGUSER% -P %GISUSER%
404 | echo ****** Creating database %GISDATABASE%  ****** 
405 | createdb -U %PGUSER% -E UTF8 -O %GISUSER% %GISDATABASE%
406 | echo ****** Installing procedural language into %GISDATABASE%  ****** 
407 | createlang -U %PGUSER% plpgsql %GISDATABASE%
408 | echo ****** Activating PostGIS for %GISDATABASE%  ****** 
409 |  
410 | psql -U %PGUSER% -d %GISDATABASE% -f "%PSQL_HOME%\share\contrib\postgis-2.1\postgis.sql"
411 | psql -U %PGUSER% -d %GISDATABASE% -f "%PSQL_HOME%\share\contrib\postgis-2.1\spatial_ref_sys.sql"
412 | rem After the activation, the following command should list the tables geometry_columns and spatial_ref_sys:
413 | psql --username=%GISUSER% --dbname=%GISDATABASE% --command="\d"
414 |  
415 | echo ****** Installing extension hstore for %GISDATABASE%  ****** 
416 | echo create extension hstore; | psql -U %PGUSER% -d %GISDATABASE%
417 |  
418 |  
419 | echo ****** Import OSM data into %GISDATABASE%  ****** 
420 | echo Please input osm package name ( without suffix '.osm.bz2' ), Press Enter to skip : 
421 | set /p OSM_NAME=
422 | if defined OSM_NAME (
423 |     osm2pgsql -c -d gis -U %PGUSER% -H localhost -P %PGPORT%  --hstore -S %OSM2PQSQL_HOME%\openstreetmap-carto.style  -C 600 %OSM_DIR%\%OSM_NAME%.osm.bz2
424 | )
425 |  
426 | echo ****** Processing TilesTache config file ****** 
427 | set __OSM_PATH=%~p0
428 | set __OSM_PATH=%__OSM_PATH:\=/%
429 | python "tilestache/generate-cfg.py" %__OSM_PATH%
430 |  
431 | echo ****** Prepare to stop PostgreSQL  ****** 
432 | pg_ctl -w stop
433 |  
434 | :end
435 | ```
436 | 
437 | startup.bat
438 | ```
439 | @echo off
440 | chcp 437
441 | pushd "%~dp0"
442 |  
443 | set "OSMSTACK_HOME=%CD%"
444 | set "OSM_DIR=%OSMSTACK_HOME%\osm"
445 | set "MAPNIK_HOME=%OSMSTACK_HOME%\mapnik"
446 | set "PYTHON_HOME=%OSMSTACK_HOME%\python"
447 | set "PSQL_HOME=%OSMSTACK_HOME%\psql"
448 | set "OSM2PQSQL_HOME=%OSMSTACK_HOME%\osm2pgsql"
449 | set "PATH=%OSM2PQSQL_HOME%;%MAPNIK_HOME%\lib;%MAPNIK_HOME%\bin;%PSQL_HOME%\bin;%PYTHON_HOME%;%PYTHON_HOME%\Scripts;%PATH%"
450 | set "PYTHONPATH=%MAPNIK_HOME%\python\2.7\site-packages;%PYTHONPATH%"
451 |  
452 |  
453 | SET "PGDATA=%PSQL_HOME%\data"
454 | SET "PGDATABASE=postgres"
455 | SET "PGUSER=postgres"
456 | SET "PGPORT=5432"
457 | SET "PGLOCALEDIR=%PSQL_HOME%\share\locale"
458 |  
459 | echo ****** Prepare to start PostgreSQL  ****** 
460 | pg_ctl  -w  -l%PSQL_HOME%\pgsql.log start
461 |  
462 | echo ****** Prepare to start TileStache  ****** 
463 | SET "TILE_STACHE_SCR=%PYTHON_HOME%\Scripts\tilestache-server.py"
464 |  
465 | python "%TILE_STACHE_SCR:\=/%"  -i 0.0.0.0 -p 5539 -c tilestache/osm.cfg
466 | ```
467 | 
468 | shutdown.bat
469 | ```
470 | @echo off
471 | chcp 437
472 | pushd "%~dp0"
473 |  
474 | set "OSMSTACK_HOME=%CD%"
475 | set "MAPNIK_HOME=%OSMSTACK_HOME%\mapnik"
476 | set "PYTHON_HOME=%OSMSTACK_HOME%\python"
477 | set "PSQL_HOME=%OSMSTACK_HOME%\psql"
478 | set "PATH=%MAPNIK_HOME%\lib;%MAPNIK_HOME%\bin;%PSQL_HOME%\bin;%PYTHON_HOME%;%PATH%"
479 |  
480 | SET "PGDATA=%PSQL_HOME%\data"
481 | SET "PGDATABASE=postgres"
482 | SET "PGUSER=postgres"
483 | SET "PGPORT=5432"
484 | SET "PGLOCALEDIR=%PSQL_HOME%\share\locale"
485 |  
486 | echo ****** Prepare to stop PostgreSQL  ****** 
487 | pg_ctl -w stop
488 | ```
489 | 
490 | 
491 | > 以下是着重要学习的！！！
492 | 
493 | ## 通过前端API使用OSM瓦片
494 | 
495 | ### 使用OpenLayers
496 | 
497 | OpenLayers很久以来一直是在网页中嵌入OSM地图的标准选择，它是一个成熟、综合的JS库，学习曲线较为平缓，提供大量的特性，包括完整的投影支持（full projection support）、矢量绘图、预览地图（overview maps）等等。
498 | 
499 | 下面是一个简单的例子：
500 | ```
501 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
502 | <!doctype html>
503 | <html lang="en">
504 | <head>
505 |     <link rel="stylesheet" href="openlayers3/ol.css" type="text/css">
506 |     <style>
507 |         html, body{ margin:0; height:100%; }
508 |         #mapdiv { width:100%; height:100%; }
509 |     </style>
510 |     <script src="openlayers3/ol.js" type="text/javascript"></script>
511 |     <title>OpenLayers3 Example</title>
512 | </head>
513 | <body>
514 |  
515 | <div id="mapdiv" ></div>
516 | <script type="text/javascript">
517 |     //定义一个矢量图像
518 |     var image = new ol.style.Circle({
519 |         radius: 5,
520 |         fill: new ol.style.Stroke({color: '#F00'}),
521 |         stroke: new ol.style.Stroke({color: '#000', width: 1})
522 |     });
523 |     //定义样式
524 |     var styles = {
525 |         'Point': [new ol.style.Style({
526 |             image: image
527 |         })],
528 |         'Polygon': [new ol.style.Style({
529 |             stroke: new ol.style.Stroke({
530 |                 color: '#00F',
531 |                 lineDash: [2],
532 |                 width: 1
533 |             }),
534 |             fill: new ol.style.Fill({
535 |                 color: 'rgba(0, 0, 255, 0.1)'
536 |             })
537 |         })]
538 |     };
539 |     //定义一个矢量图层
540 |     var vectorSource = new ol.source.GeoJSON(
541 |     ({
542 |         object: {
543 |             'type': 'FeatureCollection',
544 |             //坐标参考系（Coordinate Reference Systems）
545 |             'crs': {
546 |                 'type': 'name',
547 |                 'properties': {
548 |                     'name': 'EPSG:3857'
549 |                 }
550 |             },
551 |             'features': [
552 |                 //画一个点
553 |                 {
554 |                     'type': 'Feature',
555 |                     'geometry': {
556 |                         'type': 'Point',
557 |                         //坐标系转换：
558 |                         //EPSG:4326，直接把经纬度作为X、Y方向的坐标值，南纬、西经为负数
559 |                         //EPSG:3857，球面墨卡托投影，以米为单位，以前叫EPSG:900931
560 |                         'coordinates': ol.proj.transform([ 116.34430, 39.94225], 'EPSG:4326', 'EPSG:3857')
561 |                     }
562 |                 },
563 |                 //画一个五边形
564 |                 {
565 |                     'type': 'Feature',
566 |                     'geometry': {
567 |                         'type': 'Polygon',
568 |                         'coordinates': [
569 |                             [
570 |                                 ol.proj.transform([ 116.1007694, 40.2551712], 'EPSG:4326', 'EPSG:3857'),
571 |                                 ol.proj.transform([ 117.2687534, 40.3578032], 'EPSG:4326', 'EPSG:3857'),
572 |                                 ol.proj.transform([ 117.5886384, 39.2306078], 'EPSG:4326', 'EPSG:3857'),
573 |                                 ol.proj.transform([ 116.9843903, 38.42073], 'EPSG:4326', 'EPSG:3857'),
574 |                                 ol.proj.transform([ 115.5792222, 39.1692678], 'EPSG:4326', 'EPSG:3857')
575 |                             ]
576 |                         ]
577 |                     }
578 |                 },
579 |             ]
580 |         }
581 |     }));
582 |  
583 |     var styleFunction = function (feature, resolution) {
584 |         return styles[feature.getGeometry().getType()];
585 |     };
586 |     //定义一个矢量图层
587 |     var vectorLayer = new ol.layer.Vector({
588 |         source: vectorSource,
589 |         style: styleFunction//寻找样式定义的回调函数
590 |     });
591 |     //定义一个地图
592 |     var map = new ol.Map({
593 |         target: 'mapdiv', //渲染目标
594 |         //图层列表，包含一个光栅图层，一个矢量图层
595 |         layers: [
596 |             new ol.layer.Tile({
597 |                 source: new ol.source.XYZ({
598 |                     url: 'http://192.168.0.89:5539/osm/{z}/{x}/{y}.png'
599 |                 }),
600 |             }),
601 |             vectorLayer
602 |         ],
603 |         //视角：缩放级别7，以北二环为中心
604 |         view: new ol.View({
605 |             center: ol.proj.transform([116.34430, 39.94225], 'EPSG:4326', 'EPSG:3857'),
606 |             zoom: 7
607 |         })
608 |     });
609 | </script>
610 | </body>
611 | </html>
612 | ```
613 | 
614 | ### 使用Leaflet
615 | 
616 | Leaflet是一个近来迅速流行的JavaScript库，比起OpenLayers它更小小巧、简单，对于简单寻常的需求，Leaflet是个好的选择。
617 | 
618 | 下面是一个简单的例子：
619 | ```
620 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
621 | <!DOCTYPE HTML>
622 | <html>
623 | <head>
624 |     <title>Leaflet Example</title>
625 |     <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />
626 |     <script type="text/javascript" src="leaflet/leaflet-src.js"></script>
627 |     <script type="text/javascript">
628 |         var map;
629 |  
630 |         function init() {
631 |             // 在一个DIV中创建地图对象
632 |             map = new L.Map('mapdiv');
633 |     
634 |             // 创建瓦片图层
635 |             var osmUrl='http://192.168.0.89:5539/osm/{z}/{x}/{y}.png';
636 |             var osmAttrib='Kingsmart Tech';
637 |             var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 18, attribution: osmAttrib});       
638 |     
639 |             // 地图中心设置为西北二环附近
640 |             map.setView(new L.LatLng( 39.94225, 116.34430 ),12);
641 |             map.addLayer(osm);//添加图层
642 |             
643 |             //在地图上添加标记
644 |             var plot = {
645 |                 "name":"金名科技",
646 |                 "lon":"116.34430",
647 |                 "lat":"39.94225",
648 |                 "details":"金名科技是座落于海淀区高粱桥斜街59号院的高新技术企业"
649 |             };
650 |             var plotll = new L.LatLng( plot.lat, plot.lon, true );//标记的坐标
651 |             var mark = new L.Marker(plotll);
652 |             mark.data = plot;
653 |             map.addLayer(mark);//添加标记到地图
654 |             mark.bindPopup("<h4>" + plot.name + "</h4>" + plot.details);//绑定提示框
655 |             
656 |             //在地图上添加一个多边形
657 |             var latlngs = [
658 |                 new L.LatLng( 39.931064087073835, 116.3481330871582),    
659 |                 new L.LatLng( 39.9600172003783, 116.32684707641602),   
660 |                 new L.LatLng( 39.99264056247673, 116.37628555297852 ),   
661 |                 new L.LatLng( 39.97922477476731, 116.46417617797852 ),   
662 |                 new L.LatLng( 39.90657598772841, 116.45936965942383),   
663 |                 new L.LatLng( 39.87338459498892, 116.36838912963867),   
664 |                 new L.LatLng( 39.931064087073835, 116.3481330871582)
665 |             ];
666 |             var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
667 |         }
668 |     </script>
669 |  
670 |     <style>
671 |     html, body{ margin:0; height:100%; }
672 |     #mapdiv { width:100%; height:100%; }
673 |     div.olControlAttribution { bottom:3px; }
674 |     </style>
675 |  
676 | </head>
677 |  
678 | <body onload="init();">
679 |     <div id="mapdiv"></div>
680 | </body>
681 | </html>
682 | ```
683 | 
684 | 原文：https://blog.gmem.cc/setup-openstreetmap-server
685 | 


--------------------------------------------------------------------------------
/images/0.7和1.0在栅格图层的差异.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/0.7和1.0在栅格图层的差异.png


--------------------------------------------------------------------------------
/images/0.7和1.0在矢量图层的差异.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/0.7和1.0在矢量图层的差异.png


--------------------------------------------------------------------------------
/images/Class_Map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/Class_Map.png


--------------------------------------------------------------------------------
/images/OpenLayers_3_API_Reference_Index.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/OpenLayers_3_API_Reference_Index.png


--------------------------------------------------------------------------------
/images/leaflet-pip-v2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/leaflet-pip-v2.png


--------------------------------------------------------------------------------
/images/leaflet-pip.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/leaflet-pip.png


--------------------------------------------------------------------------------
/images/map1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/map1.png


--------------------------------------------------------------------------------
/images/map_structure.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/map_structure.png


--------------------------------------------------------------------------------
/images/ol3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/ol3.jpg


--------------------------------------------------------------------------------
/images/osm-wiki.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/osm-wiki.png


--------------------------------------------------------------------------------
/images/osm1.1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/osm1.1.png


--------------------------------------------------------------------------------
/images/osm1.2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/osm1.2.png


--------------------------------------------------------------------------------
/images/osm_arch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/osm_arch.png


--------------------------------------------------------------------------------
/images/schema6_2014p.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/schema6_2014p.pdf


--------------------------------------------------------------------------------
/images/schema6_2014p.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/schema6_2014p.png


--------------------------------------------------------------------------------
/images/tilemail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/tilemail.png


--------------------------------------------------------------------------------
/images/tsmap1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/tsmap1.jpg


--------------------------------------------------------------------------------
/images/tsmap2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/tsmap2.jpg


--------------------------------------------------------------------------------
/images/tsmap3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/tsmap3.jpg


--------------------------------------------------------------------------------
/images/tsmap4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/tsmap4.jpg


--------------------------------------------------------------------------------
/images/world.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/world.png


--------------------------------------------------------------------------------
/images/zhanlijun.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/images/zhanlijun.png


--------------------------------------------------------------------------------
/openlayer/README.md:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/openlayer/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/openlayer/images/logo.jpg


--------------------------------------------------------------------------------
/openlayer/index.html:
--------------------------------------------------------------------------------
  1 | <!Doctype html>
  2 | <html xmlns=http://www.w3.org/1999/xhtml>
  3 | <head>
  4 |     <meta http-equiv=Content-Type content="text/html;charset=utf-8">
  5 |     <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
  6 |     <meta content=always name=referrer>
  7 |     <title>OpenLayers 3地图示例</title>
  8 |     <link href="v3.19.1-dist/ol.css" rel="stylesheet" type="text/css"/>
  9 |     <script type="text/javascript" src="v3.19.1-dist/ol-debug.js" charset="utf-8"></script>
 10 | 
 11 |     <!--定义动画，图标先放大，再缩小-->
 12 |     <style type="text/css">
 13 |         @keyframes zoom {
 14 |             from {
 15 |                 top: 0;
 16 |                 left: 0;
 17 |                 width: 32px;
 18 |                 height: 32px;
 19 |             }
 20 |             50% {
 21 |                 top: -16px;
 22 |                 left: -16px;
 23 |                 width: 64px;
 24 |                 height: 64px;
 25 |             }
 26 |             to {
 27 |                 top: 0;
 28 |                 left: 0;
 29 |                 width: 32px;
 30 |                 height: 32px;
 31 |             }
 32 |         }
 33 | 
 34 |         @-moz-keyframes zoom /* Firefox */
 35 |         {
 36 |             from {
 37 |                 top: 0;
 38 |                 left: 0;
 39 |                 width: 32px;
 40 |                 height: 32px;
 41 |             }
 42 |             50% {
 43 |                 top: -16px;
 44 |                 left: -16px;
 45 |                 width: 64px;
 46 |                 height: 64px;
 47 |             }
 48 |             to {
 49 |                 top: 0;
 50 |                 left: 0;
 51 |                 width: 32px;
 52 |                 height: 32px;
 53 |             }
 54 |         }
 55 | 
 56 |         @-webkit-keyframes zoom /* Safari 和 Chrome */
 57 |         {
 58 |             from {
 59 |                 top: 0;
 60 |                 left: 0;
 61 |                 width: 32px;
 62 |                 height: 32px;
 63 |             }
 64 |             50% {
 65 |                 top: -16px;
 66 |                 left: -16px;
 67 |                 width: 64px;
 68 |                 height: 64px;
 69 |             }
 70 |             to {
 71 |                 top: 0;
 72 |                 left: 0;
 73 |                 width: 32px;
 74 |                 height: 32px;
 75 |             }
 76 |         }
 77 | 
 78 |         @-o-keyframes zoom /* Opera */
 79 |         {
 80 |             from {
 81 |                 top: 0;
 82 |                 left: 0;
 83 |                 width: 32px;
 84 |                 height: 32px;
 85 |             }
 86 |             50% {
 87 |                 top: -16px;
 88 |                 left: -16px;
 89 |                 width: 64px;
 90 |                 height: 64px;
 91 |             }
 92 |             to {
 93 |                 top: 0;
 94 |                 left: 0;
 95 |                 width: 32px;
 96 |                 height: 32px;
 97 |             }
 98 |         }
 99 | 
100 |         /* 应用css动画到图标元素上 */
101 |         #anchorImg {
102 |             display: block;
103 |             position: absolute;
104 |             animation: zoom 5s;
105 |             animation-iteration-count: infinite; /* 一直重复动画 */
106 |             -moz-animation: zoom 5s; /* Firefox */
107 |             -moz-animation-iteration-count: infinite; /* 一直重复动画 */
108 |             -webkit-animation: zoom 5s; /* Safari 和 Chrome */
109 |             -webkit-animation-iteration-count: infinite; /* 一直重复动画 */
110 |             -o-animation: zoom 5s; /* Opera */
111 |             -o-animation-iteration-count: infinite; /* 一直重复动画 */
112 |         }
113 |     </style>
114 | </head>
115 | 
116 | <body>
117 | <input type="text"/>
118 | <button>Search</button>
119 | <div id="map" style="width:80%;height: 600px;"></div>
120 | <div id="anchor" style="width: 10px;height: 10px;">
121 |     <img id='anchorImg' src="images/logo.jpg" alt="示例锚点"/>
122 | </div>
123 | <script>
124 |     // 创建地图
125 |     var map = new ol.Map({
126 |         // 在默认控件的基础上，再加上其他内置的控件
127 |         controls: ol.control.defaults().extend([
128 |             new ol.control.FullScreen(),
129 |             new ol.control.MousePosition(),
130 |             new ol.control.OverviewMap(),
131 |             new ol.control.ScaleLine(),
132 |             new ol.control.ZoomSlider(),
133 |             new ol.control.ZoomToExtent()
134 |         ]),
135 |         logo: {src: 'images/logo.jpg', href: 'https://github.com/RLwu'},
136 |         // 设置地图图层
137 |         layers: [
138 |             // 创建一个使用Open Street Map地图源的瓦片图层
139 |             new ol.layer.Tile({source: new ol.source.OSM()})
140 |         ],
141 |         // 让id为map的div作为地图的容器
142 |         target: 'map',
143 |         // 设置显示地图的视图
144 |         view: new ol.View({
145 |             // 设置地图中心范围,extent参数类型为[minX, minY, maxX, maxY]的ol.Extent
146 | //            extent: [102, 29, 104, 31],
147 | //            // center: [0, 0],    // 定义地图显示中心于经度/纬度(北京天安门)
148 | //            center: ol.proj.transform([116.403875, 39.915168], 'EPSG:4326', 'EPSG:3857'),
149 | //            zoom: 10,         // 并且定义地图显示层级为10
150 | //            minZoom: 10,
151 | //            maxZoom: 14
152 |             projection: 'EPSG:4326',
153 |             center: [116.2652, 39.5614],
154 |             zoom: 10
155 |         })
156 |     });
157 | 
158 |     var anchor = new ol.Overlay({
159 |         element: document.getElementById('anchor')
160 |     });
161 |     anchor.setPosition([116.4471924, 39.9259681]);
162 |     map.addOverlay(anchor);
163 | 
164 |     // 添加一个绘制的线使用的layer
165 |     var lineLayer = new ol.layer.Vector({
166 |         source: new ol.source.Vector(),
167 |         style: new ol.style.Style({
168 |             stroke: new ol.style.Stroke({
169 |                 color: 'red',
170 |                 size: 1
171 |             })
172 |         })
173 |     })
174 |     map.addLayer(lineLayer);
175 |     var lineDraw = new ol.interaction.Draw({
176 |         type: 'MultiPolygon',
177 |         source: lineLayer.getSource(),    // 注意设置source，这样绘制好的线，就会添加到这个source里
178 |         style: new ol.style.Style({
179 |         // 设置绘制时的样式
180 |             stroke: new ol.style.Stroke({
181 |                 color: 'green',
182 |                 size: 8
183 |             })
184 |         }),
185 |         maxPoints: 4    // 限制不超过4个点
186 |     });
187 | 
188 |     // 监听线绘制结束事件，获取坐标
189 |     lineDraw.on('drawend', function (event) {
190 |         // event.feature 就是当前绘制完成的线的Feature
191 |         document.getElementById('points').innerHTML = JSON.stringify(event.feature.getGeometry().getCoordinates());
192 |     });
193 | 
194 |     map.addInteraction(lineDraw);
195 | 
196 | </script>
197 | </body>
198 | 
199 | </html>


--------------------------------------------------------------------------------
/openlayer/v3.19.1-dist.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RLwu/GIS/aa4497d4ae3549925e51ddd06220884df8bdb533/openlayer/v3.19.1-dist.zip


--------------------------------------------------------------------------------
/openlayer/v3.19.1-dist/ol.css:
--------------------------------------------------------------------------------
1 | .ol-control,.ol-scale-line{position:absolute;padding:2px}.ol-box{box-sizing:border-box;border-radius:2px;border:2px solid #00f}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}.ol-overlay-container{will-change:left,right,top,bottom}.ol-unsupported{display:none}.ol-viewport .ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-control{background-color:rgba(255,255,255,.4);border-radius:4px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:rgba(0,60,136,.7)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}


--------------------------------------------------------------------------------