feat: 1.完成定位组件的开发

dev-demos/layer/control/navigation.md

@@ -0,0 +1,6 @@
+---
+title: 定位
+order: 10
+---
+
+<code src="./navigation.tsx" compact defaultShowCode></code>

dev-demos/layer/control/navigation.tsx

@@ -0,0 +1,47 @@
+import { GaodeMapV2, Scene, Navigation } from '@antv/l7';
+import React, { useState } from 'react';
+// tslint:disable-next-line:no-duplicate-imports
+import { FunctionComponent, useEffect } from 'react';
+
+const Demo: FunctionComponent = () => {
+  const [scene, setScene] = useState<Scene | undefined>();
+
+  useEffect(() => {
+    const newScene = new Scene({
+      id: 'map',
+      map: new GaodeMapV2({
+        style: 'normal',
+        center: [120, 30],
+        pitch: 0,
+        zoom: 6.45,
+        preserveDrawingBuffer: true,
+        // WebGLParams: {
+        //   preserveDrawingBuffer: true,
+        // },
+      }),
+      // logoVisible: false,
+    });
+
+    newScene.on('loaded', () => {
+      const newControl = new Navigation({});
+      newScene.addControl(newControl);
+      newScene.on('zoomchange', (e) => {
+        console.log(newScene.getZoom());
+      });
+    });
+  }, []);
+
+  return (
+    <>
+      <div
+        id="map"
+        style={{
+          height: '500px',
+          position: 'relative',
+        }}
+      />
+    </>
+  );
+};
+
+export default Demo;

packages/component/src/assets/demo_index.html

@@ -54,6 +54,12 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon l7-iconfont">&#xe678;</span>
+                <div class="name">gps-fixed</div>
+                <div class="code-name">&amp;#xe678;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon l7-iconfont">&#xe61b;</span>
                 <div class="name">图片</div>
@@ -90,9 +96,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'l7-iconfont';
-  src: url('iconfont.woff2?t=1660826205387') format('woff2'),
+  src: url('iconfont.woff2?t=1660886045943') format('woff2'),
-       url('iconfont.woff?t=1660826205387') format('woff'),
+       url('iconfont.woff?t=1660886045943') format('woff'),
-       url('iconfont.ttf?t=1660826205387') format('truetype');
+       url('iconfont.ttf?t=1660886045943') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -118,6 +124,15 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon l7-iconfont l7-icon-gps-fixed"></span>
+            <div class="name">
+              gps-fixed
+            </div>
+            <div class="code-name">.l7-icon-gps-fixed
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon l7-iconfont l7-icon-tupian"></span>
             <div class="name">
@@ -172,6 +187,14 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#l7-icon-gps-fixed"></use>
+                </svg>
+                <div class="name">gps-fixed</div>
+                <div class="code-name">#l7-icon-gps-fixed</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#l7-icon-tupian"></use>

packages/component/src/assets/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "l7-iconfont"; /* Project id 3580659 */
-  src: url('iconfont.woff2?t=1660826205387') format('woff2'),
+  src: url('iconfont.woff2?t=1660886045943') format('woff2'),
-       url('iconfont.woff?t=1660826205387') format('woff'),
+       url('iconfont.woff?t=1660886045943') format('woff'),
-       url('iconfont.ttf?t=1660826205387') format('truetype');
+       url('iconfont.ttf?t=1660886045943') format('truetype');
 }
 
 .l7-iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.l7-icon-gps-fixed:before {
+  content: "\e678";
+}
+
 .l7-icon-tupian:before {
   content: "\e61b";
 }

packages/component/src/assets/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "l7-icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1410363",
+      "name": "gps-fixed",
+      "font_class": "gps-fixed",
+      "unicode": "e678",
+      "unicode_decimal": 59000
+    },
     {
       "icon_id": "11874505",
       "name": "图片",

packages/component/src/control/navigation.ts

@@ -0,0 +1,52 @@
+import { Point } from '@antv/l7-core';
+import { isNaN } from 'lodash';
+import { createL7Icon } from '../utils/icon';
+import ButtonControl, {
+  IButtonControlOption,
+} from './baseControl/buttonControl';
+
+export interface INavigationControlOption extends IButtonControlOption {
+  transform: (position: Point) => Point;
+  zoom: number;
+}
+
+export { Navigation };
+
+export default class Navigation extends ButtonControl<
+  INavigationControlOption
+> {
+  public getDefault(
+    option?: Partial<INavigationControlOption>,
+  ): INavigationControlOption {
+    return {
+      ...super.getDefault(option),
+      title: '定位',
+      btnIcon: createL7Icon('l7-icon-gps-fixed'),
+      zoom: -1,
+    };
+  }
+
+  public onAdd(): HTMLElement {
+    const button = super.onAdd();
+    button.addEventListener('click', this.onClick);
+    return button;
+  }
+
+  public onClick = () => {
+    if (!window.navigator.geolocation) {
+      return;
+    }
+    const { transform, zoom } = this.controlOption;
+    window.navigator.geolocation.getCurrentPosition(({ coords }) => {
+      const { longitude, latitude } = coords ?? {};
+      if (!isNaN(longitude) && !isNaN(latitude)) {
+        const position: Point = [longitude, latitude];
+        const currentZoom = this.mapsService.getZoom();
+        this.mapsService.setZoomAndCenter(
+          zoom >= 0 ? zoom : currentZoom > 15 ? currentZoom : 15,
+          transform ? transform(position) : position,
+        );
+      }
+    });
+  };
+}

packages/component/src/index.ts

@@ -14,6 +14,7 @@ export * from './control/baseControl';
 export * from './control/logo';
 export * from './control/fullscreen';
 export * from './control/exportImage';
+export * from './control/navigation';
 
 export { Scale, Zoom, Layers, Marker, Popup, MarkerLayer, createL7Icon };