首页 / 浏览问题 / 云GIS / 问题详情
leaflet 地图sql查询,结果渲染报错
2EXP 2023年03月09日

错误内容:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'addLayer')

代码:

let param = new QueryBySQLParameters(
        {
          queryParams: {
            name: "China_Province_pl@China",
            // attributeFilter: `NAME='${name}'`
            attributeFilter: "SmID=5"
          },
        }
      )
      new QueryService('https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China')
        .queryBySQL(param, function (serviceResult) {
          console.log(serviceResult)
          let result = serviceResult.result
          L.geoJson(result.recordsets[0].features, {
              style: function (feature) {
                  return {color: '#000'};
              }
          }).addTo(this.map);

        });

2 个回答

您好,看您报错是没有找到addLayer类,但是看您问题说的是sql查询导致。

请问您现在使用leaflet单纯只是最简单的加载一个地图正常吗,还是单独加载地图是正常的,但是进行一次sql查询时就会报错。
10,758EXP 2023年03月09日
地图能加载出来

我知道问题所在了,queryBySQL(param, function (serviceResult)里面拿不到vue的this实例,改为箭头函数可以了。

但是要渲染的图片链接报500

tileImage.png:1          GET https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/tileImage.png?width=256&height=256&redirect=false&transparent=true&cacheEnabled=true&origin=%7B%22x%22%3A-20037508.342789244%2C%22y%22%3A20037508.342789244%7D&overlapDisplayed=false&scale=8.653637486605572e-7&x=408&y=226 500 (Internal Server Error)

你这个错具体是什么时候报的,每次移动或者缩放到这个位置都一定会报错,并且渲染不出来还是其它什么情况。

使用其他的数据又出现这个问题吗。

放大缩小的时候,就目前调试而言  一个问题不大

我选择的需求是,根据行政区划定位到该位置,且画出边界。

现在是能根据区划名称 查询到,但是还是没渲染出效果来。

查询结果及效果图:

<!--********************************************************************
* Copyright© 2000 - 2022 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_mapQueryBySQL"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
    var map, resultLayer,
        url = "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China";
    map = L.map('map', {
        preferCanvas: true,
        center: [39, 100],
        maxZoom: 18,
        zoom: 5
    });
    new L.supermap.TiledMapLayer(url).addTo(map);
    query();

    function query() {
        console.log("1")
        var param = new L.supermap.QueryBySQLParameters({
            queryParams: {
                name: "China_Province_pl@China",
                attributeFilter: "SMID > 0"
            }
        });
        new L.supermap
            .QueryService(url)
            .queryBySQL(param, function (serviceResult) {
                var result = L.supermap.Util.transform(serviceResult.result.recordsets[0].features, L.CRS.EPSG3857, L.CRS.EPSG4326);
                //widgets.loader.removeLoader();
                console.log(L.geoJSON(result))
                resultLayer = L.geoJSON(result).addTo(map);
            });
    }
</script>
</body>
</html>

您好,我这里测试了下是没有问题的哟,您可以参考下我的代码,就是需要注意这份数据因为多比例尺分级配图,并且数据要素很多,同时是官网示例并发比较大,查询需要耐心等待一会返回结果,正常项目中不存在这个问题。

https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China

可以了,原来是少了transform

tileImage.png:1          GET https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/tileImage.png?width=256&height=256&redirect=false&transparent=true&cacheEnabled=true&origin=%7B%22x%22%3A-20037508.342789244%2C%22y%22%3A20037508.342789244%7D&overlapDisplayed=false&scale=8.653637486605572e-7&x=408&y=226 500 (Internal Server Error)

这个可能的原因是官网服务不够稳定,目前把这个地址拷贝到浏览器地址栏是能正常做get获取到图片的。

420EXP 2023年03月10日
噢噢,那这问题不大,到时会使用私有化部署的
...