cover

vue 实现天地图，集合数据坐标显示，坐标图片自定义，事件指定位置，地图类型切换

vue 实现天地图，集合数据坐标显示，坐标图片自定义，事件指定位置，地图类型切换

ღ大美女的博客

5463人浏览 · 2022-07-11 10:28:34

ღ大美女的博客 · 2022-07-11 10:28:34 发布

Vue项目引入天地图

在vue的静态资源目录下的index.html中引入天地图的底图，开发天地图源码路径：http://lbs.tianditu.gov.cn/api/js4.0/examples.html

方法一：加载天地图，引用：public/index.html

<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你申请的key"></script>

方法二：下载4.0天地图js，使用本地js文件实现天地图，加快天地图绘画和解决天地图加载卡顿

实现天地图效果，注释引用：public/index.html下的天地图
js文件目录放：components/tianditu/tianditu.api.js
实现天地图页面，导入天地图js，下载路径：https://download.csdn.net/download/hui_54520/86338035

在这里插入图片描述

实现天地图效果

在这里插入图片描述

打开首页地图现在默认坐标中心点可以服务器返回赋值，也可以自己去获取查询，还有层级设置

https://api.map.baidu.com/lbsapi/getpoint/index.html

在这里插入图片描述

自定义坐标图片

在这里插入图片描述

设置地图坐标中心点效果图，根据名称定位，也可以根据经纬度定位，代码如下：handleFindLocation（）方法

<template>
  <div >
  	<div class="Map_conter" id="map"></div>
  	<div class="Draw_draw__pv">
  		<el-tooltip class="item" effect="dark" content="测距" placement="left">
			<div class="point" @click="lineTool.open()">
				<img src="../assets/images/lineTool.png" class="pointImg">
            </div>
		</el-tooltip>
        <el-tooltip class="item" effect="dark" content="测面" placement="left">
	         <div class="point" @click="polygonTool.open()">
				<img src="../assets/images/polygonTool.png" class="pointImg2">
			</div>
		</el-tooltip>
	</div>
  </div>
</template>

<script>
export default {
  data () {
        return {
            map: {},//地图
            infoWin: '',
            lineTool: '',//测距工具
            polygonTool: '',//测面工具

    };
  },

  created() {},

    methods: {
    //优化地图初始化，解决切换重新绘画
    load() {
      var T = window.T;
      var imageURL = 'http://t0.tianditu.gov.cn/img_c/wmts?tk=你申请的key';
      var lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
      var config = { layers: [lay], name: 'TMAP_SATELLITE_MAP' };

      this.map = new T.Map('map', config); // 地图实例

	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/vector.png",
        layer: TMAP_NORMAL_MAP//地图类型对象，即MapType。
      }])
      this.map.addControl(ctrl);
      this.map.setMapType(window.TMAP_HYBRID_MAP);// 设置地图位地星混合图层

      this.map.centerAndZoom(new T.LngLat(112.944895, 28.236163), 12);
      //允许鼠标双击放大地图
      this.map.enableScrollWheelZoom();
      this.map.enableDrag();
      //创建比例尺控件对象 添加比例尺控件
      var scale = new T.Control.Scale();
      this.map.addControl(scale);

      var config = {
        showLabel: true,
        color: "red", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
      };
      //创建标注工具对象
      this.lineTool = new T.PolylineTool(this.map, config);
      //创建标注工具对象
      this.polygonTool = new T.PolygonTool(this.map, config);
      this.GetMaps()
    },
        GetMaps() {
            let T = window.T;
            //设置显示地图的中心点和级别
            this.map.clearOverLays();
            this.map.centerAndZoom(new T.LngLat(111.52232, 25.116313), 9);
            var icon = new T.Icon({
                iconUrl: 'http://api.tianditu.gov.cn/img/map/markerA.png',
                iconSize: new T.Point(33, 33),
                iconAnchor: new T.Point(10, 25)
            });
            var latlng = new T.LngLat(21, 22,); // 设置坐标点传入经度纬度
            let marker = new T.Marker(latlng, { icon: icon });// 创建标注 iconUrl地图切换覆盖
        },
        /**
         * this.transactionList  服务器返回集合数据
         * name名称 XXDZ地址  坐标JD,WD 
         * icon 自定义图标
         */
        pois() {
            var zoomArr = [];
            this.clearAll();
            for (let j = 0; j < this.transactionList.length; j++) {
                var name = this.transactionList[j].name;
                var XXDZ = this.transactionList[j].XXDZ;
                var winHtml = "地址:" + XXDZ;
                let marker = new T.Marker(new T.LngLat(this.transactionList[j].JD, this.transactionList[j].WD), {
                    icon: new T.Icon({
                        iconUrl: require('../assets/images/coordinate.png'),
                        iconSize: new T.Point(26, 26),
                    }),
                });
                this.map.addOverLay(marker);
                marker.addEventListener("click", function () {
                    this.showPosition(marker, name, winHtml);
                }, this);
                zoomArr.push(marker);
            }
        },
        //事件弹框显示
        showPosition(marker, name, winHtml) {
            if (this.infoWin) {
                this.map.removeOverLay(this.infoWin);
                this.infoWin = null;
            }
            var html = "<h5>" + name + "</h5>";
            html += winHtml;
            this.infoWin = new T.InfoWindow(html, new T.Point([0, 0]));
            marker.openInfoWindow(this.infoWin);

        },
        //清空地图及搜索列表
        clearAll() {
            this.map.clearOverLays();
        },
        /**
        * map.panTo将地图的中心点变换到输入的地理位置，同时缩放到指定等级
        * new T.Marker 创建标注对象
        * map.addOverLay 地图上添加标注
        * name 传服务器返回地址名称，调用可以指定到地图位置
        */
        handleFindLocation(name) {
            let geocoder = new T.Geocoder()
            let that = this
            function searchResult(result) {
                if (result.getStatus() == 0) {
                    that.map.panTo(result.getLocationPoint(), 19);
                    let marker = new T.Marker(result.getLocationPoint(), {
                        icon: new T.Icon({
                            iconUrl: require('../assets/images/coordinate.png'),
                            iconSize: new T.Point(26, 26),
                        }),
                    });
                    that.map.addOverLay(marker);
                    marker.addEventListener("click", function () {
                        that.isShowDetails = true
                    }, this);

                } else {
                    alert(result.getMsg());
                }
            }
            geocoder.getPoint(name, searchResult);
        },
        //根据经纬度定位坐标
        handleFindLocation2(JD, WD) {
            if (JD == null || JD == '') {
                this.clearAll();
                this.$message({ type: 'success', message: '定位不到相关位置!', })
            } else {
                let that = this
                this.clearAll();
                that.map.centerAndZoom(new T.LngLat(JD, WD), 19);
                var center = new T.LngLat(JD, WD);
                let marker = new T.Marker(center, {
                    icon: new T.Icon({
                        iconUrl: require('../assets/images/coordinate.png'),
                        iconSize: new T.Point(26, 26),
                    }),
                });
                that.map.addOverLay(marker);
                marker.addEventListener("click", function () {
                    that.isShowDetails = true
                }, this);
            }
        },

    },
    mounted() {
        this.load();

        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = 'http://api.tianditu.gov.cn/api?v=4.0&tk=你申请的key'
        document.body.appendChild(script)
    }
}
</script>

<style lang='less' scoped>
.Map_conter {
    position: relative;
    width: 100%;
    height: 800px;
    overflow: hidden;
    z-index: 3;
}
</style>

如果想学全栈开发，从写接口到，前端实现调接口，一整套流程，可以进群获取视频资料学习！

Java全栈交流①群要是满了可以加2群 1135453115， ②群 821596752

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

华为云开发者联盟

cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

华为云开发者联盟

cover

华为云云原生FinOps解决方案，释放云原生最大价值

华为云开发者联盟

所有评论(0)

查看更多评论

ღ大美女的博客

已为社区贡献2条内容