arcgis for javascript

arcgis for javascript api加载自己发布的WMS地图服务,bbox传参错误,导致地图展示区域不对,请问牛人如何解决,重重悬赏

img


上图是我们自己的一个地图服务,点击openLayers,其地址和传参bbox如下图

img

现在我用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>

img

这里的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'
          }
        });

运行看下

img


地图出来了
但是写死不行啊 , 滚轮滚动切换层级,加载的还是这个切片 ,哪位牛人帮忙看下呢

回答部分参考、引用ChatGpt以便为您提供更准确的答案:

根据您提供的信息,您在使用 ArcGIS for JavaScript API 加载自己发布的 WMS 地图服务时遇到了 bbox 传参错误导致地图展示区域不正确的问题。您尝试将 bbox 写死的方式解决了问题,但发现无法随着滚轮滚动而动态切换图层。您想寻求一种更好的解决方法。

解决这个问题的关键在于正确设置 bbox 参数,以确保地图展示区域正确匹配。由于我无法查看您提供的图片内容,我无法直接分析和指导您的具体代码。但是,我可以给您一些一般性的建议来解决这个问题:

  1. 确保 bbox 参数与地图服务的坐标系一致:首先,您需要确认地图服务使用的是哪种坐标系,例如 EPSG:4326 或 EPSG:3857。然后,您需要根据地图服务的坐标系,使用相应的坐标单位和坐标范围来设置 bbox 参数。
  2. 动态计算 bbox 参数:为了使地图在滚动和缩放时能够动态加载正确的图层切片,您可以通过监听地图视图的缩放级别和范围变化事件来计算并更新 bbox 参数。每当视图范围发生变化时,您可以获取新的范围值并将其转换为合适的坐标单位和格式,然后更新到 WMS 图层的 bbox 参数中。
  3. 使用地图视图的 extent 属性:在 ArcGIS API for JavaScript 中,地图视图对象通常具有一个 extent 属性,它表示当前地图视图的范围。您可以使用 extent 属性作为 bbox 参数的基础,并在每次视图范围变化时更新它。

需要注意的是,具体的实现方法可能会因您的代码结构和要求而有所不同。您可能需要根据您的项目和需求对代码进行适当的调整和修改。

在尝试上述建议之前,建议您仔细查看您提供的代码和相关文档,确保没有其他配置或参数错误导致地图展示区域不正确的问题。

能把 bbox 请求数据打印吗?

应该是坐标系设置的问题,具体可以查阅一下arcgis坐标系设置。