openlayer、geoserver和postgis实现路径分析功能，请求sql视图却显示不出来
我在使用openlayer、geoserver和postgis实现路径分析功能，但我请求sql视图却显示不出来。
我不知道问题在哪？希望有位朋友帮我看看问题在哪？
当我在浏览器中查看下面的服务时，我能看到有返回的linestring数据
http://localhost:8080/geoserver/NM/wms?service=WFS&version=1.1.0&request=GetFeature&typeName=NM:nm_shortpath&outputformat=json&viewparams=x1:576306.1682877908;y1:2854618.876532045;x2:576344.1835600513;y2:2854604.09907975
下面是我的页面代码
html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/ol.css">
<script src="js/ol.js">script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/proj4js/2.9.0/proj4-src.js">script>
<style>
#but{
position: absolute;
top: 2px;
right: 40px;
}
#but1{
position: absolute;
top: 50px;
right: 40px;
}
#map {
height: 900px;
width: 100%;
}
style>
head>
<body>
<div id="map">div>
<div id='but'>
<button style="height: 40px;width: 110px;" onclick=ResetPoints()>重置开始结束点button>
div>
<div id="but1">
<button style="height: 40px;width: 110px;" onclick=Analysis()>开始分析button>
div>
<script type="text/javascript">
//自定义坐标 cgs2000坐标系
let epsg4547 = new ol.proj.Projection({
code: 'EPSG:4547', // 命名投影的编号
extent:[344577.88,2380651.49,655422.12,5036050.38], // 投影的边界范围
units: 'm',
axisOrientation: 'neu',
});
proj4.defs("EPSG:4547","+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
ol.proj.addProjection(epsg4547);
//添加转换
ol.proj.addCoordinateTransforms("EPSG:4326", "EPSG:4547",
function(coordinate) {
return proj4("EPSG:4326","EPSG:4547",coordinate);
},
function(coordinate) {
return proj4("EPSG:4547","EPSG:4326",coordinate);;
}
);
//register(proj4547);//
//起始点-终点图层
var layer_point = new ol.layer.Vector({
source: new ol.source.Vector()
});
//矢量地图-线
var wmssource1=new ol.source.TileWMS({
url:'http://localhost:8080/geoserver/Tuce_path/wms',
params:{
'LAYERS':'Tuce_path:Drawing1_dwg_Polygon', //填写服务的图层和图层名
'TILED':true
},
serverType:'geoserver',
//crossOrigin:'anonymous',
transition:0
});
var tuce_polygon_shp=new ol.layer.Tile({
source:wmssource1
});
//矢量地图-面
var wmssource2=new ol.source.TileWMS({
url:'http://localhost:8080/geoserver/Tuce_path/wms',
params:{
'LAYERS':'Tuce_path:Drawing1_dwg_Polyline', //填写服务的图层和图层名
'TILED':true
},
serverType:'geoserver',
//crossOrigin:'anonymous',
transition:0
});
var tuce_line_shp=new ol.layer.Tile({
source:wmssource2
});
var wmssource3=new ol.source.TileWMS({
url:'http://localhost:8080/geoserver/NM/wms',
params:{
'LAYERS':'NM:pathline_last_featuretoline', //填写服务的图层和图层名
'TILED':true
},
serverType:'geoserver',
//crossOrigin:'anonymous',
transition:0
});
var tuce_path_shp=new ol.layer.Tile({
source:wmssource3
});
var map=new ol.Map({
layers:[tuce_polygon_shp,tuce_line_shp,layer_point],
target:'map',
view:new ol.View({
//center: ol.proj.transform([114.761 , 25.7972],'EPSG:4326','EPSG:3857'),
center:[576335.3611689938, 2854595.998630717],
//center:[114.761 , 25.7972],
projection:epsg4547,
zoom: 16
})
});
/*
1、在地图上选择两个点（点击）
分别获取到这两个点的坐标
2、点击开始分析按钮
把坐标当参数输入函数，并调用。
*/
//通过鼠标点击确定起始点和终点（并只能点击两次）
var coordinates=[];
var i=0;
var mapclick=function(evt)
{
if(i==2)
{
map.un('click',mapclick);
alert("请清楚前面的点！");
}
else{
var coordinate=evt.coordinate;//鼠标点击的坐标
//新建ol.feature显示点击位置
console.log(coordinate);//获取成功
console.log(i);
coordinates[i]=coordinate;
//console.log(coordinates[i]);
//给点击位置赋予一个点要素
var pointfeature=new ol.Feature({
geometry:new ol.geom.Point(coordinate)
});
if(i==0)
{
pointfeature.setStyle(new ol.style.Style({
image: new ol.style.Icon({
anchor:[0.5,16],
anchorOrigin:'bottom-left',
anchorXUnits:'fraction',
anchorYUnits:'pixels',
src: 'img/start.png',
scale:0.12,
})
}));
}
else if(i==1)
{
pointfeature.setStyle(new ol.style.Style({
image: new ol.style.Icon({
anchor:[0.5,16],
anchorOrigin:'bottom-left',
anchorXUnits:'fraction',
anchorYUnits:'pixels',
src: 'img/end.png',
scale:0.12,
})
}))
}
layer_point.getSource().addFeature(pointfeature);
i++;
}
}
map.on('click',mapclick);
function ResetPoints(){
i=0;
layer_point.getSource().clear();
coordinates.length=0;
map.on('click',mapclick);
}
//var newcoors=[[576306.626400001,2854589.4527],[576408.9985,2854440.3242]];
//开始路径分析
function Analysis(){
//判断coordinates中是否有坐标
if(coordinates.length==2)
{
var params={
LAYERS:'NM:nm_shortpath',
//FORMAT: 'image/png',
//'TILED':true
};
//把经纬度坐标转为坐标系坐标
//newcoors[0]=ol.proj.fromLonLat(coordinates[0],'EPSG:3857');
//newcoors[1]=ol.proj.fromLonLat(coordinates[1],'EPSG:4326');
//console.log(newcoors);
var viewparms=[
'x1:'+coordinates[0][0],'y1:'+coordinates[0][1],
'x2:'+coordinates[1][0],'y2:'+coordinates[1][1],
]
params.viewparms=viewparms.join(';');
console.log(params);
var path_short = new ol.layer.Tile({
source:new ol.source.TileWMS({
url:'http://localhost:8080/geoserver/NM/wms',
params:params
}),
// style:new ol.style.Style({
// stroke: new ol.style.Stroke({
// color: '#0F0',
// lineCap: 'round', // 设置线的两端为圆头
// width: 5
// })
// })
});
console.info(path_short)
map.addLayer(path_short);
//console.log(map.getLayer());
}
else
alert("请选择起始点!");
} //576306.1682877908, 2854618.876532045,576344.1835600513, 2854604.09907975
//http://localhost:8080/geoserver/NM/wms?service=WFS&version=1.1.0&request=GetFeature&typeName=NM:nm_shortpath&outputformat=json&viewparams=x1:576306.1682877908;y1:2854618.876532045;x2:576344.1835600513;y2:2854604.09907975
script>
body>
html>
看下你的sql是否配置正确
该回答引用GPTᴼᴾᴱᴺᴬᴵ
从您提供的信息来看，您正在使用OpenLayers，GeoServer和PostGIS来实现路径分析功能。您可以从浏览器查看到返回的linestring数据，但是当您尝试在页面上请求sql视图时，您无法看到结果。
·
首先，检查您的代码是否正确使用视图进行查询。您的页面代码中没有显示如何请求视图。我建议您在浏览器控制台中检查网络请求并查看响应，以确定是否成功调用视图并返回数据。
·
另外，请确保您在GeoServer中正确发布了sql视图，并将其添加到数据源中。您可以使用GeoServer Web管理界面来检查此设置是否正确。
·
最后，请检查您在页面上设置的地图投影是否与您在GeoServer中设置的图层投影相同。如果它们不同，则可能导致图层无法正确显示。您可以在GeoServer Web管理界面中检查每个图层的投影设置，并确保它们与您在页面上使用的投影一致。
- 这篇文章讲的很详细，请看：PostGIS 结合Openlayers以及Geoserver实现最短路径分析（二）