天地图项目2——绘制矩形覆盖物

一、地图添加矩形覆盖物

1. map.js文件中，调用天地图官方文档中的方法，绘制矩形覆盖物到地图上：

// map.js
// XROUND与YROUND分别为长度和宽度偏移量
async function getMineAreas(map) {
  try {
    const res = await ...  // 异步获取后端传过来的坐标信息
    const points = []
    var tabList = []
    var polygon = []
    for (var i = 0, len = res.length; i < len; i++) {
      point.push(new window.T.LngLat(res[i].longitude, res[i].latitude))
      point.push(new window.T.LngLat(res.[i].longitude + res[i].width * XROUND, res[i].latitude))
      point.push(new window.T.LngLat(res[i].longitude + res[i].width * XROUND, res[i].latitude - res[i].height * YROUND))
      point.push(new window.T.LngLat(res[i].longitude, res[i].latitude - res[i].height * YROUND))
      points.push(point)
      tabList.push({
        id: res[i].id,
        name: res[i].name,
        bound: point,
        pol: polygon[i]
      })
      // 返回相关矩形覆盖物信息
      return tabList
    }
  } catch (error) { error }

2. 在地图页面上调用js文件，绘制矩形覆盖物到地图页面上：

import mapAPI from '@/utils/map'

async mounted() {
  // 初始化天地图
  this.map = await mapAPI.initMap('mapDiv')
  // 天地图添加矩形覆盖物
  this.tabList = await mapAPI.getMineAreas(this.map)
}

二、矩形覆盖物添加监听事件

目前项目需求上，需要在添加的矩形覆盖物上添加相关鼠标移入、移出和点击等相关鼠标监听事件。这个在天地图的官方文档中有，可以拿过来使用：

// map.js
// 为每个矩形覆盖物动态添加事件监听函数
polygon.forEach(function(pol){
   pol.addEventListener('mouseover', () => {
     // 设置矩形边缘线
     pol.setLineStyle('solid')
     // 设置矩形透明度
     pol.setFillOpacity(0.7)
     // 矩形文本标注内容
     var text = `<div style='font-size:bold;'> 编码：${pol.id}<br>名称：${pol.name}</div>`
     // 矩形覆盖物文本标注坐标
     var position = new window.T.LngLat(pol.getLngLats()[0][1].lng, pol.getLngLats()[0][1].lat)
     // 文本标注
     label = new window.T.Label({
       text: text,
       position: position
     })
     // 设置文本标注边框线宽度
     label.setBorderLine(2)
     // 设置文本大小
     label.setFontSize(map.getZoom() - 1)
     // 添加到地图
     map.addOverLay(label)
   })
   pol.addEventListener('mouseout', () => {
     pol.setLineStyle('dashed')
     pol.setFillOpacity(0.5)
     // 鼠标移出矩形覆盖物时关闭文本窗口
     map.removeOverLay(label)
   })
   pol.addEventListener('click', ()=> {
     // 点击事件
     ...
   })
 })

三、封装

将上述的代码封装到一起如下：

// map.js
// XROUND与YROUND分别为长度和宽度偏移量
async function getMineAreas(map) {
  try {
    const res = await ...  // 异步获取后端传过来的坐标信息
    const points = []
    var tabList = []
    var polygon = []
    for (var i = 0, len = res.length; i < len; i++) {
      point.push(new window.T.LngLat(res[i].longitude, res[i].latitude))
      point.push(new window.T.LngLat(res.[i].longitude + res[i].width * XROUND, res[i].latitude))
      point.push(new window.T.LngLat(res[i].longitude + res[i].width * XROUND, res[i].latitude - res[i].height * YROUND))
      point.push(new window.T.LngLat(res[i].longitude, res[i].latitude - res[i].height * YROUND))
      points.push(point)
      tabList.push({
        id: res[i].id,
        name: res[i].name,
        bound: point,
        pol: polygon[i]
      })
      // 返回相关矩形覆盖物信息
      return tabList
    }
    // 为每个矩形覆盖物动态添加事件监听函数
	polygon.forEach(function(pol){
	   pol.addEventListener('mouseover', () => {
	     // 设置矩形边缘线
	     pol.setLineStyle('solid')
	     // 设置矩形透明度
	     pol.setFillOpacity(0.7)
	     // 矩形文本标注内容
	     var text = `<div style='font-size:bold;'> 编码：${pol.id}<br>名称：${pol.name}</div>`
	     // 矩形覆盖物文本标注坐标
	     var position = new window.T.LngLat(pol.getLngLats()[0][1].lng, pol.getLngLats()[0][1].lat)
	     // 文本标注
	     label = new window.T.Label({
	       text: text,
	       position: position
	     })
	     // 设置文本标注边框线宽度
	     label.setBorderLine(2)
	     // 设置文本大小
	     label.setFontSize(map.getZoom() - 1)
	     // 添加到地图
	     map.addOverLay(label)
	   })
	   pol.addEventListener('mouseout', () => {
	     pol.setLineStyle('dashed')
	     pol.setFillOpacity(0.5)
	     // 鼠标移出矩形覆盖物时关闭文本窗口
	     map.removeOverLay(label)
	   })
	   pol.addEventListener('click', ()=> {
	     // 点击事件
	     ...
	   })
	 })
  } catch (error) { error }
}


// vue页面
<template>
  <div id="mapDiv" />
</template>

<srcipt>
import mapAPI from '@/utils/map'

export default {
  data() {
    return {
      ...
    }
  },
  async mounted() {
	 // 初始化天地图
	 this.map = await mapAPI.initMap('mapDiv')
	 // 天地图添加矩形覆盖物
	 this.tabList = await mapAPI.getMineAreas(this.map)
  }
}
</srcipt>