mirror
/
lighthousemap
kopia lustrzana https://github.com/geodienst/lighthousemap
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Just use DOM elments and class names 

These are more efficient to draw, and more efficient to animate! :D
pull/3/head
Jelmer van der Linde 2017-08-31 20:08:38 +02:00
rodzic 50c439fedf
commit 3209f5fc03
1 zmienionych plików z 19 dodań i 25 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

44
index.html
Wyświetl plik

@ -17,6 +17,18 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#seamap .seamap-marker .light {
width: 100%;
height: 100%;
border-radius: 50%;
transition: background ease-in-out 50ms;
opacity: 0.9;
}
#seamap .seamap-marker .light.on {
background: yellow;
}
</style> </style>
</head> </head>
<body> <body>
@ -76,18 +88,16 @@
options: { options: {
iconSize: [12, 12], iconSize: [12, 12],
iconAnchor: [6, 6], iconAnchor: [6, 6],
className: 'leaflet-canvas-icon', className: 'seamap-marker',
sequence: [] sequence: []
}, },
createIcon: function(icon) { createIcon: function(icon) {
if (!icon || icon.tagName != 'CANVAS') icon = document.createElement('div');
icon = document.createElement('canvas');
icon.width = 2 * this.options.iconSize[0]; this._canvas = document.createElement('div');
icon.height = 2 * this.options.iconSize[1]; this._canvas.className = 'light';
icon.appendChild(this._canvas);
this._canvas = icon;
this._setIconStyles(icon, 'icon'); this._setIconStyles(icon, 'icon');
@ -103,24 +113,7 @@
}, },
setState: function(state) { setState: function(state) {
if (this._state === state) this._canvas.classList.toggle('on', !!state);
return;
if (!this._canvas)
return;
let ctx = this._canvas.getContext('2d');
ctx.clearRect(0, 0, this.options.iconSize[0] * 2, this.options.iconSize[1] * 2);
if (state) {
let radius = Math.min(this.options.iconSize[0], this.options.iconSize[1]);
ctx.beginPath();
ctx.arc(this.options.iconSize[0], this.options.iconSize[1], radius, 0, 2 * Math.PI);
ctx.fillStyle = '#ff0';
ctx.fill();
}
this._state = state;
} }
}); });
@ -190,6 +183,7 @@
return L.geoJSON(geojson, { return L.geoJSON(geojson, {
pointToLayer: function(feat, latlng) { pointToLayer: function(feat, latlng) {
return L.marker(latlng, { return L.marker(latlng, {
interactive: false,
title: feat.properties.tags['name'], title: feat.properties.tags['name'],
icon: new Light(), icon: new Light(),
sequence: new Sequence(feat.properties.tags['seamark:light:sequence']) sequence: new Sequence(feat.properties.tags['seamark:light:sequence'])