SuperMap iClient for MapboxGL通过不同格式资源加载REST地图服务

最新推荐文章于 2023-12-30 00:50:43 发布
转载 最新推荐文章于 2023-12-30 00:50:43 发布 · 955 阅读 · 3 ·
CC 4.0 BY-SA版权
原文链接：https://blog.csdn.net/weixin_42493559/article/details/135290073
文章标签：

#前端 #javascript #SuperMap #MapboxGL

本文介绍了SuperMapiClientforMapboxGL支持的四种iServer资源模板，包括iServerzxyTileImage、iServerimage、iServertileImage和iServertileFeature，展示了各自资源的参数格式、示例代码和加载效果，重点在于栅格瓦片和矢量瓦片的使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 目录

前言

一、iServer zxyTileImage资源模板

1.1 tiles参数填写格式

1.2 示例代码

1.3 加载效果

二、iServer image资源模板

2.1 tiles参数填写格式

2.2 示例代码

2.3加载效果

三、iServer tileimage资源模板

3.1 tiles参数填写格式

3.2 示例代码

3.3加载效果

四、iServer tileFeature资源模板

4.1style参数填写格式

4.2 示例代码

4.3加载效果

作者：kxj

前言

    SuperMap iClient for MapboxGL支持通过不同格式的资源加载REST地图服务，包括：iServer zxyTileImage资源模板、iServer image资源模板、iServer tileImage资源模板、iServer tileFeature资源模板。其中：iServer zxyTileImage资源模板、iServer image资源模板、iServer tileImage资源模板为栅格瓦片出图；Server tileFeature资源模板为矢量瓦片出图，接下来一起看看不同格式资源如何进行加载吧！

一、iServer zxyTileImage资源模板

    zxyTileImage 资源就表示以 ZXY 规范划分的地图的小块。详细请参考：ZXY标准地图瓦片。需要注意的是ZXY规范的地图瓦片仅支持 Web Mercator 坐标系(即 PCS_WGS_1984_WORLD_MERCATOR ，EPSG Code：3857)下的固定比例尺集合，所以非该坐标系和比例尺瓦片发布的REST地图服务无法使用该资源出图。

1.1 tiles参数填写格式

tiles: [‘http://localhost:8091/iserver/services/map-world/rest/maps/World/zxyTileImage.png?z={z}&x={x}&y={y}’],

1.2 示例代码

  <html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title data-i18n="resources.title_tiledMapLayer_4326WGS84"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
    <script type="text/javascript"  src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script type="text/javascript">
    var map = new mapboxgl.Map({
       container: 'map', // container id
       style: {
           version: 8,
           sources: {
               'raster-tiles': {
                   type: 'raster',
                   tileSize: 256,
                   tiles: ['http://localhost:8091/iserver/services/map-world/rest/maps/World/zxyTileImage.png?z={z}&x={x}&y={y}'],
               }
           },

           layers: [
               {
                   id: 'simple-tiles',
                   type: 'raster',
                   source: 'raster-tiles',
                   minzoom: 0,
                   maxzoom: 22
               }
           ]
       },
       center: [0, 0],
       zoom: 2
   });
    </script>
  </body>
</html>

注意：zxyTileImage资源出图时不需要携带rasterSource: 'iserver’参数

1.3 加载效果

在这里插入图片描述

二、iServer image资源模板

image 资源作为 map 资源的一个子资源，用于获取 map 资源的一幅图片。

2.1 tiles参数填写格式

tiles: [‘http://localhost:8091/iserver/services/map-world/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}’],

2.2 示例代码

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title data-i18n="resources.title_tiledMapLayer_4326WGS84"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
    <script type="text/javascript" include="mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script type="text/javascript">
       var map = new mapboxgl.Map({
           container: 'map', // container id
           style: {
               version: 8,
               sources: {
                   'raster-tiles': {
                       type: 'raster',
                       tileSize: 256,
                        tiles: ['http://localhost:8091/iserver/services/map-world/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}'],
                       //rasterSource: 'iserver'
                   }
               },

               layers: [
                   {
                       id: 'simple-tiles',
                       type: 'raster',
                       source: 'raster-tiles',
                       minzoom: 0,
                       maxzoom: 22
                   }
               ]
           },
           crs: 'EPSG:4326', // 或者 mapboxgl.CRS.EPSG4326  或者 new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
           center: [0, 0],
           zoom: 0
       });
    </script>
  </body>
</html>

注意：1. image资源出图时不需要携带rasterSource: 'iserver’参数。
2.官网示例服务加载存在转义问题，如需使用示例服务请使用本地示例服务。

2.3加载效果

在这里插入图片描述

三、iServer tileimage资源模板

    通过对 tileImage 资源执行 GET 请求，可以获取地图（{mapName}）中相应的格网图片，可以在 URI 中包含一些定制输出图片的参数，如设置出图的图层、图片大小、格网行列号、地图是否透明、动态投影的目标投影等。这些参数必须包含在 URI 中，不能放在请求体里。格网的划分规则如下：将地图全幅显示时的图片从左上角开始，往下和往右进行切割，切割的大小默认为 256*256 像素，左上角的格网行号为 0，列号为 0，往下和往右依次递增。其中，格网的大小和地图的比例尺等参数都可以在请求时进行指定。

3.1 tiles参数填写格式

tiles: [‘http://localhost:8091/iserver/services/map-world/rest/maps/World/tileimage.png?scale={scale}&x={x}&y={y}&width={width}&height={height}&origin={“x”:-180,“y”:90}’],

3.2 示例代码

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title data-i18n="resources.title_tiledMapLayer_4326WGS84"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
    <script type="text/javascript" include="mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script type="text/javascript">
       var map = new mapboxgl.Map({
           container: 'map', // container id
           style: {
               version: 8,
               sources: {
                   'raster-tiles': {
                       type: 'raster',
                       tileSize: 256,
                       tiles: ['http://localhost:8091/iserver/services/map-world/rest/maps/World/tileimage.png?scale={scale}&x={x}&y={y}&width={width}&height={height}&origin={"x":-180,"y":90}'],
                       //rasterSource: 'iserver'
                   }
               },

               layers: [
                   {
                       id: 'simple-tiles',
                       type: 'raster',
                       source: 'raster-tiles',
                       minzoom: 0,
                       maxzoom: 22
                   }
               ]
           },
           crs: 'EPSG:4326', // 或者 mapboxgl.CRS.EPSG4326  或者 new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
           center: [0, 0],
           zoom: 0
       });
    </script>
  </body>
</html>

注意：1. tileImage资源出图时不需要携带rasterSource: 'iserver’参数。
2.官网示例服务加载存在转义问题，如需使用示例服务请使用本地示例服务。

3.3加载效果

在这里插入图片描述

四、iServer tileFeature资源模板

    通过对 tileFeature 资源执行请求，可以获取地图中矢量图层{layerName}中的瓦片要素。客户端获取的瓦片要素，可以通过自定义的样式进行渲染，并可查询交互。

4.1style参数填写格式

style: ‘http://localhost:8091/iserver/services/map-china400/rest/maps/China/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true’,
(注：tileFeature为矢量瓦片无法加载栅格数据图层，World地图包含栅格图层使用tileFeature出图会丢失栅格数据图层，因此该示例使用China服务）

4.2 示例代码

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title data-i18n="resources.title_tiledMapLayer_4326WGS84"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
    <script type="text/javascript"  src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script type="text/javascript">
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'http://localhost:8091/iserver/services/map-china400/rest/maps/China/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
           center: [120.143, 30.236],
           zoom: 3
    });
    </script>
  </body>
</html>

4.3加载效果

mapboxgl加载天地图
OctoberSun 的博客
06-11 1295
mapboxgl加载天地图
多种方式发布WebGIS地图服务以及显示
啊峰成长记
09-01 1万+
目录一、WebGIS基础1. 什么是WebGIS？（WebGIS的介绍、技术、架、功能/应用、产品）2. OGC规范3. 主流WebGIS架构4. 主流GIS服务器4.1 ArcGIS Server4.3 SuperMap iServer4.3 GeoServer5. 主流GIS框架（介绍、区别）5.1 ArcGIS API for JavaScript5.2 SuperMap iClient JavaScript5.3 OpenLayers5.4 Mapbox 与 MapboxGL5.5 Leaflet二
OpenLayers + SuperMap iClient for OpenLayers 加载超图地图服务 4326 3857 rest
josiecici的博客
01-26 6707
服务地址：https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China 服务分类：地图服务 服务坐标系：3857 layers内有子图层： 服务地址：https://iserver.supermap.io/iserver/services/map-world/rest/maps/World 服务坐标系：4326 同样的layers内也有子图层，截图省略。。。 加载代码，这里我的代码是从超图官网获取的： v
SuperMap iClient for MapboxGL数据加载与更新
qq_29109799的博客
12-03 565
    经常有客户咨询，说SuperMap iClient只有对点数据集的修改 & 添加，对于面数据的操作不清楚改如何去做，下面我就以iClient for MapboxGL 和其Draw控件来实现面数据加载与编辑的功能。     效果截图     实现面数据加载与编辑思路：       1. 数据查询;  &
SuperMap iClient for MapboxGL如何正确对接iServer发布的WMTS服务
Carlo_paipai的博客
12-20 377
最近有小伙伴用MapboxGL对接iServer发布的WMTS服务时，使用Custom的矩阵集对接出现了偏移的情况，这是因为MapboxGL只能加载全球剖分的WMTS服务，本数据的Custom不属于这种组织方法，所以无法加载，即使加载出图了位置也是不对的。接下来我将给大家介绍正确对接的流程。
【Cesium】原生Cesium加载超图rest地图服务
冰美式当作酒
10-10 1770
【Cesium】原生Cesium加载超图rest地图服务。
mapbox-gl加载超图iserver发布切片
地理信息技术杂谈 博客，欢迎技术交流
01-10 2290
如何在mapbox-gl加载超图iserver发布的切片数据。 超图isever发布数据的形式，跟arcgis server发布的有些不同，在加载时，也有一定的区别，超图在线可测试地图数据网址如下： http://support.supermap.com:8090/iserver/services/map-world/rest/maps/World 支持操作如下截图： mapbox-gl加载iserver发布的切片数据，可以采取以下几种方式： tileFeature 矢量切片形式 tileImage
Arcgis for Js之加载wms服务
01-18 3726
概述：本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务。 1、定义resourceInfo var resourceInfo = { extent: new Extent(-126.40869140625,31.02539...
mapbox 添加argis rest 动态地图服务
qq_34870529的博客
05-06 2157
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>mapbox 添加argis rest 动态地图服务</title> <meta name='viewport' content='initial-scale=1,max...
SuperMap iClient3D for WebGL加载rest地图服务设置地图子图层过滤
weixin_45646117的博客
04-06 1594
作者：kk 文章目录一、主要使用接口二、步骤1.使用SuperMapImageryProvider加载rest地图服务2.设置过滤条件 一、主要使用接口 setLayerStatusParameters() 二、步骤 1.使用SuperMapImageryProvider加载rest地图服务 代码如下（示例）： //添加SuperMap iServer发布的地图服务 var filterLayer = new Cesium.SuperMapImageryProvider({ url : 'ht
记录使用超图的mapboxgl以及地图api
最新发布
zuiHouHui16Sui的博客
12-30 993
2)由于项目需求,需要进行创建多个海量点图层,mapboxgl是基于webgl封装的,达到一定量的图层的时候就会报WARNING: Too many active WebGL contexts. Oldest context will be lost.看了官网没有像高德那样有marker的hide和show方法,popup也没有高德infowindow的open和close方法.只能去获取dom节点,设置style的隐藏和现实,有点烦.vue3包括包文件的引入也会报ts错误,需要自己去定义,太恶心了。
使用Supermap iobject python和Supermap iServer REST API发布地图服务，你能找到全国目前唯一iobjectpy用法，国产软件生态还是不好哇
qq_42940160的博客
06-05 2140
最近帮助老师干活，进行WebGis的开发，老师要求用国产软件SuperMap，从此开始了一段长达两周的踩坑。至此，使用SuperMap iServer自动发布地图服务的流程全部结束，在此期间我把能查的资料几乎全看了一遍，这些资料几乎全都写的非常简单，甚至没有，真的是一点点摸索出来的，刚从一个坑跳出来，紧接着又跳进下一个坑里。SuperMap的资料太少了，官方文档写的也很简单，不过还好的是SuperMap官方论坛很活跃，他们的技术人员回复很快的。
初识mapbox GL
LZUGIS
03-24 4223
一、概述 最近由于项目的需求，借此机会对mapbox GL做了一个系统的学习，同时也对整个学习过程做一个记录，一方面留作自用，另一方面也希望看到此文的人在学习mapbox GL的时候，能够有所启发、有所收获。 二、快速认识 很多人在学习一个新的webis框架的时候，表示狗咬刺猬——无从下口。对于这一点，我的建议是快速认识。 1.目的 快速认识的目的有两个：1、对框架有一个认知性的理解；2、甄别框架...
mapboxgl.map适应边界框
m0_58555378的博客
09-28 573
// 加载地图事件 initMap() { mapboxgl.accessToken = 'pk.ey/保密……Mg'; let sources = { 'tdt-img': {//影像底图 'type': 'raster', 'tiles': [ 'http://保密……', ], 'tileSize': 256 .
快速入门MapboxGL
热门推荐
SuperMap技术控
10-25 2万+
作者：MR. Mapbox GL JS是一个JavaScript库，使用WebGL渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL渲染意味着高性能，MapboxGL能够渲染大量的地图要素，拥有流畅的交互以及动画效果、可以显示立体地图并且支持移动端，是一款十分优秀的WEB GIS开发框架。Hello MapboxGL现在开始我们的MapBox之旅。 首先在页面引入Mapbox
mapbox-gl-js接口--map对象创建配置
qq_43159578的博客
05-27 1227
创建map对象： new mapboxgl.Map(options:Object); options:Object options.container:将地图呈现的html元素id，指定元素不能有子元素。参数：htmlElement|string option.minZoom:地图最小缩小级别（0-24）。参数number。 option.maxZoom:地图最大放打级别（0-24）。参数number。 option.style:mapbox的地图样式。参数string。 option.hash:如果为tu
【Mapbox GL JS 入门】（2）Map 对象及其属性
椰子的职场成长记录
11-22 1652
源代码Map 对象代表页面的地图，暴露了一些方法和属性供编程修改地图，以及一些交互事件。可以指定容器新建Map，Mapbox会初始化页面上的地图并返回Map 对象。
使用mapboxgl 实现特定的地图效果
boke的博客
12-05 7786
使用mapboxgl 实现特定的地图效果 最近完成的一个项目,dashboard 地图模块的需要和第三方对接，对接要求使用mapboxgl 来对接。以前的项目一直用leaflet库来处理地图需求，mapboxgl 库对我来说很陌生。学习研究一段时间，再基本实现了产品设计的地图交互功能后，我在这里写记录。 先上张设计图： 一、要求实现的功能 1.加载深圳地图瓦片、颜色采用暗色调 2.地图附有蓝色遮罩层，鼠标hover时 ，该区域高亮并展示相应的数据 3. 摄像头点位在地图上显示，两种类型，一个绿色一个蓝色，要
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值