一、MapGIS 创建地图文档

地图文档类似一个项目，在地图文档中可以添加多个图层（二维平面地图）和场景（三维），以树状结构显示

1、创建GDB数据库

2、加载矢量地图文档 - 图1
01.png
01.png
01.png
01.png
2、加载矢量地图文档 - 图6

2、创建要素类

01.png
2、加载矢量地图文档 - 图8
2、加载矢量地图文档 - 图9

一定选择WGS84世界大地坐标系

2、加载矢量地图文档 - 图10
2、加载矢量地图文档 - 图11

3、编辑图层

在地图下创建新的图层(直接将要素类拖到编辑区), 双击激活, 设置为当前编辑
2、加载矢量地图文档 - 图12

之后点击点编辑,造子图 Tips:在经度30，纬度30左右添加一个点

4、保存地图文档

通过开始->另存为保存地图文档
2、加载矢量地图文档 - 图13

二、Server Manager 发布地图文档

image.png
image.png
image.png

三、web访问

  1. http://develop.smaryun.com:81/API/JS/IGS%20JavaScript%20API%20v02/index.htm#id_2
  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.     <script src="lib/include-openlayers-local.js"></script>
  9. </head>
  10. <body>
  11.      //1、创建地图容器
  12.     <div id="map_container">
  14.     </div>
  15.     <script>
  16.        //2、实例化地图文档图层
  17.         const docLayer = new Zondy.Map.Doc('','doc',{
  18.             host:'localhost',
  19.             port:6163
  20.         })
  21.         //3、实例化map对象
  22.         const map = new ol.Map({
  23.             target:'map_container',
  24.             layers:[docLayer],
  25.             view:new ol.View({
  26.                 projection:'EPSG:4326',
  27.                 center:[0,0],
  28.                 zoom:2
  29.             })
  30.         })
  31.     </script>
  32. </body>
  33. </html>
  1. 1、创建地图容器
  2. 2、实例化图层
  3. 3、实例化地图对象(容器,图层,视图)

四、瓦片图(地图)+矢量图(地图文档)

  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.     <script src="lib/include-openlayers-local.js"></script>
  9. </head>
  10. <body>
  11.     <!-- 1、创建容器装载地图 -->
  12.     <div id="map_container">
  14.     </div>
  15.     <script>
  16.         /* 2、实例化瓦片图层,和地图文档图层 */
  17.         const tileLayer = new Zondy.Map.TileLayer('','testworld',{
  18.             host:'localhost',
  19.             port:6163
  20.         })
  21.         const docLayer = new Zondy.Map.Doc('','doc',{
  22.             host:'localhost',
  23.             port:6163
  24.         })
  25.         /* 3、实例化地图  */
  26.         const map = new ol.Map({
  27.             target:'map_container',
  28.             layers:[tileLayer,docLayer],
  29.             view:new ol.View({
  30.                 projection:'EPSG:4326',
  31.                 center:[0,0],
  32.                 zoom:2
  33.             })
  34.         })
  35.     </script>
  36. </body>
  37. </html>