现在我用esri-loader结合vue的方式,调用WMS类,得到一个图层,发现每个切片图层的传参bbox和openlayer打开的不一样
<template>
<div id="app">
<div id="map"></div>
</div>
</template>
<script>
import { loadModules } from 'esri-loader'
export default {
data() {
return {
map: null,
view: null,
}
},
mounted() {
this.createMapView()
},
methods: {
createMapView() {
const option = {
url: 'https://js.arcgis.com/4.26/',
css: 'https://js.arcgis.com/4.26/esri/themes/light/main.css'
}
loadModules(['esri/Map', 'esri/views/MapView', "esri/geometry/SpatialReference", "esri/geometry/Extent", "esri/layers/WMTSLayer", "esri/Basemap", "esri/layers/TileLayer", "esri/layers/WebTileLayer","esri/layers/WMSLayer"], option).then(([Map, MapView, SpatialReference, Extent, WMTSLayer, Basemap, TileLayer, WebTileLayer,WMSLayer]) => {
const wmtsLayer = new WMSLayer({
url: "http://192.168.3.103:8088/geoserver/jiangsu/wms", // url to the service
customLayerParameters:{
LAYERS:'jiangsu:zhenze2',
crs:'EPSG:3857',
SRS:'EPSG:3857',
version:'1.1.1',
exceptions: 'application/vnd.ogc.se_inimage',
}
});
let basemap = new Basemap({
baseLayers: [
wmtsLayer
]
});
this.map = new Map({
basemap
})
this.view = new MapView({
container: 'map',
map: this.map,
// zoom: 6,
// center: [120.5104373742268, 30.913660725296175],
})
})
}
}
}
</script>
<style lang="scss">
#map {
width: 100vw;
height: 100vh;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
这里的bbox明显不是正确的参数
以下是我的解决思路:
将bbox写死
loadModules(['esri/Map', 'esri/views/MapView', "esri/geometry/SpatialReference", "esri/geometry/Extent", "esri/layers/WMTSLayer", "esri/Basemap", "esri/layers/TileLayer", "esri/layers/WebTileLayer","esri/layers/WMSLayer"], option).then(([Map, MapView, SpatialReference, Extent, WMTSLayer, Basemap, TileLayer, WebTileLayer,WMSLayer]) => {
const wmtsLayer = new WMSLayer({
url: "http://192.168.3.103:8088/geoserver/jiangsu/wms", // url to the service
customLayerParameters:{
LAYERS:'jiangsu:zhenze2',
crs:'EPSG:3857',
SRS:'EPSG:3857',
version:'1.1.1',
exceptions: 'application/vnd.ogc.se_inimage',
BBOX: '13379371.90274173,3593023.399403786,13438009.824727792,3643720.7694542357'
}
});
运行看下
回答部分参考、引用ChatGpt以便为您提供更准确的答案:
根据您提供的信息,您在使用 ArcGIS for JavaScript API 加载自己发布的 WMS 地图服务时遇到了 bbox 传参错误导致地图展示区域不正确的问题。您尝试将 bbox 写死的方式解决了问题,但发现无法随着滚轮滚动而动态切换图层。您想寻求一种更好的解决方法。
解决这个问题的关键在于正确设置 bbox 参数,以确保地图展示区域正确匹配。由于我无法查看您提供的图片内容,我无法直接分析和指导您的具体代码。但是,我可以给您一些一般性的建议来解决这个问题:
需要注意的是,具体的实现方法可能会因您的代码结构和要求而有所不同。您可能需要根据您的项目和需求对代码进行适当的调整和修改。
在尝试上述建议之前,建议您仔细查看您提供的代码和相关文档,确保没有其他配置或参数错误导致地图展示区域不正确的问题。
能把 bbox 请求数据打印吗?
应该是坐标系设置的问题,具体可以查阅一下arcgis坐标系设置。