supMap加载天地图

2019年1月1日起,天地图API及服务接口调用需开发授权,要在“国家地理信息公共服务平台”申请key才能使用。还给出了通过超图的SuperMap创建示例的html代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

由于2019年1月1日起天地图API及服务接口调用都需要获得开发授权,所以必须得先在“国家地理信息公共服务平台”(https://www.tianditu.gov.cn)申请一个key才可以使用。

下面是通过超图的SuperMap来创建示例:

//如果不知道请求参数的值是什么,可以通过平台中的示例,然后F12控制台来查看请求的参数
tiandituLayer = new SuperMap.Layer.WMTS({
    name:"天地图",
    url:"http://t0.tianditu.gov.cn/img_c/wmts?tk=1fa3b49702dd39176bc699d93b408f24",
    /** 
     layer这个参数与请求地址中的 " http://t0.tianditu.gov.cn/img_c/wmts?tk=密钥 "中的img_c中的img相对应,
    相应的,天地图API中的请求资源的layer也需要与请求资源中地址中的对应。
    */
    layer:"img", 
    style:"default",
    matrixSet:"c",
	//tiles,固定
    format:"tiles",
    opacity:1,
    requestEncoding:"kvp"}
);

下面是html代码:

<!DOCTYPE html>
<html lang="en">
<!-- 超图 -->
<script type="text/javascript" src="../extends/superMap/libs/SuperMap.Include.js"></script>
<head>
    <meta charset="UTF-8">
    <title>SuperMap创建天地图示例</title>
</head>
<body onload="initSuperMap()">
    <div id="map" style="width:700px;height:700px;"></div>
</body>
<script type="text/javascript">
    var map, tiandituLayer, tiandituLableLayer ;
    var layers = [];
    //地图初始化
    function initSuperMap(){
        //初始化地图
        map = new SuperMap.Map("map", {
                    controls:[
                        new SuperMap.Control.Navigation(),//随鼠标事件的地图浏览
                        //new SuperMap.Control.Zoom(),//缩放类图标,默认地图左上角
                        new SuperMap.Control.LayerSwitcher(),//图层选择控件,默认地图右上角
                        new SuperMap.Control.ScaleLine(), //比例尺控件,默认地图左下角
                    ],
                    theme:null, //加载的主题风格的CSS文件的相对路径
                    allOverlays : true, //地图所有图层都被当做叠加图层来使用
                    /** 下面两个参数maxScale和minScale,注意设置比例尺的大小,如果设置过小或过大,地图都会不显示,
                     提示“此级别无影像,请放大或缩小地图后再浏览”
                     */
                    //maxScale : 95251.7247453672,
                    //minScale : 5184.243631052,
                }
        )
        tiandituLayer = new SuperMap.Layer.WMTS({
            name:"天地图",
            url:"http://t0.tianditu.gov.cn/img_c/wmts?tk=1fa3b49702dd39176bc699d93b408f24",
            layer:"img",
            style:"default",
            matrixSet:"c",
            format:"tiles",
            opacity:1,
            requestEncoding:"kvp"});
        tiandituLableLayer = new SuperMap.Layer.WMTS({
            name:"地址",
            url:"http://t0.tianditu.gov.cn/cia_c/wmts?tk=1fa3b49702dd39176bc699d93b408f24",
            layer:"cia",
            isBaseLayer: true,
            style:"default",
            matrixSet:"c",
            format:"tiles",
            opacity:1,
            requestEncoding:"kvp"});
        layers.push(tiandituLayer);
        layers.push(tiandituLableLayer);
        map.addLayers(layers);
        map.setCenter(new SuperMap.LonLat(111.032808, 21.617038), 9);
    }
</script>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值