之前有几篇文章结束基于pgrouting的最短路径规范,获取最短路径用的是wms方式,这样的好处就是路径样式可以预先是geoserver中设置好,且路径渲染由geoserver在后台渲染。但是用户的需求是无穷无尽的,加入用户要求结果路径的样式需要动环效果该怎么做呢?

Wms方式获取的地图是后台渲染好的图片,如果要在前端做出动画效果,就需要用wfs的方式来请求最短路径了,这样做的思路是先获取到结果路径中的点坐标,拿到了点数据,剩下的动画啦、样式啦就可以随心所欲的制作了。

核心代码如下,体验一下吧

var vectorSource = new ol.source.ServerVector({format: new ol.format.GeoJSON(),loader: function(extent, resolution, projection) {var url = 'http://10.20.135.25/geoserver/wfs';$.ajax({url: url,data : $.param(wfsParams),type : 'GET',dataType: 'jsonp',jsonpCallback:'loadFeatures'}).done(loadFeatures);},strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({maxZoom: 25})),projection: 'EPSG:4326'});// Executed when data is loaded by the $.ajax method.var loadFeatures = function(response) {vectorSource.addFeatures(vectorSource.readFeatures(response));};// Vector layervar vectorLayerJsonp = new ol.layer.Vector({source: vectorSource,style: new ol.style.Style({stroke: new ol.style.Stroke({color: 'green',width: 2})})});map.addLayer(vectorLayerJsonp);

wfs方式获取最短路径相关推荐

  1. 基于uFUN开发板的心率计(一)DMA方式获取传感器数据

    前言 从3月8号收到板子,到今天算起来,uFUN到手也有两周的时间了,最近利用下班后的时间,做了个心率计,从单片机程序到上位机开发,到现在为止完成的差不多了,实现很简单,uFUN开发板外加一个Puls ...

  2. json格式天气数据的获取,jsonp方式获取统计图数据

    获取天气情况(不支持跨域) /*json原生获取*/ function getJSON() {var XML;var url = "http://wthrcdn.etouch.cn/weat ...

  3. SSL方式获取邮箱收件箱

    2019独角兽企业重金招聘Python工程师标准>>> QQ邮箱是强制要求使用SSL方式获取收件箱的: package emailUtil;import java.io.FileNo ...

  4. Spring-Security (学习记录四)--配置权限过滤器,采用数据库方式获取权限

    目录 1. 需要在spring-security.xml中配置验证过滤器,来取代spring-security.xml的默认过滤器 2. 配置securityMetadataSource,可以通过ur ...

  5. 曼哈顿距离java实现_基于javascript实现获取最短路径算法代码实例

    这篇文章主要介绍了基于javascript实现获取最短路径算法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 //A算法 自动寻路 ...

  6. 在C语言中以编程的方式获取函数名

    在C语言中以编程的方式获取函数名 仅仅为了获取函数名,就在函数体中嵌入硬编码的字符串,这种方法单调乏味还易导致错误,不如看一下怎样使用新的C99特性,在程序运行时获取函数名吧. 对象反射库.调试工具及 ...

  7. Android简易实战教程--第四十七话《使用OKhttp回调方式获取网络信息》

    在之前的小案例中写过一篇使用HttpUrlConnection获取网络数据的例子.在OKhttp盛行的时代,当然要学会怎么使用它,本篇就对其基本使用做一个介绍,然后再使用它的接口回调的方式获取相同的数 ...

  8. 02_pandas获取数据(指定列获取、[]方式获取、loc函数,at函数, iloc函数 iat函数)

    获取数据 通过指定列的方式获取数据 选择单独一列,通过这种方式获取一个Series,等价于df.A import numpy as np import pandas as pd# 通过设置开始时间,并 ...

  9. android 自动表单提交数据,Android 使用三种方式获取网页(通过Post,Get进行表单的提交)...

    // 直接获取信息 void DirectInfo() throws IOException { URL url = new URL(SRC); HttpURLConnection httpConn ...

最新文章

  1. WannaCry的UWP版,哈哈哈
  2. 多角度人脸识别简单介绍
  3. Android入门(九)文件存储与SharedPreferences存储
  4. MobPush精准把握用户的使用时间
  5. 发现了一个好用的在线勾图的站点
  6. 在Android中使用FlatBuffers
  7. 存档丢失以后再补之R语言与logistic模型
  8. objective-c 编写规范_Objective-c成员变量的定义方式?如何写才规范?
  9. tp5支持啥数据库_MS Access数据库是被严重低估的一款优秀软件
  10. layui如何实现添加数据时关闭页面层,并实时刷新表格数据?
  11. C++学习笔记6:多文件编程
  12. 使用Scala的强大api快速加工数据
  13. CentOS下搭建Jumpserver堡垒机
  14. vlc android tv版,VLC播放器电视版本v1.6.0 Android版本
  15. linux下缺库的常见处理方法
  16. android实训总结ppt模板,ppt制作实训心得.docx
  17. ntfsdos pro v5.0
  18. 使用 FME 将勘测定界坐标交换格式文本文件转换成 GIS 格式
  19. 雷达系统和雷达信号分析02
  20. C++的岗位要求是什么?

热门文章

  1. 小分子蛋白Western blot 检测
  2. android 粘性service,Android服务1 Service
  3. python做平面设计有前途吗_现在学平面设计还有发展前景吗?
  4. LabVIEW2018安装教程
  5. 多线程和MsgWaitForMultipleObjects
  6. SQLite学习手册(表达式)
  7. python爬虫bilibili_Python爬虫 bilibili视频弹幕提取过程详解
  8. 共建智慧海关 第四范式打造快、准、稳海关单证识别系统
  9. tensorflow随笔-读写数据tf.data
  10. 最新!中国内地大学 ESI 排名出炉:362 所高校上榜!