mapbox 框选区域放大缩小地图

UpSeven0

于 2024-03-28 15:45:20 发布

阅读量419

点赞数 5

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_34811855/article/details/137114393

版权

zoomInMap() {
      let map = this.mapBoxMap;
      let self = this;
      function coordToPolygon(coord1, coord2) {
        return {
          "type": "Feature", "geometry": {
            "type": "Polygon",
            "coordinates": [
              [
                [
                  coord1.lng,
                  coord1.lat
                ],
                [
                  coord1.lng,
                  coord2.lat
                ],
                [
                  coord2.lng,
                  coord2.lat
                ],
                [
                  coord2.lng,
                  coord1.lat
                ],
                [
                  coord1.lng,
                  coord1.lat
                ]
              ]
            ]
          }
        };
      }
      function updatelayer(coord1, coord2) {
        const _feature = coordToPolygon(coord1, coord2);
        if (map.getSource('polysource') != undefined) {
          map.getSource('polysource')
            .setData({
              'type': 'FeatureCollection',
              "features": [_feature]
            });
        }
      }
      if (self.mapClickType !== 2 && self.mapClickType !== 3) {
        map.off('mousedown', mousedown);
        map.off('mousemove', mousemove);
        map.off('mouseup', mouseup);
        return;
      }
      MapBoxService.removeMapLayerAndSource('polysource', map);
      map.addSource('polysource', {
        'type': 'geojson',
        'data': {
          'type': 'FeatureCollection',
          "features": []
        }
      });
      map.addLayer({
        'id': 'polysource',
        'type': 'fill',
        'source': 'polysource',
        'paint': {
          'fill-color': '#0080ff',
          'fill-opacity': 0.8,
          'fill-outline-color': '#fff'
        }
      });
      map.on('mousedown', mousedown);
      map.on('mousemove', mousemove);
      map.on('mouseup', mouseup);
      let point1;
      let point2;
      function mousedown(e) {
        if (self.mapClickType !== 2 && self.mapClickType !== 3) {
          return;
        }
        point1 = e.lngLat;
        point2 = e.lngLat;
        updatelayer(point1, point2);
        e.preventDefault();
      }
      function mousemove(e) {
        if (self.mapClickType !== 2 && self.mapClickType !== 3) {
          return;
        }
        if (point2) {
          point2 = e.lngLat;
          updatelayer(point1, point2);
        }
      }
      function mouseup(e) {
        if (self.mapClickType !== 2 && self.mapClickType !== 3) {
          return;
        }
        if (point2) {
          point2 = e.lngLat;
          updatelayer(point1, point2);
        }
        setTimeout(() => {
          let x = (point1.lng + point2.lng) / 2;
          let y = (point1.lat + point2.lat) / 2;
          map.easeTo({ center: [x, y] });
          setTimeout(() => {
            self.mapClickType === 2 && map.zoomIn();
            self.mapClickType === 3 && map.zoomOut();
          }, 300);
          map.off('mousedown', mousedown);
          map.off('mousemove', mousemove);
          map.off('mouseup', mouseup);
          self.zoomInMap();
        }, 100);
      }
    },