Googlemaps Ионный Родной Полигон С Отверстием

1

Попытка сделать аналогичный эффект на моей карте Googlemaps.

Изображение 174551

Это использует плагин Ionic Native Google Maps.

В настоящее время у меня есть следующий код.

Точки используются для создания наложенного многоугольника по всей карте, а затем я использую функцию drawCircle для рисования круга, добавляя точки lat/lng к массиву extp.push({lat: ey,lng: ex});

  points = [
{lat: 85,lng: 90},  
{lat: 85,lng: 0.1}, 
{lat: 85,lng: -90}, 
{lat: 85,lng: -179.9}, 
{lat: 0,lng: -179.9}, 
{lat: -85,lng: -179.9}, 
{lat: -85,lng: -90}, 
{lat: -85,lng: 0.1}, 
{lat: -85,lng: 90}, 
{lat: -85,lng: 179.9},  
{lat: 0,lng: 179.9},
{lat: 85,lng: 179.9} ];

drawCircle(point, radius, dir) { 
let lat;
let lng;
var d2r = Math.PI / 180;   // degrees to radians 
var r2d = 180 / Math.PI;   // radians to degrees 
var earthsradius = 3963; // 3963 is the radius of the earth in miles or 6371 in km
var points = 32; 

// find the raidus in lat/lon 
var rlat = (radius / earthsradius) * r2d; 
var rlng = rlat / Math.cos(point.lat() * d2r); 

var extp = new Array(); 
if (dir==1)   {var start=0;var end=points+1} // one extra here makes sure we connect the ends
else      {var start=points+1;var end=0}
for (var i=start; (dir==1 ? i < end : i > end); i=i+dir) { 

  var theta = Math.PI * (i / (points/2)); 
  let ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
  let ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
  extp.push({lat: ey,lng: ex}); 
} 
return extp;
}

Загрузка карты здесь

        this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
        console.log('Map is ready!');

        this.geolocation.getCurrentPosition({enableHighAccuracy: true}).then((resp) => {
          console.log(resp.coords.latitude);
          console.log(resp.coords.longitude);
            this.myLat = resp.coords.latitude;
            this.myLong = resp.coords.longitude;
            let loc: LatLng;
            loc = new LatLng (resp.coords.latitude, resp.coords.longitude);

            this.map.addPolygon({
                'points': this.points,
                'strokeColor': "blue",
                'holes': this.drawCircle(loc,10,-1), //when adding this I lose the overlay and the hole is not drawn. When I remove it, it starts to work again but without a hole.
                'strokeWidth': 4,
                'fillColor': "#222222"
              });


            this.map.moveCamera({
              'target': loc,
              'zoom': 14

            });

            this.map.addMarker({
                'position': loc,
                'title': "Hello GoogleMap for Cordova!",
                'icon'     : 'https://image.flaticon.com/icons/svg/147/147144.svg'
              });

        }).catch((error) => {
          console.log('Error getting location', error);
        });

    });
Теги:
ionic-framework
google-maps

1 ответ

0

вы можете сделать отверстие с помощью функции ctx.clip().

1. Сделайте холст с полной шириной, высотой. Холст 2.fill с "argb (100,255,0,0)". 3.use arc() и clip(), чтобы сделать отверстие. 4.set strokeStyle - "argb (255,255,0,0)". 5.use arc() и stroke(), чтобы сделать красный контур.

вот как сделать дыру.

  • 0
    Спасибо за ответ, но я надеюсь сделать это с помощью Google Maps напрямую, без дуги / клипа. Спасибо :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню