OpenLayers显示MapServer中的多个光栅
我想在OpenLayers中可视化光栅，并使用WMS从MapServer中检索它。我的地图文件在地图和浏览模式下运行良好，但当我尝试在OpenLayers中实现它时，它是一个静态图像，无法放大。我尝试使用ol.layers.Image，在底图的左上角得到了一个光栅。当我使用ol.layer.Tile时，我会得到多个相邻的图像。我还尝试了不同的投影（原始数据在4326中），没有任何区别，也尝试了不同的URL编译，但也没有区别。 我真的不知道我的错误在哪里，我很高兴能得到任何帮助和建议 这是我的名为interact.map的地图文件OpenLayers显示MapServer中的多个光栅,openlayers,wms,mapserver,Openlayers,Wms,Mapserver,我想在OpenLayers中可视化光栅，并使用WMS从MapServer中检索它。我的地图文件在地图和浏览模式下运行良好，但当我尝试在OpenLayers中实现它时，它是一个静态图像，无法放大。我尝试使用ol.layers.Image，在底图的左上角得到了一个光栅。当我使用ol.layer.Tile时，我会得到多个相邻的图像。我还尝试了不同的投影（原始数据在4326中），没有任何区别，也尝试了不同的URL编译，但也没有区别。 我真的不知道我的错误在哪里，我很高兴能得到任何帮助和建议 这是我的名为
MAP
NAME "testMap"
IMAGETYPE png24
STATUS ON
SIZE 1300 600
EXTENT -180 -90 180 90
STATUS ON
SHAPEPATH "../data"
IMAGECOLOR 189 201 225
PROJECTION
"init=epsg:4326"
END
WEB
TEMPLATE 'test1.html'
IMAGEPATH "/ms4w/tmp/ms_tmp/"
IMAGEURL "/ms_tmp/"
METADATA
"wms_title" "WMS Demo Server for MapServer"
"wms_onlineresource" "http://127.0.0.1/cgi-bin/mapserv.exe?map=wms.map&"
"wms_srs" "EPSG:4326"
"wms_enable_request" "*" # necessary
END
END # WEB
LAYER
NAME "pop"
METADATA
"wms_title" "World population"
"wms_srs" "EPSG:4326"
"gml_include_items" "all"
"gml_featureid" "ID"
"wms_enable_request" "*"
END
TEMPLATE "layertmp.html"
TYPE raster
STATUS DEFAULT
DATA "Pop10.tiff"
PROJECTION
"init=epsg:4326"
END
CLASS
NAME "0-100"
EXPRESSION ([pixel] >= 0 and [pixel] < 100)
STYLE
COLOR 255 255 178
END
END
CLASS
NAME "100-500"
EXPRESSION ([pixel] >= 100 and [pixel] < 500)
STYLE
COLOR 254 204 92
END
END
CLASS
NAME "500-1000"
EXPRESSION ([pixel] >= 500 and [pixel] < 1000)
STYLE
COLOR 253 141 60
END
END
CLASS
NAME "1000-2000"
EXPRESSION ([pixel] >= 1000 and [pixel] < 2000)
STYLE
COLOR 240 59 32
END
END
CLASS
NAME ">= 5000"
EXPRESSION ([pixel] >= 5000)
STYLE
COLOR 189 0 38
END
END
END # LAYER
END # MAP
MAP
名称“testMap”
图像类型png24
地位
尺寸1300 600
范围-180-90
地位
形状路径“./数据”
图像颜色189 201 225
投影
“init=epsg:4326”
结束
网状物
模板“test1.html”
IMAGEPATH“/ms4w/tmp/ms_tmp/”
IMAGEURL“/ms\u tmp/”
元数据
wms_标题“MapServer的wms演示服务器”
“wms_onlineresource”http://127.0.0.1/cgi-bin/mapserv.exe?map=wms.map&"
“wms_srs”“EPSG:4326”
“wms_启用_请求”“*”#必要
结束
尾端#腹板
层
名字“pop”
元数据
wms_标题“世界人口”
“wms_srs”“EPSG:4326”
“gml\u包含项目”“全部”
“gml_功能ID”“ID”
“wms_启用_请求”“*”
结束
模板“layertmp.html”
类型光栅
状态默认值
数据“Pop10.tiff”
投影
“init=epsg:4326”
结束
阶级
名称“0-100”
表达式（[pixel]>=0和[pixel]<100）
风格
颜色255 255 178
结束
结束
阶级
名称“100-500”
表达式（[pixel]>=100和[pixel]<500）
风格
颜色254 204 92
结束
结束
阶级
名称“500-1000”
表达式（[pixel]>=500和[pixel]<1000）
风格
颜色25314160
结束
结束
阶级
名称“1000-2000”
表达式（[pixel]>=1000和[pixel]<2000）
风格
颜色240 59 32
结束
结束
阶级
名称“>=5000”
表达式（[像素]>=5000）
风格
颜色189038
结束
结束
端部#层
结束#地图
<!DOCTYPE html>
<html>
<head>
<title>Single Image WMS</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<style>
.ol-custom-overviewmap,
.ol-custom-overviewmap.ol-uncollapsible {
bottom: auto;
left: auto;
right: 0;
top: 0;
}
.ol-custom-overviewmap:not(.ol-collapsed) {
border: 1px solid black;
}
.ol-custom-overviewmap .ol-overviewmap-map {
border: none;
width: 300px;
}
.ol-custom-overviewmap .ol-overviewmap-box {
border: 2px solid red;
}
.ol-custom-overviewmap:not(.ol-collapsed) button{
bottom: auto;
left: auto;
right: 1px;
top: 1px;
}
.ol-rotate {
top: 170px;
right: 0;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var projection = new ol.proj.Projection({
code: 'EPSG:3857',
units: 'm'
});
ol.proj.addProjection(projection);
var overviewMapControl = new ol.control.OverviewMap({
className: 'ol-overviewmap ol-custom-overviewmap',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
collapseLabel: '\u00BB',
label: '\u00AB',
collapsed: false
});
var layers = [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://127.0.0.1/cgi-bin/mapserv.exe?map=/ms4w/apps/pop/htdocs/interact.map&layers=pops&mode=map',
serverType: 'mapserver'
})
})
];
var map = new ol.Map({
controls: ol.control.defaults().extend([
overviewMapControl
]),
layers: layers,
target: 'map',
view: new ol.View({
projection: projection,
center: [2269873, 5087648],
zoom: 2
})
});
</script>
</body>
</html>
单映像WMS
.ol自定义概览图，
.ol-自定义-概览地图.ol-不可折叠{
底部：自动；
左：自动；
右：0；
排名：0；
}
.ol自定义概览地图：未（.ol折叠）{
边框：1px纯黑；
}
.ol自定义概览地图.ol概览地图{
边界：无；
宽度：300px；
}
.ol自定义概览图.ol概览图框{
边框：2倍纯红；
}
.ol自定义概览地图：非（.ol折叠）按钮{
底部：自动；
左：自动；
右：1px；
顶部：1px；
}
.ol轮换{
顶部：170px；
右：0；
}
var投影=新的ol.proj.projection({
代码：“EPSG:3857”，
单位：m
});
其他项目添加投影（投影）；
var overviewMapControl=新建ol.control.OverviewMap({
类名：“ol概览图ol自定义概览图”，
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
})
],
拼贴标签：'\u00BB'，
标签：'\u00AB'，
失败：错误
});
变量层=[
新ol.layer.Tile({
来源：new ol.source.OSM（）
}),
新ol.layer.Image({
来源：新ol.source.ImageWMS({
网址：'http://127.0.0.1/cgi-bin/mapserv.exe?map=/ms4w/apps/pop/htdocs/interact.map&layers=pops&mode=map',
服务器类型：“mapserver”
})
})
];
var map=新ol.map({
控件：ol.control.defaults（）.extend([
概览地图控件
]),
层：层，
目标：“地图”，
视图：新ol.view({
投影：投影，
中心：[22698735087648]，
缩放：2
})
});
"wms_srs" "EPSG:4326"
new ol.source.ImageWMS({
url: 'http://127.0.0.1/cgi-bin/mapserv.exe?map=/ms4w/apps/pop/htdocs/interact.map&layers=pops&mode=map',
serverType: 'mapserver'
})
var projection = new ol.proj.Projection({
code: 'EPSG:3857',
units: 'm'
});
ol.proj.addProjection(projection);
投影：投影，使用Lonlat（[20.390616089102306，41.50857324328069]）的ol.proj更改
[2269873，5087648]new ol.source.ImageWMS({
url: 'http://127.0.0.1/cgi-bin/mapserv.exe',
params: {
'LAYERS': 'pop',
'MAP': '/ms4w/apps/pop/htdocs/interact.map'
},
serverType: 'mapserver'
})
var projection = new ol.proj.Projection({
code: 'EPSG:3857',
units: 'm'
});
ol.proj.addProjection(projection);