vue2使用天地图

请叫我欧皇i

于 2024-08-20 10:49:35 发布

阅读量1.5k

点赞数 29

分类专栏： vue-插件工具类文章标签： java 开发语言

本文链接：https://blog.csdn.net/qq_44278289/article/details/141330767

版权

vue-插件同时被 2 个专栏收录

25 篇文章 2 订阅

订阅专栏

工具类

12 篇文章 1 订阅

订阅专栏

需求：用vue2使用天地图展示对应点位数据以及开发中出现的问题等，其实天地图的写法和百度地图差不多

注意！！！天地图的接口不稳定，时常报错418，官网也是一样的情况，推荐还是使用百度或者高德吧。

以下是拷贝的网上的地图坐标系，仅作参考

（1）天地图：CGCS2000，2000国家大地坐标系；我们其实很多时候直接用WGS84的坐标来代替CGCS2000坐标。因为CGCS2000的定义与WGS84实质一样。采用的参考椭球非常接近。扁率差异引起椭球面上的纬度和高度变化最大达0.1mm。当前测量精度范围内，可以忽略这点差异。可以说两者相容至cm级水平，但若一点的坐标精度达不到cm水平，则不认为CGCS2000和WGS84的坐标是相容的。

（2）百度地图：bd09II坐标。首先了解一下火星坐标，它是在国际标准坐标WGS-84上进行的一次加密，由于国内的电子地图都要至少使用火星坐标进行一次加密，百度直接就任性一些，直接自己又研究了一套加密算法，来了个二次加密，这就是我们所熟知的百度坐标(BD-09)。

（3）高德地图：gcj02坐标，也称为火星坐标。火星坐标是国家测绘局为了国家安全在原始坐标的基础上进行偏移得到的坐标，基本国内的电子地图、导航设备都是采用的这一坐标系或在这一坐标的基础上进行二次加密得到的。

原文地址如下：

常用的几种在线地图（天地图、百度地图、高德地图）坐标系之间的转换算法_天地图坐标系-CSDN博客

1.效果

2.申请天地图的TK

步骤我就不贴了，直接点击下方链接就可以申请注册开发者了

天地图API (tianditu.gov.cn)

3.项目引入

3.1在vue2的public文件下的index.html中引入天地图（引入后建议重新运行代码）

      <!-- // 这里的tk为你在天地图的官网申请的tk -->
        <script src="https://api.tianditu.gov.cn/api?v=4.0&tk=" type="text/javascript"></script>

4.关键代码讲解

引入成功后页面就可以使用new T.Map了，也就是把百度地图的bmap给为了t.map，这个mapDiv是<div id="mapDiv"></div>，也就是存放天地图的容器

centerAndZoom：设置地图中心点和缩放级别

 loadMap() {
            let that = this;
            let zoom = 16;
            //初始化地图对象
            this.map = new T.Map('mapDiv');
            //设置显示地图的中心点和级别
            let lng = 116.849;
            let lat = 28.202988;
            if (that.lnglat) {
                lng = that.lnglat.split(',')[0];
                lat = that.lnglat.split(',')[1];
            }
            this.map.centerAndZoom(new T.LngLat(lng, lat), zoom);
            //创建缩放平移控件对象
            let control = new T.Control.Zoom();
            //添加缩放平移控件
            this.map.addControl(control);
            // this.map.setMinZoom(10);
            // this.map.setMaxZoom(17);
            this.$nextTick(() => {
                this.setPoint();
            });
        },

4.1地图类型控件（只展示个别类型）

官网地图控件代码（默认展示全部）：

一共分为

TMAP_NORMAL_MAP（普通）

TMAP_SATELLITE_MAP（卫星视图）

TMAP_HYBRID_MAP（卫星和路网混合）

TMAP_TERRAIN_MAP（地形视图）

TMAP_TERRAIN_HYBRID_MAP（地形和路网混合）

  //初始化地图对象
            map = new T.Map("map", {datasourcesControl: true});
            //设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(116.40969, 39.89945), 12);
            //创建对象
            var ctrl = new T.Control.MapType();
            //添加控件
            map.addControl(ctrl);

需求：只想要卫星混合和卫星的

  var ctrl = new T.Control.MapType([
        {
          title: "卫星混合",
          icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
          layer: TMAP_HYBRID_MAP,
        },
        {
          title: "卫星",
          icon: " http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png",
          layer: TMAP_SATELLITE_MAP,
        },
      ]);
      // this.map.addControl(ctrl);
      // 创建对象
      // var ctrl = new T.Control.MapType();
      //添加控件
      this.map.addControl(ctrl);

      this.map.setMapType(TMAP_HYBRID_MAP);

全部的地图样式我都找到了，有需要自己改下就可以了，代码如下：

  controls: [ { name: "mapType", position: "bottomright", mapTypes: [ { title: "地图", icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", layer: "TMAP_NORMAL_MAP" }, { title: "卫星", icon: " http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png", layer: "TMAP_SATELLITE_MAP" }, { title: "卫星混合", icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png", layer: "TMAP_HYBRID_MAP" }, { title: "地形", icon: " http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrain.png", layer: "TMAP_TERRAIN_MAP" }, { title: "地形混合", icon: " http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png", layer: "TMAP_TERRAIN_HYBRID_MAP" } ] } ]

4.2给地图添加标点（并且保证首次加载地图所有点都展示在视图中）

标点只需要设置点的经纬度就行

       setPoint() {
            const site = this.siteArr;
            site.forEach((item) => {
                // 创建标注对象
                const marker = new T.Marker(new T.LngLat(item.longitude, item.latitude));
                console.log(marker, '标记点');
                item.marker = marker;
                // 向地图上添加标注
                this.map.addOverLay(marker);
                // 点位的点击事件，展示弹窗
                this.addClickHandler(item, marker);
            });
        },

首次加载地图所有点都展示在视图中，需要修改上面的代码，主要添加new T.LngLat，和setViewport

     setPoint() {
            const site = this.siteArr;
            let points = [];
            site.forEach((item) => {
                // 创建标注对象
                const marker = new T.Marker(new T.LngLat(item.longitude, item.latitude));
                var lnglat = new T.LngLat(item.lng, item.lat);
                points.push(lnglat);
                console.log(marker, '标记点');
                item.marker = marker;
                // 向地图上添加标注
                this.map.addOverLay(marker);
                // 点位的点击事件，展示弹窗
                this.addClickHandler(item, marker);
            });
            this.map.setViewport(points);
        },

4.3 点击标点后弹出信息

主要代码，需要在setPoint中调用该方法：new T.InfoWindow(); // 创建信息窗口对象

that.map.openInfoWindow(markerInfoWin, e.lnglat); // 开启信息窗口

// 相对于点偏移的位置（可以不设置）

markerInfoWin.setContent(sContent, { offset: new T.Point(0, -30) });

   // 点位弹窗
        addClickHandler(content, marker) {
            var T = window.T;
            const that = this;
            marker.addEventListener('click', function (e) {
                var markerInfoWin = new T.InfoWindow(); // 创建信息窗口对象
                // 弹窗模版
                const sContent = `<div class="module-title" style="color: black;font-size: 14px;">网关名称：${content.name}</div>
         <div class="module-title" style="color: black;font-size: 14px;">分组：${content.group}</div>
         <div class="module-title" style="color: black;font-size: 14px;">SN：${content.sn}</div>
        `;
                // 相对于点偏移的位置
                markerInfoWin.setContent(sContent, { offset: new T.Point(0, -30) });
                that.map.openInfoWindow(markerInfoWin, e.lnglat); // 开启信息窗口
            });
        }

4.4使用插件 wgs84转国测局坐标

npm install coordtransform

只需要传经纬度就行，第一个是经度，第二是纬度，最后得到的是转换后的wgs84togcj02=[110.983,28.3832]（我这是随便写的，主要是格式是这样的）

  var wgs84togcj02 = this.COORDTRANSFORM.wgs84togcj02(
                   110.3054265898,
                   28.1871
                );

5.完整代码

<template>
    <div class="equipmentMap">
        <div class="mapBox" v-if="gatewayData.length">
            <div class="mapBox_frame" v-for="(item, index) in gatewayData" :key="index">
                <div class="name ellipsis" :title="item.name">网关名称：{{ item.name }}</div>
                <div class="other ellipsis">分组：{{ item.group.toString() }}</div>
                <div class="other ellipsis">SN:{{ item.sn }}</div>
            </div>
        </div>
        <div id="mapDiv"></div>
    </div>
</template>
<script>
export default {
    name: 'EquipmentOverview',
    data() {
        return {
            gatewayData: [],
            siteArr: [
                {
                    longitude: 110.3054265898,
                    latitude: 28.202988,
                    name: '测试',
                    group: ['测试'],
                    sn: '123456789'
                },
                {
                    longitude: 111.3054265898,
                    latitude: 39.3945170337,
                    name: '测试',
                    group: ['测试'],
                    sn: '123456789'
                }
            ],
            map: null
        };
    },
    filters: {},
    mounted() {
        // this.getGatewayData();
        this.$nextTick(() => {
            this.loadMap();
        });
    },
    methods: {
        loadMap() {
            let that = this;
            let zoom = 16;
            //初始化地图对象
            this.map = new T.Map('mapDiv');
            //设置显示地图的中心点和级别
            let lng = 116.849;
            let lat = 28.202988;
            if (that.lnglat) {
                lng = that.lnglat.split(',')[0];
                lat = that.lnglat.split(',')[1];
            }
            this.map.centerAndZoom(new T.LngLat(lng, lat), zoom);
            //创建缩放平移控件对象
            let control = new T.Control.Zoom();
            //添加缩放平移控件
            this.map.addControl(control);
            var ctrl = new T.Control.MapType([
                {
                    title: '卫星混合',
                    icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png',
                    layer: TMAP_HYBRID_MAP
                },
                {
                    title: '卫星',
                    icon: ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
                    layer: TMAP_SATELLITE_MAP
                }
            ]);
            // this.map.addControl(ctrl);
            // 创建对象
            // var ctrl = new T.Control.MapType();
            //添加控件
            this.map.addControl(ctrl);

            this.map.setMapType(TMAP_HYBRID_MAP);
            // this.map.setMinZoom(10);
            // this.map.setMaxZoom(17);
            this.$nextTick(() => {
                this.setPoint();
            });
        },
        setPoint() {
            const site = this.siteArr;
            let points = [];
            site.forEach((item) => {
                // 创建标注对象
                const marker = new T.Marker(new T.LngLat(item.longitude, item.latitude));
                var lnglat = new T.LngLat(item.lng, item.lat);
                points.push(lnglat);
                console.log(marker, '标记点');
                item.marker = marker;
                // 向地图上添加标注
                this.map.addOverLay(marker);
                // 点位的点击事件，展示弹窗
                this.addClickHandler(item, marker);
            });
            this.map.setViewport(points);
        },
        // 点位弹窗
        addClickHandler(content, marker) {
            var T = window.T;
            const that = this;
            marker.addEventListener('click', function (e) {
                var markerInfoWin = new T.InfoWindow(); // 创建信息窗口对象
                // 弹窗模版
                const sContent = `<div class="module-title" style="color: black;font-size: 14px;">网关名称：${content.name}</div>
         <div class="module-title" style="color: black;font-size: 14px;">分组：${content.group}</div>
         <div class="module-title" style="color: black;font-size: 14px;">SN：${content.sn}</div>
        `;
                // 相对于点偏移的位置
                markerInfoWin.setContent(sContent, { offset: new T.Point(0, -30) });
                that.map.openInfoWindow(markerInfoWin, e.lnglat); // 开启信息窗口
            });
        }
    }
};
</script>
<style lang="scss" scoped>
#mapDiv {
    width: 100%;
    height: 94vh;
}
.seachInput {
    position: absolute;
    z-index: 9999;
    margin: 0.6% 0px 0px 3%;
    width: 300px;
}
.mapBox {
    border: 1px solid #eaecf0;
    background-color: white;
    height: 303px;
    overflow: auto;
    width: 300px;
    position: absolute;
    z-index: 9999;
    margin: 2.7% 0px 0px 3%;
}
.mapBox_frame {
    height: 100px;
    width: 294px;
    background-color: white;
    border-bottom: 1px solid #efeded;
    padding: 14px;
    line-height: 24px;
    .name {
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        cursor: pointer;
    }
    .ellipsis {
        width: 240px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1; /*3表示只显示3行*/
        -webkit-box-orient: vertical;
    }
    .other {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        cursor: pointer;
    }
}
.mapBox_frame:hover {
    background-color: rgb(221, 239, 250); /* 鼠标滑过时的背景颜色 */
    color: white; /* 鼠标滑过时的文本颜色 */
}
::-webkit-scrollbar {
    width: 4px;
    height: 6px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
    background: rgba(144, 147, 153, 0.3);
}
.easy-scrollbar__wrap::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
    border-radius: 20px;
    background: #ededed;
}
/deep/ .tdt-control-container {
    display: none !important;
}
</style>

文章到此结束，希望对你有所帮助~