Targeted leaflet imports
This commit is contained in:
parent
37d7758d70
commit
b9b58399f6
@ -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,
|
||||||
}));
|
}));
|
||||||
|
@ -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,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -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,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -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,
|
||||||
|
@ -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,
|
||||||
|
@ -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,
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -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');
|
||||||
|
@ -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');
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
@ -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';
|
||||||
|
@ -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 {
|
||||||
|
@ -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);
|
||||||
|
@ -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;
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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,
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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),
|
||||||
|
@ -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 = '';
|
||||||
|
Loading…
Reference in New Issue
Block a user