docs: 地图英文文档

packages/site/docs/api/map/bmap.en.md

@@ -0,0 +1,76 @@
+---
+title: 百度地图
+order: 2
+---
+
+<embed src="@/docs/common/style.md"></embed>
+
+## Introduction
+
+L7 geographical visualization focuses on the visual expression of geographical data. The map layer needs to rely on third-party maps. Third-party maps are created and managed uniformly through Scene. You only need to pass in map configuration items through Scene.
+
+L7 internally resolves the differences between different map basemaps, and at the same time, L7 manages the operation methods of the map in a unified manner.
+
+The Baidu map currently supported by L7 is[APIGL version](https://lbsyun.baidu.com/index.php?title=jspopularGL), which is also the officially recommended version of Baidu Maps.
+
+### Apply for token
+
+Before using Baidu Maps, you need to apply for a Baidu Map key. How to apply for a Baidu Map key?[Click me to view](https://lbs.baidu.com/index.php?title=jspopularGL/guide/getkey)。
+
+⚠️ L7 has a default token set internally, which is for testing only
+
+### import
+
+```javascript
+import { BaiduMap } from '@antv/l7-maps';
+```
+
+### Instantiate
+
+L7 provides BaiduMap to directly instantiate the map, and can also instantiate the map through external input.
+
+It is recommended for new projects to instantiate BaiduMap directly. Existing map projects can be passed in externally to quickly access L7 capabilities.
+
+#### BaiduMap instantiation
+
+```js
+import { BaiduMap } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new BaiduMap({
+    // Fill in the Baidu map key. This is a test token and cannot be used for production.
+    token: 'zLhopYPPERGtpGOgimcdKcCimGRyyIsh',
+    center: [103, 30],
+    pitch: 4,
+    zoom: 10,
+    rotation: 19,
+  }),
+});
+```
+
+#### external instantiation
+
+⚠️ The scene id parameter needs to be in the same container as the BMapGL.Map instance.
+
+⚠️ The incoming map instance needs to be imported by yourself[Baidu Map API](https://lbs.baidu.com/index.php?title=jspopularGL/guide/show)
+
+```javascript
+const map = new BMapGL.Map('map', {
+  zoom: 11, // Initialize map level
+  minZoom: 4,
+  maxZoom: 23,
+  enableWheelZoom: true
+});
+
+const scene = new Scene({
+  id: 'map',
+  map: new BaiduMap({
+    mapInstance: map,
+  }),
+});
+```
+
+BaiduMap [Example address](/examples/map/map/#baidumap), external incoming[Example address](/examples/map/map/#bmapInstance)
+
+<embed src="@/docs/common/map.zh.md"></embed>

packages/site/docs/api/map/gaode.en.md

@@ -0,0 +1,110 @@
+---
+title: 高德地图
+order: 1
+---
+
+<embed src="@/docs/common/style.md"></embed>
+
+## Introduction
+
+L7 geographical visualization focuses on the visual expression of geographical data. The map layer needs to rely on third-party maps. Third-party maps are created and managed uniformly through Scene. You only need to pass in map configuration items through Scene.
+
+L7 internally resolves the differences between different map basemaps, and at the same time, L7 manages the operation methods of the map in a unified manner.
+
+* [Amap official website](https://lbs.amap.com/api/javascript-api-v2/update)
+
+## Apply for token
+
+Amap API configuration parameters
+
+* token
+  Register Amap[API token](https://lbs.amap.com/api/javascript-api/guide/abc/prepare)
+
+## Map initialization
+
+```javascript
+const L7AMap = new GaodeMap({
+  pitch: 35.210526315789465,
+  style: 'dark',
+  center: [104.288144, 31.239692],
+  zoom: 4.4,
+  token: 'xxxx-token',
+  plugin: [], // Can not be set
+});
+```
+
+<embed src="@/docs/common/map.zh.md"></embed>
+
+## Pass in external instance
+
+In order to support the ability of existing map projects to quickly access L7, L7 provides a method for passing in map instances. If you are a new project, it is recommended to use Scene to initialize the map.
+
+⚠️ The scene id parameter requires the Map instances of the map to be in the same container.
+
+⚠️ When passing in a map instance, you need to introduce the API of the relevant map yourself
+
+⚠️ Set viewMode to 3D mode (GaodeMap2.0 supports 2D mode and does not need to be set)
+
+#### Pass in Gaode map instance
+
+```javascript
+const map = new AMap.Map('map', {
+  viewMode: '3D',
+  resizeEnable: true, // Whether to monitor map container size changes
+  zoom: 11, // Initialize map level
+  center: [116.397428, 39.90923], // Initialize the map center point
+});
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    mapInstance: map,
+  }),
+});
+```
+
+[Example address](/examples/tutorial/map#amapInstance)[code address](https://github.com/antvis/L7/blob/master/examples/tutorial/map/demo/amapInstance.js)
+
+[Example address (2D)](/examples/tutorial/map#amapInstance2d)[code address](https://github.com/antvis/L7/blob/master/examples/tutorial/map/demo/amapInstance.js)
+
+<embed src="@/docs/common/map.zh.md"></embed>
+
+## Register to use Gaode plug-in
+
+```javascript
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    center: [116.475, 39.99],
+    pitch: 0,
+    zoom: 13,
+    plugin: ['AMap.ToolBar', 'AMap.LineSearch'],
+  }),
+});
+// plugin: ['AMap.ToolBar', 'AMap.LineSearch'],
+// In order to use the capabilities of the corresponding plug-in, the corresponding plug-in should first be registered in plugin
+
+//The loaded AMap will be mounted on the global window object
+scene.on('loaded', () => {
+  window.AMap.plugin(['AMap.ToolBar', 'AMap.LineSearch'], () => {
+    // add control
+    scene.map.addControl(new AMap.ToolBar());
+
+    var linesearch = new AMap.LineSearch({
+      pageIndex: 1, //Page number, default value is 1
+      pageSize: 1, //The number of results displayed on a single page, the default value is 20, the maximum value is 50
+      city: 'Beijing', //Limit the query city, which can be the city name (Chinese/Chinese full spelling), city code, the default value is "National"
+      extensions: 'all', //Whether to return bus route details, the default value is "base"
+    });
+
+    //Execute bus route keyword query
+    linesearch.search('536', function (status, result) {
+      //Print status information status and result information result
+      // ...do something
+    });
+  });
+});
+```
+
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ag-nSrIPPEUAAAAAAAAAAAAAARQnAQ'>
+
+[Online case](/examples/amapplugin/bus#busstop)

packages/site/docs/api/map/leaflet.en.md

@@ -0,0 +1,79 @@
+---
+title: Leaflet
+order: 6
+---
+
+<embed src="@/docs/common/style.md"></embed>
+
+## Introduction
+
+L7 geographical visualization focuses on the visual expression of geographical data. The map layer needs to rely on third-party maps. Third-party maps are created and managed uniformly through Scene. You only need to pass in map configuration items through Scene.
+
+L7 internally resolves the differences between different map basemaps, and at the same time, L7 manages the operation methods of the map in a unified manner.
+
+* [Leaflet official website](https://leafletjs.com/)
+* [Leaflet GitHub](https://github.com/Leaflet/Leaflet)
+
+### Install
+
+L7-Leafet is a third-party plug-in. L7 itself is not built-in and needs to be followed independently.
+
+* [L7-Leaflet GitHub](https://github.com/antvis/l7-leaflet)
+* [L7-Leaflet Demo ](https://l7-leaflet.antv.vision/)
+
+```ts
+npm install  '@antv/l7-leaflet'
+```
+
+or
+
+```js
+<script src="https://unpkg.com/@antv/l7-leaflet"></script>
+```
+
+### initialization
+
+```ts
+import { Scene } from '@antv/l7';
+import * as L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { Map } from '@antv/l7-leaflet';
+const scene = new Scene({
+    id: 'map',
+    map: new Map({
+    pitch: 0,
+    center: [112, 37.8],
+    zoom: 3,
+    minZoom: 1,
+    }),
+});
+```
+
+### Using L7 in Leaflet
+
+```ts
+import * as L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { LineLayer } from '@antv/l7';
+import { L7Layer } from '@antv/l7-leaflet';
+
+const map = L.map('map', {
+      minZoom: 1,
+    }).setView([30, 112], 3);
+    const mapType = 'vec';
+    L.tileLayer(
+      'https://t{s}.tianditu.gov.cn/' +
+        mapType +
+        '_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' +
+        mapType +
+        '&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=b72aa81ac2b3cae941d1eb213499e15e',
+      {
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        attribution:
+          '© <a href="http://lbs.tianditu.gov.cn/home.html">天地图 GS(2022)3124号 - 甲测资字1100471</a>',
+      },
+    ).addTo(map);
+
+    const l7layer = new L7Layer().addTo(map);
+    const scene = l7layer.getScene();
+```

packages/site/docs/api/map/map.en.md

@@ -0,0 +1,57 @@
+---
+title: 地图 Map
+order: 0
+---
+
+<embed src="@/docs/common/style.md"></embed>
+
+## Introduction
+
+L7 geographical visualization focuses on the visual expression of geographical data. The map layer needs to rely on third-party maps. The third-party maps are created and managed uniformly through Scene.
+Just pass in the map configuration items through Scene.
+
+L7 internally resolves the differences between different map basemaps, and at the same time, L7 manages the operation methods of the map in a unified manner.
+
+* Map is an independent map engine that does not require basemaps or loading map tile services, and does not require Token.
+
+## import
+
+```javascript
+import { Map } from '@antv/l7-maps';
+```
+
+## Map instantiation
+
+```ts
+import { Scene, PointLayer } from '@antv/l7';
+import { Map } from '@antv/l7-maps';
+
+const scene = new Scene({
+    id: 'map',
+    map: new Map({
+      zoom: 10,
+      minZoom: 0,
+      maxZoom: 18,
+    })
+  });
+
+scene.on('loaded', () => {
+  // 添加地图底图
+  const layer = new RasterLayer();
+  layer.source(
+    'https://webrd0{1-3}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
+    {
+      parser: {
+        type: 'rasterTile',
+        tileSize: 256,
+        minZoom: 2,
+        maxZoom: 18,
+      }
+    }
+  );
+  scene.addLayer(layer);
+
+});
+```
+
+<embed src="@/docs/common/map.zh.md"></embed>

packages/site/docs/api/map/mapbox.en.md

@@ -0,0 +1,57 @@
+---
+title: MapBox 地图
+order: 4
+---
+
+<embed src="@/docs/common/style.md"></embed>
+
+## Introduction
+
+L7 geographical visualization focuses on the visual expression of geographical data. The map layer needs to rely on third-party maps. Third-party maps are created and managed uniformly through Scene. You only need to pass in map configuration items through Scene.
+
+L7 internally resolves the differences between different map basemaps, and at the same time, L7 manages the operation methods of the map in a unified manner.
+
+* [Mapbox-gl official website](https://docs.mapbox.com/mapbox-gl-js/)
+* [ Mapbox-gl GitHub](https://github.com/mapbox/mapbox-gl-js)
+
+## Apply for token
+
+[Apply for token](https://docs.mapbox.com/help/getting-started/access-tokens/)
+
+## Initialize map
+
+```ts
+import { Scene, PointLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
+const scene = new Scene({
+    id: 'map',
+    map: new Mapbox({
+      zoom: 10,
+      minZoom: 0,
+      maxZoom: 18,
+      token:"xxxx", //必须
+    })
+  });
+```
+
+#### Pass in a Mapbox map instance
+
+```javascript
+mapboxgl.accessToken = 'xxxx - token';
+const map = new mapboxgl.Map({
+  container: 'map', // container id
+  style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
+  center: [-74.5, 40], // starting position [lng, lat]
+  zoom: 9, // starting zoom
+});
+
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    mapInstance: map,
+  }),
+});
+```
+
+<embed src="@/docs/common/map.zh.md"></embed>