之前有幾篇文章結(jié)束基于pgrouting的最短路徑規(guī)范，獲取最短路徑用的是wms方式，這樣的好處就是路徑樣式可以預(yù)先是geoserver中設(shè)置好，且路徑渲染由geoserver在后臺(tái)渲染。但是用戶的需求是無窮無盡的，加入用戶要求結(jié)果路徑的樣式需要?jiǎng)迎h(huán)效果該怎么做呢？

???????? Wms方式獲取的地圖是后臺(tái)渲染好的圖片，如果要在前端做出動(dòng)畫效果，就需要用wfs的方式來請(qǐng)求最短路徑了，這樣做的思路是先獲取到結(jié)果路徑中的點(diǎn)坐標(biāo)，拿到了點(diǎn)數(shù)據(jù)，剩下的動(dòng)畫啦、樣式啦就可以隨心所欲的制作了。

???????? 核心代碼如下，體驗(yàn)一下吧

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);

總結(jié)

以上是生活随笔為你收集整理的wfs方式获取最短路径的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。