• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript leaflet.control类代码示例

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

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



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

示例1: ngOnInit

    ngOnInit () {
        let options = {
            mapId: "map",
            lat: "51.505",
            lng: "-0.09",
            zoom: 12
        }
        let map = L.map(options.mapId, {
            center: new L.LatLng(options.lat, options.lng),
            zoom: options.zoom,
            zoomControl: false
        });

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        var zoomControl = L.control.zoom({
            position: 'topright'
        });
        map.addControl(zoomControl);
        this.map = map;
        this.addDrawControl();

        return map;
    }
开发者ID:panterz,项目名称:geofence-designer,代码行数:25,代码来源:map.component.ts


示例2: init

	init(controlConfig: any, controlOptions: any): L.Control.Layers {

		let baseLayers = controlConfig.baseLayers || {};
		let overlays = controlConfig.overlays || {};

		this.layersControl = L.control.layers(baseLayers, overlays, controlOptions);

		return this.layersControl;
	}
开发者ID:misteronak,项目名称:Verion-1.0-Donation-Dashboard,代码行数:9,代码来源:leaflet-control-layers.wrapper.ts


示例3:

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

const map = L.map('map', {center: L.latLng(43.24209, 76.87743), zoom: 15});

L.tileLayer("http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", {
    subdomains: ['a', 'b', 'c'],
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

L.control.polylineMeasure().addTo(map);
开发者ID:AbraaoAlves,项目名称:DefinitelyTyped,代码行数:11,代码来源:leaflet.polylinemeasure-tests.ts


示例4: basemapLayer

}).addTo(map);
points.addTo(map);

var baseMaps = {
  "Streets": basemapLayer("Streets"),
  "Topographic": basemapLayer("Topographic")
};

var overlayMaps = {
  "TAs": polygons,
  "Gates": points
};

baseMaps["Streets"].addTo(map);

L.control.layers(baseMaps, overlayMaps).addTo(map);
L.control.scale().addTo(map);

polygons.bindPopup(function (feature) {
  return esriLeafletUtil.template('<p>{F_Area_ID}<br>{F_label}<br>{Use_Restri}<br>More stuff here!</p>', feature.properties);
});
points.bindPopup(function ({feature}) {
  return L.Util.template('<p>Gate {F_Area_ID}<br>{TA}<br><br>More stuff here!</p>', feature.properties);
});

polygons.on('mouseout', function (e) {
  document.getElementById('info-pane').innerHTML = 'Hover to Inspect';
});

var oldId;
polygons.on('mouseover', function (e) {
开发者ID:aluanhaddad,项目名称:esri-leaflet-jspm-example,代码行数:31,代码来源:main.ts


示例5: postLink

    link: function postLink(scope, element) {
      L.Icon.Default.imagePath = config.appSubUrl + "/public/vendor/leaflet/dist/images";
      var baselayers = {};
      var overlays = {};
      var layerControl = L.control.layers(baselayers, overlays, {position: 'topleft'});
      var zoomControl = L.control.zoom({position: 'topright'});
      var scaleControl = L.control.scale({position: 'bottomleft'});
      var esri = L.tileLayer(
        'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
      );
      var initialZoom = 6;
      var initialPosition = new L.LatLng(31.5635497, -91.1403352);
      var map = L.map(element[0], {
        zoomControl: false,
        attributionControl: false,
        inertia: false,
        keyboard: true,
        dragging: true,
        scrollWheelZoom: true,
        zoomAnimation: true,
        layers: [esri] // only add one!
      }).setView(initialPosition, initialZoom);

      scope.$on("zoom", function (event, args) {
        console.log("picked up the event");
        map.setView(initialPosition, args.zoomlevel,
          {
            "animate": true
          }
        );
      });

      var markerLayer = MapSrv.getMarkerLayer();
      markerLayer.success(processMarkerLayer);
      var baseLayers = MapSrv.getBaseLayers();
      baseLayers.success(processBaseLayers);
      var remoteLayers = MapSrv.getRemoteLayers();
      remoteLayers.success(processRemoteLayers);
      var layers = MapSrv.getLayers();
      layers.success(processLayers);

      zoomControl.addTo(map);
      scaleControl.addTo(map);
      layerControl.addTo(map);


      function processMarkerLayer(response) {
        var markerLayerHandlers = {
          onEachFeature: markerLayerOnEachFeatureFunction
        };
        var layer = L.geoJson(response, markerLayerHandlers);
        layer.addTo(map);
      }

      function processBaseLayers (response) {
        for (var i = 0; i < response.length; i++) {
          var name = response[i].name;
          var url = response[i].url;
          var attribution = response[i].attribution;
          var subdomains = response[i].subdomains;

          var baselayer = L.tileLayer(
            url,
            {
              attribution: attribution,
              subdomains: subdomains
            }
          );
          layerControl.addBaseLayer(baselayer, name);
        };
      }

      function processRemoteLayers (response) {
        for (var i = 0; i < response.length; i++) {
          var name = response[i].name;
          var url = response[i].url;
          var handler_factory_args = {
            style: {
              radius: 8,
              fillColor: "#" + response[i].color,
              color: "#000",
              weight: 1,
              opacity: 1,
              fillOpacity: 0.8
            }
          };
          var handler_factories = {
            style: defaultStyleFactory,
            pointToLayer: circleMarkerPointToLayerFactory,
            onEachFeature: simplePopupOnEachFeatureFactory
          };
          process_geojson(url, name, handler_factory_args, handler_factories);
        }
      }

      function processLayers(response) {
        for (var i = 0; i < response.length; i++) {
          var name = response[i].display_name;
          var url = "http://129.114.111.79/media/" + "geojson/" + response[i].file_name;
          //var url = "http://localhost:8000/media/" + "geojson/" + response[i].file_name;
//.........这里部分代码省略.........
开发者ID:tclaytempleton,项目名称:grafana,代码行数:101,代码来源:leaflet_directive.ts


示例6:

		this.zone.runOutsideAngular(() => {
			this.layersControl = control.layers(baseLayers, overlays, controlOptions);
		});
开发者ID:misteronak,项目名称:Verion-1.0-Donation-Dashboard,代码行数:3,代码来源:leaflet-control-layers.wrapper.ts


示例7:

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

const map: L.Map = L.map('map-container');

// Defaults
const icon: L.Control.Fullscreen = L.control.fullscreen({
  position: 'topleft',
  title: 'Full Screen',
  titleCancel: 'Exit Full Screen',
  forceSeparateButton: false,
  forcePseudoFullscreen: false
});

icon.addTo(map);

// My Usage
L.control.fullscreen({
  position: 'topleft',
  content: '<i class="fa fa-arrows-alt"></i>',
  forceSeparateButton: true,
}).addTo(map);
开发者ID:AbraaoAlves,项目名称:DefinitelyTyped,代码行数:22,代码来源:leaflet.fullscreen-tests.ts


示例8:

import * as L from 'leaflet';
import 'leaflet-geocoder-mapzen';

const osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors';
const osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
const map = new L.Map('map', {layers: [osm], center: new L.LatLng(-37.7772, 175.2756), zoom: 15 });

// Add geocoding plugin
L.control.geocoder('search-MKZrG6M').addTo(map);
开发者ID:AbraaoAlves,项目名称:DefinitelyTyped,代码行数:10,代码来源:leaflet-geocoder-mapzen-tests.ts


示例9:

import * as L from 'leaflet';

const map = L.map('map', {
    center: [51.505, -0.09],
    zoom: 13,
});

const panControl = L.control.pan({position: 'topright'});
map.addControl(panControl);
开发者ID:AlexGalays,项目名称:DefinitelyTyped,代码行数:9,代码来源:leaflet.pancontrol-tests.ts


示例10:

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

const map = L.map('map', {
    center: [51.505, -0.09],
    zoom: 13
});

// Defaults
L.control.locate().addTo(map);

// Simple
const lc = L.control.locate({
    position: 'topright',
    strings: {
        title: "Show me where I am, yo!"
    }
}).addTo(map);

// Locate Options
map.addControl(L.control.locate({
    locateOptions: {
        maxZoom: 10,
        enableHighAccuracy: true
}}));
开发者ID:AbraaoAlves,项目名称:DefinitelyTyped,代码行数:25,代码来源:leaflet.locatecontrol-tests.ts



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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript leancloud-jssdk.File类代码示例发布时间:2022-05-25
下一篇:
TypeScript leaflet.Util类代码示例发布时间:2022-05-25
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap