腾讯地图开发-三维多边形的添加、选取、展示

一、效果展示

二、核心代码讲解

1、引入地图api

<script src="https://map.qq.com/api/gljs?v=1.exp&key=你的开发key&libraries=geometry">script>

• 其中key通过腾讯地图服务开发者获取
• libraries 是指额外引用一些库文件，这里引用了geometry，用于获取集合图形的中心点

2、初始化地图

this.map = new TMap.Map(this.mapEleId, {
        center,
        zoom: 17,
        minZoom: 15,
        pitch: 45,
        viewMode: '3D',
        mapStyleId: 'style3',
        baseMap: {
          // 类型：失量底图
          type: 'vector',
          // 仅渲染：道路及底面(base) + 2d建筑物(building2d)，以达到隐藏文字的效果
          features: ['base', 'building2d'],
        },
      })

• mapStyleId 是地图风格id，现在使用了暗色风格，在开发者面板里设置
• baseMap 的设置是为了去除所有建筑的默认3d效果，并隐藏所有文字，仅仅显示底图，主要是为了突出我们新增的三维建筑

3、隐藏比例尺和腾讯地图logo

• 通过css直接控制

4、获取点坐标

// 点击地图取坐标（只用于取点，非业务需求，可删）
this.map.on('click', (e) => {
  console.log(`点击坐标：${e.latLng.lat}, ${e.latLng.lng}`)
})

5、添加三维多边形

这里是添加一个多边形的代码，方便理解，和实际源码有所不同

var path = [
		[40.03847438521698,116.26140117645264],
		[40.038178675807515,116.26140117645264],
		[40.03791582192258,116.26208782196045],
	]
	//转为LatLng数组
	path = path.map(p => {
		return new TMap.LatLng(p[0], p[1]);
	});

	//初始化polygon
	var polygon = new TMap.MultiPolygon({
		id: 'polygon-layer', //图层id
		map: map, //设置多边形图层显示到哪个地图实例中
		//多边形样式
		styles: {
			'style-1': new TMap.ExtrudablePolygonStyle({
				'color': 'rgba(0,125,255,0.9)', //面填充色
				'showBorder':true, //是否显示拔起面的边线
				'extrudeHeight':30, //多边形拔起高度
				'borderColor': 'rgba(0,125,255,1)' //边线颜色
			})
		},
		//多边形数据
		geometries: [
			{
				'id': 'geometry-1', //该多边形在图层中的唯一标识（删除、更新数据时需要）
				'styleId': 'style-1', //绑定样式名
				'paths': path, //多边形轮廓
			}
		]
	});

• 多边形是由点组成的，请从按顺时针安排点，例如显示一个长方体，那么需要在地图上按顺时针点击4个点
• 一个polygon里面可以放多个geometry和多个style，一个geometry的风格对应一个styleId

6、多边形选取及高亮风格

 // 当前选中建筑增加高亮样色
 this.polygon.on('mousemove', (res) => {
   if (res && res.geometry) {
     const index = Number(res.geometry.id.split('-')[1])
     // 0是区域多边形，不做高亮
     if (index === 0) {
       this.mapEle.style.cursor = 'default' // 鼠标形状-默认
       this.polygon.setStyles(this.defaultStyles)
     } else {
       this.mapEle.style.cursor = 'pointer' // 鼠标形状-手指
       this.polygon.setStyles(this.createStyles(index))
     }
   }
 })
 this.polygon.on('mouseout', () => {
   this.mapEle.style.cursor = 'default'
   this.polygon.setStyles(this.defaultStyles)
 })

• polygon添加mousemove、mouseout事件，参数res可以获取当前选取到的geometry对象，里面有对象id，对象id是添加的时候用户自定义的
• 变更风格通过polygon.setStyles方法实现，但这个方法是需要传style数组，通过geometry绑定的styleId来关联风格。如示例图那样，3个多边形，其中1个高亮，那么得要构建style数组：2个蓝色，选中的黄色。这种方式感觉还是比较麻烦的，不知有没有更好的方法

7、添加文字

这里是添加一个文字的代码，方便理解，和实际源码有所不同

var label = new TMap.MultiLabel({
  id: "label-layer",
  map: map,
  styles: {
    label: new TMap.LabelStyle({
      color: "#3777FF", //颜色属性
      size: 20, //文字大小属性
      offset: { x: 0, y: 0 }, //文字偏移属性单位为像素
      angle: 0, //文字旋转属性
      alignment: "center", //文字水平对齐属性
      verticalAlignment: "middle", //文字垂直对齐属性
    }),
  },
  geometries: [
    {
      id: "label", //点图形数据的标志信息
      styleId: "label", //样式id
      position: new TMap.LatLng(40.040074, 116.273519), //标注点位置
      content: "腾讯北京总部", //标注文本
      properties: {
        //标注点的属性数据
        title: "label",
      },
    },
  ],
});

• 其中position我们需要填多边形的中心点，中心点可以通过 TMap.geometry.computeCentroid(path) 获取，path是多边形点集合
• 默认是没有TMap.geometry对象的，需要在 “1、引入地图api”的时候加上&libraries=geometry

三、源码

这里使用了vue

<template>
  <div class="box">
    <div class="bd">
      <div id="areaMap">div>
      
    div>
  div>
template>
<script>
/* global TMap */
export default {
  components: {},
  data() {
    return {}
  },
  computed: {},
  created() {
    this.tempPath = '' // （只用于取点，非业务需求，可删）
    this.isBuildHover = false // 是否建筑选中状态
    this.polygon = null // 整个多边形对象
    this.map = null // 腾讯地图对象
    this.mapEle = null // 地图html对象
    this.mapEleId = 'areaMap' // 地图html对象id
    this.center = [40.040578084070226, 116.27488872367269] // 地图中心点
    this.areaStyle = {
      faceColor: 'rgba(243, 165, 92,0.2)', // 面填充色
      borderColor: 'rgba(243, 165, 92,0.3)', // 边线颜色
    }
    this.buildStyle = {
      faceColor: 'rgba(45, 92, 179,0.9)', // 面填充色
      borderColor: 'rgba(45, 92, 179,1)', // 边线颜色
    }
    this.hoverStyle = {
      faceColor: 'rgba(245, 197, 64,0.9)', // 面填充色
      borderColor: 'rgba(245, 197, 64,1)', // 边线颜色
    }
    this.datas = this.createPaths()
    this.defaultStyles = this.createStyles()
  },
  mounted() {
    this.initMap()
    this.initPaths()
    this.addLabels()
    this.addPolygons()
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy()
    }
  },
  methods: {
    // 初始化坐标（把坐标转换为 TMap.LatLng 对象）
    initPaths() {
      this.datas.forEach((item) => {
        // eslint-disable-next-line no-param-reassign
        item.path = item.path.map((p) => {
          return new TMap.LatLng(p[0], p[1])
        })
      })
    },

    // 创建风格
    createStyles(hoverIndex) {
      const result = {}
      this.datas.forEach((item, index) => {
        result[`buildStyle-${index}`] = new TMap.ExtrudablePolygonStyle({
          color: index === hoverIndex ? this.hoverStyle.faceColor : item.style.faceColor, // 面填充色
          showBorder: true, // 是否显示拔起面的边线
          extrudeHeight: item.style.height, // 多边形拔起高度
          borderColor: index === hoverIndex ? this.hoverStyle.borderColor : item.style.borderColor, // 边线颜色
        })
      })
      return result
    },

    // 创建几何图形
    createGeometries() {
      const result = []
      this.datas.forEach((item, index) => {
        result.push({
          id: `geometry-${index}`, // 该多边形在图层中的唯一标识
          styleId: `buildStyle-${index}`, // 绑定样式名
          paths: item.path, // 多边形轮廓
        })
      })
      return result
    },

    // 创建文字几何图形
    createLabelGeometries() {
      const result = []
      this.datas.forEach((item, index) => {
        if (!item.showLabel) return
        const center = TMap.geometry.computeCentroid(item.path) // 获取多边形中心点
        result.push({
          id: `geometry-${index}`, // 点图形数据的标志信息
          styleId: 'label', // 样式id
          position: center, // 标注点位置
          content: item.name, // 标注文本
          properties: {
            // 标注点的属性数据
            title: 'label',
          },
        })
      })
      return result
    },

    // 添加文字
    addLabels() {
      // eslint-disable-next-line no-unused-vars
      const label = new TMap.MultiLabel({
        id: 'label-layer',
        map: this.map,
        zIndex: 1,
        enableCollision: false, // 是否文本标注碰撞检测（碰撞到部分会隐藏），默认false
        styles: {
          label: new TMap.LabelStyle({
            color: '#c4d7ff', // 颜色属性
            size: 16, // 文字大小属性
          }),
        },
        geometries: this.createLabelGeometries(),
      })
    },

    // 添加多边形
    addPolygons() {
      // 初始化polygon
      this.polygon = new TMap.MultiPolygon({
        id: 'polygon-layer', // 图层id
        map: this.map,
        styles: this.defaultStyles,
        geometries: this.createGeometries(),
      })

      // 当前选中建筑增加高亮样色
      this.polygon.on('mousemove', (res) => {
        if (res && res.geometry) {
          const index = Number(res.geometry.id.split('-')[1])
          // 0是区域多边形，不做高亮
          if (index === 0) {
            this.mapEle.style.cursor = 'default' // 鼠标形状-默认
            this.polygon.setStyles(this.defaultStyles)
          } else {
            this.mapEle.style.cursor = 'pointer' // 鼠标形状-手指
            this.polygon.setStyles(this.createStyles(index))
          }
        }
      })
      this.polygon.on('mouseout', () => {
        this.mapEle.style.cursor = 'default'
        this.polygon.setStyles(this.defaultStyles)
      })
    },

    // 初始化地图
    initMap() {
      this.mapEle = document.getElementById(this.mapEleId)
      const center = new TMap.LatLng(this.center[0], this.center[1])
      this.map = new TMap.Map(this.mapEleId, {
        center,
        zoom: 17,
        minZoom: 15,
        pitch: 45,
        viewMode: '3D',
        mapStyleId: 'style3',
        baseMap: {
          // 类型：失量底图
          type: 'vector',
          // 仅渲染：道路及底面(base) + 2d建筑物(building2d)，以达到隐藏文字的效果
          features: ['base', 'building2d'],
        },
      })

      // 点击地图取坐标（只用于取点，非业务需求，可删）
      this.map.on('click', (e) => {
        console.log(`点击坐标：${e.latLng.lat}, ${e.latLng.lng}`)
        this.tempPath += `[${e.latLng.lat}, ${e.latLng.lng}],`
      })
    },

    // 范围取点开始（只用于取点，非业务需求，可删）
    getPathStart() {
      this.tempPath = ''
    },

    // 范围取点结束（只用于取点，非业务需求，可删）
    getPathEnd() {
      console.log(this.tempPath)
    },

    // 建筑path数据
    createPaths() {
      return [
        {
          name: '小区范围',
          showLabel: false,
          style: {
            height: 0,
            faceColor: this.areaStyle.faceColor,
            borderColor: this.areaStyle.borderColor,
          },
          path: [
            [40.0415034138471, 116.27143701549642],
            [40.04236049909073, 116.27774645381885],
            [40.03957369699148, 116.27834242471181],
            [40.03852857619138, 116.27210238608075],
          ],
        },
        {
          name: '腾讯总部',
          showLabel: true,
          style: {
            height: 50,
            faceColor: this.buildStyle.faceColor,
            borderColor: this.buildStyle.borderColor,
          },
          path: [
            [40.04107841094325, 116.27230542328437],
            [40.041359657954686, 116.27439019479755],
            [40.03976347236319, 116.27476008106316],
            [40.0394850839455, 116.27266499006839],
          ],
        },
        {
          name: '2号楼',
          showLabel: true,
          style: {
            height: 150,
            faceColor: this.buildStyle.faceColor,
            borderColor: this.buildStyle.borderColor,
          },
          path: [
            [40.039843514986984, 116.27532780045226],
            [40.039919308531985, 116.27587508165402],
            [40.039512505180205, 116.27596764022701],
            [40.039457345501866, 116.27541386155372],
          ],
        },
        {
          name: '3号楼',
          showLabel: true,
          style: {
            height: 50,
            faceColor: this.buildStyle.faceColor,
            borderColor: this.buildStyle.borderColor,
          },
          path: [
            [40.04172105241769, 116.27504164650861],
            [40.041792322301546, 116.27602317768105],
            [40.04184059937072, 116.27641732170355],
            [40.04193073913048, 116.27665819301683],
            [40.04202305483084, 116.27735726159221],
            [40.04118263621495, 116.27754753094041],
            [40.04108942488904, 116.276747879087],
            [40.04107631409111, 116.27645335150191],
            [40.04106977757095, 116.27631291052137],
            [40.040985934586736, 116.27599635170418],
            [40.0408917307709, 116.27523477887087],
          ],
        },
      ]
    },
  },
}
script>

<style lang="less" scoped>
.bd {
  position: relative;
  background: #2d5cb3;
}
#areaMap {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 0;
}

.btns {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
}

::v-deep #areaMap {
  .rotate-circle,
  .tmap-zoom-control {
    opacity: 0.5;
  }
  .tmap-scale-control {
    display: none; // 隐藏比例尺
  }
  a {
    display: none; // 隐藏腾讯logo
  }
}
style>

兄弟，点个赞再走