天地图开发指南

最新推荐文章于 2024-06-13 15:10:00 发布
最新推荐文章于 2024-06-13 15:10:00 发布
阅读量8.3k 收藏 87
点赞数 19
分类专栏： vue 文章标签： 天地图 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shi860715/article/details/121245517
版权

天地图开发指南

1 申请天地图key

1.1 注册账号

注册地址：https://uums.tianditu.gov.cn/register

1.2 申请开发者

登录后 ，申请开发者https://console.tianditu.gov.cn/api/register

1.3 创建应用

点击控制台，创建应用

在这里插入图片描述

1.4 天地图key

在这里插入图片描述

2.0 天地图api使用

2.1 创建第一个地图
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序"
            },
            mounted() {
                var map = new T.Map('map', {
                    // projection: 'EPSG:900913', W84
                    // EPSG:4326 W84
                    projection: 'EPSG:4326'
                });
                var zoom = 18;
                map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
            }

        })
    </script>
</body>

</html>

创建的第一个地图实例

在这里插入图片描述

2.2 地图加载第一个图层
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序"
            },
            mounted() {
                  var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
                    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
                    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=天地图key";

                // 创建自定义图层对象
                  var lay = new T.TileLayer(imageURL,{minZoom:1,maxZoom:18})  ;
                  var config  = {layers:[lay]};
                //   初始化地图对象 

                var map = new T.Map('map', config);
                var zoom = 18;
                map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
                map.enableScrollWheelZoom();
            }

        })
    </script>
</body>

</html>

加载图层效果图

在这里插入图片描述

3 地图基本操作

3.1 地图放大缩小
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>

    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2298427_iffy7zrfgcf.css" type="text/css">
    </link>

    <style>
      .btns{
           position: absolute;
           width: 200px;
           height: 200px;
           border: 1px solid red;
           top: 10;
           left: 10;
           z-index: 999;
      }
    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;">
            <div class="btns">
               
                <input type="button" value="放大 +" @click="ZoomUp"></input> <input type="button" value="缩小 -"
                    @click="ZoomDown"></input>
            </div>
        </div>


    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序",
                map: '',
                zoom: 18

            },
            mounted() {

                this.map = new T.Map('map');
                this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
                this.map.enableScrollWheelZoom();
            },
            methods: {
                ZoomUp() {
                    // 放大一级地图
                    this.map.zoomIn()
                },
                ZoomDown() {
                    // 缩小一级地图
                    this.map.zoomOut()
                }
            },

        })
    </script>
</body>

</html>

实例：

在这里插入图片描述

3.2 移动地图位置并指定缩放精度
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>

    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2298427_iffy7zrfgcf.css" type="text/css">
    </link>

    <style>
        .btns {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid red;
            top: 10;
            left: 10;
            z-index: 999;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;">
            <div class="btns">

                <input type="button" value="放大 +" @click="ZoomUp"></input> <input type="button" value="缩小 -"
                    @click="ZoomDown"></input>
            </div>
        </div>


    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序",
                map: '',
                zoom: 18

            },
            mounted() {

                this.map = new T.Map('map');
                this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
                this.map.enableScrollWheelZoom();
                setTimeout(() => {
                    // 将地图中心点，移动到指定位置，同时指定缩放精度
                    this.map.panTo(new T.LngLat(116.64899, 40.12948),12)
                }, 2000)
            },
            methods: {
                ZoomUp() {
                    // 放大一级地图
                    this.map.zoomIn()
                },
                ZoomDown() {
                    // 缩小一级地图
                    this.map.zoomOut()
                }
            },

        })
    </script>
</body>

</html>
3.3 地图设置指定缩放等级
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>

    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2298427_iffy7zrfgcf.css" type="text/css">
    </link>

    <style>
        .btns {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid red;
            top: 10;
            left: 10;
            z-index: 999;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;">
            <div class="btns">

                <input type="button" value="放大 +" @click="ZoomUp"></input> <input type="button" value="缩小 -"
                    @click="ZoomDown"></input>
            </div>
        </div>


    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序",
                map: '',
                zoom: 18

            },
            mounted() {

                this.map = new T.Map('map');
                this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
                this.map.enableScrollWheelZoom();
                setTimeout(() => {
                    // 设置地图的缩放等级
                    this.map.setZoom(14)
                }, 2000)
            },
            methods: {
                ZoomUp() {
                    // 放大一级地图
                    this.map.zoomIn()
                },
                ZoomDown() {
                    // 缩小一级地图
                    this.map.zoomOut()
                }
            },

        })
    </script>
</body>

</html>
3.4 设置地图不能被拖拽，两秒后开启拖拽地图
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>

    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2298427_iffy7zrfgcf.css" type="text/css">
    </link>

    <style>
        .btns {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid red;
            top: 10;
            left: 10;
            z-index: 999;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;">
            <div class="btns">

                <input type="button" value="放大 +" @click="ZoomUp"></input> <input type="button" value="缩小 -"
                    @click="ZoomDown"></input>
            </div>
        </div>


    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序",
                map: '',
                zoom: 18

            },
            mounted() {

                this.map = new T.Map('map');
                this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
                this.map.enableScrollWheelZoom();
                this.map.disableDrag();
                setTimeout(() => {
                    alert("地图可以拖拽");
                    // 设置地图的缩放等级
                   this.map.enableDrag();
                }, 2000)
            },
            methods: {
                ZoomUp() {
                    // 放大一级地图
                    this.map.zoomIn()
                },
                ZoomDown() {
                    // 缩小一级地图
                    this.map.zoomOut()
                }
            },

        })
    </script>
</body>

</html>
3.5 获取地图的可视区域
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>

    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2298427_iffy7zrfgcf.css" type="text/css">
    </link>

    <style>
        .btns {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid red;
            top: 10;
            left: 10;
            z-index: 999;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;">
            <div class="btns">

                <input type="button" value="放大 +" @click="ZoomUp"></input> <input type="button" value="缩小 -"
                    @click="ZoomDown"></input>
            </div>
        </div>


    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序",
                map: '',
                zoom: 8

            },
            mounted() {

                this.initMap()

            },
            methods: {
                ZoomUp() {
                    // 放大一级地图
                    this.map.zoomIn()
                },
                ZoomDown() {
                    // 缩小一级地图
                    this.map.zoomOut()
                },
                initMap() {
                    this.map = new T.Map('map');
                    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
                    this.map.enableScrollWheelZoom();
                    const bs = this.map.getBounds();  //获取可视区域
                    var bssw = bs.getSouthWest();   //可视区域左下角
                    var bsne = bs.getNorthEast();   //可视区域右上角
                    // 可视区域变化，缩放等级、屏显分辨率、中心点 lng 经度  lat 纬度
                    console.log("bssw", bssw)
                    console.log("bsne", bsne)
                }
            },

        })
    </script>
</body>

</html>

4 地图参数设置

4.1 设置地图中心点及缩放级别

根据指定的经度、纬度、缩放级别 设置地图中心点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>

    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2298427_iffy7zrfgcf.css" type="text/css">
    </link>

    <style>
        .btns {
            position: absolute;
            width: 500px;
            height: 200px;
            border: 1px solid red;
            top: 10;
            left: 10;
            z-index: 999;
            
        }
        input{
            width: 150px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;">
            <div class="btns">

              经度：<input type="text" v-model="lng" ></input> </br>
              纬度:<input type="text" v-model="lat" ></input></br>
              缩放级别：<input type="text" v-model="zoom" ></input></br>
              <input type="button" value="设置中心点"  @click="setCenterAndZoom"></input>
            </div>
        </div>


    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序",
                map: '',
                zoom: 8,
                lng:'116.64899',
                lat:'40.12948'

            },
            mounted() {

                this.initMap()

            },
            methods: {
                ZoomUp() {
                    // 放大一级地图
                    this.map.zoomIn()
                },
                ZoomDown() {
                    // 缩小一级地图
                    this.map.zoomOut()
                },
                initMap() {
                    this.map = new T.Map('map');
                    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
                    this.map.enableScrollWheelZoom();
                    const bs = this.map.getBounds();  //获取可视区域
                    var bssw = bs.getSouthWest();   //可视区域左下角
                    var bsne = bs.getNorthEast();   //可视区域右上角
                    // 可视区域变化，缩放等级、屏显分辨率、中心点 lng 经度  lat 纬度
                    console.log("bssw", bssw)
                    console.log("bsne", bsne)
                },
                setCenterAndZoom(){
                   this.map.centerAndZoom(new T.LngLat(this.lng, this.lat), this.zoom);
                }
            },

        })
    </script>
</body>

</html>

实例效果图：

在这里插入图片描述

4.2 是否允许地图双击鼠标放大
4.3 是否允许鼠标滚轮放大缩小地图
4.4 是否允许鼠标拖拽地图
4.5 是否允许键盘操作地图

4.2-4.5 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>

    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2298427_iffy7zrfgcf.css" type="text/css">
    </link>

    <style>
        .btns {
            position: absolute;
            width: 500px;
            height: 800px;
            border: 1px solid red;
            top: 10;
            left: 10;
            z-index: 999;

        }

        input {
            width: 150px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;">
            <div class="btns">

                经度：<input type="text" v-model="lng"></input> </br>
                纬度:<input type="text" v-model="lat"></input></br>
                缩放级别：<input type="text" v-model="zoom"></input></br>
                <input type="button" value="设置中心点" @click="setCenterAndZoom"></input></br>
                <input type="button" value="开启双击放大地图" @click="enableDoubleClickZoom"></input></br>
                <input type="button" value="禁止双击放大地图" @click="disableDoubleClickZoom"></input></br>
                <input type="button" value="允许鼠标滚轮缩放地图" @click="enableScrollWheelZoom"></input></br>
                <input type="button" value="禁止鼠标滚轮缩放地图" @click="disableScrollWheelZoom"></input></br>
                <input type="button" value="允许鼠标惯性拖拽" @click="enableInertia"></input></br>
                <input type="button" value="禁止鼠标惯性拖拽" @click="disableInertia"></input></br>
                <input type="button" value="允许键盘操作地图" @click="enableKeyboard"></input></br>
                <input type="button" value="禁止键盘操作地图" @click="disableKeyboard"></input></br>
            </div>
        </div>


    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序",
                map: '',
                zoom: 8,
                lng: '116.64899',
                lat: '40.12948'

            },
            mounted() {

                this.initMap()

            },
            methods: {
                ZoomUp() {
                    // 放大一级地图
                    this.map.zoomIn()
                },
                ZoomDown() {
                    // 缩小一级地图
                    this.map.zoomOut()
                },
                initMap() {
                    this.map = new T.Map('map');
                    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
                    this.map.enableScrollWheelZoom();
                    const bs = this.map.getBounds();  //获取可视区域
                    var bssw = bs.getSouthWest();   //可视区域左下角
                    var bsne = bs.getNorthEast();   //可视区域右上角
                    // 可视区域变化，缩放等级、屏显分辨率、中心点 lng 经度  lat 纬度
                    console.log("bssw", bssw)
                    console.log("bsne", bsne)
                },
                setCenterAndZoom() {
                    this.map.centerAndZoom(new T.LngLat(this.lng, this.lat), this.zoom);
                }, enableDoubleClickZoom() {
                    this.map.enableDoubleClickZoom()
                },
                disableDoubleClickZoom() {
                    this.map.disableDoubleClickZoom()
                },
                enableScrollWheelZoom() {
                    this.map.enableScrollWheelZoom()
                },
                disableScrollWheelZoom() {
                    this.map.disableScrollWheelZoom()
                },
                enableInertia() {
                    this.map.enableInertia()
                },
                disableInertia() {
                    this.map.disableInertia()
                },
                enableKeyboard() {
                    this.map.enableKeyboard()
                },
                disableKeyboard() {
                    this.map.disableKeyboard()
                }

            }

        })
    </script>
</body>

</html>

效果：

在这里插入图片描述

5 地图信息获取

5.1 获取地图中心点位置
5.2 获取当前缩放级别

5.1-5.2 代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>

    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2298427_iffy7zrfgcf.css" type="text/css">
    </link>

    <style>
        .btns {
            position: absolute;
            width: 500px;
            height: 800px;
            border: 1px solid red;
            top: 10;
            left: 10;
            z-index: 999;

        }

        input {
            width: 150px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;">
            <div class="btns">

                经度：<input type="text" v-model="lng"></input> </br>
                纬度:<input type="text" v-model="lat"></input></br>
                缩放级别：<input type="text" v-model="zoom"></input></br>
                <input type="button" value="设置中心点" @click="setCenterAndZoom"></input></br>
                <input type="button" value="开启双击放大地图" @click="enableDoubleClickZoom"></input></br>
                <input type="button" value="禁止双击放大地图" @click="disableDoubleClickZoom"></input></br>
                <input type="button" value="允许鼠标滚轮缩放地图" @click="enableScrollWheelZoom"></input></br>
                <input type="button" value="禁止鼠标滚轮缩放地图" @click="disableScrollWheelZoom"></input></br>
                <input type="button" value="允许鼠标惯性拖拽" @click="enableInertia"></input></br>
                <input type="button" value="禁止鼠标惯性拖拽" @click="disableInertia"></input></br>
                <input type="button" value="允许键盘操作地图" @click="enableKeyboard"></input></br>
                <input type="button" value="禁止键盘操作地图" @click="disableKeyboard"></input></br>
                <input type="button" value="获取地图中心点坐标" @click="getCenter"></input></br>
                <input type="button" value="获取当前地图的缩放级别" @click="getZoom"></input></br>
            </div>
        </div>


    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序",
                map: '',
                zoom: 8,
                lng: '116.64899',
                lat: '40.12948'

            },
            mounted() {

                this.initMap()

            },
            methods: {
                ZoomUp() {
                    // 放大一级地图
                    this.map.zoomIn()
                },
                ZoomDown() {
                    // 缩小一级地图
                    this.map.zoomOut()
                },
                initMap() {
                    this.map = new T.Map('map');
                    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
                    this.map.enableScrollWheelZoom();
                    const bs = this.map.getBounds();  //获取可视区域
                    var bssw = bs.getSouthWest();   //可视区域左下角
                    var bsne = bs.getNorthEast();   //可视区域右上角
                    // 可视区域变化，缩放等级、屏显分辨率、中心点 lng 经度  lat 纬度
                    console.log("bssw", bssw)
                    console.log("bsne", bsne)
                },
                setCenterAndZoom() {
                    this.map.centerAndZoom(new T.LngLat(this.lng, this.lat), this.zoom);
                }, enableDoubleClickZoom() {
                    this.map.enableDoubleClickZoom()
                },
                disableDoubleClickZoom() {
                    this.map.disableDoubleClickZoom()
                },
                enableScrollWheelZoom() {
                    this.map.enableScrollWheelZoom()
                },
                disableScrollWheelZoom() {
                    this.map.disableScrollWheelZoom()
                },
                enableInertia() {
                    this.map.enableInertia()
                },
                disableInertia() {
                    this.map.disableInertia()
                },
                enableKeyboard() {
                    this.map.enableKeyboard()
                },
                disableKeyboard() {
                    this.map.disableKeyboard()
                },
                getCenter() {
                    const c = this.map.getCenter()
                    alert(`经度 ${c.getLng()}  纬度：${c.getLat()}`)
                },
                getZoom(){
                   alert(`当前地图缩放级别为：${this.map.getZoom()}`)   
                }

            }

        })
    </script>
</body>

</html>

在这里插入图片描述

5.3 获取当前可视范围坐标

参见3.5 示例代码和效果

6 自定义图层

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序"
            },
            mounted() {
                  var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
                    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
                    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=天地图key";

                // 创建自定义图层对象
                  var lay = new T.TileLayer(imageURL,{minZoom:1,maxZoom:18})  ;
                  var config  = {layers:[lay]};
                //   初始化地图对象 

                var map = new T.Map('map', config);
                var zoom = 18;
                map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
                map.enableScrollWheelZoom();
            }

        })
    </script>
</body>

</html>

7 叠加其他的WMS服务图层

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>

    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2298427_iffy7zrfgcf.css" type="text/css">
    </link>

    <style>
        .btns {
            position: absolute;
            width: 500px;
            height: 800px;
            border: 1px solid red;
            top: 10;
            left: 10;
            z-index: 999;

        }

        input {
            width: 150px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;">
            <div class="btns">

                经度：<input type="text" v-model="lng"></input> </br>
                纬度:<input type="text" v-model="lat"></input></br>
                缩放级别：<input type="text" v-model="zoom"></input></br>
                <input type="button" value="设置中心点" @click="setCenterAndZoom"></input></br>
                <input type="button" value="开启双击放大地图" @click="enableDoubleClickZoom"></input></br>
                <input type="button" value="禁止双击放大地图" @click="disableDoubleClickZoom"></input></br>
                <input type="button" value="允许鼠标滚轮缩放地图" @click="enableScrollWheelZoom"></input></br>
                <input type="button" value="禁止鼠标滚轮缩放地图" @click="disableScrollWheelZoom"></input></br>
                <input type="button" value="允许鼠标惯性拖拽" @click="enableInertia"></input></br>
                <input type="button" value="禁止鼠标惯性拖拽" @click="disableInertia"></input></br>
                <input type="button" value="允许键盘操作地图" @click="enableKeyboard"></input></br>
                <input type="button" value="禁止键盘操作地图" @click="disableKeyboard"></input></br>
                <input type="button" value="获取地图中心点坐标" @click="getCenter"></input></br>
                <input type="button" value="获取当前地图的缩放级别" @click="getZoom"></input></br>
                <input type="button" value="叠加WMS 服务图层" @click="addWmsLayer('topp:states','http://localhost:8080/geoserver/topp/wms')"></input></br>
                <input type="button" value="删除wms 服务图层" @click="delWmsLayer"></input></br>
            </div>
        </div>


    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序",
                map: '',
                zoom: 8,
                lng: '120.154',
                lat: '30.274',
                wmsLayer: null


            },
            mounted() {

                this.initMap()

            },
            methods: {
                ZoomUp() {
                    // 放大一级地图
                    this.map.zoomIn()
                },
                ZoomDown() {
                    // 缩小一级地图
                    this.map.zoomOut()
                },
                initMap() {
                    this.map = new T.Map('map');
                    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
                    this.map.enableScrollWheelZoom();
                    const bs = this.map.getBounds();  //获取可视区域
                    var bssw = bs.getSouthWest();   //可视区域左下角
                    var bsne = bs.getNorthEast();   //可视区域右上角
                    // 可视区域变化，缩放等级、屏显分辨率、中心点 lng 经度  lat 纬度
                    console.log("bssw", bssw)
                    console.log("bsne", bsne)
                },
                setCenterAndZoom() {
                    this.map.centerAndZoom(new T.LngLat(this.lng, this.lat), this.zoom);
                }, enableDoubleClickZoom() {
                    this.map.enableDoubleClickZoom()
                },
                disableDoubleClickZoom() {
                    this.map.disableDoubleClickZoom()
                },
                enableScrollWheelZoom() {
                    this.map.enableScrollWheelZoom()
                },
                disableScrollWheelZoom() {
                    this.map.disableScrollWheelZoom()
                },
                enableInertia() {
                    this.map.enableInertia()
                },
                disableInertia() {
                    this.map.disableInertia()
                },
                enableKeyboard() {
                    this.map.enableKeyboard()
                },
                disableKeyboard() {
                    this.map.disableKeyboard()
                },
                getCenter() {
                    const c = this.map.getCenter()
                    alert(`经度 ${c.getLng()}  纬度：${c.getLat()}`)
                },
                getZoom() {
                    alert(`当前地图缩放级别为：${this.map.getZoom()}`)
                },
                addWmsLayer(layers, url) {
                    const config = {
                        version: "1.1.0",	//请求服务的版本
                        request:'GetMap',
                        layers: layers,
                        transparent: true,	//输出图像背景是否透明
                        styles: "",			//每个请求图层的用","分隔的描述样式
                        format: "image/png"	//输出图像的类型
                    }
                    this.getWms(url, config)
                },
                getWms(url, config) {
                    if (this.wmsLayer) {
                        this.map.removeLayer(this.wmsLayer)
                    }
                    this.wmsLayer = new T.TileLayer.WMS(url, config)
                    this.map.addLayer(this.wmsLayer)
                },
                delWmsLayer() {
                    this.map.removeLayer(this.wmsLayer)
                }

            }

        })
    </script>
</body>

</html>

8 添加基本控件

8.1 添加缩放控件
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .btns {
            position: absolute;
            width: 300px;
            height: 200px;
            border: 1px solid red;
            top: 10px;
            right: 10px;
            z-index: 999;

        }

        input {
            width: 150px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;">
            <div class="btns">

                <input type="button" value="添加缩放控件" @click="addZoomControl"></input></br>
                <input type="button" value="添加比例尺控件"></input></br>
                <input type="button" value="添加鹰眼控件"></input></br>
                <input type="button" value="添加地图版权控件"></input></br>
                <input type="button" value="添加地图类型控件"></input></br>
                <input type="button" value="添加符号类控件"></input></br>

            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序",
                map: null,
                zoom: 12,
                control: ''
            },
            mounted() {
                this.initMap()
            },
            methods: {
                initMap() {
                    this.map = new T.Map('map');
                    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
                    this.map.enableScrollWheelZoom();
                },
                addZoomControl() {
                    if (this.control) {
                        return
                    }
                    this.control = new T.Control.Zoom();
                    this.map.addControl(this.control)
                    this.control.setPosition(T_ANCHOR_TOP_LEFT);
                }
            }

        })
    </script>
</body>

</html>
8.2 添加比例尺
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .btns {
            position: absolute;
            width: 300px;
            height: 200px;
            border: 1px solid red;
            top: 10px;
            right: 10px;
            z-index: 999;

        }

        input {
            width: 150px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;">
            <div class="btns">

                <input type="button" value="添加缩放控件" @click="addZoomControl"></input></br>
                <input type="button" value="添加比例尺控件" @click="addScaleControl"></input></br>
                <input type="button" value="添加鹰眼控件"></input></br>
                <input type="button" value="添加地图版权控件"></input></br>
                <input type="button" value="添加地图类型控件"></input></br>
                <input type="button" value="添加符号类控件"></input></br>

            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序",
                map: null,
                zoom: 12,
                control: '',
                zoomControl:'',
                scaleControl:''
            },
            mounted() {
                this.initMap()
            },
            methods: {
                initMap() {
                    this.map = new T.Map('map');
                    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
                    this.map.enableScrollWheelZoom();
                },
                addZoomControl() {
                    if (this.zoomControl) {
                        return
                    }
                    this.zoomControl = new T.Control.Zoom();
                    this.map.addControl(this.zoomControl)
                    this.zoomControl.setPosition(T_ANCHOR_TOP_LEFT);
                },
                addScaleControl(){
                    if (this.scaleControl) {
                        return
                    }
                    this.scaleControl = new T.Control.Scale();
                    this.map.addControl(this.scaleControl)
                  
                }
            }

        })
    </script>
</body>

</html>
8.3 添加鹰眼控件
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .btns {
            position: absolute;
            width: 300px;
            height: 200px;
            border: 1px solid red;
            top: 10px;
            right: 10px;
            z-index: 999;

        }

        input {
            width: 150px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;">
            <div class="btns">

                <input type="button" value="添加缩放控件" @click="addZoomControl"></input></br>
                <input type="button" value="添加比例尺控件" @click="addScaleControl"></input></br>
                <input type="button" value="添加鹰眼控件" @click="addOverViewMapControl"></input></br>
                <input type="button" value="添加地图版权控件"></input></br>
                <input type="button" value="添加地图类型控件"></input></br>
                <input type="button" value="添加符号类控件"></input></br>

            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序",
                map: null,
                zoom: 12,
                control: '',
                zoomControl:'',
                scaleControl:'',
                overViewMapControl:''
            },
            mounted() {
                this.initMap()
            },
            methods: {
                initMap() {
                    this.map = new T.Map('map');
                    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
                    this.map.enableScrollWheelZoom();
                },
                addZoomControl() {
                    if (this.zoomControl) {
                        return
                    }
                    this.zoomControl = new T.Control.Zoom();
                    this.map.addControl(this.zoomControl)
                    this.zoomControl.setPosition(T_ANCHOR_TOP_LEFT);
                },
                addScaleControl(){
                    if (this.scaleControl) {
                        return
                    }
                    this.scaleControl = new T.Control.Scale();
                    this.map.addControl(this.scaleControl)
                  
                },
                addOverViewMapControl(){
                    if (this.overViewMapControl) {
                        return
                    }
                    this.overViewMapControl = new T.Control.OverviewMap({
                        isOpen:true,
                        size:new T.Point(200,200)
                        // 设置小地图，鹰眼的初始化大小
                    });
                    this.map.addControl(this.overViewMapControl)
                  
                }
            }

        })
    </script>
</body>

</html>
8.4 添加版权信息
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .btns {
            position: absolute;
            width: 300px;
            height: 200px;
            border: 1px solid red;
            top: 10px;
            right: 10px;
            z-index: 999;

        }

        input {
            width: 150px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;">
            <div class="btns">

                <input type="button" value="添加缩放控件" @click="addZoomControl"></input></br>
                <input type="button" value="添加比例尺控件" @click="addScaleControl"></input></br>
                <input type="button" value="添加鹰眼控件" @click="addOverViewMapControl"></input></br>
                <input type="button" value="添加地图版权控件" @click="addcopyControl"></input></br>
                <input type="button" value="添加地图类型控件"></input></br>
                <input type="button" value="添加符号类控件"></input></br>

            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序",
                map: null,
                zoom: 12,
                control: '',
                zoomControl:'',
                scaleControl:'',
                overViewMapControl:'',
                copyControl:''
            },
            mounted() {
                this.initMap()
            },
            methods: {
                initMap() {
                    this.map = new T.Map('map');
                    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
                    this.map.enableScrollWheelZoom();
                },
                addZoomControl() {
                    if (this.zoomControl) {
                        return
                    }
                    this.zoomControl = new T.Control.Zoom();
                    this.map.addControl(this.zoomControl)
                    this.zoomControl.setPosition(T_ANCHOR_TOP_LEFT);
                },
                addScaleControl(){
                    if (this.scaleControl) {
                        return
                    }
                    this.scaleControl = new T.Control.Scale();
                    this.map.addControl(this.scaleControl)
                  
                },
                addOverViewMapControl(){
                    if (this.overViewMapControl) {
                        return
                    }
                    this.overViewMapControl = new T.Control.OverviewMap({
                        isOpen:true,
                        size:new T.Point(200,200)
                        // 设置小地图，鹰眼的初始化大小
                    });
                    this.map.addControl(this.overViewMapControl)
                  
                },
                addcopyControl(){
                    if (this.copyControl) {
                        return
                    }
                    this.copyControl = new T.Control.Copyright({
                        position: T_ANCHOR_TOP_LEFT,
                        // 初始化地图版权的位置
                    });
                    this.map.addControl(this.copyControl)

                    // 返回地图的可视区域
                    const bs = this.map.getBounds()
                    // 添加版权信息
                    this.copyControl.addCopyright({
                        id:10,
                        content:`<a href="http://wwww.baidu.com">这里是自定义版权控件的位置，可以加超链接</a>`,
                        bounds:bs
                    })
                  
                }
            }

        })
    </script>
</body>

</html>
8.5 加载地图类型控件
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .btns {
            position: absolute;
            width: 300px;
            height: 200px;
            border: 1px solid red;
            top: 10px;
            right: 10px;
            z-index: 999;

        }

        input {
            width: 150px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;">
            <div class="btns">

                <input type="button" value="添加缩放控件" @click="addZoomControl"></input></br>
                <input type="button" value="添加比例尺控件" @click="addScaleControl"></input></br>
                <input type="button" value="添加鹰眼控件" @click="addOverViewMapControl"></input></br>
                <input type="button" value="添加地图版权控件" @click="addcopyControl"></input></br>
                <input type="button" value="添加地图类型控件" @click="addMapType"></input></br>
              

            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序",
                map: null,
                zoom: 12,
                control: '',
                zoomControl: '',
                scaleControl: '',
                overViewMapControl: '',
                copyControl: '',
                mapTypeControl: '',
                militarySymbols: ''
            },
            mounted() {
                this.initMap()
            },
            methods: {
                initMap() {
                    this.map = new T.Map('map');
                    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
                    this.map.enableScrollWheelZoom();
                },
                addZoomControl() {
                    if (this.zoomControl) {
                        return
                    }
                    this.zoomControl = new T.Control.Zoom();
                    this.map.addControl(this.zoomControl)
                    this.zoomControl.setPosition(T_ANCHOR_TOP_LEFT);
                },
                addScaleControl() {
                    if (this.scaleControl) {
                        return
                    }
                    this.scaleControl = new T.Control.Scale();
                    this.map.addControl(this.scaleControl)

                },
                addOverViewMapControl() {
                    if (this.overViewMapControl) {
                        return
                    }
                    this.overViewMapControl = new T.Control.OverviewMap({
                        isOpen: true,
                        size: new T.Point(200, 200)
                        // 设置小地图，鹰眼的初始化大小
                    });
                    this.map.addControl(this.overViewMapControl)

                },
                addcopyControl() {
                    if (this.copyControl) {
                        return
                    }
                    this.copyControl = new T.Control.Copyright({
                        position: T_ANCHOR_TOP_LEFT
                        // 初始化地图版权的位置
                    });
                    this.map.addControl(this.copyControl)

                    // 返回地图的可视区域
                    const bs = this.map.getBounds()
                    // 添加版权信息
                    this.copyControl.addCopyright({
                        id: 10,
                        content: `<a href="http://wwww.baidu.com">这里是自定义版权控件的位置，可以加超链接</a>`,
                        bounds: bs
                    })

                },
                addMapType() {
                    if (this.mapTypeControl) {
                        return
                    }
                    this.mapTypeControl = new T.Control.MapType()
                    this.map.addControl(this.mapTypeControl)
                }
            }

        })
    </script>
</body>

</html>
8.6 添加符号控件
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .btns {
            position: absolute;
            width: 300px;
            height: 200px;
            border: 1px solid red;
            top: 10px;
            right: 10px;
            z-index: 999;

        }

        input {
            width: 150px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;">
            <div class="btns">

                <input type="button" value="添加缩放控件" @click="addZoomControl"></input></br>
                <input type="button" value="添加比例尺控件" @click="addScaleControl"></input></br>
                <input type="button" value="添加鹰眼控件" @click="addOverViewMapControl"></input></br>
                <input type="button" value="添加地图版权控件" @click="addcopyControl"></input></br>
                <input type="button" value="添加地图类型控件" @click="addMapType"></input></br>
                <input type="button" value="添加符号类控件 " @click="addMilitarySymbols"></input></br>

            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序",
                map: null,
                zoom: 12,
                control: '',
                zoomControl: '',
                scaleControl: '',
                overViewMapControl: '',
                copyControl: '',
                mapTypeControl: '',
                militarySymbols: ''
            },
            mounted() {
                this.initMap()
            },
            methods: {
                initMap() {
                    this.map = new T.Map('map');
                    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
                    this.map.enableScrollWheelZoom();
                },
                addZoomControl() {
                    if (this.zoomControl) {
                        return
                    }
                    this.zoomControl = new T.Control.Zoom();
                    this.map.addControl(this.zoomControl)
                    this.zoomControl.setPosition(T_ANCHOR_TOP_LEFT);
                },
                addScaleControl() {
                    if (this.scaleControl) {
                        return
                    }
                    this.scaleControl = new T.Control.Scale();
                    this.map.addControl(this.scaleControl)

                },
                addOverViewMapControl() {
                    if (this.overViewMapControl) {
                        return
                    }
                    this.overViewMapControl = new T.Control.OverviewMap({
                        isOpen: true,
                        size: new T.Point(200, 200)
                        // 设置小地图，鹰眼的初始化大小
                    });
                    this.map.addControl(this.overViewMapControl)

                },
                addcopyControl() {
                    if (this.copyControl) {
                        return
                    }
                    this.copyControl = new T.Control.Copyright({
                        position: T_ANCHOR_TOP_LEFT
                        // 初始化地图版权的位置
                    });
                    this.map.addControl(this.copyControl)

                    // 返回地图的可视区域
                    const bs = this.map.getBounds()
                    // 添加版权信息
                    this.copyControl.addCopyright({
                        id: 10,
                        content: `<a href="http://wwww.baidu.com">这里是自定义版权控件的位置，可以加超链接</a>`,
                        bounds: bs
                    })

                },
                addMapType() {
                    if (this.mapTypeControl) {
                        return
                    }
                    this.mapTypeControl = new T.Control.MapType()
                    this.map.addControl(this.mapTypeControl)
                },
                addMilitarySymbols() {
                    // if (this.militarySymbols) {
                    //     return
                    // }
                    //允许鼠标滚轮缩放地图
                    this.map.enableScrollWheelZoom();
                    const militarySymbols = new T.Control.militarySymbols({
                        position: T_ANCHOR_TOP_LEFT
                        // 初始化符号位置
                    })
                    this.map.addControl(militarySymbols)
                }
            }

        })
    </script>
</body>

</html>

9 地图右键菜单

9.1 简单添加右键菜单
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .btns {
            position: absolute;
            width: 300px;
            height: 200px;
            border: 1px solid red;
            top: 10px;
            right: 10px;
            z-index: 999;

        }

        input {
            width: 150px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;">
            <div class="btns">
                <input type="button" value="添加右键菜单" @click="addMenu"></input></br>
       


            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序",
                map: null,
                zoom: 12,
                menus:''
            },
            mounted() {
                this.initMap()
            },
            methods: {
                initMap() {
                    this.map = new T.Map('map');
                    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
                    this.map.enableScrollWheelZoom();
                },
                addMenu(){
                    this.menus = new T.ContextMenu({
                        width:50
                    })
                    const menu1 = new T.MenuItem("放大",this.zoomIn)
                    const menu2 = new T.MenuItem("缩小",this.zoomOut)
                    this.menus.addItem(menu1)
                    this.menus.addItem(menu2)
                   this.map.addContextMenu(this.menus)

                },
                zoomIn(){
                    this.map.zoomIn()
                },
                zoomOut(){
                    this.map.zoomOut()
                }

            }

        })
    </script>
</body>

</html>
9.2 添加带有分割线的右键菜单
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .btns {
            position: absolute;
            width: 300px;
            height: 200px;
            border: 1px solid red;
            top: 10px;
            right: 10px;
            z-index: 999;

        }

        input {
            width: 150px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;">
            <div class="btns">
                <input type="button" value="添加右键菜单" @click="addMenu"></input></br>
       


            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序",
                map: null,
                zoom: 12,
                menus:''
            },
            mounted() {
                this.initMap()
            },
            methods: {
                initMap() {
                    this.map = new T.Map('map');
                    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
                    this.map.enableScrollWheelZoom();
                },
                addMenu(){
                    this.menus = new T.ContextMenu({
                        width:70
                    })
                    const menu1 = new T.MenuItem("放大",this.zoomIn)
                    const menu2 = new T.MenuItem("缩小",this.zoomOut)
                    const menu3 = new T.MenuItem("放大最大",this.setZoom)
                    const menu4 = new T.MenuItem("查看全国",this.setTotal)
                    this.menus.addItem(menu1)
                    this.menus.addItem(menu2)
                    this.menus.addSeparator()
                    this.menus.addItem(menu3)
                    this.menus.addItem(menu4)
                   this.map.addContextMenu(this.menus)

                },
                zoomIn(){
                    this.map.zoomIn()
                },
                zoomOut(){
                    this.map.zoomOut()
                },
                setZoom(){
                    this.map.setZoom(18)
                },
                setTotal(){
                    this.map.setZoom(4)
                }

            }

        })
    </script>
</body>

</html>
9.3 获取右键菜单的坐标
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>天地图</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图key"></script>
    <script src="./js/vue-min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .btns {
            position: absolute;
            width: 300px;
            height: 200px;
            border: 1px solid red;
            top: 10px;
            right: 10px;
            z-index: 999;

        }

        input {
            width: 150px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="map" style="position:absolute;width:100%;height:100%;">
            <div class="btns">
                <input type="button" value="添加右键菜单" @click="addMenu"></input></br>



            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: "这是第一个vue程序",
                map: null,
                zoom: 12,
                menus: ''
            },
            mounted() {
                this.initMap()
            },
            methods: {
                initMap() {
                    this.map = new T.Map('map');
                    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
                    this.map.enableScrollWheelZoom();
                },
                addMenu() {
                    this.menus = new T.ContextMenu({
                        width: 100
                    })
                    const menu1 = new T.MenuItem("放大", this.zoomIn)
                    const menu2 = new T.MenuItem("缩小", this.zoomOut)
                    const menu3 = new T.MenuItem("放大最大", this.setZoom)
                    const menu4 = new T.MenuItem("查看全国", this.setTotal)
                    const menu5 = new T.MenuItem("右键获取坐标", this.LngLat)
                    this.menus.addItem(menu1)
                    this.menus.addItem(menu2)
                    this.menus.addSeparator()
                    this.menus.addItem(menu3)
                    this.menus.addItem(menu4)
                    this.menus.addSeparator()
                    this.menus.addItem(menu5)
                    this.map.addContextMenu(this.menus)

                },
                zoomIn() {
                    this.map.zoomIn()
                },
                zoomOut() {
                    this.map.zoomOut()
                },
                setZoom() {
                    this.map.setZoom(18)
                },
                setTotal() {
                    this.map.setZoom(4)
                },
                LngLat(lnglat) {
                    alert(lnglat.getLng() + "," + lnglat.getLat());
                }

            }

        })
    </script>
</body>

</html>
南京小菜
关注
  • 19
    点赞
  • 踩
  • 87
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
天地图移动API开发包
01-23
下载天地图移动API（Android）工程中引用的jar文件包及lib库。
在线调用天地图.zip
10-10
在线调用天地图.zip
天地图开发实战：Vue结合OpenLayers实现动态点位地图
最新发布
m0_54340021的博客
06-13 1016
本篇文章详细介绍了如何使用Vue.js和OpenLayers库结合天地图API，开发一个具有点位图标渲染和点击地图获取经纬度功能的地图组件。文章从环境搭建到具体代码实现，逐步引导读者完成地图组件的开发。首先，介绍了必要的库安装和组件模板设置。随后，深入讲解了脚本部分，包括地图初始化、图层添加、坐标转换、事件监听等关键技术点。通过实践，我们学习了如何创建地图实例、添加天地图图层、设置点位图标样式，并实现了点击地图更新点位经纬度的功能。文章最后提供了对组件进行进一步扩展和定制的建议，以满足更广泛的应用需求。
天地图开发实例
12-12
里边是web项目中天地图的实例jsp，包括的功能有在天地图上增加控件，增加tmarker，tlabel，线等，且对事件的绑定做了自己的处理，以供参考。
【VUE3+Leaflet天地图】Leaflet天地图结合VUE3的使用步骤
weixin_67620221的博客
05-29 5164
Leaflet天地图结合VUE3的使用步骤及相关配置
利用天地图API实现批量获取地址对应的经纬度
hongyinvjianke的博客
03-13 2445
利用天地图API实现批量获取地址对应的经纬度
天地图入门使用
不靠谱的作曲家
01-31 2917
天地图”是国家测绘地理信息局建设的地理信息综合服务网站。集成了来自国家、省、市（县）各级测绘地理信息部门，以及相关政府部门、企事业单位 、社会团体、公众的地理信息公共服务资源，如果做的项目是政府部门、企事业单位尽量选择天地图，因为相比其他几家服务商更加权威。
Vue中使用天地图
热门推荐
码农键盘上的梦
02-14 1万+
天地图JavaScript API 4.0是一套符合HTML5.0规范的的应用程序接口，以HTML 5.0的形式提供各种地图服务和数据，如。
vue2 + leaflet+ openstreetMap +天地图实现地图开发
weixin_44693550的博客
08-24 2275
vue2 + leaflet+ openstreetMap +天地图实现地图开发，实现题图添加标记，标记信息显示及区域的查询
天地图开发接入指南
SummerGao
12-29 508
天地图开发接入指南
天地图开发之Android-显示天地图
12-22
代码为博客实例代码：http://blog.csdn.net/qq294661/article/details/42081081 有问题请博客中留言
天地图将开发移动端、接入实景三维、丰富历史影像、多维数据等
GIS思维的博客
03-15 778
根据《实施方案》，新平台建设要坚持“问题导向、创新驱动、统筹集约、安全可控”原则，综合运用新理念、新技术、新模式，推动天地图由单一地理信息服务向综合地理信息服务转型，从数据资源、服务功能、更新效率、运行支撑等方面进行全面升级，形成与经济社会发展相适应的地理信息公共服务能力，助力数字中国建设和数字经济发展。在基础核心软件方面，到2030年，新平台全面发展，数据资源更加丰富，服务功能更加智能，联动更新更加高效，运行支撑更加稳定，政府地理信息资源更加开放，各类地理信息应用更加深入，地理信息综合服务能力全面提升。
天地图----leaflet sdk开发（一）
h_970918的博客
02-19 2312
1、地图的创建。 1.1地图的构造 以下天地图的开发，均是属于leaflet二次开发，其文档与调用示例可在官网的开发中心里找到、关于地图的创建、与百度类似，但个人认为天地图的使用更加灵活。在官方示例中，可做一般项目展示使用。如有商用，是需要在天地图官网中申请资源的，申请之后会有专属的token值与接口，并且会有文档参考。 首先、创建地图的荔枝。使用官方文档创建的示例。 var map = L.map(‘map’,{crs:L.CRS.EPSG3857,center: {lon:120.0921528798
天地图的使用
lili0828的博客
09-10 6877
1.国家地理信息公共服务平台https://www.tianditu.gov.cn/ 1).注册用户:进入官网，点右上角注册按钮，根据提示注册 2).申请成为天地图开发者: 注册，登录之后，进入首页，往下拉，可以看到下面的模块，点击右 边【成为开发者】按钮。根据提示填写信息，分个人版和企业版。 3).获取服务许可： 申请成为开发者之后，点击【创建新应用】，申请token。 4).使用api: 回到首页，往下拉，在开发资源模块，选择自...
Vue2 ol 开发天地图
weixin_43029943的博客
05-26 1150
ol官方文档 ol官方文档 安装 npm install ol --save 安装后 实例组件 <template> <div style="width: 100%; height: 100%"></div> </template> <script> import "ol/ol.css"; import Fill from "ol/style/Fill"; import Image from "ol/layer/Image".
天地图——常用方法分享
dyt1_1的博客
03-18 2189
（1）获取行政区划信息——points返回为空，只能使用其他方式获取行政区划边界坐标（参考（3）绘制边界线）（2）JavaScript API 4.0 类参考（常用）（3）JavaScript API 4.0代码示例（常用）（5）地图平移——改变中心点坐标，移动到其他位置。（9）逆地理编码——根据经纬度获取地址。（4）在地图上绘制点位（点聚合）（4）web API 代码示例。（8）去掉天地图自带的版权控件。（2）创建地图并标记当前位置。（5）vue使用天地图。
天地图服务与开发
weixin_45728126的博客
12-29 3924
天地图服务与开发 天地图在线地图网址： 2021年7月2日，国家地理信息公共服务平台天地图2021版正式启用 传统版地址：https://map.tianditu.gov.cn/2020/ 新版地址：https://map.tianditu.gov.cn/ 天地图地图服务列表： 瓦片地址如下（以矢量底图为例）： 原：http://t0.tianditu.com/DataServer?T=vec_c&x=3233&y=673&l=12&tk=你的密钥 新：https://t0.
天地图开发--打点，圈画行政区域
qq_49266680的博客
07-11 2743
天地图 天地图的功能使用 关于天地图打点并且鼠标移入标点显示标点相关信息 2 . 对于行政区域进行圈画
directshow开发指南
11-04
DirectShow 是由微软公司开发的一套多媒体应用程序编程接口（API），旨在为开发人员提供一种简便的方法来创建和处理多媒体的应用程序。DirectShow 提供了一整套的组件和过滤器，可以完成多种不同的功能，如音频和视频的捕捉、播放、编辑、编码和解码等。 DirectShow 开发指南是指为开发人员提供一份详细的文档或指南，以帮助他们成功地使用 DirectShow 进行应用程序开发。该指南通常包括以下内容： 1. DirectShow 的概述：指南将介绍 DirectShow 的基本概念和架构，包括组件模型、过滤器和数据流等内容。 2. 开发环境的配置：指南将提供如何配置开发环境，包括安装所需的开发工具和库文件，并设置项目属性等。 3. DirectShow 的基本使用：指南将教授如何创建一个基本的 DirectShow 应用程序，如图形用户界面（GUI）的设计、多媒体设备的选择和初始化等。 4. 多媒体数据的处理：指南将介绍如何使用 DirectShow 的组件和过滤器来处理多媒体数据，如音频和视频的捕捉、编辑、编码和解码等。 5. 故障排除和调试：指南将提供如何排除和解决开发过程中可能遇到的问题，并介绍一些常见的调试技巧和工具。 通过学习 DirectShow 开发指南，开发人员可以获得使用 DirectShow 开发应用程序所需的基础知识和技能。他们可以使用这些知识和技能来创建自己的多媒体应用程序，以满足用户的需求，并从 DirectShow 提供的强大功能中受益。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值