超图服务调用踩坑归集

• iServer 开发指南: API 参考
• iServer 服务资源层次结构
• iClient for MapboxGL 示范程序

地图服务

地图服务名称通常以 map-xxx 开头， 如 https://iserver.supermap.io/iserver/services/map-world/

配置通用的服务接口:

目前项目主要使用的接口有: rest 和 wms130

不赞成使用 wms110

SuperMap 的 wms110 版本服务支持该值的目的是向后兼容

zxyTileImage 瓦片服务

• iServe zxyTileImage 瓦片服务

示例服务地址: https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/zxyTileImage

zxy-tile-image.vue

<script lang="ts" setup>
import { VMapbox, VRasterLayer, VRasterSource } from '@movk-repo/mapbox'
import tilesJsonUrl from './tiles.json?url'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
</script>

<template>
  <VMapbox :access-token="accessToken" :zoom="1">
    <VRasterSource :url="tilesJsonUrl">
      <VRasterLayer />
    </VRasterSource>
  </VMapbox>
</template>

tiles.json

{
  "attribution": "SuperMap",
  "tilejson": "2.0.0",
  "name": "China",
  "minzoom": 0,
  "maxzoom": 22,
  "bounds": [
    -180,
    -85.0511,
    180,
    85.0511
  ],
  "format": "webp",
  "type": "baselayer",
  "center": [
    0,
    0,
    0
  ],
  "color": "hsl(40, 26%, 93%)",
  "tiles": [
    "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/zxyTileImage/{z}/{x}/{y}.webp"
  ]
}

隐藏源代码

wms130 服务

• iServer WMS 服务

示例服务地址: https://iserver.supermap.io/iserver/services/map-china400/wms130

wms130.vue

<script lang="ts" setup>
import { VMapbox, VRasterLayer, VWmsSource } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN

const url = 'https://iserver.supermap.io/iserver/services/map-china400/wms130'
const layers = 'ChinaDark'
</script>

<template>
  <VMapbox :access-token="accessToken" :zoom="1">
    <VWmsSource :url="url" :layers="layers">
      <VRasterLayer />
    </VWmsSource>
  </VMapbox>
</template>

隐藏源代码

数据服务

数据服务名称通常以 data-xxx 开头， 如 https://iserver.supermap.io/iserver/services/data-jingjin

配置通用的服务接口:

rest 服务

• featureResults 资源

• 数据服务: https://iserver.supermap.io/iserver/services/data-jingjin/rest/data/featureResults.geojson

• 数据集格式: 数据源名称:数据集名称， 如 Jingjin:County_L

获取所有的数据服务要素结果

data-rest.vue

<script lang="ts" setup>
import type { GeoSourceSetDataEvent } from '@movk-repo/mapbox'
import type { FeatureCollection } from 'geojson'
import type { PlusColumn } from 'plus-pro-components'
import { VGeoSource, VLineLayer, VMapbox } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN

const formData = ref({
  serviceUrl: 'https://iserver.supermap.io/iserver/services/data-jingjin/rest/data/featureResults.geojson',
  datasetName: 'Jingjin:County_L',
})

const loading = ref(false)
const featureResults = ref<FeatureCollection>()
const errorMessage = ref('')

const columns: PlusColumn[] = [
  {
    prop: 'serviceUrl',
    label: '服务URL',
    valueType: 'input',
  },
  {
    prop: 'datasetName',
    label: '数据集名称',
    valueType: 'input',
  },
]

async function getAllFeatures() {
  loading.value = true
  errorMessage.value = ''

  try {
    const headers = new Headers()
    headers.append('Content-Type', 'application/json')

    const params = {
      getFeatureMode: 'SQL',
      queryParameter: '{}',
      datasetNames: `['${formData.value.datasetName}']`,
    }

    const requestOptions = {
      method: 'POST',
      headers,
      body: JSON.stringify(params),
    }

    const response = await fetch(`${formData.value.serviceUrl}?returnContent=true`, requestOptions)

    if (!response.ok) {
      throw new Error(`请求失败: ${response.status} ${response.statusText}`)
    }

    featureResults.value = await response.json()
  }
  catch (error) {
    console.error('获取要素失败:', error)
    errorMessage.value = error instanceof Error ? error.message : '未知错误'
  }
  finally {
    loading.value = false
  }
}

function setData({ map, bounds }: GeoSourceSetDataEvent) {
  map.fitBounds(bounds, { padding: 80, duration: 1000 })
}

onMounted(() => {
  getAllFeatures()
})
</script>

<template>
  <div class="iserver-features">
    <PlusForm v-model="formData" :columns="columns" label-width="auto">
      <template #footer>
        <ElButton type="primary" :loading="loading" @click="getAllFeatures">
          {{ loading ? '加载中...' : '获取要素数据' }}
        </ElButton>
      </template>
    </PlusForm>

    <ElAlert v-if="errorMessage" type="error" :title="errorMessage" show-icon />

    <VMapbox :access-token="accessToken" type="light-v11" mt-4>
      <VGeoSource :data="featureResults" @set-data="setData">
        <VLineLayer :paint="{ 'line-color': '#f4a261', 'line-width': 2 }" />
      </VGeoSource>
    </VMapbox>
  </div>
</template>

隐藏源代码

wfs2.0 服务

• iServer WFS 服务

示例服务地址: https://iserver.supermap.io/iserver/services/data-world/wfs200

wfs200.vue

<script lang="ts" setup>
import type { MapMouseEvent } from 'mapbox-gl'
import { VCircleLayer, VMapbox, VPopup, VWfsSource } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN

const url = 'https://iserver.supermap.io/iserver/services/data-world/wfs200'
const typeNames = 'World:Capitals'

const popupVisible = ref(false)
const center = ref()
const properties = ref()
function handlePopup(e: MapMouseEvent) {
  if (!e.features)
    return
  properties.value = e.features[0].properties
  center.value = e.lngLat
  popupVisible.value = true
}
</script>

<template>
  <VMapbox :access-token="accessToken" type="standard" :center="[18.604253878973992, 48.43454180664153]" :zoom="3">
    <VWfsSource :url="url" :type-names="typeNames">
      <VCircleLayer
        :paint="{
          'circle-color': '#4264fb',
          'circle-radius': 6,
          'circle-stroke-width': 2,
          'circle-stroke-color': '#ffffff',
        }" @click="handlePopup"
      />
      <VPopup v-model="popupVisible" :center="center">
        {{ properties }}
      </VPopup>
    </VWfsSource>
  </VMapbox>
</template>

隐藏源代码

问题归集

wms 服务通过 sld_body 修改样式不生效

问题描述:

尝试用 SLD_BODY 自定义 wms 服务的样式， GetMap 请求格式如下，图层样式没有渲染

问题原因:

wms 服务目前只支持已定义的图层样式

iServer GetMap 请求

地图服务获取 geojson 表述格式错误

问题描述:

请求url /iserver/services/map-text/rest/FZJZSSD@cs.geojson 与资源 root 的 url 模板不匹配

问题原因:

• 数据服务的要素才有 geojson 表述格式，是否支持 geojson 格式，可以看右侧目录栏
• 地图服务和数据服务属于不同的服务类型，需要重新发布服务并勾选 rest 接口

报错：400 ，msg：对象已经被释放

问题原因:

可能是数据库数据不同步，先用文件型数据源试下接口请求是否正确

wfs2.0 服务获取描述文档成功，获取要素的时候报错

问题描述:

问题原因:

• iserver 版本为 iserver 2023 11i ，不支持 geojson 输出

supermap wfs2.0 执行 GetFeature 操作支持 outputFormat=json 输出，但是 xml 表述文档中没有加上<ows:Value>json</ows:Value>， 猜测是这个原因导致 arcgis 提示不支持

升级 iserver 版本

wfs2.0服务的点击事件拿不到要素全部属性值

问题描述:

有个需求为点击地块展示详情，但是获取到的要素只有部分属性值

问题原因:

iServer 的 GetFeature 请求使用 FILTER 参数,编码语言为 urn:ogc:def:query Language:OGC-FES:Filter

• iServer FILTER 示例

可以通过 esri_wfs_id 与 表名 传给后端，后端根据 esri_wfs_id 查询数据库，返回结果

如何获取地图当前状态的基本信息

• iServer map 资源

获取服务的四至范围，用来实现服务跳转定位

列出当前地图中所有图层的图例

利用上面的问题6，获取到服务的四至范围，然后拼接成 BBOX 参数,

const bbox = `${bounds.left},${bounds.bottom},${bounds.right},${bounds.top}`
const url = `https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/legend.rjson?returnVisibleOnly=true&bbox=-20037508.34,-20037508.34,20037508.34,20037508.34`