arcgis legend接口使用

giserWu.

已于 2025-01-07 15:40:05 修改

阅读量265

点赞数 4

文章标签： arcgis javascript 前端

于 2025-01-07 15:36:41 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_51355175/article/details/144986826

版权

arcgis legend接口使用

1.url

对于一个arcgis服务，其legend接口请求的url为：url = arcgis服务地址(…MapServer) + “/legend”。输入以上地址，可以看到arcgis服务的图例渲染。
在这里插入图片描述

2.前端渲染图例

2.1 获取图例json数据

对于第一点所述的url，我们只需在后面加上 “?f=json”，这样就能拿到该服务图例的json数据，如下图所示：
在这里插入图片描述

2.2 图例样式的前端渲染

在上述返回的json数据中，每一个layer下，都有lengend对象，我们需要用到的是其imageData和label属性，基于这两个属性，我们可以完成对图例的渲染。

imageData：一串base64编码的字符串，包含了该图例的png图片数据

label：字符串，该图例对应的名称

一个小demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>legend</title>
</head>
<style>
    .box {
        width: 100;
        height: 100px;
        background-color: #fff;
    }
    img {
        width: 30px;
        height: 20px;
    }
</style>
<body>
    <div class="box">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAADlJREFUOI1jYaAyYKGlgf+pYB4jigv/h1Jg0moITVMvjxo4auCogaMGYjcQVgSRCRjRDWSkyDgoAACZkwP/r1UNTQAAAABJRU5ErkJggg==" alt="">
    </div>
</body>
</html>