TypeScript leaflet.layerGroup函數代碼示例

本文整理匯總了TypeScript中leaflet.layerGroup函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript layerGroup函數的具體用法？TypeScript layerGroup怎麽用？TypeScript layerGroup使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。

在下文中一共展示了layerGroup函數的6個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

示例1: initMap

 initMap() {
   this.map = L.map('map', {
     center: [this.coords[0], this.coords[1]],
     zoom: 8,
   });
   let basemap = L.tileLayer('https://api.mapbox.com/styles/v1/nathanhnew/cj62p1p9l3nyx2qp07zm12yh5/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmF0aGFuaG5ldyIsImEiOiJjajYxZXJ2NHowdHk1MnFvZnFvcjE2aTZ3In0.uyW_Te8pYugmfTiKuVHvOA', {
     attribution: 'Imagery &copy; Mapbox, Map Data &copy; OpenStreetMap |'
   });
   var radarWMS = L.tileLayer.wms("https://nowcoast.noaa.gov/arcgis/services/nowcoast/radar_meteo_imagery_nexrad_time/MapServer/WMSServer", {
     layers: '1',
     format: 'image/png',
     transparent: true,
     opacity: 0.8,
     attribution: 'Radar data provided by National Weather Service via nowCOAST'
   });
   var warningsWMS = L.tileLayer.wms("https://nowcoast.noaa.gov/arcgis/services/nowcoast/wwa_meteoceanhydro_shortduration_hazards_warnings_time/MapServer/WMSServer", {
     layers: '1',
     format: 'image/png',
     transparent: true,
     opacity: 0.8,
     attribution: 'nowCOAST'
   });
   let overlay = L.tileLayer('https://api.mapbox.com/styles/v1/nathanhnew/cj62phsw73npj2rphndjzt3i2/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmF0aGFuaG5ldyIsImEiOiJjajYxZXJ2NHowdHk1MnFvZnFvcjE2aTZ3In0.uyW_Te8pYugmfTiKuVHvOA');
   let layers = L.layerGroup([basemap,radarWMS,warningsWMS,overlay]).addTo(this.map)
   this.initialized = true;
 }

開發者ID:nathanhnew，項目名稱:nathansweather-legacy，代碼行數:26，代碼來源:leaflet-map.component.ts

示例2:

L.Util.cancelAnimFrame(1);
L.Util.emptyImageUrl;

interface MyProperties {
	testProperty: string;
}

(L.polygon(simplePolygonLatLngs) as L.Polygon<MyProperties>).feature.properties.testProperty = "test";

(L.marker([1, 2], {
	icon: L.icon({
		iconUrl: 'my-icon.png'
	})
}) as L.Marker<MyProperties>).feature.properties.testProperty = "test";

let lg = L.layerGroup();
lg = L.layerGroup([new L.Layer(), new L.Layer()]);
lg = L.layerGroup([new L.Layer(), new L.Layer()], {
	pane: 'overlayPane',
	attribution: 'test'
});

lg = new L.LayerGroup();
lg = new L.LayerGroup([new L.Layer(), new L.Layer()]);
lg = new L.LayerGroup([new L.Layer(), new L.Layer()], {
	pane: 'overlayPane',
	attribution: 'test'
});

// adapted from GridLayer documentation
const CanvasLayer = L.GridLayer.extend({

開發者ID:Igorbek，項目名稱:DefinitelyTyped，代碼行數:31，代碼來源:leaflet-tests.ts

示例3:

import 'leaflet-editable';

class MarkerClass { }
class MarkerEditorClass { }
class MiddleMarkerClass { }
class PolygonClass { }
class PolygonEditorClass { }
class PolylineClass { }
class PolylineEditorClass { }
class VertexMarkerClass { }

const map: L.Map = L.map('div', {
    editable: true,
    editOptions: {
        drawingCSSClass: 'css-class',
        editLayer: L.layerGroup(),
        featuresLayer: L.layerGroup<L.Marker|L.Polyline|L.Polygon>(),
        lineGuideOptions: {},
        markerClass: MarkerClass,
        markerEditorClass: MarkerEditorClass,
        middleMarkerClass: MiddleMarkerClass,
        polygonClass: PolygonClass,
        polygonEditorClass: PolygonEditorClass,
        polylineClass: PolylineClass,
        polylineEditorClass: PolylineEditorClass,
        skipMiddleMarkers: true,
        vertexMarkerClass: VertexMarkerClass
    }
});

const currentPoly: L.Polygon|L.Polyline| L.Marker = map.editTools.currentPolygon;

開發者ID:AbraaoAlves，項目名稱:DefinitelyTyped，代碼行數:31，代碼來源:leaflet-editable-tests.ts

示例4:

let map = L.map('foo');

markerClusterGroup = markerClusterGroup.addTo(map);
map = map
    .addLayer(markerClusterGroup)
    .removeLayer(markerClusterGroup);

const latLng: L.LatLng = L.latLng(10, 10);

const layer: L.Layer = L.marker(latLng);
const layers: L.Layer[] = [layer];

let marker: L.Marker = L.marker(latLng);
let markers: L.Marker[] = [marker];

const layerGroup: L.LayerGroup = L.layerGroup(layers);

marker = markerClusterGroup.getVisibleParent(marker);

markerClusterGroup = markerClusterGroup
    // Layers
    .addLayer(layer)
    .removeLayer(layer)
    .addLayers(layers)
    .removeLayers(layers)
    .clearLayers()
    // RefreshClusters
    .refreshClusters()
    .refreshClusters(layerGroup)
    .refreshClusters(marker)
    .refreshClusters(markers)

開發者ID:AbraaoAlves，項目名稱:DefinitelyTyped，代碼行數:31，代碼來源:leaflet.markercluster-tests.ts

示例5:

map.pm.toggleGlobalEditMode(editOptions);

const shapes: string[] = map.pm.Draw.getShapes();

const polygon: L.Polygon = L.polygon([ [ 1.0, 1.0], [ 2.0, 1.0], [ 1.0, 2.0] ]);
polygon.pm.enable(editOptions);
polygon.pm.disable();
polygon.pm.toggleEdit(editOptions);
enabled = polygon.pm.enabled();

const polyline: L.Polyline = L.polyline([ [ 1.0, 1.0], [ 2.0, 1.0], [ 1.0, 2.0] ]);
polyline.pm.enable(editOptions);
polyline.pm.disable();
polyline.pm.toggleEdit(editOptions);
enabled = polyline.pm.enabled();

const marker: L.Marker = L.marker([ 3.0, 3.0 ]);
marker.pm.enable(editOptions);
marker.pm.disable();
marker.pm.toggleEdit(editOptions);
enabled = marker.pm.enabled();

const layerGroup: L.LayerGroup = L.layerGroup([ polygon, polyline, marker ]);
layerGroup.pm.enable(editOptions);
layerGroup.pm.disable();
layerGroup.pm.toggleEdit(editOptions);
enabled = layerGroup.pm.enabled();
const layers: L.Layer[] = layerGroup.pm.findLayers();
const dragging: boolean = layerGroup.pm.dragging();
const options: L.PM.EditOptions = layerGroup.pm.getOptions();

開發者ID:AbraaoAlves，項目名稱:DefinitelyTyped，代碼行數:30，代碼來源:leaflet.pm-tests.ts

示例6: MainController

    .controller("com.app.earthquake.mainController", function MainController($scope) {

        const socket = Rx["DOM"].fromWebSocket("ws://127.0.0.1:8080");

        this.tweetList = [];
        this.earthquakesList = [];

        const quakesTable = document.getElementById("quakes_info");
        const map = L.map("map").setView([33.858631, -118.279602], 7);
        const quakeLayer = L.layerGroup([]).addTo(map);
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
        const codeLayers = {};

        const getRowFromEvent = event => {

            return Rx.Observable
                .fromEvent(quakesTable, event)
                .filter(event => {

                    const el = event["target"];
                    return el.tagName === "TD" && el.parentNode.id.length;
                })
                .pluck("target")
                .pluck("parentNode")
                .distinctUntilChanged();
        };

        const quakes = Rx.Observable.interval(5000)
            .flatMap(() => {

                return Rx["DOM"].jsonpRequest({
                    url: "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojsonp",
                    jsonpCallback: "eqfeed_callback"
                });
            })
            .flatMap(result => Rx.Observable.from(result["response"].features))
            .distinct(quake => quake["properties"].code)
            .share();

        quakes.subscribe(quake => {

            const coords = quake["geometry"].coordinates;
            const size = quake["properties"].mag * 10000;

            const circle = L.circle([coords[1], coords[0]], size)
                .addTo(map);

            quakeLayer.addLayer(circle);
            codeLayers[quake["id"]] = quakeLayer.getLayerId(circle);
        });

        quakes.pluck("properties")
            .subscribe(quake => $scope.$apply(() => this.earthquakesList.push(quake)));

        getRowFromEvent("mouseover")
            .pairwise()
            .subscribe(rows => {

                const prevCircle = quakeLayer.getLayer(codeLayers[rows[0]["id"]]);
                const currCircle = quakeLayer.getLayer(codeLayers[rows[1]["id"]]);
                prevCircle.setStyle({ color: "#59a27a" });
                currCircle.setStyle({ color: "#b01055" });
            });

        getRowFromEvent("click")
            .subscribe(row => {

                const circle = quakeLayer.getLayer(codeLayers[row["id"]]);
                map.panTo(circle.getLatLng());
            });

        quakes
            .bufferWithCount(100)
            .map(quakeList => {

                return quakeList.map(quake => {

                    return {
                        id: quake["properties"].net + quake["properties"].code,
                        lat: quake["geometry"].coordinates[1],
                        lng: quake["geometry"].coordinates[0],
                        mag: quake["properties"].mag
                    };
                });
            })
            .subscribe(quakes => socket.onNext(JSON.stringify({ quakes })));

        socket.map(message => JSON.parse(message.data))
            .subscribe(tweet => {

                $scope.$apply(() => {

                    this.tweetList.push(tweet);
                    this.tweetList = E.from(this.tweetList)
                        .distinct(i => i["created_at"]).toArray();
                });
            });
    });

開發者ID:vasiliyutkin，項目名稱:earthshakes，代碼行數:98，代碼來源:index.ts

注：本文中的leaflet.layerGroup函數示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台，相關代碼片段篩選自各路編程大神貢獻的開源項目，源碼版權歸原作者所有，傳播和使用請參考對應項目的License；未經允許，請勿轉載。