首页 / 浏览问题 / WebGIS / 问题详情
单值专题图加载不出来,底图可以加载出来
5EXP 2023年03月27日
<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: 'HelloWebgisTheme',

  data() {

    return {};

  },

  mounted() {

    this.init();

  },

  methods: {

    init() {

      var baseurl = 'http://localhost:8090/iserver/services/map-china400/rest/maps/China';

      // var dataurl = 'http://localhost:8090/iserver/services/map-tangshan-2/rest/maps/hex_1000_SpatialJoin';

      // 初始化地图信息

      var map = L.map('map', {

        center: [30, 84],

        maxZoom: 18,

        zoom: 3,

        // crs: L.CRS.EPSG4326,

        // center: [39.954, 116.36],

        // zoom: 12,

        // maxZoom: 18,

        // minZoom: 6,

      });

      new L.supermap.TiledMapLayer(baseurl).addTo(map);

      let style1, style2, style3, style4, style5, style6;

      style1 = new L.Supermap.ServerStyle({

        fillForeColor: new L.Supermap.ServerColor(196, 255, 189),

        lineColor: new L.supermap.ServerColor(255, 255, 255),

        lineWidth: 0.1,

      });

      style2 = new L.supermap.ServerStyle({

        fillForeColor: new L.supermap.ServerColor(196, 255, 189),

        lineColor: new L.supermap.ServerColor(255, 255, 255),

        lineWidth: 0.1,

      });

      style3 = new L.supermap.ServerStyle({

        fillForeColor: new L.supermap.ServerColor(255, 173, 173),

        lineColor: new L.supermap.ServerColor(255, 255, 255),

        lineWidth: 0.1,

      });

      style4 = new L.supermap.ServerStyle({

        fillForeColor: new L.supermap.ServerColor(255, 239, 168),

        lineColor: new L.supermap.ServerColor(255, 255, 255),

        lineWidth: 0.1,

      });

      style5 = new L.supermap.ServerStyle({

        fillForeColor: new L.supermap.ServerColor(173, 209, 255),

        lineColor: new L.supermap.ServerColor(255, 255, 255),

        lineWidth: 0.1,

      });

      style6 = new L.supermap.ServerStyle({

        fillForeColor: new L.supermap.ServerColor(132, 164, 232),

        lineColor: new L.supermap.ServerColor(255, 255, 255),

        lineWidth: 0.1,

      });

      var themeUniqueIteme1 = new L.supermap.ThemeUniqueItem({

          unique: '黑龙江省',

          style: style1,

        }),

        themeUniqueIteme2 = new L.supermap.ThemeUniqueItem({

          unique: '湖北省',

          style: style2,

        }),

        themeUniqueIteme3 = new L.supermap.ThemeUniqueItem({

          unique: '吉林省',

          style: style3,

        }),

        themeUniqueIteme4 = new L.supermap.ThemeUniqueItem({

          unique: '内蒙古自治区',

          style: style4,

        }),

        themeUniqueIteme5 = new L.supermap.ThemeUniqueItem({

          unique: '青海省',

          style: style5,

        }),

        themeUniqueIteme6 = new L.supermap.ThemeUniqueItem({

          unique: '新疆维吾尔自治区',

          style: style6,

        }),

        themeUniqueIteme7 = new L.supermap.ThemeUniqueItem({

          unique: '云南省',

          style: style1,

        }),

        themeUniqueIteme8 = new L.supermap.ThemeUniqueItem({

          unique: '四川省',

          style: style4,

        }),

        themeUniqueIteme9 = new L.supermap.ThemeUniqueItem({

          unique: '贵州省',

          style: style3,

        }),

        themeUniqueIteme10 = new L.supermap.ThemeUniqueItem({

          unique: '甘肃省',

          style: style3,

        }),

        themeUniqueIteme11 = new L.supermap.ThemeUniqueItem({

          unique: '宁夏回族自治区',

          style: style5,

        }),

        themeUniqueIteme12 = new L.supermap.ThemeUniqueItem({

          unique: '重庆市',

          style: style6,

        }),

        themeUniqueIteme13 = new L.supermap.ThemeUniqueItem({

          unique: '山东省',

          style: style1,

        }),

        themeUniqueIteme14 = new L.supermap.ThemeUniqueItem({

          unique: '安徽省',

          style: style2,

        }),

        themeUniqueIteme15 = new L.supermap.ThemeUniqueItem({

          unique: '江西省',

          style: style3,

        }),

        themeUniqueIteme16 = new L.supermap.ThemeUniqueItem({

          unique: '浙江省',

          style: style4,

        }),

        themeUniqueIteme17 = new L.supermap.ThemeUniqueItem({

          unique: '台湾省',

          style: style2,

        }),

        themeUniqueIteme18 = new L.supermap.ThemeUniqueItem({

          unique: '江苏省',

          style: style6,

        }),

        themeUniqueIteme19 = new L.supermap.ThemeUniqueItem({

          unique: '湖南省',

          style: style5,

        }),

        themeUniqueIteme20 = new L.supermap.ThemeUniqueItem({

          unique: '河南省',

          style: style4,

        }),

        themeUniqueIteme21 = new L.supermap.ThemeUniqueItem({

          unique: '河北省',

          style: style3,

        }),

        themeUniqueIteme22 = new L.supermap.ThemeUniqueItem({

          unique: '福建省',

          style: style5,

        }),

        themeUniqueIteme23 = new L.supermap.ThemeUniqueItem({

          unique: '广西壮族自治区',

          style: style6,

        }),

        themeUniqueIteme24 = new L.supermap.ThemeUniqueItem({

          unique: '西藏自治区',

          style: style2,

        }),

        themeUniqueIteme25 = new L.supermap.ThemeUniqueItem({

          unique: '广东省',

          style: style4,

        }),

        themeUniqueIteme26 = new L.supermap.ThemeUniqueItem({

          unique: '山西省',

          style: style2,

        }),

        themeUniqueIteme27 = new L.supermap.ThemeUniqueItem({

          unique: '陕西省',

          style: style1,

        }),

        themeUniqueIteme28 = new L.supermap.ThemeUniqueItem({

          unique: '天津市',

          style: style5,

        }),

        themeUniqueIteme29 = new L.supermap.ThemeUniqueItem({

          unique: '北京市',

          style: style2,

        }),

        themeUniqueIteme30 = new L.supermap.ThemeUniqueItem({

          unique: '辽宁省',

          style: style1,

        });

      var themeUniqueItemes = [

        themeUniqueIteme1,

        themeUniqueIteme2,

        themeUniqueIteme3,

        themeUniqueIteme4,

        themeUniqueIteme5,

        themeUniqueIteme6,

        themeUniqueIteme7,

        themeUniqueIteme8,

        themeUniqueIteme9,

        themeUniqueIteme10,

        themeUniqueIteme11,

        themeUniqueIteme12,

        themeUniqueIteme13,

        themeUniqueIteme14,

        themeUniqueIteme15,

        themeUniqueIteme16,

        themeUniqueIteme17,

        themeUniqueIteme18,

        themeUniqueIteme19,

        themeUniqueIteme20,

        themeUniqueIteme21,

        themeUniqueIteme22,

        themeUniqueIteme23,

        themeUniqueIteme24,

        themeUniqueIteme25,

        themeUniqueIteme26,

        themeUniqueIteme27,

        themeUniqueIteme28,

        themeUniqueIteme29,

        themeUniqueIteme30,

      ];

      let themeUnique = new L.supermap.ThemeUnique({

        uniqueExpression: 'Name',

        items: themeUniqueItemes,

        defaultStyle: style1,

      });

      var themeParameters = new L.supermap.ThemeParameters({

        datasetNames: ['China_Province_pg'],

        dataSourceNames: ['China'],

        themes: [themeUnique],

      });

let themeService = L.supermap.themeService(baseurl);

      themeService.getThemeInfo(themeParameters, function (serviceResult) {

        var result = serviceResult.result;

        if (result && result.newResourceID) {

          let themeLayer= L.supermap.TiledMapLayer(baseurl, {

            noWrap: true,

            cacheEnabled: false,

            transparent: true,

            layersID: result.newResourceID,

          })

          themeLayer.setZIndex(5).addTo(map);

        }

      });

    },

  },

};

</script>

<style>

#map {

  width: 100%;

  height: 100%;

}

#heatNumbers,

#heatRadius {

  width: 50px;

  display: inline-block;

}

</style>

1个回答

您好,建议您检查style1、2、3、4、5、6的定义地方和 themeService.getThemeInfo使用的地方,格式是否存在特殊制表符、符号

以下是我对您代码中有问题部分移除修改后测试正常的代码,您可以参考一下。


    var baseurl = 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China';

// var dataurl = 'http://localhost:8090/iserver/services/map-tangshan-2/rest/maps/hex_1000_SpatialJoin';

// 初始化地图信息

var map = L.map('map', {

center: [30, 84],

maxZoom: 18,

zoom: 3,

// crs: L.CRS.EPSG4326,

// center: [39.954, 116.36],

// zoom: 12,

// maxZoom: 18,

// minZoom: 6,

});

new L.supermap.TiledMapLayer(baseurl).addTo(map);


        var themeService = new L.supermap.ThemeService(baseurl);
        var style1, style2, style3, style4, style5, style6;
        style1 = new L.supermap.ServerStyle({
            fillForeColor: new L.supermap.ServerColor(248, 203, 249),
            lineColor: new L.supermap.ServerColor(255, 255, 255),
            lineWidth: 0.1
        });
        style2 = new L.supermap.ServerStyle({
            fillForeColor: new L.supermap.ServerColor(196, 255, 189),
            lineColor: new L.supermap.ServerColor(255, 255, 255),
            lineWidth: 0.1
        });
        style3 = new L.supermap.ServerStyle({
            fillForeColor: new L.supermap.ServerColor(255, 173, 173),
            lineColor: new L.supermap.ServerColor(255, 255, 255),
            lineWidth: 0.1
        });
        style4 = new L.supermap.ServerStyle({
            fillForeColor: new L.supermap.ServerColor(255, 239, 168),
            lineColor: new L.supermap.ServerColor(255, 255, 255),
            lineWidth: 0.1
        });
        style5 = new L.supermap.ServerStyle({
            fillForeColor: new L.supermap.ServerColor(173, 209, 255),
            lineColor: new L.supermap.ServerColor(255, 255, 255),
            lineWidth: 0.1
        });
        style6 = new L.supermap.ServerStyle({
            fillForeColor: new L.supermap.ServerColor(132, 164, 232),
            lineColor: new L.supermap.ServerColor(255, 255, 255),
            lineWidth: 0.1
        });

        var themeUniqueIteme1 = new L.supermap.ThemeUniqueItem({
                unique: "黑龙江省",
                style: style1
            }),
            themeUniqueIteme2 = new L.supermap.ThemeUniqueItem({
                unique: "湖北省",
                style: style2
            }),
            themeUniqueIteme3 = new L.supermap.ThemeUniqueItem({
                unique: "吉林省",
                style: style3
            }),
            themeUniqueIteme4 = new L.supermap.ThemeUniqueItem({
                unique: "内蒙古自治区",
                style: style4
            }),
            themeUniqueIteme5 = new L.supermap.ThemeUniqueItem({
                unique: "青海省",
                style: style5
            }),
            themeUniqueIteme6 = new L.supermap.ThemeUniqueItem({
                unique: "新疆维吾尔自治区",
                style: style6
            }),
            themeUniqueIteme7 = new L.supermap.ThemeUniqueItem({
                unique: "云南省",
                style: style1
            }),
            themeUniqueIteme8 = new L.supermap.ThemeUniqueItem({
                unique: "四川省",
                style: style4
            }),
            themeUniqueIteme9 = new L.supermap.ThemeUniqueItem({
                unique: "贵州省",
                style: style3
            }),
            themeUniqueIteme10 = new L.supermap.ThemeUniqueItem({
                unique: "甘肃省",
                style: style3
            }),
            themeUniqueIteme11 = new L.supermap.ThemeUniqueItem({
                unique: "宁夏回族自治区",
                style: style5
            }),
            themeUniqueIteme12 = new L.supermap.ThemeUniqueItem({
                unique: "重庆市",
                style: style6
            }),
            themeUniqueIteme13 = new L.supermap.ThemeUniqueItem({
                unique: "山东省",
                style: style1
            }),
            themeUniqueIteme14 = new L.supermap.ThemeUniqueItem({
                unique: "安徽省",
                style: style2
            }),
            themeUniqueIteme15 = new L.supermap.ThemeUniqueItem({
                unique: "江西省",
                style: style3
            }),
            themeUniqueIteme16 = new L.supermap.ThemeUniqueItem({
                unique: "浙江省",
                style: style4
            }),
            themeUniqueIteme17 = new L.supermap.ThemeUniqueItem({
                unique: "台湾省",
                style: style2
            }),
            themeUniqueIteme18 = new L.supermap.ThemeUniqueItem({
                unique: "江苏省",
                style: style6
            }),
            themeUniqueIteme19 = new L.supermap.ThemeUniqueItem({
                unique: "湖南省",
                style: style5
            }),
            themeUniqueIteme20 = new L.supermap.ThemeUniqueItem({
                unique: "河南省",
                style: style4
            }),
            themeUniqueIteme21 = new L.supermap.ThemeUniqueItem({
                unique: "河北省",
                style: style3
            }),
            themeUniqueIteme22 = new L.supermap.ThemeUniqueItem({
                unique: "福建省",
                style: style5
            }),
            themeUniqueIteme23 = new L.supermap.ThemeUniqueItem({
                unique: "广西壮族自治区",
                style: style6
            }),
            themeUniqueIteme24 = new L.supermap.ThemeUniqueItem({
                unique: "西藏自治区",
                style: style2
            }),
            themeUniqueIteme25 = new L.supermap.ThemeUniqueItem({
                unique: "广东省",
                style: style4
            }),
            themeUniqueIteme26 = new L.supermap.ThemeUniqueItem({
                unique: "山西省",
                style: style2
            }),
            themeUniqueIteme27 = new L.supermap.ThemeUniqueItem({
                unique: "陕西省",
                style: style1
            }),
            themeUniqueIteme28 = new L.supermap.ThemeUniqueItem({
                unique: "天津市",
                style: style5
            }),
            themeUniqueIteme29 = new L.supermap.ThemeUniqueItem({
                unique: "北京市",
                style: style2
            }),

            themeUniqueIteme30 = new L.supermap.ThemeUniqueItem({
                unique: "辽宁省",
                style: style1
            });

        var themeUniqueItemes = [
            themeUniqueIteme1, themeUniqueIteme2, themeUniqueIteme3, themeUniqueIteme4, themeUniqueIteme5,
            themeUniqueIteme6, themeUniqueIteme7, themeUniqueIteme8, themeUniqueIteme9, themeUniqueIteme10,
            themeUniqueIteme11, themeUniqueIteme12, themeUniqueIteme13, themeUniqueIteme14, themeUniqueIteme15,
            themeUniqueIteme16, themeUniqueIteme17, themeUniqueIteme18, themeUniqueIteme19, themeUniqueIteme20,
            themeUniqueIteme21, themeUniqueIteme22, themeUniqueIteme23, themeUniqueIteme24, themeUniqueIteme25,
            themeUniqueIteme26, themeUniqueIteme27, themeUniqueIteme28, themeUniqueIteme29, themeUniqueIteme30
        ];

        var themeUnique = new L.supermap.ThemeUnique({
            uniqueExpression: "Name",
            items: themeUniqueItemes,
            defaultStyle: style1
        });
        var themeParameters = new L.supermap.ThemeParameters({
            datasetNames: ["China_Province_pg"],
            dataSourceNames: ["China"],
            themes: [themeUnique]
        });
        themeService.getThemeInfo(themeParameters, function (serviceResult) {
            var result = serviceResult.result;
            if (result && result.newResourceID) {
                var themeLayer = new L.supermap.TiledMapLayer(baseurl, {
                    noWrap: true,
                    cacheEnabled: false,
                    transparent: true,
                    layersID: result.newResourceID
                }).setZIndex(5).addTo(map);
            }
        });
    
    
    

希望可以帮助到您。

9,603EXP 2023年03月27日
非常感谢
...