您现在的位置: 首页 > 管线工具类api文档 > 开发指南

管线工具类开发指南

1.管线初始化

第一步：引入esmap-1.6.min.js SDK文件

      <script src="./static/lib/esmap-1.6.min.js" > </script >
      

第二步：引入管线工具类文件

    <script src="./static/esmap.pipe.js" > </script >
    

第三步：地图初始化

    var map = new esmap.ESMap({
      themeID: themeID,
      container:document.getElementById('map-container'), //地图显示容器
      token: token,  //打开地图对应的token
      mapDataSrc: "./static/map/", //地图数据位置，与推荐目录相同可省略
      mapThemeSrc: "./static/theme/", //地图主题位置，与推荐目录相同可省略 
      lineSelectedEffect: true, //鼠标点击选中管线
      
    });
  

第四步：地图加载完成后，初始化管线，初始化后返回一个ESPipe实例

    map.on('loadComplete', function () {

      map.mapTheme.selectedLineColor=0xff0000; //管线选中颜色
      
      /**
      * 管线初始化参数说明：
      * 第一个参数是地图map对象；
      * 第二个参数是对象，包含管线的配置；
      */

        pipe = new esmap.ESPipe(map, {
          pipeDataURL: './data/test-2_pipes.json', //管线数据所在的文件路径
          textureURL: './data/texture/', //纹理路径
          callback: function () { //管线初始化完成事件
            console.log('管线初始化完成');
          },
      })
    

管线加载完成！

2.实例属性/方法

初始化后返回一个ESPipe实例pipe，属性/方法如下：

  /** 管线显示/隐藏 */

  pipe.visible //控制所有管线显示隐藏 或者设置lineMarker.visible显示/隐藏单条管线

  /** 实例方法 */

  pipe.addLine(points, id, style, callback)  //绘制管线基础方法
  pipe.removeLineById(id)  //根据id删除管线
  pipe.traverse(function(lineMarker){})  //遍历所有管线，返回lineMarker对象
  

3.管线样式更新

  /** updateStyle方法用于更新管线样式，传入修改后的样式 */

  lineMarker.style.url = url2; //管线样式纹理图片地址
  lineMarker.style.noAnimate = false; //纹理流动动画
  lineMarker.style.animateSpeed = 4; //纹理流动动画速度
  lineMarker.updateStyle(lineMarker.style) //把样式应用到管线上

4.框选管线

  /** updateStyle方法用于更新管线样式，传入修改后的样式 */

  map.mapPicker.enableBoxPick = true;

  //框选事件
  map.on('mapBoxSelected',function(lineMarkers){
    //返回框选中的管线
    console.log(lineMarkers); 
  });

---