mirror of https://gitee.com/antv-l7/antv-l7
improvement: add draw ui tools
This commit is contained in:
thinkinggis
parent
9b3851014d
commit
6a67b317f5
|
|
@ -27,7 +27,7 @@ export default class Zoom extends Control {
|
|||
};
|
||||
}
|
||||
|
||||
public onAdd() {
|
||||
public onAdd(): HTMLElement {
|
||||
const zoomName = 'l7-control-zoom';
|
||||
const container = DOM.create('div', zoomName + ' l7-bar');
|
||||
|
||||
|
|
@ -93,6 +93,7 @@ export default class Zoom extends Control {
|
|||
) {
|
||||
const link = DOM.create('a', className, container) as HTMLLinkElement;
|
||||
link.innerHTML = html;
|
||||
link.title = tile;
|
||||
link.href = 'javascript:void(0)';
|
||||
link.addEventListener('click', fn);
|
||||
return link;
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ export interface IMapService<RawMap = {}> {
|
|||
getRotation(): number;
|
||||
getBounds(): Bounds;
|
||||
getMapContainer(): HTMLElement | null;
|
||||
getMapCanvasContainer(): HTMLElement;
|
||||
|
||||
// control with raw map
|
||||
setRotation(rotation: number): void;
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
import { Control } from '@antv/l7-component';
|
||||
export interface IDrawControlOption {
|
||||
pickBuffer: number;
|
||||
controls: any;
|
||||
}
|
||||
export default class DrawControl extends Control {
|
||||
constructor(options: IDrawControlOption) {
|
||||
super(options);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
.l7-control-draw {
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.1);
|
||||
display: flex;
|
||||
button {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 20px 20px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
border: 0;
|
||||
margin: 1px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
button+button {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
button:not(:disabled):hover {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
button:focus:first-child {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
button:focus {
|
||||
box-shadow: 0 0 2px 2px #0096ff;
|
||||
}
|
||||
.draw-point {
|
||||
background-image: url('https://gw.alipayobjects.com/zos/bmw-prod/f7bf0137-7de9-411a-9a37-4880acc58d29.svg');
|
||||
}
|
||||
.draw-line {
|
||||
background-image: url('https://gw.alipayobjects.com/zos/bmw-prod/a784e304-afb2-4888-91b4-e0d0e8058810.svg');
|
||||
}
|
||||
.draw-polygon {
|
||||
background-image: url('https://gw.alipayobjects.com/zos/bmw-prod/6dd9914d-d625-4424-8db7-19953e67444f.svg');
|
||||
}
|
||||
.draw-rect {
|
||||
background-image: url('https://gw.alipayobjects.com/zos/bmw-prod/fe578687-693b-4c27-afb3-0e675d9431ff.svg');
|
||||
}
|
||||
.draw-circle {
|
||||
background-image: url('https://gw.alipayobjects.com/zos/bmw-prod/fa234d68-85aa-4628-b1b6-aad47ab093b4.svg');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<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:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="20"
|
||||
height="20"
|
||||
id="svg5738"
|
||||
version="1.1"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="combine.svg">
|
||||
<defs
|
||||
id="defs5740">
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient4103"
|
||||
id="linearGradient4184"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="3003"
|
||||
y1="10"
|
||||
x2="3017"
|
||||
y2="10"
|
||||
gradientTransform="translate(1,2.6171874e-6)" />
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
id="linearGradient4103">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop4105" />
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:0;"
|
||||
offset="1"
|
||||
id="stop4107" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="16"
|
||||
inkscape:cx="2.423006"
|
||||
inkscape:cy="12.173165"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:window-width="2078"
|
||||
inkscape:window-height="1054"
|
||||
inkscape:window-x="900"
|
||||
inkscape:window-y="296"
|
||||
inkscape:window-maximized="0"
|
||||
showguides="false"
|
||||
inkscape:snap-bbox="true"
|
||||
inkscape:bbox-paths="true"
|
||||
inkscape:bbox-nodes="true"
|
||||
inkscape:object-paths="true"
|
||||
inkscape:object-nodes="true"
|
||||
inkscape:snap-smooth-nodes="true"
|
||||
inkscape:snap-others="false"
|
||||
inkscape:snap-nodes="false">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid5746"
|
||||
empspacing="2"
|
||||
visible="true"
|
||||
enabled="true"
|
||||
snapvisiblegridlinesonly="true"
|
||||
spacingx="0.5px"
|
||||
spacingy="0.5px"
|
||||
color="#0000ff"
|
||||
opacity="0.05882353" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata5743">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-1032.3622)">
|
||||
<path
|
||||
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||
d="M 12.050781 2 C 11.795262 2 11.539542 2.0971762 11.34375 2.2929688 L 10.298828 3.3378906 C 9.9072437 3.7294757 9.9072437 4.360368 10.298828 4.7519531 L 15.248047 9.7011719 C 15.639631 10.092757 16.270525 10.092757 16.662109 9.7011719 L 17.707031 8.65625 C 18.098616 8.2646649 18.098616 7.6337726 17.707031 7.2421875 L 12.757812 2.2929688 C 12.56202 2.0971762 12.306301 2 12.050781 2 z M 8 8 C 7 8 7 9 7.5 9.5 C 7.833333 9.8333 8.5 10.5 8.5 10.5 L 7.5 11.5 C 7.5 11.5 7 12 7.5 12.5 C 8 13 8.5 12.5 8.5 12.5 L 9.5 11.5 L 10.5 12.5 C 11 13 12 13 12 12 L 12 8 L 8 8 z M 4 10.003906 C 3.74451 10.003906 3.4906916 10.103039 3.2949219 10.298828 L 2.2988281 11.294922 C 1.9072888 11.6865 1.9072888 12.315453 2.2988281 12.707031 L 3.296875 13.707031 C 3.6884144 14.098609 4.3193981 14.098609 4.7109375 13.707031 L 5.7070312 12.710938 C 6.0985706 12.31936 6.0985706 11.688453 5.7070312 11.296875 L 4.7070312 10.298828 C 4.5112616 10.103039 4.25549 10.003906 4 10.003906 z M 7.9960938 14 C 7.7405942 14 7.4848395 14.097187 7.2890625 14.292969 L 6.2949219 15.289062 C 5.9033679 15.680626 5.9033679 16.311561 6.2949219 16.703125 L 7.2929688 17.701172 C 7.6845227 18.092735 8.3135242 18.092735 8.7050781 17.701172 L 9.7011719 16.705078 C 10.092726 16.313515 10.092726 15.684532 9.7011719 15.292969 L 8.703125 14.292969 C 8.507348 14.097187 8.2515933 14 7.9960938 14 z "
|
||||
transform="translate(0,1032.3622)"
|
||||
id="rect9198" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
|
|
@ -0,0 +1,68 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<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"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
id="svg19167"
|
||||
version="1.1"
|
||||
inkscape:version="0.91+devel+osxmenu r12911"
|
||||
sodipodi:docname="line.svg">
|
||||
<defs
|
||||
id="defs19169" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="16"
|
||||
inkscape:cx="12.898775"
|
||||
inkscape:cy="9.5890152"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="true"
|
||||
units="px"
|
||||
inkscape:window-width="1280"
|
||||
inkscape:window-height="751"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="23"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:object-nodes="true">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid19715" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata19172">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-1032.3622)">
|
||||
<path
|
||||
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;enable-background:accumulate"
|
||||
d="m 13.5,1035.8622 c -1.380712,0 -2.5,1.1193 -2.5,2.5 0,0.3208 0.04614,0.6244 0.15625,0.9063 l -3.75,3.75 c -0.281836,-0.1102 -0.585421,-0.1563 -0.90625,-0.1563 -1.380712,0 -2.5,1.1193 -2.5,2.5 0,1.3807 1.119288,2.5 2.5,2.5 1.380712,0 2.5,-1.1193 2.5,-2.5 0,-0.3208 -0.04614,-0.6244 -0.15625,-0.9062 l 3.75,-3.75 c 0.281836,0.1101 0.585421,0.1562 0.90625,0.1562 1.380712,0 2.5,-1.1193 2.5,-2.5 0,-1.3807 -1.119288,-2.5 -2.5,-2.5 z"
|
||||
id="rect6467"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -0,0 +1,86 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<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"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
id="svg19167"
|
||||
version="1.1"
|
||||
inkscape:version="0.91+devel+osxmenu r12911"
|
||||
sodipodi:docname="marker.svg">
|
||||
<defs
|
||||
id="defs19169" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="16"
|
||||
inkscape:cx="14.164253"
|
||||
inkscape:cy="8.88572"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
inkscape:window-width="1280"
|
||||
inkscape:window-height="751"
|
||||
inkscape:window-x="208"
|
||||
inkscape:window-y="190"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:object-nodes="true">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid19715" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata19172">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-1032.3622)">
|
||||
<path
|
||||
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||
d="m 36,1040.3622 c 6e-6,3.3093 -5.988612,10 -5.988612,10 0,0 -5.998776,-6.668 -6.011345,-9.9772 -0.01257,-3.3092 2.656576,-6.0039 5.965792,-6.0227 3.309189,-0.019 6.00884,2.6452 6.033992,5.9543"
|
||||
id="path12561"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccssc" />
|
||||
<path
|
||||
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||
d="m 34.000115,1040.3622 c -5e-6,2.2062 -3.992523,7.0001 -3.992523,7.0001 0,0 -3.999291,-4.7787 -4.007679,-6.9849 -0.0084,-2.2062 1.771082,-4.0027 3.97731,-4.0153 2.20621,-0.013 4.006037,1.7635 4.022777,3.9697"
|
||||
id="path12563"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccsc" />
|
||||
<path
|
||||
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||
d="M 9.9667969,1014.3622 C 6.6575809,1014.381 3.98743,1017.0764 4,1020.3856 c 0.012569,3.3092 6.011719,8.9766 6.011719,8.9766 0,0 5.988287,-5.6907 5.988281,-9 l 0,-0.045 c -0.02515,-3.3091 -2.724014,-5.9741 -6.0332031,-5.9551 z m 0.00977,2 c 2.2062061,-0.013 4.0066931,1.7626 4.0234331,3.9688 l 0,0.031 c -5e-6,2.2062 -3.992188,6 -3.992188,6 0,0 -3.999424,-3.7782 -4.007812,-5.9844 -0.0084,-2.2062 1.7703345,-4.003 3.9765625,-4.0156 z"
|
||||
id="path12568"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cscsccccscsc" />
|
||||
<path
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none"
|
||||
d="M 10 2 C 6.686292 2 4 4.6863 4 8 C 4 11.3137 10 17 10 17 C 10 17 16 11.3137 16 8 C 16 4.6863 13.313708 2 10 2 z M 10 4 C 12.071068 4 13.75 5.6789 13.75 7.75 C 13.75 9.2053278 11.93111 11.644393 10.830078 13 L 9.1699219 13 C 8.0688903 11.644393 6.25 9.2053278 6.25 7.75 C 6.25 5.6789 7.928932 4 10 4 z "
|
||||
transform="translate(0,1032.3622)"
|
||||
id="path17305" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.1 KiB |
|
|
@ -0,0 +1,93 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<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"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
id="svg19167"
|
||||
version="1.1"
|
||||
inkscape:version="0.91+devel+osxmenu r12911"
|
||||
sodipodi:docname="square.svg">
|
||||
<defs
|
||||
id="defs19169" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="11.313708"
|
||||
inkscape:cx="11.681634"
|
||||
inkscape:cy="9.2857143"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="true"
|
||||
units="px"
|
||||
inkscape:window-width="1280"
|
||||
inkscape:window-height="751"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="23"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:object-nodes="true">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid19715" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata19172">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-1032.3622)">
|
||||
<path
|
||||
inkscape:connector-curvature="0"
|
||||
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5;marker:none;enable-background:accumulate"
|
||||
d="m 5,1039.3622 0,6 2,2 6,0 2,-2 0,-6 -2,-2 -6,0 z m 3,0 4,0 1,1 0,4 -1,1 -4,0 -1,-1 0,-4 z"
|
||||
id="rect7797"
|
||||
sodipodi:nodetypes="cccccccccccccccccc" />
|
||||
<circle
|
||||
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.60000002;marker:none;enable-background:accumulate"
|
||||
id="path4364"
|
||||
cx="6"
|
||||
cy="1046.3622"
|
||||
r="2" />
|
||||
<circle
|
||||
id="path4368"
|
||||
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.60000002;marker:none;enable-background:accumulate"
|
||||
cx="14"
|
||||
cy="1046.3622"
|
||||
r="2" />
|
||||
<circle
|
||||
id="path4370"
|
||||
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.60000002;marker:none;enable-background:accumulate"
|
||||
cx="6"
|
||||
cy="1038.3622"
|
||||
r="2" />
|
||||
<circle
|
||||
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.60000002;marker:none;enable-background:accumulate"
|
||||
id="path4372"
|
||||
cx="14"
|
||||
cy="1038.3622"
|
||||
r="2" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
|
|
@ -0,0 +1,73 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<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"
|
||||
width="20"
|
||||
height="20"
|
||||
id="svg5738"
|
||||
version="1.1"
|
||||
inkscape:version="0.91+devel+osxmenu r12911"
|
||||
sodipodi:docname="trash.svg"
|
||||
viewBox="0 0 20 20">
|
||||
<defs
|
||||
id="defs5740" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="22.627417"
|
||||
inkscape:cx="12.128184"
|
||||
inkscape:cy="8.8461307"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="true"
|
||||
inkscape:window-width="1033"
|
||||
inkscape:window-height="751"
|
||||
inkscape:window-x="20"
|
||||
inkscape:window-y="23"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:snap-smooth-nodes="true"
|
||||
inkscape:object-nodes="true">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid5746"
|
||||
empspacing="5"
|
||||
visible="true"
|
||||
enabled="true"
|
||||
snapvisiblegridlinesonly="true" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata5743">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-1032.3622)">
|
||||
<path
|
||||
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99999982;marker:none;enable-background:accumulate"
|
||||
d="m 10,1035.7743 c -0.7849253,8e-4 -1.4968376,0.4606 -1.8203125,1.1758 l -3.1796875,0 -1,1 0,1 12,0 0,-1 -1,-1 -3.179688,0 c -0.323475,-0.7152 -1.035387,-1.175 -1.820312,-1.1758 z m -5,4.5879 0,7 c 0,1 1,2 2,2 l 6,0 c 1,0 2,-1 2,-2 l 0,-7 -2,0 0,5.5 -1.5,0 0,-5.5 -3,0 0,5.5 -1.5,0 0,-5.5 z"
|
||||
id="rect2439-7"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccccccccccccccccccccccccc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -0,0 +1,106 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<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:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="20"
|
||||
height="20"
|
||||
id="svg5738"
|
||||
version="1.1"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="uncombine.svg">
|
||||
<defs
|
||||
id="defs5740">
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient4103"
|
||||
id="linearGradient4184"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="3003"
|
||||
y1="10"
|
||||
x2="3017"
|
||||
y2="10"
|
||||
gradientTransform="translate(1,2.6171874e-6)" />
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
id="linearGradient4103">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop4105" />
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:0;"
|
||||
offset="1"
|
||||
id="stop4107" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="11.313708"
|
||||
inkscape:cx="-10.273946"
|
||||
inkscape:cy="6.930344"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:window-width="2078"
|
||||
inkscape:window-height="1054"
|
||||
inkscape:window-x="900"
|
||||
inkscape:window-y="296"
|
||||
inkscape:window-maximized="0"
|
||||
showguides="false"
|
||||
inkscape:snap-bbox="true"
|
||||
inkscape:bbox-paths="true"
|
||||
inkscape:bbox-nodes="true"
|
||||
inkscape:object-paths="true"
|
||||
inkscape:object-nodes="true"
|
||||
inkscape:snap-smooth-nodes="true"
|
||||
inkscape:snap-others="false"
|
||||
inkscape:snap-nodes="false">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid5746"
|
||||
empspacing="2"
|
||||
visible="true"
|
||||
enabled="true"
|
||||
snapvisiblegridlinesonly="true"
|
||||
spacingx="0.5px"
|
||||
spacingy="0.5px"
|
||||
color="#0000ff"
|
||||
opacity="0.05882353" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata5743">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-1032.3622)">
|
||||
<path
|
||||
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||
d="M 12.005859 2 C 11.75036 2 11.494605 2.097187 11.298828 2.2929688 L 10.302734 3.2890625 C 9.9111804 3.680626 9.9111804 4.3115615 10.302734 4.703125 L 11.302734 5.7011719 C 11.694288 6.0927354 12.32329 6.0927354 12.714844 5.7011719 L 13.710938 4.7050781 C 14.102491 4.3135146 14.102491 3.6825791 13.710938 3.2910156 L 12.712891 2.2929688 C 12.517114 2.097187 12.261359 2 12.005859 2 z M 16.001953 5.9941406 C 15.746463 5.9941406 15.490692 6.0932735 15.294922 6.2890625 L 14.298828 7.2851562 C 13.907289 7.6767342 13.907289 8.3056877 14.298828 8.6972656 L 15.296875 9.6972656 C 15.688414 10.088844 16.319398 10.088844 16.710938 9.6972656 L 17.707031 8.7011719 C 18.098571 8.3095939 18.098571 7.6786873 17.707031 7.2871094 L 16.708984 6.2890625 C 16.513215 6.0932735 16.257443 5.9941406 16.001953 5.9941406 z M 9 7 C 8 7 8 8 8.5 8.5 C 8.833333 8.8333 9.5 9.5 9.5 9.5 L 8.5 10.5 C 8.5 10.5 8 11 8.5 11.5 C 9 12 9.5 11.5 9.5 11.5 L 10.5 10.5 L 11.5 11.5 C 12 12 13 12 13 11 L 13 7 L 9 7 z M 4.0488281 10.001953 C 3.7933087 10.001953 3.5375891 10.099129 3.3417969 10.294922 L 2.2988281 11.337891 C 1.9072437 11.729476 1.9072437 12.360368 2.2988281 12.751953 L 7.2480469 17.701172 C 7.6396313 18.092757 8.270525 18.092757 8.6621094 17.701172 L 9.7050781 16.658203 C 10.096663 16.266618 10.096663 15.635726 9.7050781 15.244141 L 4.7558594 10.294922 C 4.5600672 10.099129 4.3043475 10.001953 4.0488281 10.001953 z "
|
||||
transform="translate(0,1032.3622)"
|
||||
id="rect9198" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
|
|
@ -0,0 +1,116 @@
|
|||
import { Control, IControlOption, PositionType, Scene } from '@antv/l7';
|
||||
import { DOM } from '@antv/l7-utils';
|
||||
import './css/draw.less';
|
||||
import {
|
||||
DrawCircle,
|
||||
DrawLine,
|
||||
DrawMode,
|
||||
DrawPoint,
|
||||
DrawPolygon,
|
||||
DrawRect,
|
||||
} from './modes';
|
||||
export interface IControls {
|
||||
[key: string]: boolean;
|
||||
}
|
||||
|
||||
export interface IDrawControlOption extends IControlOption {
|
||||
pickBuffer: number;
|
||||
controls: IControls;
|
||||
layout: 'horizontal' | 'vertical';
|
||||
}
|
||||
export class DrawControl extends Control {
|
||||
private draw: {
|
||||
[key: string]: DrawMode;
|
||||
} = {};
|
||||
private scene: Scene;
|
||||
constructor(scene: Scene, options: Partial<IDrawControlOption>) {
|
||||
super(options);
|
||||
this.scene = scene;
|
||||
}
|
||||
|
||||
public getDefault() {
|
||||
return {
|
||||
position: PositionType.TOPLEFT,
|
||||
controls: {
|
||||
point: true,
|
||||
},
|
||||
name: 'draw',
|
||||
};
|
||||
}
|
||||
|
||||
public onAdd(): HTMLElement {
|
||||
const controlClass = 'l7-control-draw';
|
||||
const { controls } = this.controlOption as IDrawControlOption;
|
||||
const container = DOM.create('div', controlClass) as HTMLElement;
|
||||
container.style.flexDirection =
|
||||
this.controlOption.layout === 'vertical' ? 'column' : 'row';
|
||||
if (controls.point) {
|
||||
this.draw.point = new DrawPoint(this.scene);
|
||||
this.createButton(
|
||||
'绘制点',
|
||||
'draw-point',
|
||||
container,
|
||||
this.onButtonClick.bind(null, 'point'),
|
||||
);
|
||||
}
|
||||
if (controls.line) {
|
||||
this.draw.line = new DrawLine(this.scene);
|
||||
this.createButton(
|
||||
'绘制线',
|
||||
'draw-line',
|
||||
container,
|
||||
this.onButtonClick.bind(null, 'line'),
|
||||
);
|
||||
}
|
||||
if (controls.polygon) {
|
||||
this.createButton(
|
||||
'绘制面',
|
||||
'draw-polygon',
|
||||
container,
|
||||
this.onButtonClick.bind(null, 'polygon'),
|
||||
);
|
||||
this.draw.polygon = new DrawPolygon(this.scene);
|
||||
}
|
||||
if (controls.rect) {
|
||||
this.draw.rect = new DrawRect(this.scene);
|
||||
this.createButton(
|
||||
'绘制矩形',
|
||||
'draw-rect',
|
||||
container,
|
||||
this.onButtonClick.bind(null, 'rect'),
|
||||
);
|
||||
}
|
||||
if (controls.circle) {
|
||||
this.draw.circle = new DrawCircle(this.scene);
|
||||
this.createButton(
|
||||
'绘制圆',
|
||||
'draw-circle',
|
||||
container,
|
||||
this.onButtonClick.bind(null, 'circle'),
|
||||
);
|
||||
}
|
||||
return container;
|
||||
}
|
||||
|
||||
private createButton(
|
||||
tile: string,
|
||||
className: string,
|
||||
container: HTMLElement,
|
||||
fn: (...arg: any[]) => any,
|
||||
) {
|
||||
const link = DOM.create('button', className, container) as HTMLLinkElement;
|
||||
link.title = tile;
|
||||
link.addEventListener('click', fn);
|
||||
return link;
|
||||
}
|
||||
|
||||
private onButtonClick = (type: string) => {
|
||||
for (const draw in this.draw) {
|
||||
if (draw === type) {
|
||||
this.draw[draw].enable();
|
||||
} else {
|
||||
this.draw[draw].disable();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -1 +1,2 @@
|
|||
export * from './modes/index';
|
||||
export * from './draw_control';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
import { IInteractionTarget, ILngLat, PointLayer, Scene } from '@antv/l7';
|
||||
import { Feature, FeatureCollection, featureCollection } from '@turf/helpers';
|
||||
import {
|
||||
Feature,
|
||||
FeatureCollection,
|
||||
featureCollection,
|
||||
Geometries,
|
||||
Properties,
|
||||
} from '@turf/helpers';
|
||||
import { DrawEvent, DrawModes, unitsType } from '../util/constant';
|
||||
import { createCircle, createPoint } from '../util/create_geometry';
|
||||
import moveFeatures, { movePoint } from '../util/move_featrues';
|
||||
|
|
@ -20,33 +26,49 @@ export default class DrawCircle extends DrawFeature {
|
|||
public drawFinish() {
|
||||
return null;
|
||||
}
|
||||
|
||||
public setCurrentFeature(feature: Feature) {
|
||||
this.currentFeature = feature as Feature;
|
||||
// @ts-ignore
|
||||
// @ts-ignore
|
||||
this.pointFeatures = feature.properties.pointFeatures;
|
||||
// @ts-ignore
|
||||
this.startPoint = feature.properties.startPoint;
|
||||
// @ts-ignore
|
||||
this.endPoint = feature.properties.endPoint;
|
||||
this.source.setFeatureActive(feature);
|
||||
}
|
||||
|
||||
protected onDragStart = (e: IInteractionTarget) => {
|
||||
this.startPoint = e.lngLat;
|
||||
this.setCursor('grabbing');
|
||||
this.initCenterLayer();
|
||||
this.centerLayer.setData([this.startPoint]);
|
||||
};
|
||||
|
||||
protected onDragging = (e: IInteractionTarget) => {
|
||||
this.endPoint = e.lngLat;
|
||||
const feature = this.createFeature();
|
||||
const pointfeatures = createPoint([this.endPoint]);
|
||||
this.pointFeatures = pointfeatures.features;
|
||||
this.drawRender.update(feature);
|
||||
this.drawVertexLayer.update(pointfeatures);
|
||||
const feature = this.createFeature() as Feature<Geometries, Properties>;
|
||||
const properties = feature.properties as { pointFeatures: Feature[] };
|
||||
this.drawRender.update(featureCollection([feature]));
|
||||
this.drawVertexLayer.update(featureCollection(properties.pointFeatures));
|
||||
};
|
||||
|
||||
protected onDragEnd = () => {
|
||||
const feature = this.createFeature(`${this.getUniqId()}`);
|
||||
const properties = feature.properties as { pointFeatures: Feature[] };
|
||||
this.drawRender.update(featureCollection([feature]));
|
||||
this.drawVertexLayer.update(featureCollection(properties.pointFeatures));
|
||||
this.emit(DrawEvent.CREATE, this.currentFeature);
|
||||
this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
|
||||
this.disable();
|
||||
};
|
||||
|
||||
protected moveFeature(delta: ILngLat): Feature {
|
||||
protected moveFeature(delta: ILngLat): void {
|
||||
const newFeature = moveFeatures([this.currentFeature as Feature], delta);
|
||||
this.drawRender.updateData(featureCollection(newFeature));
|
||||
const newPointFeture = moveFeatures(this.pointFeatures, delta);
|
||||
this.drawVertexLayer.updateData(featureCollection(newPointFeture));
|
||||
this.currentFeature = newFeature[0];
|
||||
const newStartPoint = movePoint(
|
||||
[this.startPoint.lng, this.startPoint.lat],
|
||||
delta,
|
||||
|
|
@ -55,35 +77,43 @@ export default class DrawCircle extends DrawFeature {
|
|||
lat: newStartPoint[1],
|
||||
lng: newStartPoint[0],
|
||||
};
|
||||
newFeature[0].properties = {
|
||||
...newFeature[0].properties,
|
||||
startPoint: this.startPoint,
|
||||
pointFeatures: newPointFeture,
|
||||
};
|
||||
this.centerLayer.setData([this.startPoint]);
|
||||
return this.currentFeature;
|
||||
this.setCurrentFeature(newFeature[0]);
|
||||
}
|
||||
|
||||
protected createFeature(): FeatureCollection {
|
||||
protected createFeature(id: string = '0'): Feature {
|
||||
const points = createPoint([this.endPoint]);
|
||||
const feature = createCircle(
|
||||
[this.startPoint.lng, this.startPoint.lat],
|
||||
[this.endPoint.lng, this.endPoint.lat],
|
||||
{
|
||||
pointFeatures: points.features,
|
||||
units: this.getOption('units'),
|
||||
steps: this.getOption('steps'),
|
||||
id: `${this.getUniqId()}`,
|
||||
id,
|
||||
},
|
||||
);
|
||||
this.setCurrentFeature(feature as Feature);
|
||||
return featureCollection([feature]);
|
||||
return feature;
|
||||
}
|
||||
|
||||
protected editFeature(endPoint: ILngLat): FeatureCollection {
|
||||
protected editFeature(endPoint: ILngLat): void {
|
||||
this.endPoint = endPoint;
|
||||
const newFeature = this.createFeature();
|
||||
this.drawRender.updateData(newFeature);
|
||||
const pointfeatures = createPoint([this.endPoint]);
|
||||
this.pointFeatures = pointfeatures.features;
|
||||
this.drawVertexLayer.updateData(pointfeatures);
|
||||
return this.createFeature();
|
||||
const properties = newFeature.properties as { pointFeatures: Feature[] };
|
||||
this.drawRender.updateData(featureCollection([newFeature]));
|
||||
this.drawVertexLayer.updateData(
|
||||
featureCollection(properties.pointFeatures),
|
||||
);
|
||||
}
|
||||
|
||||
protected showOtherLayer() {
|
||||
this.centerLayer.setData([this.currentFeature?.properties?.startPoint]);
|
||||
this.centerLayer.show();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,6 +53,15 @@ export default abstract class DrawFeature extends DrawMode {
|
|||
this.on(DrawEvent.MODE_CHANGE, this.onModeChange);
|
||||
}
|
||||
public abstract drawFinish(): void;
|
||||
public setCurrentFeature(feature: Feature) {
|
||||
this.currentFeature = feature as Feature;
|
||||
// @ts-ignore
|
||||
// @ts-ignore
|
||||
this.pointFeatures = feature.properties.pointFeatures;
|
||||
|
||||
this.source.setFeatureActive(feature);
|
||||
}
|
||||
|
||||
public addVertex(feature: Feature): void {
|
||||
throw new Error('子类未实现该方法');
|
||||
}
|
||||
|
|
@ -69,11 +78,11 @@ export default abstract class DrawFeature extends DrawMode {
|
|||
|
||||
protected abstract onDragEnd(e: IInteractionTarget): void;
|
||||
|
||||
protected abstract createFeature(e?: any): FeatureCollection;
|
||||
protected abstract createFeature(e?: any): Feature;
|
||||
|
||||
protected abstract moveFeature(e: ILngLat): Feature;
|
||||
protected abstract moveFeature(e: ILngLat): void;
|
||||
|
||||
protected abstract editFeature(e: any): FeatureCollection;
|
||||
protected abstract editFeature(e: any): void;
|
||||
|
||||
protected abstract hideOtherLayer(): void;
|
||||
|
||||
|
|
@ -95,20 +104,34 @@ export default abstract class DrawFeature extends DrawMode {
|
|||
case DrawModes.DIRECT_SELECT:
|
||||
this.editMode.enable();
|
||||
this.editMode.setEditFeature(this.currentFeature as Feature);
|
||||
this.drawRender.updateData(
|
||||
featureCollection([this.currentFeature as Feature]),
|
||||
);
|
||||
this.drawVertexLayer.updateData(
|
||||
featureCollection(this.currentFeature?.properties?.pointFeatures),
|
||||
);
|
||||
this.drawVertexLayer.show();
|
||||
this.drawVertexLayer.enableEdit();
|
||||
this.showOtherLayer();
|
||||
break;
|
||||
case DrawModes.SIMPLE_SELECT:
|
||||
this.selectMode.setSelectedFeature(this.currentFeature as Feature);
|
||||
this.selectMode.enable();
|
||||
this.drawRender.enableDrag();
|
||||
this.drawRender.updateData(
|
||||
featureCollection([this.currentFeature as Feature]),
|
||||
);
|
||||
this.drawVertexLayer.updateData(
|
||||
featureCollection(this.currentFeature?.properties?.pointFeatures),
|
||||
);
|
||||
this.drawVertexLayer.disableEdit();
|
||||
this.drawVertexLayer.show();
|
||||
this.drawRender.show();
|
||||
this.showOtherLayer();
|
||||
break;
|
||||
case DrawModes.STATIC:
|
||||
this.source.setFeatureUnActive(this.currentFeature as Feature);
|
||||
this.source.updateFeature(this.currentFeature as Feature);
|
||||
this.source.clearFeatureActive();
|
||||
this.drawVertexLayer.hide();
|
||||
this.drawVertexLayer.disableEdit();
|
||||
this.hideOtherLayer();
|
||||
|
|
@ -120,10 +143,6 @@ export default abstract class DrawFeature extends DrawMode {
|
|||
|
||||
private onDrawCreate = (feature: Feature) => {
|
||||
this.source.addFeature(feature);
|
||||
if (this.popup) {
|
||||
this.popup.remove();
|
||||
}
|
||||
// this.removeDrawLayer();
|
||||
};
|
||||
|
||||
private onDrawUpdate = (feature: Feature) => {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { IInteractionTarget, ILayer, ILngLat, Scene } from '@antv/l7';
|
||||
import { Feature, FeatureCollection, featureCollection } from '@turf/helpers';
|
||||
import { DrawEvent, DrawModes, unitsType } from '../util/constant';
|
||||
import { createLine } from '../util/create_geometry';
|
||||
import { ILngLat, Scene } from '@antv/l7';
|
||||
import { Feature, featureCollection } from '@turf/helpers';
|
||||
import { unitsType } from '../util/constant';
|
||||
import { createLine, createPoint } from '../util/create_geometry';
|
||||
import moveFeatures from '../util/move_featrues';
|
||||
import { IDrawFeatureOption } from './draw_feature';
|
||||
import DrawPolygon from './draw_polygon';
|
||||
|
|
@ -23,15 +23,16 @@ export default class DrawLine extends DrawPolygon {
|
|||
this.pointFeatures = newPointFeture;
|
||||
return this.currentFeature;
|
||||
}
|
||||
protected createFeature(points: ILngLat[]): FeatureCollection {
|
||||
protected createFeature(points: ILngLat[]): Feature {
|
||||
const pointfeatures = createPoint(this.points);
|
||||
this.pointFeatures = pointfeatures.features;
|
||||
const feature = createLine(points, {
|
||||
id: this.getUniqId(),
|
||||
type: 'line',
|
||||
active: true,
|
||||
pointFeatures: this.pointFeatures,
|
||||
});
|
||||
this.setCurrentFeature(feature as Feature);
|
||||
return {
|
||||
type: 'FeatureCollection',
|
||||
features: [feature],
|
||||
};
|
||||
return feature;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ export default abstract class DrawMode extends EventEmitter {
|
|||
public source: DrawSource;
|
||||
public scene: Scene;
|
||||
public type: string;
|
||||
public isEnable: boolean = false;
|
||||
|
||||
protected options: {
|
||||
[key: string]: any;
|
||||
|
|
@ -32,7 +33,6 @@ export default abstract class DrawMode extends EventEmitter {
|
|||
protected drawStatus: DrawStatus = 'Drawing';
|
||||
protected currentFeature: Feature | null;
|
||||
protected currentVertex: Feature | null;
|
||||
protected isEnable: boolean = false;
|
||||
protected popup: IPopup;
|
||||
constructor(scene: Scene, options: Partial<IDrawOption> = {}) {
|
||||
super();
|
||||
|
|
@ -80,6 +80,9 @@ export default abstract class DrawMode extends EventEmitter {
|
|||
public getCurrentVertex(feature: Feature) {
|
||||
return this.currentVertex;
|
||||
}
|
||||
public getCurrentFeature() {
|
||||
return this.currentVertex;
|
||||
}
|
||||
|
||||
public getOption(key: string) {
|
||||
return this.options[key];
|
||||
|
|
@ -94,15 +97,15 @@ export default abstract class DrawMode extends EventEmitter {
|
|||
}
|
||||
|
||||
public setCursor(cursor: string) {
|
||||
const container = this.scene.getContainer();
|
||||
const container = this.scene.getMapCanvasContainer();
|
||||
if (container) {
|
||||
container.style.cursor = cursor;
|
||||
}
|
||||
}
|
||||
public resetCursor() {
|
||||
const container = this.scene.getContainer();
|
||||
const container = this.scene.getMapCanvasContainer();
|
||||
if (container) {
|
||||
container.style.cursor = 'default';
|
||||
container.removeAttribute('style');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -40,8 +40,8 @@ export default class DrawPoint extends DrawFeature {
|
|||
protected onClick = (e: any) => {
|
||||
const lngLat = e.lngLat;
|
||||
const feature = this.createFeature(lngLat);
|
||||
this.drawRender.update(feature);
|
||||
this.drawVertexLayer.update(feature);
|
||||
this.drawRender.update(featureCollection([feature]));
|
||||
this.drawVertexLayer.update(featureCollection([feature]));
|
||||
this.drawFinish();
|
||||
};
|
||||
|
||||
|
|
@ -53,19 +53,16 @@ export default class DrawPoint extends DrawFeature {
|
|||
this.pointFeatures = newFeature;
|
||||
return this.currentFeature;
|
||||
}
|
||||
protected createFeature(p: ILngLat): FeatureCollection {
|
||||
protected createFeature(p: ILngLat): Feature {
|
||||
const feature = point([p.lng, p.lat], {
|
||||
id: this.getUniqId(),
|
||||
});
|
||||
this.setCurrentFeature(feature as Feature);
|
||||
return {
|
||||
type: 'FeatureCollection',
|
||||
features: [feature],
|
||||
};
|
||||
return feature;
|
||||
}
|
||||
|
||||
protected editFeature(endPoint: ILngLat): FeatureCollection {
|
||||
return this.createFeature(endPoint);
|
||||
protected editFeature(endPoint: ILngLat): void {
|
||||
this.createFeature(endPoint);
|
||||
}
|
||||
|
||||
protected showOtherLayer() {
|
||||
|
|
|
|||
|
|
@ -45,12 +45,15 @@ export default class DrawPolygon extends DrawFeature {
|
|||
|
||||
public drawFinish() {
|
||||
const feature = this.createFeature(this.points);
|
||||
this.drawRender.update(feature);
|
||||
const pointfeatures = createPoint(this.points);
|
||||
this.pointFeatures = pointfeatures.features;
|
||||
this.drawVertexLayer.update(pointfeatures);
|
||||
const properties = feature.properties as { pointFeatures: Feature[] };
|
||||
this.drawRender.update(featureCollection([feature]));
|
||||
this.drawVertexLayer.update(featureCollection(properties.pointFeatures));
|
||||
// @ts-ignore
|
||||
// feature.properties.pointFeatures = pointfeatures;
|
||||
// console.log(feature);
|
||||
this.emit(DrawEvent.CREATE, this.currentFeature);
|
||||
this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
|
||||
this.points = [];
|
||||
this.disable();
|
||||
}
|
||||
|
||||
|
|
@ -85,6 +88,8 @@ export default class DrawPolygon extends DrawFeature {
|
|||
this.drawRender.updateData(featureCollection([feature]));
|
||||
this.drawVertexLayer.updateData(pointfeatures);
|
||||
this.drawMidVertexLayer.updateData(featureCollection(this.pointFeatures));
|
||||
// @ts-ignore
|
||||
feature.properties.pointFeatures = pointfeatures.features;
|
||||
this.setCurrentFeature(feature);
|
||||
}
|
||||
protected onDragStart = (e: IInteractionTarget) => {
|
||||
|
|
@ -103,10 +108,11 @@ export default class DrawPolygon extends DrawFeature {
|
|||
this.endPoint = lngLat;
|
||||
this.points.push(lngLat);
|
||||
const feature = this.createFeature(this.points);
|
||||
const pointfeatures = createPoint([this.points[0], this.endPoint]);
|
||||
this.pointFeatures = pointfeatures.features;
|
||||
this.drawRender.update(feature);
|
||||
this.drawVertexLayer.update(pointfeatures);
|
||||
const properties = feature.properties as { pointFeatures: Feature[] };
|
||||
// const pointfeatures = createPoint([this.points[0], this.endPoint]);
|
||||
// this.pointFeatures = pointfeatures.features;
|
||||
this.drawRender.update(featureCollection([feature]));
|
||||
this.drawVertexLayer.update(featureCollection(properties.pointFeatures));
|
||||
this.onDraw();
|
||||
};
|
||||
|
||||
|
|
@ -118,7 +124,7 @@ export default class DrawPolygon extends DrawFeature {
|
|||
const tmpPoints = this.points.slice();
|
||||
tmpPoints.push(lngLat);
|
||||
const feature = this.createFeature(tmpPoints);
|
||||
this.drawRender.update(feature);
|
||||
this.drawRender.update(featureCollection([feature]));
|
||||
};
|
||||
|
||||
protected onDblClick = (e: any) => {
|
||||
|
|
@ -130,29 +136,31 @@ export default class DrawPolygon extends DrawFeature {
|
|||
this.drawFinish();
|
||||
};
|
||||
|
||||
protected moveFeature(delta: ILngLat): Feature {
|
||||
protected moveFeature(delta: ILngLat): void {
|
||||
const newFeature = moveFeatures([this.currentFeature as Feature], delta);
|
||||
const newPointFeture = moveFeatures(this.pointFeatures, delta);
|
||||
this.drawRender.updateData(featureCollection(newFeature));
|
||||
this.drawVertexLayer.updateData(featureCollection(newPointFeture));
|
||||
this.currentFeature = newFeature[0];
|
||||
this.pointFeatures = newPointFeture;
|
||||
return this.currentFeature;
|
||||
newFeature[0].properties = {
|
||||
...newFeature[0].properties,
|
||||
pointFeatures: newPointFeture,
|
||||
};
|
||||
this.setCurrentFeature(newFeature[0]);
|
||||
}
|
||||
protected createFeature(points: ILngLat[]): FeatureCollection {
|
||||
protected createFeature(points: ILngLat[]): Feature {
|
||||
const pointfeatures = createPoint(this.points);
|
||||
this.pointFeatures = pointfeatures.features;
|
||||
const feature = createPolygon(points, {
|
||||
id: this.getUniqId(),
|
||||
type: 'polygon',
|
||||
active: true,
|
||||
pointFeatures: this.pointFeatures,
|
||||
});
|
||||
this.setCurrentFeature(feature as Feature);
|
||||
return {
|
||||
type: 'FeatureCollection',
|
||||
features: [feature],
|
||||
};
|
||||
return feature;
|
||||
}
|
||||
|
||||
protected editFeature(vertex: ILngLat): FeatureCollection {
|
||||
protected editFeature(vertex: ILngLat) {
|
||||
const selectVertexed = this.currentVertex as Feature<
|
||||
Geometries,
|
||||
Properties
|
||||
|
|
@ -161,7 +169,7 @@ export default class DrawPolygon extends DrawFeature {
|
|||
return featureCollection([]);
|
||||
} else {
|
||||
// @ts-ignore
|
||||
const id = selectVertexed.properties.id;
|
||||
const id = selectVertexed.properties.id * 1;
|
||||
selectVertexed.geometry.coordinates = [vertex.lng, vertex.lat];
|
||||
// @ts-ignore
|
||||
this.pointFeatures[id].geometry.coordinates = [vertex.lng, vertex.lat];
|
||||
|
|
@ -171,9 +179,13 @@ export default class DrawPolygon extends DrawFeature {
|
|||
this.drawRender.updateData(
|
||||
featureCollection([this.currentFeature as Feature]),
|
||||
);
|
||||
const feature = this.currentFeature as Feature;
|
||||
feature.properties = {
|
||||
...this.currentFeature?.properties,
|
||||
pointFeatures: this.pointFeatures,
|
||||
};
|
||||
this.setCurrentFeature(feature);
|
||||
}
|
||||
|
||||
return featureCollection([]);
|
||||
}
|
||||
|
||||
protected onDraw = () => {
|
||||
|
|
@ -190,6 +202,10 @@ export default class DrawPolygon extends DrawFeature {
|
|||
};
|
||||
|
||||
protected showOtherLayer() {
|
||||
// if (this.editMode.isEnable) {
|
||||
// this.drawMidVertexLayer.update(featureCollection(this.pointFeatures));
|
||||
// this.drawMidVertexLayer.show();
|
||||
// }
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import {
|
|||
point,
|
||||
} from '@turf/helpers';
|
||||
import { unitsType } from '../util/constant';
|
||||
import { createRect } from '../util/create_geometry';
|
||||
import { createPoint, createRect } from '../util/create_geometry';
|
||||
import DrawCircle from './draw_circle';
|
||||
import { IDrawFeatureOption } from './draw_feature';
|
||||
export interface IDrawRectOption extends IDrawFeatureOption {
|
||||
|
|
@ -22,15 +22,17 @@ export default class DrawRect extends DrawCircle {
|
|||
return null;
|
||||
}
|
||||
|
||||
protected createFeature(): FeatureCollection {
|
||||
protected createFeature(id: string = '0'): Feature {
|
||||
const points = createPoint([this.endPoint]);
|
||||
const feature = createRect(
|
||||
[this.startPoint.lng, this.startPoint.lat],
|
||||
[this.endPoint.lng, this.endPoint.lat],
|
||||
{
|
||||
id: `${this.getUniqId()}`,
|
||||
id,
|
||||
pointFeatures: points.features,
|
||||
},
|
||||
);
|
||||
this.setCurrentFeature(feature as Feature);
|
||||
return featureCollection([feature]);
|
||||
return feature;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import DrawCircle from './draw_circle';
|
||||
import DrawLine from './draw_line';
|
||||
import DrawMode from './draw_mode';
|
||||
import DrawPoint from './draw_point';
|
||||
import DrawPolygon from './draw_polygon';
|
||||
import DrawRect from './draw_rect';
|
||||
export { DrawCircle, DrawRect, DrawPolygon, DrawPoint, DrawLine };
|
||||
export { DrawCircle, DrawRect, DrawPolygon, DrawPoint, DrawLine, DrawMode };
|
||||
|
|
|
|||
|
|
@ -17,6 +17,9 @@ export default class BaseRenderLayer {
|
|||
this.draw = draw;
|
||||
}
|
||||
public update(feature: FeatureCollection) {
|
||||
if (this.drawLayers.length > 0) {
|
||||
this.updateData(feature);
|
||||
}
|
||||
this.removeLayers();
|
||||
const style = this.draw.getStyle('normal');
|
||||
this.drawLayers = renderFeature(feature, style);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const InitFeature = {
|
|||
type: 'FeatureCollection',
|
||||
features: [],
|
||||
};
|
||||
import { FeatureCollection } from '@turf/helpers';
|
||||
import { Feature, FeatureCollection } from '@turf/helpers';
|
||||
import Draw from '../modes/draw_feature';
|
||||
import { DrawEvent, DrawModes } from '../util/constant';
|
||||
import BaseRender from './base_render';
|
||||
|
|
@ -71,12 +71,16 @@ export default class DrawLayer extends BaseRender {
|
|||
this.disableDrag();
|
||||
this.draw.resetCursor();
|
||||
this.enableEdit();
|
||||
this.draw.setCurrentFeature(e.feature);
|
||||
this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.DIRECT_SELECT);
|
||||
};
|
||||
|
||||
private onUnClick = (e: any) => {
|
||||
this.draw.selectMode.disable();
|
||||
this.draw.editMode.disable();
|
||||
this.draw.source.setFeatureUnActive(
|
||||
this.draw.getCurrentFeature() as Feature,
|
||||
);
|
||||
this.disableDrag();
|
||||
this.disableEdit();
|
||||
this.hide();
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
import { FeatureCollection } from '@turf/helpers';
|
||||
import { Feature, FeatureCollection } from '@turf/helpers';
|
||||
import { DrawEvent, DrawModes } from '../util/constant';
|
||||
import BaseRender from './base_render';
|
||||
import { renderFeature } from './renderFeature';
|
||||
export default class DrawResultLayer extends BaseRender {
|
||||
public update(feature: FeatureCollection) {
|
||||
if (this.drawLayers.length > 0) {
|
||||
this.updateData(feature);
|
||||
return;
|
||||
}
|
||||
this.removeLayers();
|
||||
const style = this.draw.getStyle('normal');
|
||||
this.drawLayers = renderFeature(feature, style);
|
||||
|
|
@ -11,12 +15,20 @@ export default class DrawResultLayer extends BaseRender {
|
|||
this.addLayers();
|
||||
}
|
||||
public enableDrag() {
|
||||
if (this.isEnableDrag) {
|
||||
return;
|
||||
}
|
||||
const layer = this.drawLayers[0];
|
||||
layer.on('click', this.onClick);
|
||||
this.isEnableDrag = true;
|
||||
}
|
||||
public disableDrag() {
|
||||
if (!this.isEnableDrag) {
|
||||
return;
|
||||
}
|
||||
const layer = this.drawLayers[0];
|
||||
layer.off('click', this.onClick);
|
||||
this.isEnableDrag = false;
|
||||
}
|
||||
public addFilter() {
|
||||
this.drawLayers.forEach((layer) =>
|
||||
|
|
@ -26,9 +38,13 @@ export default class DrawResultLayer extends BaseRender {
|
|||
);
|
||||
}
|
||||
private onClick = (e: any) => {
|
||||
this.draw.source.setFeatureUnActive(
|
||||
this.draw.getCurrentFeature() as Feature,
|
||||
);
|
||||
// console.log(e.feature);
|
||||
this.draw.setCurrentFeature(e.feature);
|
||||
this.draw.source.setFeatureActive(e.feature);
|
||||
this.update(this.draw.source.data);
|
||||
this.draw.source.setFeatureActive(e.feature as Feature);
|
||||
this.updateData(this.draw.source.data);
|
||||
this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,13 @@ export default class DrawSource {
|
|||
fe.properties.active = false;
|
||||
}
|
||||
}
|
||||
public clearFeatureActive() {
|
||||
this.data.features.forEach((fe: Feature) => {
|
||||
if (fe && fe.properties) {
|
||||
fe.properties.active = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
public updateFeature(feature: Feature) {
|
||||
this.removeFeature(feature);
|
||||
this.addFeature(feature);
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ export function createCircle(
|
|||
units: unitsType;
|
||||
steps: number;
|
||||
id: string;
|
||||
pointFeatures: Feature[];
|
||||
},
|
||||
): Feature {
|
||||
const radius = turfDistance(point(center), point(endPoint), options);
|
||||
|
|
@ -27,8 +28,14 @@ export function createCircle(
|
|||
active: true,
|
||||
type: 'circle',
|
||||
radius,
|
||||
startPoint: center,
|
||||
endPoint,
|
||||
startPoint: {
|
||||
lng: center[0],
|
||||
lat: center[1],
|
||||
},
|
||||
endPoint: {
|
||||
lng: endPoint[0],
|
||||
lat: endPoint[1],
|
||||
},
|
||||
path: [center, endPoint],
|
||||
},
|
||||
});
|
||||
|
|
@ -40,6 +47,8 @@ export function createRect(
|
|||
endPoint: [number, number],
|
||||
options: {
|
||||
id: string;
|
||||
pointFeatures: Feature[];
|
||||
[key: string]: any;
|
||||
},
|
||||
): Feature {
|
||||
const minX = Math.min(startPoint[0], endPoint[0]);
|
||||
|
|
@ -51,8 +60,14 @@ export function createRect(
|
|||
properties: {
|
||||
type: 'rect',
|
||||
active: true,
|
||||
startPoint,
|
||||
endPoint,
|
||||
startPoint: {
|
||||
lng: startPoint[0],
|
||||
lat: startPoint[1],
|
||||
},
|
||||
endPoint: {
|
||||
lng: endPoint[0],
|
||||
lat: endPoint[1],
|
||||
},
|
||||
...options,
|
||||
},
|
||||
geometry: {
|
||||
|
|
@ -73,7 +88,11 @@ export function createRect(
|
|||
|
||||
export function createPolygon(
|
||||
points: Array<{ lng: number; lat: number }>,
|
||||
options: any,
|
||||
options: {
|
||||
id?: string | number;
|
||||
pointFeatures: Feature[];
|
||||
[key: string]: any;
|
||||
},
|
||||
): any {
|
||||
const coords = points.map((p) => [p.lng, p.lat]);
|
||||
if (points.length < 2) {
|
||||
|
|
|
|||
|
|
@ -108,6 +108,10 @@ export default class AMapService
|
|||
return this.map.getContainer();
|
||||
}
|
||||
|
||||
public getMapCanvasContainer(): HTMLElement {
|
||||
return this.map.getContainer() as HTMLElement;
|
||||
}
|
||||
|
||||
public getSize(): [number, number] {
|
||||
const size = this.map.getSize();
|
||||
return [size.getWidth(), size.getHeight()];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
.mapboxgl-ctrl-logo {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -20,7 +20,11 @@ import {
|
|||
import { DOM } from '@antv/l7-utils';
|
||||
import { inject, injectable } from 'inversify';
|
||||
import mapboxgl, { IControl, Map } from 'mapbox-gl';
|
||||
|
||||
// tslint:disable-next-line:no-submodule-imports
|
||||
import 'mapbox-gl/dist/mapbox-gl.css';
|
||||
import { IMapboxInstance } from '../../typings/index';
|
||||
import './logo.css';
|
||||
import Viewport from './Viewport';
|
||||
const EventMap: {
|
||||
[key: string]: any;
|
||||
|
|
@ -87,6 +91,9 @@ export default class MapboxService
|
|||
public getContainer(): HTMLElement | null {
|
||||
return this.map.getContainer();
|
||||
}
|
||||
public getMapCanvasContainer(): HTMLElement {
|
||||
return this.map.getCanvasContainer();
|
||||
}
|
||||
|
||||
public getSize(): [number, number] {
|
||||
const size = this.map.transform;
|
||||
|
|
@ -293,7 +300,6 @@ export default class MapboxService
|
|||
if (this.map) {
|
||||
this.map.remove();
|
||||
this.$mapContainer = null;
|
||||
this.removeLogoControl();
|
||||
}
|
||||
}
|
||||
public emit(name: string, ...args: any[]) {
|
||||
|
|
@ -354,20 +360,6 @@ export default class MapboxService
|
|||
}
|
||||
return $wrapper;
|
||||
}
|
||||
|
||||
private removeLogoControl(): void {
|
||||
// @ts-ignore
|
||||
const controls = this.map._controls as IControl[];
|
||||
const logoCtr = controls.find((ctr: IControl) => {
|
||||
if (ctr.hasOwnProperty('_updateLogo')) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
if (logoCtr) {
|
||||
this.map.removeControl(logoCtr);
|
||||
}
|
||||
}
|
||||
|
||||
private getMapStyle(name: MapStyle) {
|
||||
if (typeof name !== 'string') {
|
||||
return name;
|
||||
|
|
|
|||
|
|
@ -118,6 +118,9 @@ class Scene
|
|||
public getMapContainer(): HTMLElement | null {
|
||||
return this.mapService.getMapContainer();
|
||||
}
|
||||
public getMapCanvasContainer(): HTMLElement {
|
||||
return this.mapService.getMapCanvasContainer() as HTMLElement;
|
||||
}
|
||||
|
||||
public getMapService(): IMapService<unknown> {
|
||||
return this.mapService;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { DrawControl } from '@antv/l7-draw';
|
||||
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
||||
|
||||
import * as React from 'react';
|
||||
export default class Circle extends React.Component {
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
pitch: 0,
|
||||
style: 'mapbox://styles/mapbox/satellite-v9', // hosted style id
|
||||
center: [-91.874, 42.76], // starting position
|
||||
zoom: 12, // starting zoom
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
|
||||
scene.on('loaded', () => {
|
||||
const drawControl = new DrawControl(scene, {
|
||||
position: 'topright',
|
||||
layout: 'vertical', // horizontal vertical
|
||||
controls: {
|
||||
point: true,
|
||||
polygon: true,
|
||||
line: true,
|
||||
circle: true,
|
||||
rect: true,
|
||||
},
|
||||
});
|
||||
scene.addControl(drawControl);
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/react';
|
|||
import * as React from 'react';
|
||||
import Circle from './Components/Circle';
|
||||
import DrawCircle from './Components/DrawCircle';
|
||||
import DrawControl from './Components/DrawControl';
|
||||
import Line from './Components/DrawLine';
|
||||
import Point from './Components/DrawPoint';
|
||||
import DrawPolygon from './Components/DrawPolygon';
|
||||
|
|
@ -14,5 +15,6 @@ storiesOf('绘制', module)
|
|||
.add('多边形', () => <Polygon />, {})
|
||||
.add('点', () => <Point />, {})
|
||||
.add('路径', () => <Line />, {})
|
||||
.add('绘制组件', () => <DrawControl />, {})
|
||||
.add('绘制圆', () => <DrawCircle />, {})
|
||||
.add('绘制面', () => <DrawPolygon />, {});
|
||||
|
|
|
|||
Loading…
Reference in New Issue