diff --git a/docs/api/changelog.en.md b/docs/api/changelog.en.md new file mode 100644 index 0000000000..6ea9806908 --- /dev/null +++ b/docs/api/changelog.en.md @@ -0,0 +1,36 @@ +--- +title: ChangeLog +order: 10 +--- + +## 2020.01.06 2.0 正式版 + +###✨ Features +• 新增弧线图，路径图动画功能 +• 新增气泡图水波动画功能 +• 新增聚合地图 +• 新增文本标注，支持避让 +• 新增城市建筑图层 +• 新增栅格地图，支持卫星遥感数据可视化 +• 新增图层交互事件 + +### 🍏 Improvements + +• Marker 支持事件和自定义数据 +• 弧线支持虚线样式 +• 面图层支持，文本标注，气泡图效果 +• 重构了文档结构 +• source 支持 map,join,filter 数据处理支持 +• source 支持数据更新 +• 支持 blend 效果配置 +• 支持通过地图实例初始化地图 +• 官网新增所有图表概览页面 + +### 🐞 Bug Fixes + +• 修复容器 resize 不能正常响应 +• 修复 babel 打包问题 +• 修复地图组件加载报错问题 +• 修复样式配置 strokeColor- stroke + +## 2019.11.22 2.0beta diff --git a/docs/api/changelog.zh.md b/docs/api/changelog.zh.md new file mode 100644 index 0000000000..6ecc63b24d --- /dev/null +++ b/docs/api/changelog.zh.md @@ -0,0 +1,36 @@ +--- +title: 发布日志 +order: 10 +--- + +## 2020.01.06 2.0 正式版 + +###✨ Features +• 新增弧线图，路径图动画功能 +• 新增气泡图水波动画功能 +• 新增聚合地图 +• 新增文本标注，支持避让 +• 新增城市建筑图层 +• 新增栅格地图，支持卫星遥感数据可视化 +• 新增图层交互事件 + +### 🍏 Improvements + +• Marker 支持事件和自定义数据 +• 弧线支持虚线样式 +• 面图层支持，文本标注，气泡图效果 +• 重构了文档结构 +• source 支持 map,join,filter 数据处理支持 +• source 支持数据更新 +• 支持 blend 效果配置 +• 支持通过地图实例初始化地图 +• 官网新增所有图表概览页面 + +### 🐞 Bug Fixes + +• 修复容器 resize 不能正常响应 +• 修复 babel 打包问题 +• 修复地图组件加载报错问题 +• 修复样式配置 strokeColor- stroke + +## 2019.11.22 2.0beta diff --git a/docs/api/l7.en.md b/docs/api/l7.en.md index 66c396dd7e..3a5146ee1b 100644 --- a/docs/api/l7.en.md +++ b/docs/api/l7.en.md @@ -16,7 +16,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源

Your user agent does not support the HTML5 Video element.

-2.0.beta 版本目前有些功能还未完善，1 月 6 号我们正式版，将支持 1.x 版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档， +✨ 2020.01.06 2.0 版本正式发布 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html) diff --git a/docs/api/l7.zh.md b/docs/api/l7.zh.md index 8d9fa3d06c..2a38cf9731 100644 --- a/docs/api/l7.zh.md +++ b/docs/api/l7.zh.md @@ -7,9 +7,7 @@ redirect_from: # L7 地理空间数据可视分析引擎 -2.0.beta 版本目前有些功能还未完善， - -⚠️ 1 月 6 号 正式版发版，将支持 1.x 版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档， +✨ 2020.01.06 2.0 版本正式发布 ⚠️ 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html) diff --git a/docs/api/l7stable.en.md b/docs/api/l7history.en.md similarity index 56% rename from docs/api/l7stable.en.md rename to docs/api/l7history.en.md index 36217a0996..c9267ca6a0 100644 --- a/docs/api/l7stable.en.md +++ b/docs/api/l7history.en.md @@ -1,6 +1,6 @@ --- -title: 1.x stable -order: 1 +title: 1.x history +order: 9 --- ## L7 1.x 版本 @@ -17,8 +17,6 @@ order: 1 ### npm 安装使用 -会默认安装 1.x 的最新版本，2.0 正式版本发布后才会默认 2.0 版本 - ``` npm install @antv/l7 @@ -29,7 +27,3 @@ npm install @antv/l7 - [1.x 官网](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html) - [1.x 文档](https://www.yuque.com/antv/l7/vgo25g) - -L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能. - -L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能. diff --git a/docs/api/l7stable.zh.md b/docs/api/l7history.zh.md similarity index 73% rename from docs/api/l7stable.zh.md rename to docs/api/l7history.zh.md index 073535baff..3ef12f52c0 100644 --- a/docs/api/l7stable.zh.md +++ b/docs/api/l7history.zh.md @@ -1,6 +1,6 @@ --- -title: 1.x 稳定版 -order: 1 +title: 1.x 历史版本 +order: 9 --- ## L7 1.x 版本 @@ -12,7 +12,7 @@ order: 1 #### CDN 在线使用连接为 ```html - + ``` ### npm 安装使用 @@ -29,5 +29,3 @@ npm install @antv/l7 - [1.x 官网](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html) - [1.x 文档](https://www.yuque.com/antv/l7/vgo25g) - -L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能. diff --git a/docs/tutorial/quickstart.zh.md b/docs/tutorial/quickstart.zh.md index e6509f1741..5e20272393 100644 --- a/docs/tutorial/quickstart.zh.md +++ b/docs/tutorial/quickstart.zh.md @@ -7,7 +7,7 @@ redirect_from: # L7 -Current version: ![L7 2.0版本号](https://badgen.net/npm/v/@antv/l7/beta) +Current version: ![L7 2.0版本号](https://badgen.net/npm/v/@antv/l7) ## 使用方法 @@ -156,7 +156,21 @@ export default class AMapExample extends React.Component { 更多React使用 [示例查看](https://github.com/antvis/L7/tree/master/stories) -### Vue 欢迎补充 -[1.x Vue 使用](https://codesandbox.io/s/l7-vue1xdemo-wknsz) -### Html -[2.0版本 HTML 使用模板](https://codesandbox.io/s/l7htmltemplate-vp2lp) +## 不同项目使用模板 + +不同项目模板在CodeSandbox你可以预览，也可以下载到本地 + +### React + +[地址](https://codesandbox.io/s/l720react-jfwyz) + +### Vue + +[地址](https://codesandbox.io/s/l720vue-uef1x) + +### Angular + +[地址](https://codesandbox.io/s/angulartest-chpff) + +### HTML CDN +[地址](https://codesandbox.io/s/l7cdndemo-gfg9m) diff --git a/examples/gallery/basic/demo/animate_line.js b/examples/gallery/basic/demo/animate_line.js new file mode 100644 index 0000000000..9df1b86fdd --- /dev/null +++ b/examples/gallery/basic/demo/animate_line.js @@ -0,0 +1,35 @@ +import { Scene, LineLayer } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + center: [ -74.006, 40.7128 ], + zoom: 15, + style: 'dark' + }) +}); + +fetch( + 'https://gw.alipayobjects.com/os/basement_prod/5592c737-1c70-4d6b-82c1-e74e5a019b04.json' +) + .then(res => res.json()) + .then(data => { + const lineLayer = new LineLayer() + .source(data, { + parser: { + type: 'json', + coordinates: 'path' + } + }) + .size(3) + .shape('line') + .color('color', v => { + return `rgb(${v[0]})`; + }) + .animate({ + interval: 0.5, + trailLength: 0.4, + duration: 4 + }); + scene.addLayer(lineLayer); + }); diff --git a/examples/line/path/demo/animate.js b/examples/line/path/demo/animate.js new file mode 100644 index 0000000000..aad0b89846 --- /dev/null +++ b/examples/line/path/demo/animate.js @@ -0,0 +1,30 @@ +import { Scene, LineLayer } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + center: [ 120.19382669582967, 30.258134 ], + pitch: 0, + zoom: 16, + style: 'dark' + }) +}); + +fetch( + 'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json' +) + .then(res => res.json()) + .then(data => { + const layer = new LineLayer() + .source(data) + .size(1) + .shape('line') + .color('#ff893a') + .animate({ + interval: 0.4, + duration: 1, + trailLength: 0.8 + }); + scene.addLayer(layer); + }); diff --git a/examples/point/cluster/demo/cluster.js b/examples/point/cluster/demo/cluster.js new file mode 100644 index 0000000000..4a49edd008 --- /dev/null +++ b/examples/point/cluster/demo/cluster.js @@ -0,0 +1,34 @@ +import { Scene, PointLayer } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + center: [ 120.19382669582967, 30.258134 ], + pitch: 0, + style: 'dark', + zoom: 3 + }) +}); + +fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json') + .then(res => res.json()) + .then(data => { + const pointLayer = new PointLayer({}) + .source(data, { + cluster: true + }) + .shape('circle') + .scale('point_count', { + type: 'quantile' + }) + .size('point_count', [ 5, 10, 15, 20, 25 ]) + .animate(false) + .color('yellow') + .style({ + opacity: 0.5, + strokeWidth: 1 + }); + + scene.addLayer(pointLayer); + }); diff --git a/examples/point/cluster/demo/meta.json b/examples/point/cluster/demo/meta.json new file mode 100644 index 0000000000..8f9abfb277 --- /dev/null +++ b/examples/point/cluster/demo/meta.json @@ -0,0 +1,14 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "cluster.js", + "title": "聚合图", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ" + } + + ] +} diff --git a/examples/point/cluster/index.en.md b/examples/point/cluster/index.en.md new file mode 100644 index 0000000000..4ad8c9e038 --- /dev/null +++ b/examples/point/cluster/index.en.md @@ -0,0 +1,4 @@ +--- +title: Cluster Map +order: 1 +--- diff --git a/examples/point/cluster/index.zh.md b/examples/point/cluster/index.zh.md new file mode 100644 index 0000000000..ebcd22dcd0 --- /dev/null +++ b/examples/point/cluster/index.zh.md @@ -0,0 +1,4 @@ +--- +title: "聚合图" +order: 1 +--- diff --git a/examples/point/dot/index.zh.md b/examples/point/dot/index.zh.md index b28d7a59de..b7e475be42 100644 --- a/examples/point/dot/index.zh.md +++ b/examples/point/dot/index.zh.md @@ -1,4 +1,4 @@ --- -title: "亮度图" +title: 亮度图 order: 1 --- diff --git a/examples/point/text/demo/meta.json b/examples/point/text/demo/meta.json new file mode 100644 index 0000000000..6ef3d3e083 --- /dev/null +++ b/examples/point/text/demo/meta.json @@ -0,0 +1,19 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "point_text.js", + "title": "点数据标注", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ" + }, + { + "filename": "polygon_text.js", + "title": "面数据标注", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ" + } + + ] +} diff --git a/examples/point/text/demo/point_text.js b/examples/point/text/demo/point_text.js new file mode 100644 index 0000000000..ffba83f146 --- /dev/null +++ b/examples/point/text/demo/point_text.js @@ -0,0 +1,39 @@ +import { Scene, PointLayer } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + center: [ 120.19382669582967, 30.258134 ], + pitch: 0, + style: 'light', + zoom: 3 + }) +}); + +fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') + .then(res => res.json()) + .then(data => { + const pointLayer = new PointLayer({}) + .source(data.list, { + parser: { + type: 'json', + x: 'j', + y: 'w' + } + }) + .shape('m', 'text') + .size(18) + .color('w', [ '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac' ]) + .style({ + textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] + spacing: 2, // 字符间距 + padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 + stroke: 'red', // 描边颜色 + strokeWidth: 1, // 描边宽度 + strokeOpacity: 1.0 + }); + + scene.addLayer(pointLayer); + }); diff --git a/examples/point/text/demo/polygon_text.js b/examples/point/text/demo/polygon_text.js new file mode 100644 index 0000000000..5ae1ae1e0c --- /dev/null +++ b/examples/point/text/demo/polygon_text.js @@ -0,0 +1,28 @@ +import { Scene, PolygonLayer } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + pitch: 0, + style: 'light', + center: [ -96, 37.8 ], + zoom: 3 + }) +}); + +fetch( + 'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json' +) + .then(res => res.json()) + .then(data => { + const layer = new PolygonLayer({}) + .source(data) + .color('blue') + .shape('name', 'text') + .size(18) + .style({ + opacity: 0.8 + }); + scene.addLayer(layer); + }); diff --git a/examples/point/text/index.en.md b/examples/point/text/index.en.md new file mode 100644 index 0000000000..0db29cdff9 --- /dev/null +++ b/examples/point/text/index.en.md @@ -0,0 +1,4 @@ +--- +title: label +order: 1 +--- diff --git a/examples/point/text/index.zh.md b/examples/point/text/index.zh.md new file mode 100644 index 0000000000..65c4eeabe3 --- /dev/null +++ b/examples/point/text/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 文本标注 +order: 1 +--- diff --git a/examples/polygon/fill/demo/fill.js b/examples/polygon/fill/demo/fill.js index c316b593e7..06feefed18 100644 --- a/examples/polygon/fill/demo/fill.js +++ b/examples/polygon/fill/demo/fill.js @@ -42,7 +42,7 @@ fetch( }) .source(data) .color('#fff') - .size(0.3) + .size(0.8) .style({ opacity: 1 }); diff --git a/examples/polygon/fill/demo/meta.json b/examples/polygon/fill/demo/meta.json index bed5c210ca..2ad784d30f 100644 --- a/examples/polygon/fill/demo/meta.json +++ b/examples/polygon/fill/demo/meta.json @@ -9,6 +9,11 @@ "title": "全国地图行政区划", "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*IhtZRKYmPuMAAAAAAAAAAABkARQnAQ" }, + { + "filename": "usa.js", + "title": "地图交互", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*HfZ7SKrS9fcAAAAAAAAAAABkARQnAQ" + }, { "filename": "fill.js", "title": "连续填充图", diff --git a/examples/polygon/fill/demo/population.js b/examples/polygon/fill/demo/population.js index 4e89fda2fa..e014c809a4 100644 --- a/examples/polygon/fill/demo/population.js +++ b/examples/polygon/fill/demo/population.js @@ -56,11 +56,10 @@ Promise.all([ }) .source(world) .color('#fff') - .size(0.3) + .size(0.8) .style({ opacity: 1 }); - scene.addLayer(layer); scene.addLayer(layer2); }); diff --git a/examples/polygon/fill/demo/usa.js b/examples/polygon/fill/demo/usa.js new file mode 100644 index 0000000000..f458053bd2 --- /dev/null +++ b/examples/polygon/fill/demo/usa.js @@ -0,0 +1,61 @@ +import { Scene, PolygonLayer, LineLayer, Popup } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + pitch: 0, + style: 'light', + center: [ -96, 37.8 ], + zoom: 3 + }) +}); + +fetch( + 'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json' +) + .then(res => res.json()) + .then(data => { + const layer = new PolygonLayer({}) + .source(data) + .color( + 'density', d => { + return d > 1000 ? '#800026' : + d > 500 ? '#BD0026' : + d > 200 ? '#E31A1C' : + d > 100 ? '#FC4E2A' : + d > 50 ? '#FD8D3C' : + d > 20 ? '#FEB24C' : + d > 10 ? '#FED976' : + '#FFEDA0'; + } + ) + .shape('fill') + .active(true) + .style({ + opacity: 0.8 + }); + const layer2 = new LineLayer({ + zIndex: 2 + }) + .source(data) + .color('#fff') + .active(true) + .size(1) + .style({ + lineType: 'dash', + dashArray: [ 2, 2 ], + opacity: 1 + }); + scene.addLayer(layer); + scene.addLayer(layer2); + + layer.on('mousemove', e => { + const popup = new Popup({ + offsets: [ 0, 0 ] + }) + .setLnglat(e.lngLat) + .setHTML(`${e.feature.properties.name}: ${e.feature.properties.density}`); + scene.addPopup(popup); + }); + });