鞍山手机网站设计,河南营销型网站,国外 家具 网站模板,ps自学网官网在做地图应用时#xff0c;有时需要根据指定的坐标来画一个圆形区域#xff0c;比如签到打卡类的应用#xff0c;此时我们可以使用 leaflet.Circle 来在在指定坐标上创建一个圆并添加到的地图上#xff0c;其中可以通过 radius 属性可以指定区域半径#xff0c;比如:
con…在做地图应用时有时需要根据指定的坐标来画一个圆形区域比如签到打卡类的应用此时我们可以使用 leaflet.Circle 来在在指定坐标上创建一个圆并添加到的地图上其中可以通过 radius 属性可以指定区域半径比如:
const circle leaflet.circle([lat, lng], {color: red,fillColor: red,fillOpacity: 0.5,radius: 100,
}).addTo(this.map);完整例子如下
import { Component, OnInit, AfterViewInit } from angular/core;
import * as leaflet from leaflet;Component({selector: app-map-circle,templateUrl: ./map-circle.component.html,styleUrls: [./map-circle.component.css],
})
export class MapCircleComponent implements OnInit, AfterViewInit {map!: leaflet.Map;constructor() {}ngOnInit(): void {}ngAfterViewInit(): void {this.initMap();}private initMap(): void {this.map leaflet.map(map).setView([51.5, -0.09], 16);const tiles leaflet.tileLayer(https://tile.openstreetmap.org/{z}/{x}/{y}.png, {maxZoom: 19,attribution: copy; a hrefhttp://www.openstreetmap.org/copyrightOpenStreetMap/a,});tiles.addTo(this.map);let marker: leaflet.Marker | null null;let circle: leaflet.Circle | null null;this.map.on(click, (e) {console.log(e.latlng);if (marker) {this.map.removeLayer(marker);}const icon leaflet.icon({iconUrl: media/marker-icon.png,iconSize: [25, 41],iconAnchor: [12, 41]});marker leaflet.marker([e.latlng.lat, e.latlng.lng], {icon: icon}).addTo(this.map);if (circle) {this.map.removeLayer(circle);}circle this.createCircle(e.latlng.lat, e.latlng.lng, red).addTo(this.map);});}private createCircle(lat: number, lng: number, color: string): leaflet.Circle {return leaflet.circle([lat, lng], {color: color,fillColor: color,fillOpacity: 0.5,radius: 100,});}
}
