Question

<template>
  <div id="map"></div>
</template>

<script>
import L from 'leaflet/dist/leaflet';
import '@supermap/iclient-leaflet/dist/iclient-leaflet';
import 'leaflet/dist/leaflet.css';
export default {
  name: 'HelloWebgisLandUse',

  data() {
    return {};
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      const dataurl = 'http://localhost:8090/iserver/services/data-jingjin/rest/data';
      var baseurl = 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China';
      var map = L.map('map', {
        center: [40, 117],
        maxZoom: 18,
        zoom: 7,
      });
      new L.supermap.TiledMapLayer(baseurl).addTo(map);
      let themeLayer = L.supermap
        .UniqueThemeLayer('ThemeLayer', {
          // 开启 hover 高亮效果
          isHoverAble: true,
          opacity: 0.8,
          alwaysMapCRS: true,
        })
        .addTo(map);
      // 图层基础样式
      themeLayer.style = new L.supermap.ThemeStyle({
        shadowBlur: 3,
        shadowColor: '#000000',
        shadowOffsetX: 1,
        shadowOffsetY: 1,
        fillColor: '#FFFFFF',
      });
      // hover 高亮样式
      themeLayer.highlightStyle = new L.supermap.ThemeStyle({
        stroke: true,
        strokeWidth: 2,
        strokeColor: 'blue',
        fillColor: '#00F5FF',
        fillOpacity: 0.2,
      });
      // 风格数组，设定值对应的样式
      themeLayer.styleGroups = [
        {
          value: '草地',
          style: {
            fillColor: '#C1FFC1',
          },
        },
        {
          value: '城市',
          style: {
            fillColor: '#CD7054',
          },
        },
        {
          value: '灌丛',
          style: {
            fillColor: '#7CCD7C',
          },
        },
        {
          value: '旱地',
          style: {
            fillColor: '#EE9A49',
          },
        },
        {
          value: '湖泊水库',
          style: {
            fillColor: '#8EE5EE',
          },
        },
        {
          value: '经济林',
          style: {
            fillColor: '#548B54',
          },
        },
        {
          value: '沙漠',
          style: {
            fillColor: '#DEB887',
          },
        },
        {
          value: '水浇地',
          style: {
            fillColor: '#E0FFFF',
          },
        },
        {
          value: '水田',
          style: {
            fillColor: '#388E8E',
          },
        },
        {
          value: '用材林',
          style: {
            fillColor: '#556B2F',
          },
        },
        {
          value: '沼泽',
          style: {
            fillColor: '#2F4F4F',
          },
        },
        {
          value: '缺省风格',
          style: {
            fillColor: '#ABABAB',
          },
        },
      ];
      // 用于单值专题图的属性字段名称
      themeLayer.themeField = "LANDTYPE";
      //查询feature数据
      let getFeatureBySQLParams = new L.supermap.GetFeaturesBySQLParameters({
        queryParameter: new L.supermap.FilterParameter({
          name: 'Jingjin',
          attributeFilter: 'SMID > -1',
        }),
        toIndex: 500,
        datasetNames: ['Jingjin:Landuse_R'],
      });
      //数据预处理并添加到专题图图层
      L.supermap.FeatureService(dataurl).getFeaturesBySQL(
        getFeatureBySQLParams,
        (serviceResult) => {
          let result = serviceResult.result;
          themeLayer.addFeatures(result.features);
        },
        L.supermap.DataFormat.ISERVER,
      );
    },
  },
};
</script>

<style>
#map {
  width: 100%;
  height: 100%;
}
</style>

Answer 1

您好，您是只有专题图的部分没有记载出来呢，还是连底图都没加载出来，如果是连底图都没有加载成功的话，建议检查引用配置。

如果只是专题图没有的话，可以参考对比下这个demo

https://iclient.supermap.io/examples/leaflet/editor.html#03_themeUnique

希望可以帮助到您。

Comments

这个是客户端专题图

---

您的代码片段中，只看到了您把一个rest服务作为tile瓦片加载在了地图中，作为瓦片地图底图。

定义的专题图layer没有看到您加到地图中，建议您可以参考demo参考了解下使用。