Vue + iClient for Leaflet实现鼠标点击的交通换乘分析

最新推荐文章于 2024-05-09 09:20:26 发布
最新推荐文章于 2024-05-09 09:20:26 发布
阅读量1.4k 收藏 5
点赞数 2
本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com
本文链接：https://blog.csdn.net/supermapsupport/article/details/112211920
版权

作者：john

    聊聊Vue + iClient for Leaflet实现鼠标点击的交通换乘分析，效果展示：
在这里插入图片描述

说明

    实现该效果由以下几部分组成：
      1、鼠标点击取点
      2、交通换乘查询
      3、乘车路线查询

1、鼠标点击取点

    该功能主要是通过leaflet-draw进行描点，且每个点只能选择一次，第二选择的点会覆盖先前的点，功能实现代码如下：


async addPoint (i) {
      let _this = this
      await this.map.on('click', e => {
        let item = [e.latlng.lng, e.latlng.lat]
        _this.showPoint(parseInt(i), item)
      })
    },
    showPoint (i, item) {
      if (this.listPoint[i].marker) {
        this.map.removeLayer(this.listPoint[i].marker)
      }
      var myIcon = L.icon({
        iconUrl: require('../assets/marker-icon.png'),
        iconSize: [25],
        iconAnchor: [17, 40]
      })
      var startIcon = L.icon({
        iconUrl: require('../assets/start_trans.png'),
        iconSize: [25],
        iconAnchor: [17, 40]
      })
      var endIcon = L.icon({
        iconUrl: require('../assets/end_trans.png'),
        iconSize: [25],
        iconAnchor: [17, 40]
      })
      var varmarker =  null
      if (i === 0) {
        varmarker = L.marker([item[1], item[0]], { icon: startIcon }).bindPopup(this.listPoint[i].markName)
      } else if (i === 1) {
        varmarker = L.marker([item[1], item[0]], { icon: endIcon }).bindPopup(this.listPoint[i].markName)
      } else {
        varmarker = L.marker([item[1], item[0]], { icon: myIcon }).bindPopup(this.listPoint[i].markName)
      }
      this.listPoint[i].point = [item[1], item[0]]
      this.listPoint[i].marker = varmarker
      this.listPoint[i].marker.addTo(this.map)
      this.map.off('click')
    },
2、交通换乘查询

    交通换乘查询，显示默认交通路线，功能实现代码如下：


    trafficTransferAnalystService() {
      if (!this.listPoint || !this.listPoint[0].marker || !this.listPoint[1].marker) {
        alert('查询前请选择出发点或者目的地')
        return ;
      }
      this.routeFeatureGroup = L.featureGroup().addTo(this.map)
      this.paths = [{"x": this.listPoint[0].point[1],"y": this.listPoint[0].point[0]},{"x": this.listPoint[1].point[1],"y": this.listPoint[1].point[0]}]
      // this.paths = [26, 180];
      this.routLines = []
      var params = new SuperMap.TransferSolutionParameters({
        solutionCount: 6,
        transferTactic: "LESS_TIME",
        walkingRatio: 10,
        points: this.paths
      });
      var _this = this
      L.supermap.trafficTransferAnalystService(this.baseTraffSrc)
        .analysisTransferSolution(params, function (serviceResult) {
          // 获取服务端返回的结果
          var result = serviceResult.result;
          if (result) {
            _this.resRoutLine = result.solutionItems
            var items = result.defaultGuide.items;
            for (var itemIndex = 0, itemLen = items.length; itemIndex < itemLen; itemIndex++) {
              var geometry = items[itemIndex].route;
              _this.routeFeatureLayers = _this.routeFeatureGroup.addLayer(L.geoJSON(L.Util.toGeoJSON(geometry)).addTo(_this.map));
              _this.isFindLine = true
              _this.getRoutLinData(result.solutionItems)
            }
          }
      });
    },
3、乘车路线查询

    选择不同的乘车线路，功能实现代码如下：


    getLine(item) {
      let lines = []
      // 拼接TransferPathParameters参数transferLines
      if(item) {
        for(var i = 0; i < item.length; i++) {
          lines.push(item[i].lineItems[0])
        }
      }
      let _this = this
      var params = new SuperMap.TransferPathParameters({
        // 起始点坐标
        points: this.paths,
        // 当前换乘路线，包含路线ID、起止点等
        transferLines: lines
      });
      // 向服务端发送请求并获取数据
      L.supermap.trafficTransferAnalystService(this.baseTraffSrc)
        .analysisTransferPath(params, function (serviceResult) {
          // 获取返回的路线的详细信息
          var result = serviceResult.result;
          if (result) {
            let items = result.items;
            let allDistance = 0
            let allPassStopCount = 0
            let layers = []
            for (var itemIndex = 0, itemLen = items.length; itemIndex < itemLen; itemIndex++) {
              var geometry = items[itemIndex].route;
              _this.routeFeatureLayers = L.geoJSON(L.Util.toGeoJSON(geometry))
              layers.push(L.geoJSON(L.Util.toGeoJSON(geometry)))
              if (items[itemIndex].distance != items[itemIndex].time) {
                allPassStopCount += items[itemIndex].passStopCount
              } else {
                allDistance += items[itemIndex].distance
              }
              _this.isFindLine = true
            }
            allDistance = Math.round(allDistance)
            _this.routLines.push({
              allDistance: allDistance,
              allPassStopCount: allPassStopCount,
              layers: layers
            })
          }
        });
    },

    到此，我们的功能已经全部实现了，线面是该Vue组件中的完整代码。

完整代码

页面部分：


<div style="height: 100%; width: 100%">
    <div class="findTSPPathsProcess">
      <span v-for="(item, index) in listPoint" :key="index">
      <span v-if="index === 0">
        起点：<button v-on:click="addPoint(index)">选择</button>
        <br>
      </span>
      <span v-else>
        终点：<button v-on:click="addPoint(index)">选择</button></span>
    </span>
      <button v-on:click="trafficTransferAnalystService">查询</button>
    </div>
    <div v-if="isFindLine" class="routerLine">
        <span v-for="(item,index) in resRoutLine" :key="index">路线{{index + 1}}:
          <span style="cursor: pointer" v-on:click="showRouteLine(index)" v-if="routLines[index].allPassStopCount">{{"共" + routLines[index].allPassStopCount + "站, "}}</span>
          <span style="cursor: pointer" v-on:click="showRouteLine(index)" v-if="routLines[index].allDistance">{{"步行: " + routLines[index].allDistance + "米"}}</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span style="cursor: pointer" v-for="(it, ind) in item.linesItems" :key="ind" v-on:click="showRouteLine(index)">
            <span v-for="i in it.lineItems">
              <span v-if="ind == 0">{{i.lineName}}</span>
              <span v-else> -> {{i.lineName}}</span>
            </span>
          </span>
          <br>
        </span>
    </div>
  </div>

样式部分：

.findTSPPathsProcess{
  z-index: 999;
  position: absolute;
  top: 100px;
  left: 300px;
  width: 150px;
  border-radius: 5px;
  background-color: #d3dce6;
  opacity: 0.9;
  padding-left: 20px;
}
.routerLine{
  z-index: 999;
  position: absolute;
  top: 40px;
  right: 80px;
  width: 400px;
  border-radius: 5px;
  background-color: #d3dce6;
  opacity: 0.9;
  padding-left: 20px;
}

数据部分：

 props: ['map'],
  data () {
    return {
      listPoint: [
        {
          id: 0,
          marker: null,
          markName: '起点',
          point: []
        },
        {
          id: 1,
          marker: null,
          markName: '终点',
          point: []
        }
      ],
      routLines: [],
      paths: null,
      isFindLine: false,
      routeFeatureGroup: null,
      routeFeatureLayers: null,
      resRoutLine: null,
    baseMapSource: 'http://127.0.0.1:8091/iserver/services/map-changchun/rest/maps/长春市区图',
    baseTraffSrc: 'http://127.0.0.1:8091/iserver/services/traffictransferanalyst-sample/restjsr/traffictransferanalyst/Traffic-Changchun'
    }

methods部分：

   methods: {
    async addPoint (i) {
      let _this = this
      await this.map.on('click', e => {
        let item = [e.latlng.lng, e.latlng.lat]
        _this.showPoint(parseInt(i), item)
      })
    },
    showPoint (i, item) {
      if (this.listPoint[i].marker) {
        this.map.removeLayer(this.listPoint[i].marker)
      }
      var myIcon = L.icon({
        iconUrl: require('../assets/marker-icon.png'),
        iconSize: [25],
        iconAnchor: [17, 40]
      })
      var startIcon = L.icon({
        iconUrl: require('../assets/start_trans.png'),
        iconSize: [25],
        iconAnchor: [17, 40]
      })
      var endIcon = L.icon({
        iconUrl: require('../assets/end_trans.png'),
        iconSize: [25],
        iconAnchor: [17, 40]
      })
      var varmarker =  null
      if (i === 0) {
        varmarker = L.marker([item[1], item[0]], { icon: startIcon }).bindPopup(this.listPoint[i].markName)
      } else if (i === 1) {
        varmarker = L.marker([item[1], item[0]], { icon: endIcon }).bindPopup(this.listPoint[i].markName)
      } else {
        varmarker = L.marker([item[1], item[0]], { icon: myIcon }).bindPopup(this.listPoint[i].markName)
      }
      this.listPoint[i].point = [item[1], item[0]]
      this.listPoint[i].marker = varmarker
      this.listPoint[i].marker.addTo(this.map)
      this.map.off('click')
    },
    showRouteLine(index) {
      if (this.routeFeatureGroup) {
        this.routeFeatureGroup.clearLayers()
      }
      for (var i = 0; i < this.routLines[index].layers.length; i++) {
        this.routeFeatureLayers = this.routeFeatureGroup.addLayer(this.routLines[index].layers[i].addTo(this.map));
      }
    },
    getLine(item) {
      let lines = []
      // 拼接TransferPathParameters参数transferLines
      if(item) {
        for(var i = 0; i < item.length; i++) {
          lines.push(item[i].lineItems[0])
        }
      }
      let _this = this
      var params = new SuperMap.TransferPathParameters({
        // 起始点坐标
        points: this.paths,
        // 当前换乘路线，包含路线ID、起止点等
        transferLines: lines
      });
      // 向服务端发送请求并获取数据
      L.supermap.trafficTransferAnalystService(this.baseTraffSrc)
        .analysisTransferPath(params, function (serviceResult) {
          // 获取返回的路线的详细信息
          var result = serviceResult.result;
          if (result) {
            let items = result.items;
            let allDistance = 0
            let allPassStopCount = 0
            let layers = []
            for (var itemIndex = 0, itemLen = items.length; itemIndex < itemLen; itemIndex++) {
              var geometry = items[itemIndex].route;
              _this.routeFeatureLayers = L.geoJSON(L.Util.toGeoJSON(geometry))
              layers.push(L.geoJSON(L.Util.toGeoJSON(geometry)))
              if (items[itemIndex].distance != items[itemIndex].time) {
                allPassStopCount += items[itemIndex].passStopCount
              } else {
                allDistance += items[itemIndex].distance
              }
              _this.isFindLine = true
            }
            allDistance = Math.round(allDistance)
            _this.routLines.push({
              allDistance: allDistance,
              allPassStopCount: allPassStopCount,
              layers: layers
            })
          }
        });
    },
    trafficTransferAnalystService() {
      if (!this.listPoint || !this.listPoint[0].marker || !this.listPoint[1].marker) {
        alert('查询前请选择出发点或者目的地')
        return ;
      }
      this.routeFeatureGroup = L.featureGroup().addTo(this.map)
      this.paths = [{"x": this.listPoint[0].point[1],"y": this.listPoint[0].point[0]},{"x": this.listPoint[1].point[1],"y": this.listPoint[1].point[0]}]
      // this.paths = [26, 180];
      this.routLines = []
      var params = new SuperMap.TransferSolutionParameters({
        solutionCount: 6,
        transferTactic: "LESS_TIME",
        walkingRatio: 10,
        points: this.paths
      });
      var _this = this
      L.supermap.trafficTransferAnalystService(this.baseTraffSrc)
        .analysisTransferSolution(params, function (serviceResult) {
          // 获取服务端返回的结果
          var result = serviceResult.result;
          if (result) {
            _this.resRoutLine = result.solutionItems
            var items = result.defaultGuide.items;
            for (var itemIndex = 0, itemLen = items.length; itemIndex < itemLen; itemIndex++) {
              var geometry = items[itemIndex].route;
              _this.routeFeatureLayers = _this.routeFeatureGroup.addLayer(L.geoJSON(L.Util.toGeoJSON(geometry)).addTo(_this.map));
              _this.isFindLine = true
              _this.getRoutLinData(result.solutionItems)
            }
          }
      });
    },
    getRoutLinData(item) {
      if (item) {
        for (let i = 0; i < item.length; i++) {
          this.getLine(item[i].linesItems)
        }
      }
    }
  }

L.Util.toGeoJSON(geometry)).addTo(_this.map));
              _this.isFindLine = true
              _this.getRoutLinData(result.solutionItems)
            }
          }
      });
    },
    getRoutLinData(item) {
      if (item) {
        for (let i = 0; i < item.length; i++) {
          this.getLine(item[i].linesItems)
        }
      }
    }
  }

    有需要改进的地方，请多指正。

supermapsupport
关注
04-SuperMap iClient for Leaflet 动态轨迹展示
03-05
04-SuperMap iClient for Leaflet 动态轨迹展示
SuperMap iClient for Leaflet +Vue项目——使用ElementUI
qq_45661948的博客
07-30 425
1.安装element-ui包 npm i element-ui -S 2.引入element-ui 在 main.js 中： import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
SuperMap iClient for Leaflet +Vue项目——创建地图
qq_45661948的博客
07-30 1408
1.安装leaflet包 npm install leaflet --save 2.安装 SuperMap iClient for Leaflet包 npm install @supermap/iclient-leaflet --save 3.在main.js引入css文件和js文件 import 'leaflet/dist/leaflet.css' import '@supermap/iclient-leaflet' ...
超图-Supermap iclient for leaflet 用法速搜（入门级）
搬山境KL攻城狮的修炼手册
02-04 1332
文章目录一、监听1.点击监听2.缩放监听 一、监听 1.点击监听 // 点击监听 拾取坐标 map.on('click', function(e) { console.log(e.latlng); }); 2.缩放监听 // 缩放监听 当zoom>=10的时候再显示本图层。 map.on('zoomend', function(e) { if(e.target.getZoom() >= 10) { map.
【WebGIS开发】在Vue3.0下使用SuperMap iClient for Leaflet 个人笔记(1)
2301_78439818的博客
04-12 1840
我个人在使用超图提供的开发包时遇到了不少问题，所以当笔记记录一下。
Vite+Vue+iClient for Leaflet引入并实现MapV/Eharts第三方可视化库示例
05-20
本示例"Vite+Vue+iClient for Leaflet引入并实现MapV/Echarts第三方可视化库示例"旨在教你如何在基于Vite和Vue3的项目中集成SuperMap的iClient for Leaflet库，并利用Echarts和MapV进行数据的高效可视化。...
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)
03-01
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在...
基于 SuperMap iClient For Leaflet 前端库 + Vue 2x 实现的简单网页
06-28
下载建议按以下操作进行编译和运行： 1. 解压 csupermapforleaflet.zip 工程压缩包； 2. 通过 Visual Studio Code 打开 csupermapforleaflet 工程； 3. 打开 Visual Studio Code 终端面板，输入 cnpm install 命令...
Vue+Proj4Leaflet实现地图瓦片(Nginx代理本地地图瓦片为网络url)加载并实现CRS投影转换(附资源下载)
最新发布
06-28
完整代码、png瓦片资源、nginx、nginx配置文件打包下载 博客地址： ...Vue+Proj4Leaflet实现地图瓦片(Nginx代理本地地图瓦片为网络url)加载并实现CRS投影转换(附资源下载):
SuperMap iClient for Leaflet+vue实现Web地图打印功能
m0_45826980的博客
05-09 363
【代码】SuperMap iClient for Leaflet+vue实现Web地图打印功能。
基于Vue快速搭建超图二维iClient开发环境
SuperMap技术控
10-26 7115
作者:lly 一、背景   最近很多小伙伴咨询关于基于Vue框架搭建iClent开发环境的问题，今天我们就以iClient for Leaflet为例，来聊聊如何快速搭建超图二维JS开发环境。 二、配置准备 1.首先需要安装node.js,可参考以下文章安装步骤及配置 2.配置完node.js后，注册淘宝镜像，提高下载速度 npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装Vue CLI cnpm .
SuperMap iClient for Leaflet +vue框架 （一）创建地图
dengdengchen的博客
10-16 7087
可以参考官方文档：但是文档是HTML，需要自己进行转换 1、安装vuecli npm install -g vue-cli 2、创建项目 vue init webpack vue_leaflet 3、安装leaflet npm install leaflet --save 4、安装 SuperMap iClient for Leaflet：（注：安装依赖时要进入其文件夹）...
iClient for Leaflet 空间查询，圆形空间查询
Mr.Zheng
07-10 1183
代码片段如下： function query(_center, _radius) { var point_new = L.CRS.EPSG3857.project(_center); var dx = point_new.x, dy = point_new.y; var radius = _radius; //点集 var parts = []; //计算圆的边缘所有点 for (var i = 0; i < 360; i++) {
SuperMap iClient for Openlayers 实现WFS查询功能
SuperMap技术控
04-29 3878
SuperMap iClient for Openlayers 实现WFS查询功能前期准备成果截图主要代码实现过程小结 SuperMap iClient for classic已经实现对接WFS服务，可以对WFS进行查询并展示出查询的结果，但是官网范例中，目前没有关于Openlayers客户端的示例，在此文章中将简单介绍iClient for Openlayers如何实现WFS查询功能。 前期准备...
SuperMap iClient for Leaflet 自定义控件创建及一些样式的总结
从入门到放弃
10-10 1441
在上图左边区域为自定义控件，首先我们来看一下效果 我这个项目的话是基于Vue + SuperMap iClient for Leaflet 来实现的一些功能： // 自定義控件 customControl () { L.Control.Legend = L.Control.extend({ options: { posit...
基于超图for Leaflet多段线量距
qq_46178473的博客
11-06 318
基于超图for Leaflet多段线量距
vue项目中leaflet结合天地图展示geoserver图层
生命不息，学习不止
07-09 3059
vue,leaflet,geoserver,wms,geoJson
前端 vue 使用高德地图组件：（二）获取鼠标点击位置坐标 和 图标覆盖物拖动后的坐标
yssa1125001的博客
07-27 3164
上一篇文章，我们已经成功加载了地图并设置了自定义的图标覆盖物，但是在业务开发中，对地图的运用肯定不是到此为止，对地图组件的操作经常需要坐标值的参与，这篇文章就是简单介绍下坐标值的获取 一：我们可以给地图组件绑定单击事件，当鼠标单击时获取对应位置的经纬度： //绑定地图组件内单击事件 this.mapMain.on('click', (e) => { this.lngMain = e.lnglat.getLng() this.latMain = e.ln
［Google Maps API 3］Marker从Clusterer中分离及Marker置于Cluster上一层的解决办法
前端乱谈
03-18 2278
在Google Maps API的使用中，经常用到Clusterer来避免过密的Marker显示。但仔细看一下Clusterer的设置参数中并没有直接将某些Marker除外的方法，那遇到这样的需求，怎么做呢？以下是我从StackoverFlow上获得的解答，也是实践下来最佳的方法： 思路很简单，就是用Clusterer对象提供的方法将Marker从中移除，然后用Marker对象的setMap方法
vue+leaflet+element实现轨迹回放并且加可控制的进度条
04-08
您可以通过Vue Leaflet Element库来实现轨迹回放，并添加可控制的进度条。该库是一个基于Vue.js和Leaflet的地图组件，提供了众多的地图功能和扩展性。您可以使用Leaflet的GeoJSON插件来加载轨迹数据，并使用Vue.js...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值