一、MapGIS创建线要素

  1. 设置name和length两个字段

image.png

二、绘制从北京到广州的线 （铁路）

  1. 北京 (116.30 , 39.90)
  2. 广州 (112.57 , 22.26)

image.png
之后点击开始的保存，然后在IG Server中重载一下
image.png

image.png

三、点击事件实现从武汉到成都的铁路

  1. 武汉   [114,30]
  2. 成都     [104.07,30.67]
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <!-- 1、加载ol库 -->
  10.     <script src="../lib/include-openlayers-local.js"></script>
  11.     <script src="../js/Gaode.js"></script>
  12. </head>
  14. <body>
  15.     <!-- 2、创建地图容器 -->
  16.     <button onclick="addLine()">添加</button>
  17.     <div id="map_container">
  19.     </div>
  20.     <!-- 3、实例化对象 -->
  22.     <script>
  23.         const docLayer = new Zondy.Map.Doc('', 'd_city', {
  24.             ip: 'localhost',
  25.             port: 6163
  26.         })
  27.         const map = new ol.Map({
  28.             target: 'map_container',
  29.             layers: [gaode, docLayer],
  30.             view: new ol.View({
  31.                 projection: 'EPSG:4326',
  32.                 center: [114, 30],
  33.                 zoom: 4
  34.             })
  35.         })
  36.         /* 添加一个线到数据库 */
  37.         function addLine(){
  38.             /* 2.1 构建几何信息 */
  39.             var pointObj = []
  40.             pointObj[0] = new Zondy.Object.Point2D(114,30);
  41.             pointObj[1] = new Zondy.Object.Point2D(104.07,30.67);
  42.             /* 构成折线的弧度 */
  43.             var gArc = new Zondy.Object.Arc(pointObj);
  44.             /* 构成线的折线 */
  45.             var gAnyLine = new Zondy.Object.AnyLine([gArc])
  46.             /* 设置线要素的几何信息 */
  47.             var gLine = new Zondy.Object.GLine(gAnyLine)
  48.             /* 设置要素的几何信息 */
  49.             var fGeom = new Zondy.Object.FeatureGeometry({LinGeom:[gLine]})
  50.             /* 2.2 设置而样式信息 */
  51.             //设置添加线要素的图形参数信息
  52.             var clineInfo =  new Zondy.Object.CLineInfo({
  53.                 Color:1, //子图的颜色号
  54.                 LinStyleID:0,
  55.                 LinStyleID2:19,
  56.                 LinWidth:0.1, //线宽
  57.                 Xscale:10,
  58.                 Yscale:10
  59.             })
  60.             //设置要素的图形参数
  61.             var graphicInfo = new Zondy.Object.WebGraphicsInfo({
  62.                 InfoType:2, //线
  63.                 LinInfo:clineInfo
  64.             })
  65.             /* 2.3 设置属性信息 */
  66.             var attValue = ['武广线',1289]
  67.             /* 2.4  构建要素类*/
  68.             //创建一个线要素
  69.             var newFeature = new Zondy.Object.Feature({
  70.                 fGeom:fGeom,
  71.                 GraphicInfo:graphicInfo,
  72.                 AttValue:attValue
  73.             })
  74.             //设置要为线要素
  75.             newFeature.setFType(2)
  76.             /* 2.5 设置要素集 */
  77.             //创建一个要素数据集
  78.             var featureSet = new Zondy.Object.FeatureSet();
  79.             //创建属性结构设置对象
  80.             var cAttStruct = new Zondy.Object.CAttStruct({
  81.                 FldName:['name','length'],
  82.                 FldNumber:2,
  83.                 FldType:['string','double ']
  84.             })
  85.             //设置要素数据集的属性结构
  86.             featureSet.AttStruct = cAttStruct;
  87.             //将添加的线要素添加到属性数据集中
  88.             featureSet.addFeature(newFeature);
  89.             /* 2.6 调用地图编辑服务接口 */
  90.             //创建一个地图编辑对象
  91.             var editDocFeature = new Zondy.Service.EditDocFeature('d_city',0,{
  92.                 ip:'localhost',
  93.                 port:'6163'
  94.             })
  95.             editDocFeature.add(featureSet,onLineSuccess)
  96.         }
  97.         function onLineSuccess(data) {
  98.             if (data.succeed) {
  99.                 alert('添加成功')
  100.                 docLayer.refresh(); //重新加载地图文档
  101.             } else {
  102.                 alert('添加点要素失败')
  103.             }
  104.         }
  105.     </script>
  106. </body>
  108. </html>