vue【天地图】使用天地图api绘制GeoJson解析，矩形绘画，实现本地js天地图效果

Vue项目引入天地图

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

方法一：加载天地图，引用：

public/index.html

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

• 实现天地图效果，注释引用：

  public/index.html

  下的天地图
• js文件目录放：

  components/tianditu/tianditu.api.js

• 实现天地图页面，导入天地图js，下载路径：https://download.csdn.net/download/hui_54520/86338035

天地图：GeoJson，网址画矩形形状，得到geoJson 数据

https://geojson.io/#map=22/31.62690/120.30547

<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: {
    handleAddPoint(id) {
      this.ID = id
      pubOne(this.ID).then(res => {
        this.pubOneData = res.data
        if (this.pubOneData.GEOJSON == null || this.pubOneData.GEOJSON == '') {
          this.$message({ type: 'success', message: '定位不到相关位置!', })
          this.clearAll();
        } else {
          this.getLinesFromGeojson(this.pubOneData.GEOJSON,this.pubOneData.name) //服务器返回GEOJSON数据传
        }
      })
    },
    /**
     * 从GEOJSON获取所有linestring
     * @param {*} GEOJSON 
     * @returns  返回线段数组
     */
    getLinesFromGeojson(GEOJSON, name) {
      var json = JSON.parse(GEOJSON);
      let lines = [];
      let _bounds = [];
      let points = [];
      let geometries = json.geometry.coordinates[0];
      for (let i = 0; i < geometries.length; i++) {
        lines.push(geometries[i])
      }
      lines.forEach((coors) => {
        let polygon = this.createPolygon(coors, {
          fillOpacity: 0.001
        });
        this.map.addOverLay(polygon);

        if (this.infoWin) {
          this.map.removeOverLay(this.infoWin);
          this.infoWin = null;
        }
        var html = "<h5>" + name + "</h5>";
        this.infoWin = new T.InfoWindow(html, new T.Point([0, 0]));
        polygon.openInfoWindow(this.infoWin);
        
        polygon.addEventListener("click", function () {
          this.isShowDetails = true
        }, this);

        //设置中心点
        let _Bounds = polygon.getBounds();//拿到对象范围
        _bounds = _Bounds.getCenter();//获取中心点
        geometries.forEach((lonlat) => {
          points.push(new T.LngLat(lonlat[0], lonlat[1]));
        })
        this.map.setViewport(points); //设置范围
      })
      this.map.centerAndZoom(new T.LngLat(_bounds.lng, _bounds.lat), 10);
      return lines
    },

    /**
     * 创建polygon
     * @param {*} points 多边形坐标 二维数组
     * @param {*} option 
     * @returns  返回polygon
     */
    createPolygon(coors, option){
      let points = [];
      coors.forEach((lonlat) => {
        points.push(new T.LngLat(lonlat[0], lonlat[1]));
      })
      this.clearAll();
      let polygon = new T.Polygon(points, {
        color: "#167FFD", weight: 2, opacity: 1, fillColor: "#167FFD", fillOpacity: 0.5
      });
      return polygon
    },
    //清空地图及搜索列表
    clearAll() {
      this.map.clearOverLays();
      this.map.centerAndZoom(new T.LngLat(112.944895, 28.236163), 12);
    },
    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();
      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 });// 创建标注

    },
    
    },
    mounted() {
        this.load();
    }
}
</script>

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

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

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