mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-24 18:46:40 +07:00
start marker
This commit is contained in:
Fedor Katurov
parent
5ceda71589
commit
53bb6a8443
9 changed files with 228 additions and 35 deletions
|
|
@ -111,6 +111,20 @@ const GpxDialogUnconnected: FC<Props> = ({
|
|||
|
||||
return (
|
||||
<div className="control-dialog control-dialog__left control-dialog__small">
|
||||
{false && (
|
||||
<div className="gpx-confirm">
|
||||
<div className="gpx-confirm__text">Маршрут уже нанесен. Что делаем?</div>
|
||||
|
||||
<div className="gpx-confirm__buttons">
|
||||
<div className="button success">Соединить</div>
|
||||
|
||||
<div className="button danger">Переписать</div>
|
||||
|
||||
<div className="button primary">Отмена</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="gpx-title">
|
||||
<div className="flex_1 big white upper">Треки</div>
|
||||
<Switch active={gpx.enabled} onPress={toggleGpx} />
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ const GpxDialogRow: FC<IProps> = ({ item, index, enabled, onRouteToggle, onFocus
|
|||
</div>
|
||||
|
||||
<div className="gpx-row__buttons">
|
||||
<div onClick={() => onRouteDrop(index)}><Icon icon="icon-to-poly" size={24} /></div>
|
||||
<div onClick={() => onRouteDrop(index)}><Icon icon="icon-trash-6" size={24} /></div>
|
||||
<div><Switch active={item.enabled} onPress={() => onRouteToggle(index)}/></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const GpxPolyline: FC<IProps> = ({ latlngs, color }) => {
|
|||
color,
|
||||
stroke: true,
|
||||
opacity: 1,
|
||||
weight: 7,
|
||||
weight: 7,
|
||||
// dashArray: [12,12],
|
||||
}).addTo(MainMap);
|
||||
setLayer(item);
|
||||
|
|
|
|||
|
|
@ -402,7 +402,24 @@
|
|||
<path d="M24.754 6.33H4.844V2.762h19.91z" />
|
||||
</g>
|
||||
</g>
|
||||
<g id="icon-to-poly" stroke="none">
|
||||
<path d="M0 0h32v32H0z" fill="black" />
|
||||
<path d="M7.924 12.991l8.569-4.989-6.55 14.587 13.762-7.974-3.958 9.12" fill="none" stroke="#fff" stroke-width="2.387" stroke-linejoin="round"/>
|
||||
<circle transform="rotate(75)" r="2.387" cy="-4.523" cx="14.711" fill="#fff"/>
|
||||
<circle transform="rotate(75)" r="2.387" cy="-13.883" cx="12.17" fill="#fff"/>
|
||||
<circle transform="rotate(75)" r="2.387" cy="-19.194" cx="20.342" fill="#fff"/>
|
||||
<circle transform="rotate(75)" cx="24.138" cy="-3.701" r="5.48" fill="black" />
|
||||
<circle transform="rotate(75)" cx="27.918" cy="-13.025" r="2.387" fill="#fff"/>
|
||||
|
||||
<path d="M8.224 18.144v3.132H2.357v3.891h5.867v3.012l5.86-5.077z"/>
|
||||
</g>
|
||||
|
||||
<g id="icon-start">
|
||||
<path d="M15.646 2.959a12.688 12.688 0 00-8 2.85v1.837h8zm0 4.687v8h8v-8zm8 0h1.838a12.688 12.688 0 00-1.838-1.835zm0 8v8h1.836a12.688 12.688 0 002.852-8zm0 8h-8v4.688a12.688 12.688 0 008-2.85zm-8 0v-8h-8v8zm-8 0H5.81a12.688 12.688 0 001.837 1.836zm0-8v-8H5.811a12.688 12.688 0 00-2.852 8z" fill="#fff"/>
|
||||
<path d="M15.646 0A15.646 15.646 0 000 15.646a15.646 15.646 0 0015.646 15.647 15.646 15.646 0 0015.647-15.647A15.646 15.646 0 0015.646 0zm0 3.24a12.407 12.407 0 0112.408 12.406 12.407 12.407 0 01-12.408 12.408A12.407 12.407 0 013.24 15.646 12.407 12.407 0 0115.646 3.24z" fill="#fff"/>
|
||||
</g>
|
||||
</svg>
|
||||
</defs>
|
||||
|
||||
<use xlink:href="#icon-trash-6" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 36 KiB |
|
|
@ -48,11 +48,11 @@
|
|||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="5.6568542"
|
||||
inkscape:cx="7.5044641"
|
||||
inkscape:cy="20.369143"
|
||||
inkscape:zoom="1"
|
||||
inkscape:cx="47.453778"
|
||||
inkscape:cy="21.541153"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="svg8"
|
||||
inkscape:current-layer="g4843"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1015"
|
||||
|
|
@ -61,7 +61,11 @@
|
|||
inkscape:window-maximized="1"
|
||||
units="px"
|
||||
inkscape:showpageshadow="false"
|
||||
inkscape:snap-global="true" />
|
||||
inkscape:snap-global="false">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid4953" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
|
|
@ -662,17 +666,6 @@
|
|||
transform="matrix(2,0,0,2,128,98.814754)"
|
||||
id="path8777" />
|
||||
</g>
|
||||
<g
|
||||
id="g6599-3"
|
||||
style="fill:#1a1a1a">
|
||||
<rect
|
||||
y="0"
|
||||
x="0"
|
||||
height="32"
|
||||
width="32"
|
||||
id="rect6597-6"
|
||||
style="opacity:1;fill:#1a1a1a;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
|
||||
</g>
|
||||
<g
|
||||
id="g2523"
|
||||
transform="translate(-352)">
|
||||
|
|
@ -742,29 +735,152 @@
|
|||
d="m -398.03987,8.959327 c 0.96726,6.15e-5 2.83931,0.419056 2.83931,0.419056 l 0.81565,-1.6970847 2.25681,4.8545537 -5.09396,1.335474 0.77693,-1.937748 c 0,0 -1.10109,-0.113536 -1.59474,-0.114876 -3.85069,4.73e-4 -6.97217,3.12196 -6.97265,6.972656 10e-4,1.212906 0.31917,2.404467 0.92188,3.457031 l -2.07031,2.070313 c -1.11178,-1.629145 -1.70791,-3.554996 -1.71094,-5.527344 2.9e-4,-5.429961 4.40206,-9.8317428 9.83202,-9.832031 z"
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.13512897;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
<g
|
||||
id="g1083"
|
||||
transform="rotate(-180,16.23592,15.944757)">
|
||||
id="g4695"
|
||||
transform="translate(-448)">
|
||||
<g
|
||||
style="fill:#ffffff"
|
||||
transform="matrix(1.1301151,0,0,1.1301151,-1.1473427,-2.6397119)"
|
||||
id="g1065">
|
||||
<path
|
||||
sodipodi:nodetypes="cccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path1061"
|
||||
d="m 21.578609,12.373297 4.755161,4.023589 -4.755161,4.119332 c 0,-2.714307 0,-5.428614 0,-8.142921 z"
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.25750196;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
style="fill:#1a1a1a"
|
||||
id="g6599-3">
|
||||
<g
|
||||
id="g4685">
|
||||
<rect
|
||||
y="0"
|
||||
x="0"
|
||||
height="32"
|
||||
width="32"
|
||||
id="rect6597-6"
|
||||
style="opacity:1;fill:#1a1a1a;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
id="g1073"
|
||||
transform="translate(-6.0736195,-0.5)"
|
||||
style="fill:#ffffff">
|
||||
transform="rotate(-180,16.23592,15.944757)"
|
||||
id="g1083">
|
||||
<g
|
||||
id="g1065"
|
||||
transform="matrix(1.1301151,0,0,1.1301151,-1.1473427,-2.6397119)"
|
||||
style="fill:#ffffff">
|
||||
<path
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.25750196;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 21.578609,12.373297 4.755161,4.023589 -4.755161,4.119332 c 0,-2.714307 0,-5.428614 0,-8.142921 z"
|
||||
id="path1061"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
</g>
|
||||
<g
|
||||
style="fill:#ffffff"
|
||||
transform="translate(-6.0736195,-0.5)"
|
||||
id="g1073">
|
||||
<path
|
||||
sodipodi:nodetypes="ccccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path1075"
|
||||
d="M 9.9326117,14.715588 H 29.84292 v 3.568824 H 9.9326117 Z"
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.93824887;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
id="g4682">
|
||||
<g
|
||||
id="g4668"
|
||||
transform="matrix(0.625,0,0,0.625,6,6)"
|
||||
style="stroke:#ff5555" />
|
||||
<g
|
||||
id="g4796">
|
||||
<g
|
||||
id="g4666">
|
||||
<rect
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647"
|
||||
id="rect4664"
|
||||
width="32"
|
||||
height="32"
|
||||
x="0"
|
||||
y="0" />
|
||||
</g>
|
||||
<path
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.93824887;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 9.9326117,14.715588 H 29.84292 v 3.568824 H 9.9326117 Z"
|
||||
id="path1075"
|
||||
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2.38667011;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 7.9242274,12.99117 16.492872,8.0023269 9.942466,22.589067 l 13.7628,-7.974199 -3.958059,9.120045"
|
||||
id="path4670"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccccc" />
|
||||
<circle
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:5.30371094;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="circle4672"
|
||||
cx="14.711287"
|
||||
cy="-4.5232019"
|
||||
r="2.3866701"
|
||||
transform="rotate(75)" />
|
||||
<circle
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:5.30371094;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="circle4674"
|
||||
cx="12.170312"
|
||||
cy="-13.883187"
|
||||
r="2.3866701"
|
||||
transform="rotate(75)" />
|
||||
<circle
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:5.30371094;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="circle4676"
|
||||
cx="20.342056"
|
||||
cy="-19.193758"
|
||||
r="2.3866701"
|
||||
transform="rotate(75)" />
|
||||
<circle
|
||||
r="5.4802623"
|
||||
cy="-3.7006412"
|
||||
cx="24.137783"
|
||||
id="circle4678"
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:12.17835999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
transform="rotate(75)" />
|
||||
<circle
|
||||
r="2.3866701"
|
||||
cy="-13.024511"
|
||||
cx="27.917694"
|
||||
id="circle4680"
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:5.30371094;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
transform="rotate(75)" />
|
||||
<g
|
||||
id="g1083-3"
|
||||
transform="matrix(1.090411,0,0,1.090411,-1.8505759,5.7746519)">
|
||||
<g
|
||||
style="fill:#ffffff"
|
||||
transform="matrix(1.1301151,0,0,1.1301151,-1.1473427,-2.6397119)"
|
||||
id="g1065-6">
|
||||
<path
|
||||
sodipodi:nodetypes="cccccccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path1061-7"
|
||||
transform="matrix(0.88486562,0,0,0.88486562,2.9520467,-5.4157756)"
|
||||
d="m 7.050781,20.103516 v 2.873046 H 1.6699219 v 3.56836 H 7.050781 v 2.761719 l 5.373047,-4.65625 z"
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.42112195;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
</g>
|
||||
<g
|
||||
id="g1073-5"
|
||||
transform="translate(-6.0736195,-0.5)"
|
||||
style="fill:#ffffff" />
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
id="g4843"
|
||||
transform="translate(32)">
|
||||
<g
|
||||
id="g4821">
|
||||
<rect
|
||||
y="0"
|
||||
x="0"
|
||||
height="32"
|
||||
width="32"
|
||||
id="rect4819"
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
|
||||
</g>
|
||||
<path
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.06614583;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647"
|
||||
d="M 48 3.3125 A 12.6875 12.6875 0 0 0 40 6.1621094 L 40 8 L 48 8 L 48 3.3125 z M 48 8 L 48 16 L 56 16 L 56 8 L 48 8 z M 56 8 L 57.837891 8 A 12.6875 12.6875 0 0 0 56 6.1640625 L 56 8 z M 56 16 L 56 24 L 57.835938 24 A 12.6875 12.6875 0 0 0 60.6875 16 L 56 16 z M 56 24 L 48 24 L 48 28.6875 A 12.6875 12.6875 0 0 0 56 25.837891 L 56 24 z M 48 24 L 48 16 L 40 16 L 40 24 L 48 24 z M 40 24 L 38.162109 24 A 12.6875 12.6875 0 0 0 40 25.835938 L 40 24 z M 40 16 L 40 8 L 38.164062 8 A 12.6875 12.6875 0 0 0 35.3125 16 L 40 16 z "
|
||||
transform="translate(-32)"
|
||||
id="rect4845" />
|
||||
<path
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.97790289;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 16,0.35355339 A 15.646447,15.646447 0 0 0 0.35355339,16 15.646447,15.646447 0 0 0 16,31.646447 15.646447,15.646447 0 0 0 31.646447,16 15.646447,15.646447 0 0 0 16,0.35355339 Z M 16,3.5928568 A 12.407143,12.407143 0 0 1 28.407143,16 12.407143,12.407143 0 0 1 16,28.407143 12.407143,12.407143 0 0 1 3.5928568,16 12.407143,12.407143 0 0 1 16,3.5928568 Z"
|
||||
id="path4930"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 37 KiB |
|
|
@ -84,3 +84,16 @@
|
|||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.gpx-confirm {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
left: 5%;
|
||||
z-index: 5;
|
||||
width: 90%;
|
||||
padding: 10px;
|
||||
border-radius: @panel_radius;
|
||||
box-sizing: border-box;
|
||||
background: lighten(@bar_background, 10%);
|
||||
box-shadow: rgba(0,0,0,0.5) 0 5px 5px 10px;
|
||||
}
|
||||
|
|
@ -150,6 +150,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.start-marker {
|
||||
svg {
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.end-marker {
|
||||
.leaflet-km-dist {
|
||||
left: auto;
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@ class InteractivePoly extends Polyline {
|
|||
};
|
||||
|
||||
hideAllMarkers = (): void => {
|
||||
if (!this._map.hasLayer(this.markerLayer)) return;
|
||||
if (!this._map || !this._map.hasLayer(this.markerLayer)) return;
|
||||
|
||||
this._map.removeLayer(this.markerLayer);
|
||||
this.fire('allvertexhide');
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import classNames from 'classnames';
|
|||
const arrow_image = require('~/sprites/arrow.svg');
|
||||
|
||||
interface KmMarksOptions {
|
||||
showStartMarker: boolean;
|
||||
showMiddleMarkers: boolean;
|
||||
showEndMarker: boolean;
|
||||
showArrows: boolean;
|
||||
|
|
@ -17,6 +18,7 @@ class KmMarksLayer extends LayerGroup {
|
|||
super();
|
||||
|
||||
this.options = {
|
||||
showStartMarker: true,
|
||||
showMiddleMarkers: true,
|
||||
showEndMarker: true,
|
||||
showArrows: true,
|
||||
|
|
@ -120,6 +122,25 @@ class KmMarksLayer extends LayerGroup {
|
|||
zIndexOffset: -100,
|
||||
});
|
||||
|
||||
createStartMarker = (latlng: LatLngLiteral): Marker =>
|
||||
marker(latlng, {
|
||||
draggable: false,
|
||||
interactive: false,
|
||||
icon: divIcon({
|
||||
html: `
|
||||
<svg width="20" height="20" viewBox="0 0 32 32">
|
||||
<circle r="16" cx="16" cy="16" fill="red" />
|
||||
<circle r="13" cx="16" cy="16" fill="white" />
|
||||
<circle r="9" cx="16" cy="16" fill="red" />
|
||||
</svg>
|
||||
`,
|
||||
className: classNames('leaflet-km-marker start-marker'),
|
||||
iconSize: [20, 20],
|
||||
iconAnchor: [6, 6],
|
||||
}),
|
||||
zIndexOffset: -100,
|
||||
});
|
||||
|
||||
drawEndMarker = (latlngs: LatLngLiteral[]): void => {
|
||||
this.endMarker.clearLayers();
|
||||
|
||||
|
|
@ -132,6 +153,9 @@ class KmMarksLayer extends LayerGroup {
|
|||
);
|
||||
|
||||
this.endMarker.addLayer(this.createEndMarker(next, angle, this.distance));
|
||||
if (latlngs && latlngs.length) {
|
||||
this.endMarker.addLayer(this.createStartMarker(latlngs[0]));
|
||||
}
|
||||
};
|
||||
|
||||
options: KmMarksOptions;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue