本文整理汇总了TypeScript中leaflet.Icon.extend方法的典型用法代码示例。如果您正苦于以下问题：TypeScript Icon.extend方法的具体用法？TypeScript Icon.extend怎么用？TypeScript Icon.extend使用的例子？那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类leaflet.Icon的用法示例。
在下文中一共展示了Icon.extend方法的2个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: testExampleControlOptions
function testExampleControlOptions() {
const editableLayers = new L.FeatureGroup([]);
map.addLayer(editableLayers);
const MyCustomMarker = L.Icon.extend({
options: {
shadowUrl: null,
iconAnchor: new L.Point(12, 12),
iconSize: new L.Point(24, 24),
iconUrl: 'link/to/image.png'
}
});
const drawControl = new L.Control.Draw({
position: 'topright',
draw: {
polyline: {
shapeOptions: {
color: '#f357a1',
weight: 10
}
},
polygon: {
allowIntersection: false, // Restricts shapes to simple polygons
drawError: {
color: '#e1e100', // Color the shape will turn when intersects
message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
},
shapeOptions: {
color: '#bada55'
}
},
circle: false, // Turns off this drawing tool
rectangle: {
shapeOptions: {
// clickable: false // clickabkle is not a polyline option according to leaflet docs
}
},
marker: {
icon: new MyCustomMarker()
}
},
edit: {
featureGroup: editableLayers, // REQUIRED!!
remove: false
}
});
}示例2: initialize
const IconClass = Icon.extend({
options: {
icon: "leaf"
, iconSize: defaults.iconSize.circle
, iconAnchor: defaults.iconAnchor.marker
, iconShape: "marker"
, iconStyle: ""
, innerIconAnchor: [0, 3] // circle with fa or glyphicon or marker with text
, innerIconStyle: ""
, isAlphaNumericIcon: false
, text: 1
, borderColor: defaults.iconColor
, borderWidth: 2
, borderStyle: "solid"
, backgroundColor: "white"
, textColor: defaults.iconColor
, customClasses: ""
, spin: false
, prefix: "fa"
, html: ""
},
initialize(options) {
this.applyDefaults(options);
this.options = (!options || !options.html) ? Util.setOptions(this, options) : options;
},
applyDefaults(options) {
if (options) {
if (!options.iconSize && options.iconShape) {
options.iconSize = defaults.iconSize[options.iconShape];
}
if (!options.iconAnchor && options.iconShape) {
options.iconAnchor = defaults.iconAnchor[options.iconShape];
}
if (!options.popupAnchor && options.iconShape) {
options.popupAnchor = defaults.popupAnchor[options.iconShape];
}
if (!options.innerIconAnchor) {
// if icon is type of circle or marker
if (options.iconShape === "circle" || options.iconShape === "marker") {
if (options.iconShape === "circle" && options.isAlphaNumericIcon) { // if circle with text
options.innerIconAnchor = [0, -1];
} else if (options.iconShape === "marker" && !options.isAlphaNumericIcon) {// marker with icon
options.innerIconAnchor = defaults.innerIconAnchor[options.iconShape];
}
}
}
}
},
createIcon() {
const iconDiv = document.createElement("div");
const options = this.options;
iconDiv.innerHTML = !options.html ? this.createIconInnerHtml() : options.html;
this._setIconStyles(iconDiv);
// having a marker requires an extra parent div for rotation correction
if (this.options.iconShape === "marker") {
const wrapperDiv = document.createElement("div");
wrapperDiv.className = "beautify-marker" + (options.props.owner._currSelRow === options.props.row ? " selected" : "");
wrapperDiv.appendChild(iconDiv);
return wrapperDiv;
}
return iconDiv;
},
createIconInnerHtml() {
const options = this.options;
if (options.iconShape === "circle-dot" || options.iconShape === "rectangle-dot" || options.iconShape === "doughnut") {
return "";
}
const innerIconStyle = this.getInnerIconStyle(options);
if (options.isAlphaNumericIcon) {
return '<div style="' + innerIconStyle + '">' + options.text + "</div>";
}
let spinClass = "";
if (options.spin) {
spinClass = " fa-spin";
}
return '<i class="' + options.prefix + " " + options.icon + spinClass + '" style="' + innerIconStyle + '"></i>';
},
getInnerIconStyle(options) {
const innerAnchor = point(options.innerIconAnchor);
//.........这里部分代码省略.........