1. 1、MapGIS 数据处理  -瓦片裁剪
  2. 2、IG Server发布服务
  3. 3、JS SDK对接IG Server

一、MapGIS 裁剪瓦片

使用MapGIS桌面端软件裁剪瓦片

1、将Sample中world拖入新地图

01.png

2、选择工具->瓦片裁剪

02.png

A、配置裁剪信息

裁图策略：选择经纬度
1、加载瓦片 - 图3

B、配置图层信息

将地图左上角：设置为原点坐标
1、加载瓦片 - 图4

C、配置保存路径及设置数据格式

03.png

03.png
image.png

二、IG Server 发布瓦片

使用IG Server Manager发布瓦片数据集
通过浏览器访问localhost:9999登录后台，通过发布服务发布瓦片数据。
image.png
image.png
image.png
image.png

三、集成客户端

将下载的webSDK解压,将dist目录中的内容放到lib目录下
image.png
步骤

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 1、加载ol.js库 -->
  9.     <script src="lib/include-openlayers-local.js"></script>
  10. </head>
  11. <body>
  12.     <!-- 2、创建地图容器 -->
  13.     <div id="map_container"></div>
  14.     <script>
  15.        /* 3、实例化地图容器加载瓦片图层 */
  16.       /* 3-1 创建瓦片图层 */
  17.         const tileLayer= new Zondy.Map.TileLayer('','testworld',{
  18.             ip:'localhost',
  19.             port:6163
  20.         })
  21.         console.log(tileLayer)
  22.         /* 3-2 添加瓦片图层到地图容器 */
  23.         const map = new ol.Map({
  24.             /* 目标元素 */
  25.             target:'map_container',
  26.             /* 图层 */
  27.             layers:[tileLayer],
  28.             /* 视图  怎么去显示地图,以什么方式去显示地图 */
  29.             view:new ol.View({
  30.                 /* 参考坐标系 */
  31.                 projection:'EPSG:4326',
  32.                 /* 中心点 */
  33.                 center:[0,0],
  34.                 /* 当前显示级数 */
  35.                 zoom:1
  36.             })
  37.         })
  38.     </script>
  39. </body>
  40. </html>

中地瓦片
EPSG

世界地图EPSG:4326在世界地图方面，EPSG:4326是比较著名的一个，因为由美国主导的GPS系统就是在用它，它还有一个名气更大的别名叫作WGS84，WGS(World Geodetic System)是世界大地测量系统的意思，由于是1984年定义的，所以叫WGS84

3.1 EPSG:4326 (WGS84)
前面说了 WGS84 是目前最流行的地理坐标系统。在国际上，每个坐标系统都会被分配一个 EPSG 代码，EPSG:4326 就是 WGS84 的代码。GPS是基于WGS84的，所以通常我们得到的坐标数据都是WGS84的。一般我们在存储数据时，仍然按WGS84存储。

四、通过map的方法操作图层

主要实现图层的添加和删除

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 1、加载ol库 -->
  9.     <script src="lib/include-openlayers-local.js"></script>
  10. </head>
  11. <body>
  12.     <!-- 2、创建地图容器 -->
  13.     <div id="map_container">
  14.         <button onclick="addLayer()">添加图层</button>
  15.         <button onclick="removeLayer()">删除图层</button>
  16.     </div>
  17.     <!-- 3、实例化对象 -->
  18.     <script>
  19.         /* 4、创建瓦片图层 */
  20.         const tileLayer = new Zondy.Map.TileLayer('','testworld',{
  21.             ip:'localhost',
  22.             port:6163
  23.         })
  24.         const map = new ol.Map({
  25.             /* 目标元素 */
  26.             target:'map_container',
  27.             /* 图层 */
  28.             layers:[tileLayer],
  29.             /* 视图 */
  30.             view:new ol.View({
  31.                 projection:'EPSG:4326',
  32.                 /* 中心点 */
  33.                 center:[0,0],
  34.                 zoom:1
  35.             })
  36.         })
  37.         function addLayer(){
  38.             map.addLayer(tileLayer)
  39.         }
  40.         function removeLayer(){
  41.             map.removeLayer(tileLayer)
  42.         }
  43.     </script>
  44. </body>
  45. </html>