使用vue+腾讯地图API GL实现地图选房的功能

使用vue+腾讯地图API GL实现地图选房的功能

背景介绍

公司最近想做一个地图选房的功能，在网上找了很久也没有找到这方面的demo,就只好硬着头皮自己写一个地图选房的功能 腾讯地图的官方文档.首先我们要确定好使用的API，本人就在这方面被坑了，官方API的地图缩放级别最大是10km 但是由于需要用户选择房间 所以会导致最大的缩放级别也不能满足需求，只有通过公司和腾讯那边商量改腾讯地图API最大缩放级别的比例尺范围,这个一定要在前期做好以后确认腾讯给改的是哪个API，本人就一开始使用的javascript APL 基本上功能已经实现了 但是等到腾讯改完比例尺发现是javascript API GL 导致心态瞬间爆炸，废话不多说接下来说一下两种API的实现方法，首先说一下javascript API GL这个API是怎么实现的吧
首先申请腾讯地图Key 这个是公司和腾讯申请改动比例尺专用的key
在index.html内的的body标签引入javascript API GL

然后通过图片的左下角和右上角坐也就是楼层的西南角坐标和东北角坐标 计算出楼层的中心点坐标

let center = new TMap.LatLng(
          (parseFloat(NE[0]) + parseFloat(SW[0])) / 2,
          (parseFloat(NE[1]) + parseFloat(SW[1])) / 2
        ),

创建地图

that.map = new TMap.Map("map_canvas", {
        zoom:20, //设置地图缩放级别
        center: center, //设置地图中心点坐标
        minZoom: 14,
        viewMode: "2D",  // 视图模式
        baseMap: {
          type: "vector",
          features: ["base"] // 隐藏矢量文字   防止楼层图片被地图的楼层图层盖上
        }   // 地图地图
      });

使用官方文档的CanvasGroundLayer自定义图片图层，使用中发现文档里的ImageGroundLayer这个API也能实现，但是在实现过程中发现这个API使用的图片会跨域，给微信提过问题工单，他们不负责解决这个跨域问题，无奈之下使用CanvasGroundLayer这个API自己画图

首先把图片转canvas 创建一个canvas

let ImageBounds = new TMap.LatLngBounds(imgSW, imgNE);
      let img = new Image();
      img.crossOrigin = "anonymous";
      img.src = floor.ImageUrl + "?time=" + new Date().valueOf();

      let canvas = document.createElement("canvas");
      if (img.complete) {  // 检测图片是否加载完成
        canvas.width = img.width;
        canvas.height = img.height;
        canvas.getContext("2d").drawImage(img, 0, 0);
        let historicalOverlay = new TMap.CanvasGroundLayer({
          bounds: ImageBounds,
          canvas: canvas,
          map: that.map,
          zIndex: 1000,
          minZoom: 12,
          maxZoom: 20
        });
      } else {
        // 未加载完成要调一下onload方法
        img.onload = function() {
          canvas.width = img.width;
          canvas.height = img.height;
          canvas.getContext("2d").drawImage(img, 0, 0);
          let historicalOverlay = new TMap.CanvasGroundLayer({
            bounds: ImageBounds,
            canvas: canvas,
            map: that.map,
            zIndex: 999999,
            minZoom: 12,
            maxZoom: 20
          });
        };
      }

到这图片就已经放在地图图层上面了
接下来就是画每个房间的房型，使用方法采取的是绘制多边形的方法MultiPolygon
首先，我们要确定每个多边形的数据 采用的PolygonGeometry确定多边形数据

let polygonStyles = {}; // 存放所有多边形的样式
let roomPolygons = []; // 存放所有多边形的数据
         for (let j = 0; j < pointInfo.length; j++) {
            let roomPointInfo = pointInfo[j];
            roomPolygon.push(
              new qq.maps.LatLng(
                parseFloat(roomPointInfo[1]),
                parseFloat(roomPointInfo[0])
              )
            );
          }

          if (roomPolygon.length <= 3) {
            return;
          }
          let geometrie = {
            id: floor.Rooms[i].ChamberNumber, //多边形图形数据的标志信息
            styleId: floor.Rooms[i].ChamberNumber, //样式id
            paths: roomPolygon, //多边形的位置信息
            properties: {
              //多边形的属性数据
              title: ""
            }
          };
          roomPolygons.push(geometrie);
          polygonStyles[floor.Rooms[i].ChamberNumber] = new TMap.PolygonStyle({
            color: "rgba(14, 136, 192, 0.5)", //面填充色
            showBorder: true, //是否显示拔起面的边线
            borderColor: "rgba(255,255,255,0)"
          });

这样一个多边形的数据就建好了 接下来我们把多个多边形绘制到地图上

that.roomPolygonList = new TMap.MultiPolygon({
          id: "polygon-layer",
          styles: polygonStyles,
          map: that.map,
          geometries: roomPolygons
        });
        that.roomPolygonList.on("click", function(res) { // 添加多边形点击事件
          let geometry = res && res.geometry;
          that.chooseRoom(geometry.id);
        });

到这我们就把地图选房的功能做好了

第二种方法使用JavaScript API实现地图选房

由于这个API实现的方法被我换成javascript API GL以后 代码被我删掉了
所以就大概使用了哪些API

new qq.maps.Map(mapContainer, options);

这个和javascript API GL创建地图的方式不一样

使用qq.maps.GroundOverlay创建图片图层和ImageGroundLayer这个类似，但是不会出现跨域问题

创建多边形qq.maps.Polygon和MultiPolygon这个方法不一样 这个创建一个多边形就需要添加到地图上，然后添加点击事件绑定click点击事件出来用户点击房间的方法