获取arcgis server 发布的WMS服务的图例，然后将图例在echart中显示

最新推荐文章于 2025-06-10 19:40:08 发布

果丹皮1

最新推荐文章于 2025-06-10 19:40:08 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： WMS legend图例 echarts

本文链接：https://blog.youkuaiyun.com/qq_33216658/article/details/107833225

WMS 同时被 3 个专栏收录

1 篇文章

订阅专栏

legend图例

1 篇文章

订阅专栏

echarts

1 篇文章

订阅专栏

本文介绍如何从WMS服务获取图例并将其整合到ECharts中进行可视化展示，通过修改图例数据的图标为图片路径实现，具体步骤包括获取WMS服务的图例图片、将图片路径应用到ECharts的legend配置中。

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

实现思路：

WMS中legend是img格式，并且echart支持将图片作为图例样式可视化展示，所以获取WMS图例的img再加载到echart。

1、如下是WMS服务地址：http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer

2、如下是legend展示：

3、在WMS服务json文件中，layerId和url确定图例img的路径，可以获取图片如下

4、将图例img加载到echart中，将legend中data的icon改为图片路径即可，格式：“image://图片路径”

let name1 = ["大牛", "二牛", "三牛"];
      let value = [500, 200, 100];
      let chartData = [];
      for (var land in name1) {
        chartData.push({
          value: value[land],
          name: name1[land],
        });
      }
      var myChart = echarts.init(document.getElementById("main"));
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        color: ["#4472C5", "#ED7C30", "#fff"],

        legend: {
          orient: "horizontal", //horizontal vertical
          icon: "rect",
          x: "right",
          y: "bottom",
          textStyle: {
            //图例文字的样式
            color: "#0b2b5e",
            fontSize: 16,
          },
          // data: name1,
          borderColor: "#000",
          borderWidth: 2,
          data: [
            {
              name: "大牛",
            },
            {
              name: "二牛",
            },
            {
              name: "三牛",
              icon:
                "image://http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/2/images/3D84D80",
            },
          ],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["30%", "70%"],
            // radius: '70%',
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold",
                },
              },
            },
            labelLine: {
              normal: {
                show: true,
              },
            },
            data: chartData,
          },
        ],
      });

5、效果如下：