天地图web叠加WMS服务

最新推荐文章于 2024-03-27 16:40:12 发布

置顶 m0_38004177

最新推荐文章于 2024-03-27 16:40:12 发布

阅读量5.4k

点赞数 3

分类专栏： js 文章标签：天地图WMS GIS图层天地图加载WMS失败

本文链接：https://blog.csdn.net/m0_38004177/article/details/93869360

版权

js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

昨晚加到晚上八点就是为了搞天地图叠加一个WMS服务，之前实际上做过类似的，但是用的是openlayer,山东天地图的服务，很快就出来了，换成天地图自带的API，对照WMS的能力文档，就是叠加不了，地图图片下载不下来！但是可以肯定的是就是参数配置有问题。

  var config = {
                version: "1.1.1",	//请求服务的版本
                layers: '0,1,2,3',//图层
				//SERVICE:"WMS",		//服务类型标识符
                transparent: true,	//输出图像背景是否透明
                styles: "",			//每个请求图层的用","分隔的描述样式
				srs:"EPSG:4326",
                format: "image/png"	//输出图像的类型
            };

再看看WMS的能力文档
在这里插入图片描述
版本verison是1.3.0吧，其他的参数文档都有

包括下面的
在这里插入图片描述
正常情况下按照这些配置即可，可是就是不成功，最后反复试，问同事，最后发现问题出在version上，天地图参数中配置的版本号不是和服务地址的版本号对应，应该是内部问题，其他百度，高德，调用WMS的服务版本都是依据能力文档的。
修改版本号为1.1.0或者默认（1.1.1）就好了
直接上源码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="天地图"/>
    <title>地理数据测试</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=xxxxxxxxxxxxx"></script>
    <style type="text/css">
    body, html {
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "Microsoft YaHei"
    }

    #mapDiv {
        width: 100%;
        height: 600px
    }

    input, b, p {
        margin-left: 15px;
        font-size: 14px
    }
    </style>
    <script type="text/javascript">
        var map;
        var zoom = 11;
        var wmsLayer;
        function onLoad() {
            map = new T.Map('mapDiv');
            map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
            map.enableScrollWheelZoom();
        }

        function getWMS(url, config) {
            if (wmsLayer) {
                map.removeLayer(wmsLayer);
            }
            wmsLayer = new T.TileLayer.WMS(url, config);
            map.addLayer(wmsLayer);
        }

        function addWmsLayer(layers, url) {
       var config = {
                version: "1.1.1",	//请求服务的版本(这块很容易出问题)
                layers: '0,1,2,3',
				//SERVICE:"WMS",		//服务类型标识符
                transparent: true,	//输出图像背景是否透明
                styles: "",			//每个请求图层的用","分隔的描述样式
				srs:"EPSG:4326",
                format: "image/png"	//输出图像的类型
            };
            getWMS(url, config);
        }

    </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
<p>本示例演示如何叠加其它WMS服务图层。</p>
<div style="position:absolute;">
    <input type="button" value="叠加WMS服务图层" onClick="addWmsLayer('0','http://xxx.xxx.xxx.23:6080/arcgis/services/JXCGD/MapServer/WMSServer')"/>
    <input type="button" value="删除WMS服务图层" onClick="map.removeLayer(wmsLayer);"/>
</div>
</body>
</html>

m0_38004177

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
9
评论
天地图web叠加WMS服务

昨晚加到晚上八点就是为了搞天地图叠加一个WMS服务，之前实际上做过类似的，但是用的是openlayer,山东天地图的服务，很快就出来了，换成天地图自带的API，对照WMS的能力文档，就是叠加不了，地图图片下载不下来！但是可以肯定的是就是参数配置有问题。 var config = { version: "1.1.1", //请求服务的版本 ...
复制链接

扫一扫