解锁Web地图符号化技术，探索Web地图的无尽可能

乐享技术

Web地图是一种可在浏览器、桌面应用程序、移动设备中访问并使用的地图，具有跨平台、易分享、可交互的特点。用户无需安装GIS软件，即可随时随地进行在线地图浏览、位置查询、空间分析等。

在传统的Web地图渲染方式中，为保证Web端能够完整一致地渲染出桌面软件制作的地图，服务器通常采用栅格瓦片或矢量瓦片的方式出图，再由客户端渲染，但这两种方式都存在一定的弊端，例如栅格瓦片的格式通常为图片，无法实现要素的点选查询等交互操作；而矢量瓦片在地图显示细节方面可能与桌面地图存在一定差异。

基于上述问题，SuperMap iClient JavaScript 2023推出Web地图符号化技术，提供了和桌面软件一致的矢量地图符号库以及轻松便捷的绘制方式，在保证和桌面软件制图效果一致的同时，还能够使前端能够更加简单地绘制丰富精美的地图样式、实现各类地图交互功能。

01丰富的Web地图符号资源

SuperMap iClient for MapboxGL 2023的Web符号库内置了丰富的Web地图符号资源，覆盖了桌面软件SuperMap iDesktop/iDesktopX中大部分的基础点、线、面符号，涉及行政、人口、交通、水系、地貌、管线、居民地、土地调查等广泛的行业应用场景，可满足不同行业制图需求。

桌面端符号与Web符号对比

采用Web符号制图可实现与桌面软件中基础符号样式一致的制图效果，轻松将桌面端地图迁移至Web端，弥补了传统桌面端地图在实时更新、跨平台分享等方面的不足。

桌面端和Web端制图效果对比

02便捷的Web符号上图流程SuperMap iClient for MapboxGL 2023提供了便捷的Web符号绘制方式，在配置好开发环境的情况下在地图中绘制Web符号，一般包括以下步骤：1.配置符号资源路径，快速获取完整的Web符号资源；2.传入Web符号库中的符号ID ，使用接口loadSymbol和addSymbol加载相应ID的Web符号，同时将Web符号添加至地图；3.使用接口addLayer将图层添加至地图，并指定图层所使用的Web符号。以上步骤的关键代码如下：SuperMap iClient for MapboxGL 2023不仅可以为单个图层中的所有要素指定统一的Web符号，还可以采用符号支持的MapboxGL表达式，以数据驱动的方式为图层中不同属性的要素指定不同的符号，从而在单个图层上多维度展示空间数据，使地图表达的信息更丰富。比如通过数据驱动为不同的土地类型设置不同的符号，以表达土地类型之间的差异，关键代码如下：

Web面符号的数据驱动制图效果

03参数级的自定义Web符号样式

用户除了使用Web符号库中已有的符号，还可以根据自身需求，基于Mapbox样式规范自定义Web符号样式。Mapbox样式规范是定义地图视觉外观的文档，SuperMap iClient for MapboxGL 2023支持的Web符号就是由样式规范中layout和paint组成的符号对象（layout中的visibility属性除外）。

通过SuperMap iClient for MapboxGL 2023自定义Web符号，一方面可以定义新的符号对象来创建全新的符号样式；另一方面也可以在Web符号库中已有符号的基础上重新调整符号样式。Web符号的layout和paint属性分别定义了符号的布局和渲染方式，支持符号样式的参数级调整，实现细粒度的符号定制。

点、线、面符号支持定制的符号样式通过以下代码可自定义Web线符号样式：04丰富易用的Web符号库示例

为了方便用户快速上手Web符号制图，SuperMap iClient for MapboxGL 2023提供了一系列即拿即用的在线示例以供参考，包括：Web符号库、Web符号编辑器以及丰富的Web符号制图成果。

Web符号库Web符号库示例以卡片列表的形式可视化地展示了SuperMap iClient for MapboxGL 2023所有目前支持的Web符号，便于用户在制图过程中查询、引用Web符号。在每个符号卡片中，提供了符号名称、上图效果和符号ID，单击某一符号即可查看样式代码，直观了解符号样式的实现方式。支持在代码中通过符号ID加载Web符号，实现符号快速上图。

示例-Web符号库

Web符号编辑器

在Web符号编辑器示例中，可在线交互式地编辑符号样式，内置了多个点线面图层，可即时浏览符号上图效果，便于用户自定义点、线、面Web符号样式。支持编辑的符号样式如下：

• 点符号：颜色、大小、透明度、相对偏移值、旋转角；
• 线符号：颜色、透明度、线宽、偏移量、模糊度、线段连接方式、线段端点样式、相对偏移值；
• 面符号：颜色、透明度。

示例-Web符号编辑器

Web符号制图示例Web符号制图示例展示了各种点、线、面Web符号的上图效果和代码实现方式，示例地图涉及土地利用、河流分级、人口密度、经济发展、GDP等专题。丰富的Web符号制图示例每个制图示例均由HTML页面和源代码编辑器组成，HTML页面展示了示例的可视化效果，源代码编辑器中展示了示例的实现代码，可通过在线编辑代码修改符号样式，即时运行代码浏览符号上图效果。源代码编辑器和HTML页面本文从Web符号的符号资源、上图流程、自定义能力、制图示例四方面介绍了SuperMap iClient JavaScript 2023的Web符号化制图能力，可轻松复刻桌面软件制作的基础地图，实现更加多样化的Web地图制图效果，充分发挥Web地图的跨平台、易分享、可交互的优势。欢迎点击文末「阅读原文」，了解SuperMap iClient JavaScript 2023并体验Web制图乐趣。此外，如果想要通过零代码开发实现Web符号化制图，地图工作室WebApp也集成了丰富的地图可视化效果，有与SuperMap iClient JavaScript 2023中一致的Web符号资源，欢迎从SuperMap iPortal应用中心进入地图工作室，在线轻松创作Web地图。地图工作室WebApp的Web符号化制图能力作者 平台产品线产品工程团队 文心雨编辑 周芯宇审核 吴晓燕审签 刘宏恺「面对多变设计需求与异地协同难题，SuperMap iDesigner3D助您轻松应对！它基于真实地形地貌特征，实现实时三维建模与效果即时展现，多人交互编辑、打破地域界限，让建筑设计、道路设计及更多规划设计更精准、更高效。」 超图方言 2024 看更多优质内容 关注超图 星标我们！

(超图软件)