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


管线工具类开发指南

第一步:引入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('管线初始化完成');
          },
      })
    

管线加载完成!

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


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

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


  /** 实例方法 */

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

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

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


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

  map.mapPicker.enableBoxPick = true;

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