TypeScript leaflet.marker函数代码示例

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

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

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

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

示例1: function

  onEachFeature: function(feature: any, layer: any) {
    if (feature.properties && this._count % 2 === 0) {
      const coordinates = feature.geometry.coordinates[0];
      const coordinateIdx = Math.round(
        Math.random() * (coordinates.length - 2)
      );

      // get angle for the labels
      const markerCoords = coordinates[coordinateIdx];
      const nextCoords = coordinates[coordinateIdx + 1];
      const angle = this.getAngle(markerCoords, nextCoords) * -1;

      const marker = L.marker([markerCoords[1], markerCoords[0]], {
        icon: L.divIcon({
          className: 'contour-overlay-label',
          html: `<div
              class="content">
                <div
                style="transform: rotate(${angle}deg)">
                  ${this.createLabel(feature)}
                </div>
              </div>`,
          iconAnchor: [7, 8],
          iconSize: [14, 10]
        })
      });

      this.addLayer(marker);
    }

    this._count += 1;

    const popupContent = this.generatePopupContent(feature);
    layer.bindPopup(popupContent);
  },

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

示例2: 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

示例3: createEventMarker

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>
                                <th>Longitude:</th>
                                <td>` + event.lon + `</td>
                            </tr>
                            <tr>
                                <th>Description:</th>
                                <td>` + event.place + `</td>
                            </tr>
                        </table>`;

    marker.bindPopup(popup);

    return marker;
}

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

示例4: 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

示例5: it

 it('calls addTooltip for each layer', done => {
   const addTooltipToLayerSpy = spyOn(overlay, 'addTooltipToLayer');
   const layer = L.marker(latlng).addTo(overlay.map);
   overlay.afterAdd();
   setTimeout(() => {
     expect(addTooltipToLayerSpy).toHaveBeenCalled();
     expect(addTooltipToLayerSpy).toHaveBeenCalledWith(layer);
     done();
   });
 });

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

示例6: 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

示例7: function

polygons.on('createfeature', function (e) {
  var id = e.feature.id;
  var feature = polygons.getFeature(id);
  var center = feature.getBounds().getCenter();
  var label = L.marker(center, {
    icon: L.divIcon({
      iconSize: null,
      className: 'label',
      html: '<div>' + e.feature.properties.F_Area_ID + '</div>'
    })
  }).addTo(map);
  labels[id] = label;
});

开发者ID:aluanhaddad，项目名称:esri-leaflet-jspm-example，代码行数:13，代码来源:main.ts

示例8: function

  pointToLayer: function(feature: any, latlng: any) {
    const props = feature.properties;
    const intensity = this.romanPipe.transform(props.intensity);
    let marker;

    if (
      props.network === 'DYFI' ||
      props.network === 'INTENSITY' ||
      props.network === 'CIIM' ||
      props.station_type === 'macroseismic'
    ) {
      // create a marker for a DYFI station
      marker = L.marker(latlng, {
        icon: L.divIcon({
          className: `station-overlay-dyfi-layer-icon mmi${intensity}`,
          iconAnchor: [7, 7],
          iconSize: [14, 14],
          popupAnchor: [0, 0]
        })
      });
    } else {
      // create a marker for a seismic station
      marker = L.marker(latlng, {
        icon: L.divIcon({
          className:
            'station-overlay-station-layer-icon station-mmi' + `${intensity}`,
          iconAnchor: [7, 8],
          iconSize: [14, 10],
          popupAnchor: [0, -4]
        })
      });
    }

    // Add event listener to generate a popup when the station is clicked
    marker.on('click', this.generatePopup, this);
    return marker;
  },

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

示例9: loadMap

  loadMap() {
    this.map = Leaflet
      .map("map")
      .setView(this.latLng, 13)
      .on("click", this.onMapClicked.bind(this))

    Leaflet.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
      .addTo(this.map);

    this.marker = Leaflet
      .marker(this.latLng, { draggable: true })
      .on("dragend", this.onMarkerPositionChanged.bind(this))
      .addTo(this.map);

    this.circle = Leaflet.circle(this.latLng, this.radius).addTo(this.map);
  }

开发者ID:lhammond，项目名称:ionic2-geofence，代码行数:16，代码来源:geofence-details.ts

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