本文整理汇总了TypeScript中leaflet.Control类的典型用法代码示例。如果您正苦于以下问题:TypeScript Control类的具体用法?TypeScript Control怎么用?TypeScript Control使用的例子?那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。
在下文中一共展示了Control类的4个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: constructor
constructor() {
super({iconUrl: 'icon.png'});
}
}
class MyDivIcon extends L.DivIcon {
constructor() {
super();
}
}
const divIcon = L.divIcon({html: ''});
let defaultIcon = new L.Icon.Default();
defaultIcon = new L.Icon.Default({imagePath: 'apath'});
const myControlClass = L.Control.extend({});
const myControl = new myControlClass();
const myOtherControlClass = myControlClass.extend({});
const myOtherControl = new myOtherControlClass();
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'
});
}
示例2: function
const MousePosition = L.Control.extend({
options: {
emptyString: '',
latFormatter: function(n) {
return [Math.abs(n).toFixed(3), '°', n < 0 ? 'S' : 'N'].join('');
},
lngFirst: false,
lngFormatter: function(n) {
return [Math.abs(n).toFixed(3), '°', n < 0 ? 'W' : 'E'].join('');
},
numDigits: 3,
position: 'bottomright',
separator: ' : '
},
/**
* Overriden method from parent class to remove control from map
*
* @param map
* The leaflet map
* @returns _container
* The container element for this control
*/
onAdd: function(map) {
this._container = L.DomUtil.create(
'div',
'leaflet-control-background leaflet-control-mouseposition'
);
L.DomEvent.disableClickPropagation(this._container);
map.on('mousemove', this._onMouseMove, this);
this._container.innerHTML = this.options.emptyString;
return this._container;
},
/**
* Overriden method from parent class to remove control from map
*
* @param map
*/
onRemove: function(map) {
map.off('mousemove', this._onMouseMove);
},
/**
* Function to calculate the lat/long coordinates of the current mouse
* position
*
* @param e
* mouse event
*/
_onMouseMove: function(e) {
let lng = L.Util.formatNum(e.latlng.lng, this.options.numDigits);
// need to correct for rollover of map if user scrolls
if (lng >= 0) {
lng = ((lng + 180) % 360) - 180;
} else {
lng =
((lng + 180 + Math.ceil(Math.abs(lng + 180) / 360) * 360) % 360) - 180;
}
let lat = L.Util.formatNum(e.latlng.lat, this.options.numDigits);
if (this.options.lngFormatter) {
lng = this.options.lngFormatter(lng);
}
if (this.options.latFormatter) {
lat = this.options.latFormatter(lat);
}
const value = this.options.lngFirst
? lng + this.options.separator + lat
: lat + this.options.separator + lng;
this._container.innerHTML = value;
}
});
示例3: constructor
constructor() {
super({iconUrl: 'icon.png'});
}
}
class MyDivIcon extends L.DivIcon {
constructor() {
super();
}
}
const divIcon = L.divIcon({html: ''});
let defaultIcon = new L.Icon.Default();
defaultIcon = new L.Icon.Default({imagePath: 'apath'});
const myControlClass = L.Control.extend({});
const myControl = new myControlClass();
L.Control.include({});
L.Control.mergeOptions({});
L.Control.addInitHook(() => {});
export class MyNewControl extends L.Control {
constructor() {
super({
position: 'topleft'
});
}
}
L.marker([1, 2], {
示例4: function
const LegendControl = L.Control.extend({
/**
* Add a layer to the legend
*
* @param layerEvent
* The event to add a layer to legend
*/
_onLayerAdd: function(layerEvent) {
this.displayLegends();
},
/**
* Remove a layer from legend
*
* @param layerEvent
* The layer to remove
*/
_onLayerRemove: function(layerEvent) {
this.displayLegends();
},
/**
* Add an individual legend string or DOM element to the legend control.
*
*/
addLegend: function(legend) {
let legendItem;
// No legend to display
if (legend === null) {
return;
}
this.removeMessage();
legendItem = document.createElement('li');
// Add a DOM Element or DOM String
if (typeof legend === 'object') {
legendItem.appendChild(legend);
} else if (typeof legend === 'string') {
legendItem.innerHTML = legend;
}
this._legendContainer.appendChild(legendItem);
},
/**
* Add message stating that there are no legends to display
*
*/
addMessage: function() {
let message;
if (this._legendContainer.querySelectorAll('li').length === 0) {
message = document.createElement('li');
message.className = 'no-legend';
message.innerHTML = 'Please select a layer.';
this._legendContainer.appendChild(message);
}
},
/**
* Removes all children from the overall legend container
*/
clearLegendContainer: function() {
if (this._legendContainer) {
while (this._legendContainer.firstChild) {
this._legendContainer.removeChild(this._legendContainer.firstChild);
}
}
},
/**
* Show the Legend control
*/
close: function() {
L.DomUtil.removeClass(this._container, 'leaflet-control-legend-visible');
},
/**
* Loops through each legend object in the legends array and displays
* the legends
*
*/
displayLegends: function() {
let i, len, legends;
if (!this._map) {
return;
}
legends = [];
legends = (this._legends || []).slice();
// clear existing legends
this.clearLegendContainer();
// loop through layers on the map, check for legends
//.........这里部分代码省略.........