TypeScript leaflet.icon函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中leaflet.icon函数的典型用法代码示例。如果您正苦于以下问题：TypeScript icon函数的具体用法？TypeScript icon怎么用？TypeScript icon使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了icon函数的7个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: ngOnInit

  ngOnInit() {
    this.pin = L.marker([0, 0], {
      draggable: true,
      icon: L.icon({
        iconAnchor: [12, 41],
        iconSize: [25, 41],
        iconUrl: DEFAULT_ICON_URL,
        shadowSize: [0, 0],
        tooltipAnchor: [16, -28]
      })
    });

    this.pin.enabled = true;

    if (
      !this.location ||
      !(this.location.latitude || this.location.latitude === 0) ||
      !(this.location.longitude || this.location.longitude === 0)
    ) {
      setTimeout(() => {
        this.updateFeltReportLocation(this.feltReport, this.event);
      }, 0);
    } else {
      this.updatePin();
    }

    this.pin.on('dragend', event => {
      return this.onMarkerChange();
    });
  }

开发者ID:emartinez-usgs，项目名称:earthquake-eventpages，代码行数:30，代码来源:map.component.ts

示例2: function

 createMarkerPlaceholder: function(latlng) {
   // create invisible icon
   const icon = L.icon({
     iconSize: [0, 0],
     iconUrl: 'empty'
   });
   // add invisible marker to bottom center of circle
   return L.marker(latlng, { icon: icon }).addTo(this.map);
 },

开发者ID:ehunter-usgs，项目名称:earthquake-eventpages，代码行数:9，代码来源:shake-alert-overlay.ts

示例3: icon

example = () => {
	const myIcon = L.icon({
		iconUrl: 'my-icon.png',
		iconSize: L.point(20, 20),
		iconAnchor: L.point(10, 10),
		labelAnchor: L.point(6, 0) // as I want the label to appear 2px past the icon (10 + 2 - 6)
	});
	L.marker(L.latLng(-37.7772, 175.2606), {
		icon: myIcon
	}).bindLabel('Look revealing label!').addTo(map);
};

开发者ID:AbraaoAlves，项目名称:DefinitelyTyped，代码行数:11，代码来源:leaflet-label-tests.ts

示例4: function

  initialize: function(product: any) {
    let latitude: number;
    let longitude: number;

    try {
      latitude = +product.properties.latitude || 0;
    } catch (e) {
      latitude = 0;
    }

    try {
      longitude = +product.properties.longitude || 0;
    } catch (e) {
      longitude = 0;
    }

    this.bounds = [
      [latitude - 2.0, longitude - 2.0],
      [latitude + 2.0, longitude + 2.0]
    ];

    const legend = document.createElement('img');
    legend.src = './assets/legend-epicenter.png';
    legend.setAttribute('alt', 'Epicenter marker legend');

    // Add to legends array
    this.legends.push(legend);

    L.Marker.prototype.initialize.call(this, [latitude, longitude], {
      icon: L.icon({
        iconAnchor: [8, 8],
        iconSize: [16, 16],
        iconUrl: 'assets/star.png'
      }),
      interactive: false
    });
  }

开发者ID:ehunter-usgs，项目名称:earthquake-eventpages，代码行数:37，代码来源:epicenter-overlay.ts

示例5: constructor

L.Control.include({});
L.Control.mergeOptions({});
L.Control.addInitHook(() => {});
L.Control.addInitHook('method1', 'hello', 1);

export class MyNewControl extends L.Control {
	constructor() {
		super({
			position: 'topleft'
		});
	}
}

L.marker([1, 2], {
	icon: L.icon({
		iconUrl: 'my-icon.png'
	})
}).bindPopup('<p>Hi</p>');

L.marker([1, 2], {
	icon: L.divIcon({
		className: 'my-icon-class'
	})
}).setIcon(L.icon({
	iconUrl: 'my-icon.png'
})).setIcon(L.divIcon({
	className: 'my-div-icon'
}));

let polygon: L.Polygon;

开发者ID:Igorbek，项目名称:DefinitelyTyped，代码行数:30，代码来源:leaflet-tests.ts

示例6: createEventMarker

import * as L from 'leaflet';
import { Layer } from './layer';

const epicIcon = L.icon({
    iconUrl: 'assets/epicenter.png',
    iconSize:     [40, 40], // size of the icon
    iconAnchor:   [20, 20], // point of the icon which will correspond to marker's location
    popupAnchor:  [0, 0] // point from which the popup should open relative to the iconAnchor
});

function createEventMarker(event: any) {
    const marker: any = L.marker([event.lat, event.lon], {icon: epicIcon});

    const popup = `<table class="my-table">
                            <tr>
                                <th>ID:</th>
                                <td>` + event.event_id + `</td>
                            </tr>
                            <tr> 
                                <th>Magnitude:</th>
                                <td>` + event.magnitude + `</td>
                            </tr>
                            <tr>
                                <th>Depth:</th>
                                <td>` + event.depth + `</td>
                            </tr>
                            <tr>
                                <th>Latitude:</th>
                                <td>` + event.lat + `</td>
                            </tr>
                            <tr>

开发者ID:dslosky-usgs，项目名称:shakecast，代码行数:31，代码来源:epicenter.ts

示例7:

import * as L from 'leaflet';
import 'leaflet.markercluster';

const polylineOptions: L.PolylineOptions = {};
const icon: L.Icon = L.icon({ iconUrl: 'foo' });

let markerClusterGroupOptions: L.MarkerClusterGroupOptions = {};
markerClusterGroupOptions = {
    showCoverageOnHover: true,
    zoomToBoundsOnClick: false,
    spiderfyOnMaxZoom: true,
    removeOutsideVisibleBounds: false,
    animate: true,
    animateAddingMarkers: false,
    disableClusteringAtZoom: 12,
    maxClusterRadius: 40,
    polygonOptions: polylineOptions,
    singleMarkerMode: true,
    spiderLegPolylineOptions: polylineOptions,
    spiderfyDistanceMultiplier: 2,
    iconCreateFunction: (cluster: L.MarkerCluster) => {
        const childMarkers: L.Marker[] = cluster.getAllChildMarkers();
        const childCount: number = cluster.getChildCount();
        cluster.zoomToBounds();
        const bounds: L.LatLngBounds = cluster.getBounds();
        return icon;
    },
    chunkedLoading: false,
    chunkDelay: 100
};

开发者ID:AbraaoAlves，项目名称:DefinitelyTyped，代码行数:30，代码来源:leaflet.markercluster-tests.ts

注：本文中的leaflet.icon函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。