Targeted leaflet imports

This commit is contained in:
James Lyne 2020-12-12 22:04:56 +00:00
parent 37d7758d70
commit b9b58399f6
21 changed files with 95 additions and 97 deletions

View File

@ -13,7 +13,7 @@
<script lang="ts"> <script lang="ts">
import {defineComponent, computed} from "@vue/runtime-core"; import {defineComponent, computed} from "@vue/runtime-core";
import L from 'leaflet'; import {LatLng, CRS} from 'leaflet';
import {useStore} from '@/store'; import {useStore} from '@/store';
import MapLayer from "@/components/map/layer/MapLayer.vue"; import MapLayer from "@/components/map/layer/MapLayer.vue";
import PlayersLayer from "@/components/map/layer/PlayersLayer.vue"; import PlayersLayer from "@/components/map/layer/PlayersLayer.vue";
@ -40,7 +40,7 @@ export default defineComponent({
setup() { setup() {
const store = useStore(), const store = useStore(),
leaflet = undefined as L.Map | undefined, leaflet = undefined as DynmapMap | undefined,
maps = computed(() => store.state.maps), maps = computed(() => store.state.maps),
markerSets = computed(() => store.state.markerSets), markerSets = computed(() => store.state.markerSets),
@ -106,14 +106,14 @@ export default defineComponent({
mounted() { mounted() {
this.leaflet = new DynmapMap(this.$el, Object.freeze({ this.leaflet = new DynmapMap(this.$el, Object.freeze({
zoom: this.configuration.defaultZoom, zoom: this.configuration.defaultZoom,
center: new L.LatLng(0, 0), center: new LatLng(0, 0),
fadeAnimation: false, fadeAnimation: false,
zoomAnimation: true, zoomAnimation: true,
zoomControl: true, zoomControl: true,
layerControl: true, layerControl: true,
preferCanvas: true, preferCanvas: true,
attributionControl: false, attributionControl: false,
crs: L.CRS.Simple, crs: CRS.Simple,
worldCopyJump: false, worldCopyJump: false,
// markerZoomAnimation: false, // markerZoomAnimation: false,
})); }));

View File

@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import {defineComponent} from "@vue/runtime-core"; import {defineComponent} from "@vue/runtime-core";
import {useStore} from "@/store"; import {useStore} from "@/store";
import L from 'leaflet';
import {CoordinatesControl, CoordinatesControlOptions} from "@/leaflet/control/CoordinatesControl"; import {CoordinatesControl, CoordinatesControlOptions} from "@/leaflet/control/CoordinatesControl";
import DynmapMap from "@/leaflet/DynmapMap";
export default defineComponent({ export default defineComponent({
props: { props: {
leaflet: { leaflet: {
type: Object as () => L.Map, type: Object as () => DynmapMap,
required: true, required: true,
} }
}, },

View File

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import {defineComponent} from "@vue/runtime-core"; import {defineComponent} from "@vue/runtime-core";
import L from 'leaflet';
import {LogoControl, LogoControlOptions} from "@/leaflet/control/LogoControl"; import {LogoControl, LogoControlOptions} from "@/leaflet/control/LogoControl";
import DynmapMap from "@/leaflet/DynmapMap";
export default defineComponent({ export default defineComponent({
props: { props: {
@ -10,7 +10,7 @@ export default defineComponent({
required: true, required: true,
}, },
leaflet: { leaflet: {
type: Object as () => L.Map, type: Object as () => DynmapMap,
required: true, required: true,
} }
}, },

View File

@ -8,7 +8,7 @@
<script lang="ts"> <script lang="ts">
import {defineComponent, computed} from "@vue/runtime-core"; import {defineComponent, computed} from "@vue/runtime-core";
import {useStore} from "@/store"; import {useStore} from "@/store";
import L from 'leaflet'; import {LayerGroup} from 'leaflet';
import {DynmapMarkerSet} from "@/dynmap"; import {DynmapMarkerSet} from "@/dynmap";
import GenericMarker from "@/components/map/marker/GenericMarker.vue"; import GenericMarker from "@/components/map/marker/GenericMarker.vue";
import Areas from "@/components/map/vector/Areas.vue"; import Areas from "@/components/map/vector/Areas.vue";
@ -39,7 +39,7 @@ export default defineComponent({
setup() { setup() {
const store = useStore(), const store = useStore(),
markerSettings = computed(() => store.state.components.markers), markerSettings = computed(() => store.state.components.markers),
layerGroup = new L.LayerGroup() as L.LayerGroup; layerGroup = new LayerGroup();
return { return {
markerSettings, markerSettings,

View File

@ -6,7 +6,7 @@
import PlayerMarker from "@/components/map/marker/PlayerMarker.vue"; import PlayerMarker from "@/components/map/marker/PlayerMarker.vue";
import {defineComponent, computed} from "@vue/runtime-core"; import {defineComponent, computed} from "@vue/runtime-core";
import {useStore} from "@/store"; import {useStore} from "@/store";
import L from 'leaflet'; import {LayerGroup} from 'leaflet';
import DynmapMap from "@/leaflet/DynmapMap"; import DynmapMap from "@/leaflet/DynmapMap";
export default defineComponent({ export default defineComponent({
@ -25,7 +25,7 @@ export default defineComponent({
const store = useStore(), const store = useStore(),
players = computed(() => store.state.players), players = computed(() => store.state.players),
componentSettings = store.state.components.playerMarkers, componentSettings = store.state.components.playerMarkers,
layerGroup = new L.LayerGroup() as L.LayerGroup; layerGroup = new LayerGroup();
return { return {
players, players,

View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import {defineComponent, computed, ref} from "@vue/runtime-core"; import {defineComponent, computed, ref} from "@vue/runtime-core";
import L from 'leaflet'; import {LayerGroup, Marker} from 'leaflet';
import {DynmapMarker} from "@/dynmap"; import {DynmapMarker} from "@/dynmap";
import {useStore} from "@/store"; import {useStore} from "@/store";
import {DynmapIcon} from "@/leaflet/icon/DynmapIcon"; import {DynmapIcon} from "@/leaflet/icon/DynmapIcon";
@ -12,7 +12,7 @@ export default defineComponent({
required: true required: true
}, },
layerGroup: { layerGroup: {
type: Object as () => L.LayerGroup, type: Object as () => LayerGroup,
required: true required: true
} }
}, },
@ -24,7 +24,7 @@ export default defineComponent({
projectedPosition = computed(() => store.state.currentProjection.locationToLatLng(props.options.location)), projectedPosition = computed(() => store.state.currentProjection.locationToLatLng(props.options.location)),
visible = ref(false), visible = ref(false),
marker = undefined as L.Marker | undefined; marker = undefined as Marker | undefined;
return { return {
marker, marker,
@ -42,7 +42,7 @@ export default defineComponent({
}, },
mounted() { mounted() {
this.marker = new L.Marker(this.currentProjection.locationToLatLng(this.options.location), { this.marker = new Marker(this.currentProjection.locationToLatLng(this.options.location), {
icon: new DynmapIcon({ icon: new DynmapIcon({
icon: this.options.icon, icon: this.options.icon,
label: this.options.label, label: this.options.label,

View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import {defineComponent, computed, ref} from "@vue/runtime-core"; import {defineComponent, computed, ref} from "@vue/runtime-core";
import L from 'leaflet'; import {LayerGroup} from 'leaflet';
import {DynmapPlayer} from "@/dynmap"; import {DynmapPlayer} from "@/dynmap";
import {useStore} from "@/store"; import {useStore} from "@/store";
import {PlayerMarker} from "@/leaflet/marker/PlayerMarker"; import {PlayerMarker} from "@/leaflet/marker/PlayerMarker";
@ -12,7 +12,7 @@ export default defineComponent({
required: true required: true
}, },
layerGroup: { layerGroup: {
type: Object as () => L.LayerGroup, type: Object as () => LayerGroup,
required: true required: true
} }
}, },

View File

@ -1,11 +1,11 @@
import L, {MapOptions} from 'leaflet'; import {Map, DomUtil, MapOptions} from 'leaflet';
import LayerManager from "@/leaflet/layer/LayerManager"; import LayerManager from "@/leaflet/layer/LayerManager";
interface DynmapMapOptions extends MapOptions { interface DynmapMapOptions extends MapOptions {
layerControl: boolean; layerControl: boolean;
} }
export default class DynmapMap extends L.Map { export default class DynmapMap extends Map {
private readonly _layerManager: LayerManager; private readonly _layerManager: LayerManager;
private _controlCorners: any; private _controlCorners: any;
private _controlContainer?: HTMLElement; private _controlContainer?: HTMLElement;
@ -25,12 +25,12 @@ export default class DynmapMap extends L.Map {
const corners: any = this._controlCorners = {}, const corners: any = this._controlCorners = {},
l = 'leaflet-', l = 'leaflet-',
container = this._controlContainer = container = this._controlContainer =
L.DomUtil.create('div', l + 'control-container', this._container); DomUtil.create('div', l + 'control-container', this._container);
function createCorner(vSide: string, hSide: string) { function createCorner(vSide: string, hSide: string) {
const className = l + vSide + ' ' + l + hSide; const className = l + vSide + ' ' + l + hSide;
corners[`${vSide}${hSide}`] = L.DomUtil.create('div', className, container); corners[`${vSide}${hSide}`] = DomUtil.create('div', className, container);
} }
createCorner('top', 'left'); createCorner('top', 'left');

View File

@ -1,5 +1,5 @@
import L, {ControlOptions} from 'leaflet'; import {ControlOptions, DomUtil, Util, Map, Control} from 'leaflet';
import Util from '@/util'; import Utils from '@/util';
import {DynmapWorldState} from "@/dynmap"; import {DynmapWorldState} from "@/dynmap";
export interface ClockControlOptions extends ControlOptions { export interface ClockControlOptions extends ControlOptions {
@ -7,11 +7,10 @@ export interface ClockControlOptions extends ControlOptions {
showWeather: boolean; showWeather: boolean;
} }
export class ClockControl extends L.Control { export class ClockControl extends Control {
// @ts-ignore // @ts-ignore
options: ClockControlOptions; options: ClockControlOptions;
private _map ?: L.Map;
private _container?: HTMLElement; private _container?: HTMLElement;
private _sun?: HTMLElement; private _sun?: HTMLElement;
private _moon?: HTMLElement; private _moon?: HTMLElement;
@ -21,23 +20,23 @@ export class ClockControl extends L.Control {
constructor(options: ClockControlOptions) { constructor(options: ClockControlOptions) {
super(Object.assign(options, {position: 'topcenter'})); super(Object.assign(options, {position: 'topcenter'}));
L.Util.setOptions(this, options); Util.setOptions(this, options);
} }
onAdd(map: L.Map) { onAdd(map: Map) {
this._container = L.DomUtil.create('div', 'largeclock timeofday'); this._container = DomUtil.create('div', 'largeclock timeofday');
this._sun = L.DomUtil.create('div', 'timeofday sun', this._container); this._sun = DomUtil.create('div', 'timeofday sun', this._container);
this._moon = L.DomUtil.create('div', 'timeofday moon', this._sun); this._moon = DomUtil.create('div', 'timeofday moon', this._sun);
this._sun.style.backgroundPosition = (-150) + 'px ' + (-150) + 'px'; this._sun.style.backgroundPosition = (-150) + 'px ' + (-150) + 'px';
this._moon.style.backgroundPosition = (-150) + 'px ' + (-150) + 'px'; this._moon.style.backgroundPosition = (-150) + 'px ' + (-150) + 'px';
if (this.options.showDigitalClock) { if (this.options.showDigitalClock) {
this._clock = L.DomUtil.create('div', 'timeofday digitalclock', this._container) this._clock = DomUtil.create('div', 'timeofday digitalclock', this._container)
} }
if (this.options.showWeather) { if (this.options.showWeather) {
this._weather = L.DomUtil.create('div', 'weather', this._container) this._weather = DomUtil.create('div', 'weather', this._container)
} }
return this._container; return this._container;
@ -72,7 +71,7 @@ export class ClockControl extends L.Control {
this._moon!.style.backgroundPosition = '-150px -150px'; this._moon!.style.backgroundPosition = '-150px -150px';
} }
const minecraftTime = Util.getMinecraftTime(timeOfDay); const minecraftTime = Utils.getMinecraftTime(timeOfDay);
if(timeOfDay >= 0) { if(timeOfDay >= 0) {
this._clock!.classList.remove(minecraftTime.night ? 'day' : 'night'); this._clock!.classList.remove(minecraftTime.night ? 'day' : 'night');

View File

@ -1,4 +1,4 @@
import L, {ControlOptions, LeafletMouseEvent} from 'leaflet'; import {ControlOptions, LeafletMouseEvent, Control, Map, DomUtil, Util} from 'leaflet';
import {useStore} from "@/store"; import {useStore} from "@/store";
import {Coordinate} from "@/dynmap"; import {Coordinate} from "@/dynmap";
@ -11,11 +11,11 @@ export interface CoordinatesControlOptions extends ControlOptions {
label: string; label: string;
} }
export class CoordinatesControl extends L.Control { export class CoordinatesControl extends Control {
// @ts-ignore // @ts-ignore
options: CoordinatesControlOptions; options: CoordinatesControlOptions;
private _map ?: L.Map; private _map ?: Map;
private _location?: Coordinate; private _location?: Coordinate;
private _locationChanged: boolean = false; private _locationChanged: boolean = false;
private readonly _coordsContainer: HTMLSpanElement; private readonly _coordsContainer: HTMLSpanElement;
@ -27,16 +27,16 @@ export class CoordinatesControl extends L.Control {
options.showRegion = true; options.showRegion = true;
options.showChunk = true; options.showChunk = true;
this._coordsContainer = L.DomUtil.create('span', 'value coordinates'); this._coordsContainer = DomUtil.create('span', 'value coordinates');
this._chunkContainer = L.DomUtil.create('span', 'value chunk'); this._chunkContainer = DomUtil.create('span', 'value chunk');
this._regionContainer = L.DomUtil.create('span', 'value region'); this._regionContainer = DomUtil.create('span', 'value region');
options.position = 'bottomleft'; options.position = 'bottomleft';
L.Util.setOptions(this, options); Util.setOptions(this, options);
} }
onAdd(map: L.Map) { onAdd(map: Map) {
const container = L.DomUtil.create('div', 'leaflet-control-coordinates'); const container = DomUtil.create('div', 'leaflet-control-coordinates');
this._coordsContainer.textContent = this.options.showY ? '-----, ----- , -----' : '-----, -----'; this._coordsContainer.textContent = this.options.showY ? '-----, ----- , -----' : '-----, -----';
this._coordsContainer.dataset.label = this.options.label; this._coordsContainer.dataset.label = this.options.label;
@ -67,7 +67,7 @@ export class CoordinatesControl extends L.Control {
this._map.on('mousemove', this._onMouseMove, this); this._map.on('mousemove', this._onMouseMove, this);
this._map.on('mouseout', this._onMouseOut, this); this._map.on('mouseout', this._onMouseOut, this);
L.Control.prototype.remove.call(this); Control.prototype.remove.call(this);
return this; return this;
} }

View File

@ -1,17 +1,16 @@
import L, {Control, ControlOptions} from 'leaflet'; import {Control, Map} from 'leaflet';
import {useStore} from "@/store";
import layers from '@/assets/icons/layers.svg'; import layers from '@/assets/icons/layers.svg';
import LayersObject = Control.LayersObject; import LayersObject = Control.LayersObject;
import LayersOptions = Control.LayersOptions; import LayersOptions = Control.LayersOptions;
export class DynmapLayerControl extends L.Control.Layers { export class DynmapLayerControl extends Control.Layers {
private _layersLink?: HTMLElement; private _layersLink?: HTMLElement;
constructor(baseLayers?: LayersObject, overlays?: LayersObject, options?: LayersOptions) { constructor(baseLayers?: LayersObject, overlays?: LayersObject, options?: LayersOptions) {
super(baseLayers, overlays, options); super(baseLayers, overlays, options);
} }
onAdd(map: L.Map) { onAdd(map: Map) {
// @ts-ignore // @ts-ignore
const element = super.onAdd(map); const element = super.onAdd(map);

View File

@ -1,19 +1,19 @@
import L, {ControlOptions} from 'leaflet'; import {Control, ControlOptions, DomUtil, Map} from 'leaflet';
import {useStore} from "@/store"; import {useStore} from "@/store";
import linkIcon from '@/assets/icons/link.svg'; import linkIcon from '@/assets/icons/link.svg';
export class LinkControl extends L.Control { export class LinkControl extends Control {
// @ts-ignore // @ts-ignore
options: ControlOptions options: ControlOptions
private _map ?: L.Map; private _map ?: Map;
constructor(options: ControlOptions) { constructor(options: ControlOptions) {
super(options); super(options);
} }
onAdd(map: L.Map) { onAdd(map: Map) {
const linkButton = L.DomUtil.create('button', 'leaflet-control-link') as HTMLButtonElement; const linkButton = DomUtil.create('button', 'leaflet-control-link') as HTMLButtonElement;
linkButton.type = 'button'; linkButton.type = 'button';
linkButton.title = 'Link'; linkButton.title = 'Link';

View File

@ -1,4 +1,4 @@
import L, {ControlOptions} from 'leaflet'; import {Control, ControlOptions, DomUtil} from 'leaflet';
export interface LogoControlOptions extends ControlOptions { export interface LogoControlOptions extends ControlOptions {
url?: string; url?: string;
@ -6,7 +6,7 @@ export interface LogoControlOptions extends ControlOptions {
text: string; text: string;
} }
export class LogoControl extends L.Control { export class LogoControl extends Control {
// @ts-ignore // @ts-ignore
options: LogoControlOptions; options: LogoControlOptions;
@ -15,16 +15,16 @@ export class LogoControl extends L.Control {
} }
onAdd(map: L.Map) { onAdd(map: L.Map) {
const container = L.DomUtil.create('div', 'leaflet-control-logo'); const container = DomUtil.create('div', 'leaflet-control-logo');
let link; let link;
if (this.options.url) { if (this.options.url) {
link = L.DomUtil.create('a', '', container) as HTMLAnchorElement; link = DomUtil.create('a', '', container) as HTMLAnchorElement;
link.href = this.options.url; link.href = this.options.url;
} }
if (this.options.image) { if (this.options.image) {
const image = L.DomUtil.create('img', '', link) as HTMLImageElement; const image = DomUtil.create('img', '', link) as HTMLImageElement;
image.src = this.options.image; image.src = this.options.image;
image.alt = this.options.text; image.alt = this.options.text;
} else { } else {

View File

@ -1,4 +1,4 @@
import L, {DivIconOptions, PointExpression, PointTuple} from 'leaflet'; import {DivIconOptions, PointExpression, Icon, DivIcon, DomUtil, point} from 'leaflet';
export interface DynmapIconOptions extends DivIconOptions { export interface DynmapIconOptions extends DivIconOptions {
icon: string; icon: string;
@ -7,7 +7,7 @@ export interface DynmapIconOptions extends DivIconOptions {
isHtml?: boolean; isHtml?: boolean;
} }
export class DynmapIcon extends L.DivIcon { export class DynmapIcon extends DivIcon {
static defaultOptions: DynmapIconOptions = { static defaultOptions: DynmapIconOptions = {
icon: 'default', icon: 'default',
label: '', label: '',
@ -26,14 +26,14 @@ export class DynmapIcon extends L.DivIcon {
createIcon(oldIcon: HTMLElement) { createIcon(oldIcon: HTMLElement) {
if (oldIcon) { if (oldIcon) {
L.DomUtil.remove(oldIcon); DomUtil.remove(oldIcon);
} }
const div = document.createElement('div'), const div = document.createElement('div'),
img = document.createElement('img'), img = document.createElement('img'),
label = document.createElement('span'), label = document.createElement('span'),
url = `${window.config.url.markers}_markers_/${this.options.icon}.png`, url = `${window.config.url.markers}_markers_/${this.options.icon}.png`,
size = L.point(this.options.iconSize as PointExpression); size = point(this.options.iconSize as PointExpression);
const sizeClass = [size.x, size.y].join('x'); const sizeClass = [size.x, size.y].join('x');
@ -50,7 +50,7 @@ export class DynmapIcon extends L.DivIcon {
} }
// @ts-ignore // @ts-ignore
L.Icon.prototype._setIconStyles.call(this, div, 'icon'); Icon.prototype._setIconStyles.call(this, div, 'icon');
div.appendChild(img); div.appendChild(img);
div.appendChild(label); div.appendChild(label);

View File

@ -1,4 +1,4 @@
import L, {MarkerOptions} from 'leaflet'; import {MarkerOptions, DivIcon, DomUtil} from 'leaflet';
import {DynmapPlayer} from "@/dynmap"; import {DynmapPlayer} from "@/dynmap";
import Util from '@/util'; import Util from '@/util';
@ -28,7 +28,7 @@ export interface PlayerIconOptions extends MarkerOptions {
showHealth: boolean, showHealth: boolean,
} }
export class PlayerIcon extends L.DivIcon { export class PlayerIcon extends DivIcon {
private readonly _player: DynmapPlayer; private readonly _player: DynmapPlayer;
private _container?: HTMLDivElement; private _container?: HTMLDivElement;
private _playerImage?: HTMLImageElement; private _playerImage?: HTMLImageElement;
@ -50,7 +50,7 @@ export class PlayerIcon extends L.DivIcon {
createIcon(oldIcon: HTMLElement) { createIcon(oldIcon: HTMLElement) {
if (oldIcon) { if (oldIcon) {
L.DomUtil.remove(oldIcon); DomUtil.remove(oldIcon);
} }
const player = this._player; const player = this._player;

View File

@ -1,12 +1,12 @@
import L from 'leaflet'; import {Map, Layer} from 'leaflet';
import {DynmapLayerControl} from "@/leaflet/control/DynmapLayerControl"; import {DynmapLayerControl} from "@/leaflet/control/DynmapLayerControl";
export default class LayerManager { export default class LayerManager {
private showControl: boolean = false; private showControl: boolean = false;
private readonly layerControl: DynmapLayerControl; private readonly layerControl: DynmapLayerControl;
private readonly map: L.Map; private readonly map: Map;
constructor(map: L.Map, showControl?: boolean) { constructor(map: Map, showControl?: boolean) {
this.showControl = showControl || this.showControl; this.showControl = showControl || this.showControl;
this.map = map; this.map = map;
this.layerControl = new DynmapLayerControl({}, {},{ this.layerControl = new DynmapLayerControl({}, {},{
@ -18,7 +18,7 @@ export default class LayerManager {
} }
} }
addLayer(layer: L.Layer, showInControl: boolean, name: string, position: number) { addLayer(layer: Layer, showInControl: boolean, name: string, position: number) {
this.map.addLayer(layer); this.map.addLayer(layer);
if(showInControl) { if(showInControl) {
@ -26,7 +26,7 @@ export default class LayerManager {
} }
} }
removeLayer(layer: L.Layer) { removeLayer(layer: Layer) {
this.map.removeLayer(layer); this.map.removeLayer(layer);
this.layerControl.removeLayer(layer); this.layerControl.removeLayer(layer);
} }

View File

@ -1,4 +1,4 @@
import L from 'leaflet'; import {Util} from 'leaflet';
import HDProjection from "@/leaflet/projection/HDProjection"; import HDProjection from "@/leaflet/projection/HDProjection";
import {Coordinate} from "@/dynmap"; import {Coordinate} from "@/dynmap";
import {DynmapTileLayer, DynmapTileLayerOptions} from "@/leaflet/tileLayer/DynmapTileLayer"; import {DynmapTileLayer, DynmapTileLayerOptions} from "@/leaflet/tileLayer/DynmapTileLayer";
@ -18,7 +18,7 @@ export class HDMapType extends DynmapTileLayer {
options.tileSize = 128; options.tileSize = 128;
options.minZoom = 0; options.minZoom = 0;
L.Util.setOptions(this, options); Util.setOptions(this, options);
this._projection = Object.freeze(new HDProjection({ this._projection = Object.freeze(new HDProjection({
mapToWorld: this._mapSettings.mapToWorld, mapToWorld: this._mapSettings.mapToWorld,
worldToMap: this._mapSettings.worldToMap, worldToMap: this._mapSettings.worldToMap,

View File

@ -1,4 +1,4 @@
import L, {LatLng, MarkerOptions} from 'leaflet'; import {LatLng, MarkerOptions, Marker, Util} from 'leaflet';
import {DynmapPlayer} from "@/dynmap"; import {DynmapPlayer} from "@/dynmap";
import {PlayerIcon} from "@/leaflet/icon/PlayerIcon"; import {PlayerIcon} from "@/leaflet/icon/PlayerIcon";
@ -9,7 +9,7 @@ export interface PlayerMarkerOptions extends MarkerOptions {
showHealth: boolean, showHealth: boolean,
} }
export class PlayerMarker extends L.Marker { export class PlayerMarker extends Marker {
private _player: DynmapPlayer; private _player: DynmapPlayer;
constructor(player: DynmapPlayer, options: PlayerMarkerOptions) { constructor(player: DynmapPlayer, options: PlayerMarkerOptions) {
@ -24,7 +24,7 @@ export class PlayerMarker extends L.Marker {
showHealth: options.showHealth, showHealth: options.showHealth,
}); });
L.Util.setOptions(this, options); Util.setOptions(this, options);
} }
getIcon(): PlayerIcon { getIcon(): PlayerIcon {
@ -43,6 +43,6 @@ export class PlayerMarker extends L.Marker {
} }
_resetZIndex() { _resetZIndex() {
//Don't chnage the zindex //Don't change the zindex
} }
} }

View File

@ -1,25 +1,25 @@
import L from 'leaflet'; import {Util, LatLng, Class} from 'leaflet';
import {Coordinate} from "@/dynmap"; import {Coordinate} from "@/dynmap";
export interface DynmapProjectionOptions {} export interface DynmapProjectionOptions {}
export interface DynmapProjection { export interface DynmapProjection {
locationToLatLng(location: Coordinate): L.LatLng; locationToLatLng(location: Coordinate): LatLng;
latLngToLocation(latLng: L.LatLng, y: number): Coordinate; latLngToLocation(latLng: LatLng, y: number): Coordinate;
} }
export class DynmapProjection extends L.Class { export class DynmapProjection extends Class {
constructor(options?: DynmapProjectionOptions) { constructor(options?: DynmapProjectionOptions) {
super(); super();
L.Util.setOptions(this, options); Util.setOptions(this, options);
} }
locationToLatLng(location: Coordinate): L.LatLng { locationToLatLng(location: Coordinate): LatLng {
return new L.LatLng(location.x, location.z); return new LatLng(location.x, location.z);
} }
latLngToLocation(latLng: L.LatLng, y: number): Coordinate { latLngToLocation(latLng: LatLng, y: number): Coordinate {
return {x: latLng.lat, y, z: latLng.lng}; return {x: latLng.lat, y, z: latLng.lng};
} }
} }

View File

@ -1,5 +1,5 @@
import {DynmapProjection} from "@/leaflet/projection/DynmapProjection"; import {DynmapProjection} from "@/leaflet/projection/DynmapProjection";
import L from 'leaflet'; import {Util, LatLng} from 'leaflet';
import {Coordinate} from "@/dynmap"; import {Coordinate} from "@/dynmap";
export interface HDProjectionOptions { export interface HDProjectionOptions {
@ -15,20 +15,20 @@ export interface HDProjection extends DynmapProjection {
export class HDProjection extends DynmapProjection { export class HDProjection extends DynmapProjection {
constructor(options: HDProjectionOptions) { constructor(options: HDProjectionOptions) {
super(options); super(options);
L.Util.setOptions(this, options); Util.setOptions(this, options);
} }
locationToLatLng(location: Coordinate): L.LatLng { locationToLatLng(location: Coordinate): LatLng {
const wtp = this.options.worldToMap, const wtp = this.options.worldToMap,
lat = wtp[3] * location.x + wtp[4] * location.y + wtp[5] * location.z, lat = wtp[3] * location.x + wtp[4] * location.y + wtp[5] * location.z,
lng = wtp[0] * location.x + wtp[1] * location.y + wtp[2] * location.z; lng = wtp[0] * location.x + wtp[1] * location.y + wtp[2] * location.z;
return new L.LatLng( return new LatLng(
-((128 - lat) / (1 << this.options.nativeZoomLevels)), -((128 - lat) / (1 << this.options.nativeZoomLevels)),
lng / (1 << this.options.nativeZoomLevels)); lng / (1 << this.options.nativeZoomLevels));
} }
latLngToLocation(latLng: L.LatLng, y: number): Coordinate { latLngToLocation(latLng: LatLng, y: number): Coordinate {
const ptw = this.options.mapToWorld, const ptw = this.options.mapToWorld,
lat = latLng.lng * (1 << this.options.nativeZoomLevels), lat = latLng.lng * (1 << this.options.nativeZoomLevels),
lon = 128 + latLng.lat * (1 << this.options.nativeZoomLevels), lon = 128 + latLng.lat * (1 << this.options.nativeZoomLevels),

View File

@ -1,4 +1,4 @@
import L, {Coords, DoneCallback, TileLayerOptions} from 'leaflet'; import {TileLayer, Coords, DoneCallback, TileLayerOptions, DomUtil, Util, LatLng} from 'leaflet';
import {DynmapProjection} from "@/leaflet/projection/DynmapProjection"; import {DynmapProjection} from "@/leaflet/projection/DynmapProjection";
import {Coordinate, DynmapWorldMap} from "@/dynmap"; import {Coordinate, DynmapWorldMap} from "@/dynmap";
@ -7,7 +7,7 @@ export interface DynmapTileLayerOptions extends TileLayerOptions {
errorTileUrl: string; errorTileUrl: string;
} }
export interface DynmapTileLayer extends L.TileLayer { export interface DynmapTileLayer extends TileLayer {
options: DynmapTileLayerOptions; options: DynmapTileLayerOptions;
_projection: DynmapProjection; _projection: DynmapProjection;
_mapSettings: DynmapWorldMap; _mapSettings: DynmapWorldMap;
@ -17,9 +17,9 @@ export interface DynmapTileLayer extends L.TileLayer {
_loadQueue: DynmapTileElement[]; _loadQueue: DynmapTileElement[];
_loadingTiles: Set<DynmapTileElement>; _loadingTiles: Set<DynmapTileElement>;
locationToLatLng(location: Coordinate): L.LatLng; locationToLatLng(location: Coordinate): LatLng;
latLngToLocation(latLng: L.LatLng): Coordinate; latLngToLocation(latLng: LatLng): Coordinate;
} }
export interface DynmapTile { export interface DynmapTile {
@ -48,11 +48,11 @@ export interface TileInfo {
fmt: string; fmt: string;
} }
export class DynmapTileLayer extends L.TileLayer { export class DynmapTileLayer extends TileLayer {
constructor(options: DynmapTileLayerOptions) { constructor(options: DynmapTileLayerOptions) {
super('', options); super('', options);
L.Util.setOptions(this, options); Util.setOptions(this, options);
if (options.mapSettings === null) { if (options.mapSettings === null) {
throw new TypeError("mapSettings missing"); throw new TypeError("mapSettings missing");
@ -65,7 +65,7 @@ export class DynmapTileLayer extends L.TileLayer {
this._loadQueue = []; this._loadQueue = [];
this._loadingTiles = Object.seal(new Set()); this._loadingTiles = Object.seal(new Set());
this._tileTemplate = L.DomUtil.create('img', 'leaflet-tile') as DynmapTileElement; this._tileTemplate = DomUtil.create('img', 'leaflet-tile') as DynmapTileElement;
this._tileTemplate.style.width = this._tileTemplate.style.height = this.options.tileSize + 'px'; this._tileTemplate.style.width = this._tileTemplate.style.height = this.options.tileSize + 'px';
this._tileTemplate.alt = ''; this._tileTemplate.alt = '';
this._tileTemplate.tileName = ''; this._tileTemplate.tileName = '';