refactor(component): add popup marker service

README.md

@@ -8,6 +8,10 @@ Large-scale WebGL-powered Geospatial data visualization analysis framework.
 
 ![l7 demo](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*SGU-QIZsnyoAAAAAAAAAAABkARQnAQ)
 
+
+
+
+
 ### Installation
 
 ```

examples/tutorial/control/demo/amap.js

@@ -1,13 +1,14 @@
 import { PointLayer, Scale, Scene, Layers, Zoom } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'dark',
-  center: [ 121.40, 31.258134 ],
-  zoom: 14
+  map: new GaodeMap({
+    style: 'light',
+    pitch: 0,
+    center: [ 121.4316962, 31.26082325 ],
+    zoom: 15.056
+  })
 });
-
 fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
   .then(res => res.json())
   .then(data => {
@@ -45,7 +46,6 @@ const zoomControl = new Zoom();
 const scaleControl = new Scale({
   position: 'bottomright'
 });
-
 scene.addControl(zoomControl);
 scene.addControl(scaleControl);
 

examples/tutorial/control/demo/mapbox.js

@@ -1,17 +1,17 @@
 import { Scale, Zoom, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'mapbox',
-  style: 'light',
-  center: [ -97.119140625, 38.75408327579141 ],
-  zoom: 2
+  map: new Mapbox({
+    style: 'light',
+    pitch: 0,
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
 });
 
 const zoomControl = new Zoom();
-const scaleControl = new Scale({
-  position: 'rightbottom'
-});
+const scaleControl = new Scale();
 scene.addControl(zoomControl);
 scene.addControl(scaleControl);
 

examples/tutorial/control/demo/meta.json

@@ -7,10 +7,12 @@
     {
       "filename": "amap.js",
       "title": "高德底图组件",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*yXzQRYcGTyoAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "mapbox.js",
-      "title": "MapBox底图组件"
+      "title": "MapBox底图组件",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_SIYR50bbcoAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

examples/tutorial/control/index.en.md

@@ -2,3 +2,4 @@
 title: control
 order: 2
 ---
+How to use the map control

examples/tutorial/control/index.zh.md

@@ -2,5 +2,4 @@
 title: 组件
 order: 2
 ---
-
-
+如何使用组件

examples/tutorial/data/demo/line.js

@@ -1,37 +1,11 @@
-import { LineLayer, Scene } from '@antv/l7';
-const scene = new Scene({
+import { Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'mapbox',
-  style: 'light',
-  center: [ 102.602992, 23.107329 ],
-  zoom: 13
+  map: new GaodeMap({
+    style: 'light',
+    pitch: 0,
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
 });
-
-fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
-  .then(res => res.json())
-  .then(data => {
-    const layer =
-      new LineLayer({
-      })
-        .source(data)
-        .size(1)
-        .shape('line')
-        .color(
-          'ELEV',
-          [
-            '#E8FCFF',
-            '#CFF6FF',
-            '#A1E9ff',
-            '#65CEF7',
-            '#3CB1F0',
-            '#2894E0',
-            '#1772c2',
-            '#105CB3',
-            '#0D408C',
-            '#002466'
-          ].reverse()
-        );
-    scene.addLayer(layer);
-
-  });

examples/tutorial/data/demo/meta.json

@@ -6,8 +6,8 @@
   "demos": [
     {
       "filename": "line.js",
-      "title": "线图层",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+      "title": "json数据"",
+      "screenshot": ""
     }
   ]
 }

examples/tutorial/data/index.en.md

@@ -2,3 +2,5 @@
 title: Data
 order: 1
 ---
+
+coming soon ……

examples/tutorial/data/index.zh.md

@@ -2,3 +2,4 @@
 title: 数据
 order: 1
 ---
+在路上 ……

examples/tutorial/map/demo/amap.js

@@ -1,9 +1,11 @@
 import { Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'dark',
-  center: [ 121.40, 31.258134 ],
-  zoom: 5
+  map: new GaodeMap({
+    style: 'light',
+    pitch: 0,
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
 });

examples/tutorial/map/demo/mapbox.js

@@ -1,10 +1,11 @@
 import { Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'mapbox',
-  style: 'light',
-  center: [ -97.119140625, 38.75408327579141 ],
-  zoom: 2
+  map: new Mapbox({
+    style: 'light',
+    pitch: 0,
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
 });
-

examples/tutorial/map/demo/meta.json

@@ -7,12 +7,12 @@
     {
       "filename": "amap.js",
       "title": "高德底图",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*F0JPSoLcSesAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "mapbox.js",
       "title": "MapBox底图",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_SIYR50bbcoAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

examples/tutorial/map/index.en.md

@@ -2,5 +2,5 @@
 title: map
 order: 0
 ---
-初始 L7 地图实例
 
+how to  use L7 Initialize third-party maps

examples/tutorial/map/index.zh.md

@@ -1,9 +1,7 @@
 ---
 title: 地图
 order: 0
-redirect_from:
-  - /zh/tutorial
 ---
-初始 L7 地图实例
+介绍如何初始化一个第三方底图
 
 

examples/tutorial/marker/demo/amap.js

@@ -0,0 +1,21 @@
+import { Scene, Marker, Popup } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    style: 'light',
+    pitch: 0,
+    center: [ 121.4316962, 31.26082325 ],
+    zoom: 12.056
+  })
+});
+// 创建默认 marker
+const popup = new Popup({
+  offsets: [ 0, 20 ]
+}).setText('hello');
+
+const marker = new Marker()
+  .setLnglat([ 121.4316962, 31.26082325 ])
+  .setPopup(popup);
+
+scene.addMarker(marker);

examples/tutorial/marker/demo/mapbox.js

@@ -0,0 +1,17 @@
+import { Scale, Zoom, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'light',
+    pitch: 0,
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
+});
+
+const zoomControl = new Zoom();
+const scaleControl = new Scale();
+scene.addControl(zoomControl);
+scene.addControl(scaleControl);
+

examples/tutorial/marker/demo/meta.json

@@ -0,0 +1,18 @@
+{
+  "title": {
+    "zh": "地图",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "amap.js",
+      "title": "添加默认Marker",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Gzj7SYk-vdEAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "mapbox.js",
+      "title": "MapBox底图组件",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_SIYR50bbcoAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

examples/tutorial/marker/index.en.md

@@ -0,0 +1,5 @@
+---
+title: control
+order: 2
+---
+add  Rich text  annotation  to scene

examples/tutorial/marker/index.zh.md

@@ -0,0 +1,5 @@
+---
+title: Marker
+order: 2
+---
+通过添加dom实现富文本地图标注

package.json

@@ -114,7 +114,7 @@
     "worker-loader": "^2.0.0"
   },
   "scripts": {
-    "start": "npm run site:develop",
+    "start": "npm run site:clean && npm run site:develop",
     "site:develop": "BABEL_ENV=site gatsby develop --open -H 0.0.0.0",
     "site:build": "npm run site:clean && BABEL_ENV=site gatsby build --prefix-paths",
     "site:clean": "gatsby clean",