android之开发天地图天地图开发教程

转载

coolfengsy 2023-08-17 23:35:32

文章标签 android之开发天地图天地图 vue html css 文章分类 Android 移动开发

天地图开发指南

1 申请天地图key

1.1 注册账号

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

1.2 申请开发者

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

1.3 创建应用

点击控制台，创建应用

android之开发天地图天地图开发教程_天地图

1.4 天地图key

android之开发天地图天地图开发教程_天地图_02

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>

创建的第一个地图实例

android之开发天地图天地图开发教程_vue_03

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>

加载图层效果图

android之开发天地图天地图开发教程_html_04

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>

实例：

android之开发天地图天地图开发教程_html_05

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>

实例效果图：

android之开发天地图天地图开发教程_天地图_06

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>

效果：

android之开发天地图天地图开发教程_android之开发天地图_07

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>

android之开发天地图天地图开发教程_html_08

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>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：十大经典排序算法java 十大经典排序算法头歌

下一篇：csv去掉首行首列 python 批量删除csv第一行

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯