- add ZoomControl.js
- add zoom control as default control to map object
This commit is contained in:
Arno Kaimbacher
parent
5c40b845bb
commit
8b57f1dcb8
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1" width="181" height="51" viewBox="0 0 908 338"><text font-size="176.732" font-weight="700" x="-88.94" y="204.393" fill="#1772b6" style="-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal" font-family="sans-serif" fill-opacity=".682">EGDI</text><path d="M941.442 286.591l-150.386 54.377-150.7-54.594 149.885-54.072c44.412 15.116 111.758 38.073 151.2 54.29z" stroke-opacity="null" stroke-linecap="null" stroke-linejoin="null" stroke-width=".917" stroke="null" fill-opacity=".682" fill="#ffcf00"/><path d="M790.757 92.944l150.93 53.724-.245 139.923-151.2-54.289z" fill="#cf4922" fill-rule="evenodd" fill-opacity=".682"/><path d="M790.757 92.944l-149.822 53.144 149.222 54.968" fill="#900c07" fill-opacity=".682"/><path d="M617.46 161.775l-.695 107.832 150.952-53.617z" fill="#1772b6" fill-opacity=".682"/><path d="M466.614 75.855L617.32 130.75l-.555 138.856-151.194-54.27z" fill="#94bd22" fill-rule="evenodd" fill-opacity=".682"/><path d="M619.13 21.35L466.614 75.854l150.704 54.895 151.23-53.814C730.528 61.329 655.739 39.9 619.13 21.349z" fill="#dd0" fill-opacity=".682"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
|
|
@ -1,101 +1,37 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1"
|
||||
width="181"
|
||||
height="51"
|
||||
viewBox="0 0 908 338"
|
||||
id="svg53"
|
||||
sodipodi:docname="egdi_logo.svg"
|
||||
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1537"
|
||||
id="namedview855"
|
||||
showgrid="true"
|
||||
inkscape:zoom="10.617915"
|
||||
inkscape:cx="101.42827"
|
||||
inkscape:cy="18.327117"
|
||||
inkscape:window-x="2552"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg53"
|
||||
inkscape:snap-grids="false"
|
||||
inkscape:snap-to-guides="true">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid871" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata59">
|
||||
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1" width="181" height="51"
|
||||
viewBox="0 0 908 338" id="svg53" sodipodi:docname="egdi_logo.svg" inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
|
||||
<metadata id="metadata59">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<cc:Work rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs57" />
|
||||
<text
|
||||
font-size="200"
|
||||
font-weight="bold"
|
||||
x="-88.939621"
|
||||
y="204.3934"
|
||||
fill="#000000"
|
||||
id="text44"
|
||||
<defs id="defs57" />
|
||||
<text font-size="200" font-weight="bold" x="-88.939621" y="204.3934" fill="#000000" id="text44"
|
||||
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:176.732px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#1772b6;stroke:none;stroke-opacity:1;fill-opacity:0.682353;">EGDI</text>
|
||||
<path
|
||||
id="svg_5"
|
||||
<path id="svg_5"
|
||||
d="m 941.44193,286.59145 -150.38624,54.3767 -150.69914,-54.59419 149.88456,-54.07154 c 44.41157,15.11532 111.75814,38.07261 151.20082,54.28903 z"
|
||||
stroke-opacity="null"
|
||||
stroke-linecap="null"
|
||||
stroke-linejoin="null"
|
||||
stroke-width="0.917161"
|
||||
stroke="null"
|
||||
fill-opacity="null"
|
||||
fill="#b91e1e"
|
||||
sodipodi:nodetypes="ccccc"
|
||||
style="fill:#ffcf00;fill-opacity:0.68235296" />
|
||||
<path
|
||||
id="rect61"
|
||||
style="fill:#cf4922;fill-rule:evenodd;stroke-width:5.98077;fill-opacity:0.68235296"
|
||||
stroke-opacity="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="0.917161" stroke="null"
|
||||
fill-opacity="null" fill="#b91e1e" sodipodi:nodetypes="ccccc" style="fill:#ffcf00;fill-opacity:0.68235296" />
|
||||
<path id="rect61" style="fill:#cf4922;fill-rule:evenodd;stroke-width:5.98077;fill-opacity:0.68235296"
|
||||
d="M 790.75737,92.943673 941.68682,146.66828 941.44193,286.59145 790.24111,232.30242 Z"
|
||||
sodipodi:nodetypes="ccccc" />
|
||||
<path
|
||||
style="fill:#900c07;fill-opacity:0.68235296;stroke:none;stroke-width:6.00462px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="M 790.75737,92.943673 640.93489,146.08834 790.15658,201.0559"
|
||||
id="path899"
|
||||
sodipodi:nodetypes="ccc" />
|
||||
d="M 790.75737,92.943673 640.93489,146.08834 790.15658,201.0559" id="path899" sodipodi:nodetypes="ccc" />
|
||||
<path
|
||||
style="fill:#1772b6;fill-opacity:0.68235296;stroke:none;stroke-width:6.07844px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 617.45905,161.77508 -0.6944,107.83162 150.95277,-53.61708 z"
|
||||
id="path901"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
<path
|
||||
id="rect61-1"
|
||||
style="fill:#94bd22;fill-rule:evenodd;stroke-width:6.07844;fill-opacity:0.68235296"
|
||||
d="m 617.45905,161.77508 -0.6944,107.83162 150.95277,-53.61708 z" id="path901" sodipodi:nodetypes="cccc" />
|
||||
<path id="rect61-1" style="fill:#94bd22;fill-rule:evenodd;stroke-width:6.07844;fill-opacity:0.68235296"
|
||||
d="M 466.61374,75.854645 617.32028,130.75134 616.76465,269.6067 465.57094,215.33794 Z"
|
||||
sodipodi:nodetypes="ccccc" />
|
||||
<path
|
||||
id="svg_5-9"
|
||||
style="display:inline;stroke-width:6.62745;fill:#dddd00;fill-opacity:0.68235296"
|
||||
<path id="svg_5-9" style="display:inline;stroke-width:6.62745;fill:#dddd00;fill-opacity:0.68235296"
|
||||
d="M 619.13024,21.349472 466.61374,75.854645 617.3175,130.74977 768.54857,76.935603 C 730.52682,61.328962 655.73869,39.89961 619.13024,21.349472 Z"
|
||||
sodipodi:nodetypes="ccccc" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.0 KiB |
|
|
@ -3,6 +3,8 @@ import * as dom from '../core/domUtil';
|
|||
import * as domEvent from '../core/domEvent';
|
||||
|
||||
class HomeButton extends Control {
|
||||
|
||||
map;
|
||||
options = {
|
||||
position: 'topright',
|
||||
homeText: '+',
|
||||
|
|
@ -85,14 +87,13 @@ class HomeButton extends Control {
|
|||
//var link = L.DomUtil.create('a', className, container);
|
||||
let link = dom.createDom("span", { "class": className, innerHTML: html, title: title }, container);
|
||||
|
||||
// let stop = domEvent.stopPropagation();
|
||||
domEvent.on(link, 'click', fn, context);
|
||||
// let stop = domEvent.stopPropagation;
|
||||
domEvent
|
||||
// .on(link, 'click', stop)
|
||||
// .on(link, 'mousedown', stop)
|
||||
// .on(link, 'dblclick', stop)
|
||||
// .on(link, 'click', domEvent.preventDefault())
|
||||
// //.on(link, 'click', fn.bind(this));
|
||||
// .on(link, 'click', fn, context);
|
||||
// .on(link, 'click', domEvent.preventDefault)
|
||||
.on(link, 'click', fn, context);
|
||||
|
||||
return link;
|
||||
}
|
||||
|
|
|
|||
29
src/js/controls/ZoomControl.css
Normal file
29
src/js/controls/ZoomControl.css
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
.gba-control-zoom {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.gba-control-zoom span {
|
||||
display: block;
|
||||
height: 30px;
|
||||
width: 31px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
/*.my-gba-control-zoom a:hover {
|
||||
background-color: rgba(102,102,102,0.90);
|
||||
}*/
|
||||
.gba-control-zoom-in {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAxlBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZn///+VlZWYmJiZmZmWlpaXl5fw8PDk5OT6+vrm5uarq6uampqkpKTn5+egoKD7+/vy8vLl5eX5+fng4OCenp6SkpKcnJz8/PydnZ3x8fGxsbGtra2mpqbh4eGioqL9/f3r6+ufn5+qqqqhoaGoqKjs7Oybm5uUlJSWaKJBAAAAGnRSTlPk+cftAOPvgvgGkut0WrvJytuzaf1Fbc/EUVDNfwkAAADBSURBVHhetdLFssMwDIZRNU3xIoMMYSzjZXr/l6q1izO1dv1Wmjk7zQ+j8VnneEM492GgmC6gx/El9Dm+gi7Hns1CCO3mbLfdptLFclkjFsLNIeLkBCxNwR/xv6RsztamZblBTNSaslj/hDX1jrja0PHxGTT5C+3i0uK0xZXFwT5KTEWFOJ3QNZvLBiupTUKFiNFCU6f4Gs/0FoZ/4/jVwdRbnn8rNwemNjN5/JCv4YbjW7hj9P4B/McnOF7v+cU/AEI2X3dttU52AAAAAElFTkSuQmCC') /*img/zoomIn.png*/;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.gba-control-zoom-out {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfCAMAAADHso01AAAAhFBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmYmJiZmZmXl5efn5+6urr////+/v6srKybm5uUlJStra319fW5ubmgoKCVlZW2tra9vb35+fm4/JSJAAAAGnRSTlN7x4/tAMjuGSy2aIteC+AWupAw5c4edI5nD8z6iFwAAAB3SURBVHhe3dK3DoQwDIBhB8KFfr2Z3q+8//uxEJYQZ2DLv36yZMkGLkLQFCcc/DTTxo4QZEQRuBQzOFDsGaZtYOzWNhiLsVz6tqjwp69k/yJXuaklDwobp/PpJytbJDe34ST7PtXEJ4rPcLnq9SaA3x/Ods/Xm8/EaFl6wRVnDgAAAABJRU5ErkJggg==') /*img/zoomOut.png*/;
|
||||
/*font: bold 18px 'Lucida Console', Monaco, monospace;
|
||||
text-indent: 1px;*/
|
||||
}
|
||||
89
src/js/controls/ZoomControl.js
Normal file
89
src/js/controls/ZoomControl.js
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
import { Control } from "./Control";
|
||||
import * as dom from '../core/domUtil';
|
||||
import * as domEvent from '../core/domEvent';
|
||||
|
||||
import './ZoomControl.css';
|
||||
|
||||
|
||||
class ZoomControl extends Control {
|
||||
|
||||
_map;
|
||||
|
||||
options = {
|
||||
position: 'topright',
|
||||
zoomInText: '+',
|
||||
zoomInTitle: 'Zoom in',
|
||||
zoomOutText: '-',
|
||||
zoomOutTitle: 'Zoom out'
|
||||
};
|
||||
|
||||
constructor(defaults) {
|
||||
super(defaults);
|
||||
}
|
||||
|
||||
onAdd(map) {
|
||||
this.map = map;
|
||||
// var b = this._nls = util.mixin({}, N.widgets.zoom);
|
||||
let className = 'gba-control-zoom';
|
||||
let container = this._container = dom.createDom("div", { "class": className });
|
||||
|
||||
this._map = map;
|
||||
// don't use options.zoomInText because of predefined png
|
||||
this._zoomInButton = this._createButton(
|
||||
"", this.options.zoomInTitle,
|
||||
// "", b.zoomInTitle,
|
||||
className + '-in', container, this._zoomIn, this);
|
||||
|
||||
// don't use options.zoomOutText because of predefined png
|
||||
this._zoomOutButton = this._createButton(
|
||||
"", this.options.zoomOutTitle,
|
||||
// "", b.zoomOutTitle,
|
||||
className + '-out', container, this._zoomOut, this);
|
||||
|
||||
this._updateDisabled();
|
||||
//map.on('zoomend zoomlevelschange', this._updateDisabled, this);
|
||||
return container;
|
||||
}
|
||||
|
||||
_zoomIn(e) {
|
||||
//this._map.zoomIn(e.shiftKey ? 3 : 1);
|
||||
this._map.dollyOut();
|
||||
}
|
||||
|
||||
_zoomOut(e) {
|
||||
//this._map.zoomOut(e.shiftKey ? 3 : 1);
|
||||
this._map.dollyIn();
|
||||
}
|
||||
|
||||
_createButton(html, title, className, container, fn, context) {
|
||||
let link = dom.createDom("span", { "class": className, innerHTML: html, title: title }, container);
|
||||
|
||||
// let stop = domEvent.stopPropagation;
|
||||
domEvent
|
||||
// .on(link, 'click', stop)
|
||||
// .on(link, 'mousedown', stop)
|
||||
// .on(link, 'dblclick', stop)
|
||||
// .on(link, 'click', domEvent.preventDefault)
|
||||
.on(link, 'click', fn, context);
|
||||
return link;
|
||||
}
|
||||
|
||||
_updateDisabled () {
|
||||
|
||||
var className = 'leaflet-disabled';
|
||||
|
||||
dom.removeClass(this._zoomInButton, className);
|
||||
|
||||
dom.removeClass(this._zoomOutButton, className);
|
||||
|
||||
//if (map._zoom === map.getMinZoom()) {
|
||||
// L.DomUtil.addClass(this._zoomOutButton, className);
|
||||
//}
|
||||
//if (map._zoom === map.getMaxZoom()) {
|
||||
// L.DomUtil.addClass(this._zoomInButton, className);
|
||||
//}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export { ZoomControl };
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { OrbitControls } from '../lib/OrbitControls';
|
||||
import * as dom from './domUtil';
|
||||
import { HomeButton } from '../controls/HomeButton';
|
||||
import { ZoomControl } from '../controls/ZoomControl';
|
||||
import * as util from './utilities';
|
||||
|
||||
class Map extends OrbitControls {
|
||||
|
|
@ -57,6 +58,9 @@ class Map extends OrbitControls {
|
|||
// this._controls.homeControl = (new HomeButton()).addTo(this);
|
||||
let homeControl = this._controls.homeControl = new HomeButton();
|
||||
homeControl.addTo(this);
|
||||
|
||||
let zoomControl = this._controls.zoomControl = new ZoomControl();
|
||||
zoomControl.addTo(this);
|
||||
}
|
||||
|
||||
addLayer(layer) {
|
||||
|
|
|
|||
|
|
@ -4,3 +4,14 @@
|
|||
// `true` for all browsers supporting [pointer events](https://msdn.microsoft.com/en-us/library/dn433244%28v=vs.85%29.aspx).
|
||||
export var pointer = !!(window.PointerEvent || msPointer);
|
||||
|
||||
export var touch = !window.L_NO_TOUCH && (pointer || 'ontouchstart' in window ||
|
||||
(window.DocumentTouch && document instanceof window.DocumentTouch));
|
||||
|
||||
|
||||
// @property mobile: Boolean; `true` for all browsers running in a mobile device.
|
||||
export var mobile = typeof orientation !== 'undefined' || userAgentContains('mobile');
|
||||
|
||||
|
||||
function userAgentContains(str) {
|
||||
return navigator.userAgent.toLowerCase().indexOf(str) >= 0;
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import * as util from './utilities';
|
|||
* @namespace DomUtil
|
||||
*
|
||||
* Utility functions to work with the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)
|
||||
* tree, used by Leaflet internally.
|
||||
* tree, used by 3D viewer internally.
|
||||
*
|
||||
* Most functions expecting or returning a `HTMLElement` also work for
|
||||
* SVG elements. The only difference is that classes refer to CSS classes
|
||||
|
|
@ -100,6 +100,15 @@ export function addClass(el, name) {
|
|||
}
|
||||
}
|
||||
|
||||
// @function removeClass(el: HTMLElement, name: String)
|
||||
// Removes `name` from the element's class attribute.
|
||||
export function removeClass(el, name) {
|
||||
if (el.classList !== undefined) {
|
||||
el.classList.remove(name);
|
||||
} else {
|
||||
setClass(el, util.trim((' ' + getClass(el) + ' ').replace(' ' + name + ' ', ' ')));
|
||||
}
|
||||
}
|
||||
|
||||
// @function setClass(el: HTMLElement, name: String)
|
||||
// Sets the element's class.
|
||||
|
|
|
|||
|
|
@ -157,13 +157,13 @@ export function stamp (obj){
|
|||
}
|
||||
|
||||
export function hasTouch() {
|
||||
var phantomjs = navigator.userAgent.toLowerCase().indexOf('phantom') !== -1;
|
||||
let phantomjs = navigator.userAgent.toLowerCase().indexOf('phantom') !== -1;
|
||||
|
||||
var isTouchDevice = phantomjs
|
||||
let isTouchDevice = phantomjs
|
||||
|| 'ontouchstart' in window
|
||||
|| (window.DocumentTouch && document instanceof window.DocumentTouch)
|
||||
// || (window.DocumentTouch && document instanceof window.DocumentTouch)
|
||||
|| ("onpointerdown" in document && navigator.maxTouchPoints > 0)
|
||||
|| window.navigator.msMaxTouchPoints;
|
||||
|| (window.navigator.msMaxTouchPoints > 0);
|
||||
return isTouchDevice;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ class Application {
|
|||
// this.map.maxDistance = size*15;
|
||||
|
||||
//add map controls:
|
||||
if (!util.hasTouch) {
|
||||
if (util.hasTouch() == false) {
|
||||
let coordinates = new Coordinates({ camera: this.camera, crs: "EPSG:3034" }).addTo(this.map);
|
||||
// coordinates.addListener('onPoint', (vector) => {
|
||||
// this.queryMarker.position.set(vector.x, vector.y, vector.z);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user