首页 / 浏览问题 / 云GIS / 问题详情
始终无法正确显示地图
2EXP 2024年08月30日

iserver11.1.1a,操作系统win11  x64

数据类型文件型

第一次接触webGIS开发,阅读开发指南写了如下代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例代码</title>
    <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" rel="stylesheet" /> -->
    <script type="text/javascript" src="dist/leaflet/include-leaflet.js"></script>
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
    <link rel="stylesheet" href="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
    <script type="text/javascript" src="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.js"></script> -->
</head>
<style>
    body,html{width: 100%;
    height: 100%;
    }
</style>
<body>
    <!-- 地图显示的div -->
    <div id="map" style="position:absolute;left :0px;right:0px;width:100%;height:100%;"></div> 

<script>
    var url ="http://localhost:8090/iserver/services/map-Precipitation/rest/maps/2011%E5%B9%B4%E5%B9%B3%E5%9D%87%E9%99%8D%E6%B0%B4%E9%87%8F%E5%88%86%E5%B8%83%E5%9B%BE1?prjCoordSys=%7B%22epsgCode%22:3857%7D";
    // 初始化地图信息
    var map =new L.map('map', {
    crs: L.CRS.EPSG3857,
    center: [-214683.22 , 3894989.08],
    maxZoom: 18,
    zoom: 10
});
var layer=new L.supermap.TiledMapLayer(url).addTo(map);
layer.on('error',function(error){
    console.log('地图加载失败:',error)
})
    </script>
</body>
</html>

但是显示在网页上却显示空白地图如下

可以看到是没有报错的,长时间等待后出现以下提示

这是iserver服务管理中的地图详细信息,我使用的是内置的一个地图

我觉得可能是代码的问题所以用以下代码来验证

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例代码</title>
    <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" rel="stylesheet" /> -->
    <script type="text/javascript" src="dist/leaflet/include-leaflet.js"></script>
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
    <link rel="stylesheet" href="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
    <script type="text/javascript" src="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.js"></script> -->
</head>
<style>
    body,html{width: 100%;
    height: 100%;
    }
</style>
<body>
    <!-- 地图显示的div -->
    <div id="map" style="position:absolute;left :0px;right:0px;width:100%;height:100%;"></div> 

<script>
        var url ="https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
// 初始化地图信息
var map = L.map('map', {
    crs: L.CRS.EPSG4326,
    center: [0, 0],
    maxZoom: 18,
    zoom: 1
});
new L.supermap.TiledMapLayer(url).addTo(map);
    </script>
</body>
</html>

但是结果却显示是正确的,运行结果如下

以上所有代码(包括第一个报错的)中注释掉的内容都是我发现并不需要用到的,可以发现除了url部分其他部分都是几乎相同的,所以我实在不明白是哪里出错了,求各位解答。

1个回答

您好,您的中心点坐标没填对,您第四张图地图服务的中心点为: 11392671.56 , 4357463.7 ,中心点改成正确的坐标就可以显示了

希望能够帮助到您!

1,025EXP 2024年08月30日

您好,感谢回答,我尝试更换中心点之后的确可以显示地图了,但是我发现显示的中心点似乎并不是地图的中心点就像这样

可以看到地图的中心点并不是研究区的中心点,而是研究区外的一片空白部分,以下是将默认初始大小改为12之后的结果

看来似乎的确是这样,我想知道这是因为地图服务中显示的中心点就是在那片空白区域还是有别的原因,我又该如何将初始的显示定位在研究区内呢

事实上若是使用第一个方法并不会出现这个问题,,只有使用第二个方法时会发生这样的问题,所以我有些奇怪问题产生的原因,以下是第一个方法的运行结果

您好,

1、方式一是用 L.supermap.initMap 函数自动处理地图的创建、底图的加载等步骤, 该方法封装了地图初始化的全部流程;而方式二是手动创建地图;

2、用map.getCenter()获取方式一加载的中心点,发现是 lat: 36.41201930036128 lng: 102.34210988192284

3、将方式二里的地图中心点设置为36.41201930036128, 102.34210988192284,地图定位就正常了,因为在Leaflet中,无论是加载地图、设置初始视图中心点还是进行其他地图操作,一般都是使用经纬度坐标,如果填其他坐标,Leaflet会自动转换坐标,因此会产生投影误差。

希望能够帮助到您!

...