首页 / 浏览问题 / 其他 / 问题详情
map.addLayer(themeLayer);报错,专题图加载不出来,
23EXP 初出茅庐 2022年10月27日

报错内容:this._map.latLngToAccurateContainPint is not a function

我是想加载案例中https://iclient.supermap.io/examples/leaflet/editor.html#graphThemeLayer

的饼图,通过打印themeLayer,发现有一点点不一样,官方的是

我的这个位置是Vector,饼图出不来,报上面的错误,不知道是什么问题

2 个回答

您好,从您的描述来看,可能是您的 themeLayer 定义或者绑定的内容不对。

该demo中的 themeLayer 是L.supermap.GraphThemeLayer,

参考https://iclient.supermap.io/docs/leaflet/GraphThemeLayer.html

希望可以帮助到您。

6,722EXP 登峰造极 2022年10月27日
是按照案例写的,地图添加之后:

 //初始化数据和样式
    initFeaterDatasAddStyles();
    var features,
        chartsSettingForBarAddBar3DCommon,
        chartsSettingForPointOrLine,
        chartsSettingForPieOrRing,
        themeLayerOptions;

    function initFeaterDatasAddStyles() {
        var feas = [];
        for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
            // 省居民消费水平(单位:元)信息
            var provinceInfo = chinaConsumptionLevel[i];
            var fea = {
                "type": "feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [provinceInfo[1], provinceInfo[2]]
                },
                "properties": {
                    "NAME": provinceInfo[0],
                    "CON2009": provinceInfo[3],
                    "CON2010": provinceInfo[4],
                    "CON2011": provinceInfo[5],
                    "CON2012": provinceInfo[6],
                    "CON2013": provinceInfo[7],
                }
            };

            feas.push(fea);
        }

        features = {
            "type": "FeatureCollection",
            "features": feas
        };

 //Pie add Ring chartsSetting
        chartsSettingForPieOrRing = {
            width: 240,
            height: 100,
            codomain: [0, 40000],       // 允许图表展示的值域范围,此范围外的数据将不制作图表
            sectorStyle: {fillOpacity: 0.8},      // 柱状图中柱条的(表示字段值的图形)样式
            sectorStyleByFields: [
                {fillColor: "#FFB980"},
                {fillColor: "#5AB1EF"},
                {fillColor: "#B6A2DE"},
                {fillColor: "#2EC7C9"},
                {fillColor: "#D87A80"}],
            sectorHoverStyle: {fillOpacity: 1},
            xShapeBlank: [10, 10, 10],      // 水平方向上的空白间距参数
            axisYLabels: ["4万", "3万", "2万", "1万", "0"],         // y 轴标签内容
            axisXLabels: ["09年", "10年", "11年", "12年", "13年"],         // x 轴标签内容
            backgroundStyle: {fillColor: "#CCE8CF"},        // 背景样式
            backgroundRadius: [5, 5, 5, 5],        // 背景框圆角参数
        };

        //设置graphThemeLayer option参数
        themeLayerOptions = {
            map: map,
            isOverLay: true,
            attributions: " ",
            themeFields: ["CON2009", "CON2010", "CON2011", "CON2012", "CON2013"],
            opacity: 0.9,
            chartsSetting: {},
        };
    }

createPieThemeLayer()

//创建Pie图表
    function createPieThemeLayer() {
        themeLayerOptions.chartsSetting = chartsSettingForPieOrRing;
        themeLayer = new L.supermap.GraphThemeLayer("PieLayer", "Pie", themeLayerOptions);
        themeLayer.addFeatures(features);
        map.addLayer(themeLayer);
        themeLayer.on('mousemove', showInfoWin);
        themeLayer.on("mouseout", closeInfoWin);
    }

然后我一行一行的打印每次的变化,map.addLayer(themeLayer);就报错了,因为我只想要饼图就没写图层切换和其他图表的代码,在 themeLayer.addFeatures(features);执行之前,themeLayer打印和官方都是一样的

问题已解决:vue3  leaflet

解决方法,我之前都是通过import 引入leaflet,研究视频之后,其实不是这样的,是要下载两个文件,https://iclient.supermap.io/web/introduction/leafletDevelop.html#Ready,放到项目public下,在html中引入,在组件中

let L = window.L就正常使用了,虽然window.L划红线,但是运行没问题哈laugh

23EXP 初出茅庐 2022年10月31日
...