Your user agent does not support the HTML5 Video element.
-2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档， +2.0.beta 版本目前有些功能还未完善，1 月 6 号我们正式版，将支持 1.x 版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档， 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html) ## 核心特性 - 🌏 数据驱动可视化展示 数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。 @@ -34,34 +32,34 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源 🌏 简单灵活的数据接入 -支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。 +支持 CSV，JSON，geojson 等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。 - 🌏 多地图底图支持，支持离线内网部署 +🌏 多地图底图支持，支持离线内网部署 高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。 ## 支持丰富的图表类型 ### 点图层 - - - 气泡图 - - 散点图 - - 符号地图 - - 3D柱状地图 - - 聚合地图 - - 复合图表地图 - - 自定义Marker + +- 气泡图 +- 散点图 +- 符号地图 +- 3D 柱状地图 +- 聚合地图 +- 复合图表地图 +- 自定义 Marker ### 线图层 - 路径地图 -- 弧线，支持2D弧线、3D弧线以及大圆航线 +- 弧线，支持 2D 弧线、3D 弧线以及大圆航线 - 等值线 ### 面图层 - 填充图 -- 3D填充图 +- 3D 填充图 ### 热力图 @@ -70,6 +68,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源 - 网格热力图 ### 栅格地图 + - 图片 - Raster @@ -77,5 +76,4 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源  - 更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。 diff --git a/docs/api/l7.zh.md b/docs/api/l7.zh.md index 84b12d1368..8d9fa3d06c 100644 --- a/docs/api/l7.zh.md +++ b/docs/api/l7.zh.md @@ -9,7 +9,7 @@ redirect_from: 2.0.beta 版本目前有些功能还未完善， -⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档， +⚠️ 1 月 6 号 正式版发版，将支持 1.x 版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档， ⚠️ 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html) @@ -24,7 +24,6 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源 ## 核心特性 - 🌏 数据驱动可视化展示 数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。 @@ -35,34 +34,34 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源 🌏 简单灵活的数据接入 -支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。 +支持 CSV，JSON，geojson 等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。 - 🌏 多地图底图支持，支持离线内网部署 +🌏 多地图底图支持，支持离线内网部署 高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。 ## 支持丰富的图表类型 ### 点图层 - - - 气泡图 - - 散点图 - - 符号地图 - - 3D柱状地图 - - 聚合地图 - - 复合图表地图 - - 自定义Marker + +- 气泡图 +- 散点图 +- 符号地图 +- 3D 柱状地图 +- 聚合地图 +- 复合图表地图 +- 自定义 Marker ### 线图层 - 路径地图 -- 弧线，支持2D弧线、3D弧线以及大圆航线 +- 弧线，支持 2D 弧线、3D 弧线以及大圆航线 - 等值线 ### 面图层 - 填充图 -- 3D填充图 +- 3D 填充图 ### 热力图 @@ -71,6 +70,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源 - 网格热力图 ### 栅格地图 + - 图片 - Raster @@ -78,11 +78,10 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源  - 更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。 ### 技术支持服务群 + L7 相关技术问题，需求反馈，我们会及时响应 -  diff --git a/docs/api/l7stable.en.md b/docs/api/l7stable.en.md index 14df77bff5..36217a0996 100644 --- a/docs/api/l7stable.en.md +++ b/docs/api/l7stable.en.md @@ -3,11 +3,9 @@ title: 1.x stable order: 1 --- +## L7 1.x 版本 - -## L7 1.x 版本 - - ## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html) +## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html) 目前 1.x 版本最新版本为  @@ -19,9 +17,10 @@ order: 1 ### npm 安装使用 -会默认安装 1.x的最新版本，2.0正式版本发布后才会默认2.0版本 +会默认安装 1.x 的最新版本，2.0 正式版本发布后才会默认 2.0 版本 + ``` -npm install @antv/l7 +npm install @antv/l7 ``` @@ -31,9 +30,6 @@ npm install @antv/l7 - [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 版的所有功能. - - -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/l7stable.zh.md index 9316115f55..073535baff 100644 --- a/docs/api/l7stable.zh.md +++ b/docs/api/l7stable.zh.md @@ -3,11 +3,9 @@ title: 1.x 稳定版 order: 1 --- +## L7 1.x 版本 - -## L7 1.x 版本 - - ## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html) +## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html) 目前 1.x 版本最新版本为  @@ -19,9 +17,10 @@ order: 1 ### npm 安装使用 -会默认安装 1.x的最新版本，2.0正式版本发布后才会默认2.0版本 +会默认安装 1.x 的最新版本，2.0 正式版本发布后才会默认 2.0 版本 + ``` -npm install @antv/l7 +npm install @antv/l7 ``` @@ -31,6 +30,4 @@ npm install @antv/l7 - [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/map.en.md b/docs/api/map.en.md index 01e1fad38a..678c72209a 100644 --- a/docs/api/map.en.md +++ b/docs/api/map.en.md @@ -5,12 +5,12 @@ order: 2 # 简介 -L7 专注数据可视化层数据表达，目前L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox两种。 -L7 在内部解决了不同底图地图直接的差异，同时L7层面统一管理地图的操作方法。 +L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox 两种。 +L7 在内部解决了不同底图地图直接的差异，同时 L7 层面统一管理地图的操作方法。 ## Map -### 引入Map +### 引入 Map ```javascropt @@ -21,20 +21,18 @@ L7 在内部解决了不同底图地图直接的差异，同时L7层面统一管 ### 实例化 -⚠️ 使用地图申请地图token，L7 内部设置了默认token，仅供测试使用 +⚠️ 使用地图申请地图 token，L7 内部设置了默认 token，仅供测试使用 #### 高德地图实例化 ```javascript - - const L7AMap = new GaodeMap({ - pitch: 35.210526315789465, - style: 'dark', - center: [ 104.288144, 31.239692 ], - zoom: 4.4, - token:'xxxx - token' - }) - +const L7AMap = new GaodeMap({ + pitch: 35.210526315789465, + style: 'dark', + center: [104.288144, 31.239692], + zoom: 4.4, + token: 'xxxx - token', +}); ``` #### Mapbox 地图实例化 @@ -55,53 +53,45 @@ const scene = new Scene({ ### 传入外部实例 -为了支持已有地图项目快速接入L7的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用Scene初始化地图 +为了支持已有地图项目快速接入 L7 的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用 Scene 初始化地图 -⚠️ scene id 参数需要地图的Map实例是同个容器。 +⚠️ scene id 参数需要地图的 Map 实例是同个容器。 -⚠️ 传入地图实例需要自行引入相关地图的API +⚠️ 传入地图实例需要自行引入相关地图的 API #### 传入高德地图实例 ```javascript - const map = new AMap.Map('map', { - viewMode: '3D', - resizeEnable: true, // 是否监控地图容器尺寸变化 - zoom: 11, // 初始化地图层级 - center: [116.397428, 39.90923], // 初始化地图中心点 - }); - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - mapInstance: map, - }), - }); - +const map = new AMap.Map('map', { + viewMode: '3D', + resizeEnable: true, // 是否监控地图容器尺寸变化 + zoom: 11, // 初始化地图层级 + center: [116.397428, 39.90923], // 初始化地图中心点 +}); +const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + mapInstance: map, + }), +}); ``` -#### 传入Mapbox 地图实例 +#### 传入 Mapbox 地图实例 ```javascript +mapboxgl.accessToken = + 'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ'; +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 +}); - mapboxgl.accessToken = - 'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ'; - 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, - }), - }); +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + mapInstance: map, + }), +}); ``` - - - - - - diff --git a/docs/api/map.zh.md b/docs/api/map.zh.md index 61def5da7c..9e09896f0a 100644 --- a/docs/api/map.zh.md +++ b/docs/api/map.zh.md @@ -5,12 +5,12 @@ order: 2 # 简介 -L7 专注数据可视化层数据表达，目前L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox两种。= -L7 在内部解决了不同底图地图直接的差异，同时L7层面统一管理地图的操作方法。 +L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox 两种。= +L7 在内部解决了不同底图地图直接的差异，同时 L7 层面统一管理地图的操作方法。 ## Map -### 引入Map +### 引入 Map ```javascropt @@ -21,20 +21,18 @@ L7 在内部解决了不同底图地图直接的差异，同时L7层面统一管 ### 实例化 -⚠️ 使用地图申请地图token，L7 内部设置了默认token，仅供测试使用 +⚠️ 使用地图申请地图 token，L7 内部设置了默认 token，仅供测试使用 #### 高德地图实例化 ```javascript - - const L7AMap = new GaodeMap({ - pitch: 35.210526315789465, - style: 'dark', - center: [ 104.288144, 31.239692 ], - zoom: 4.4, - token:'xxxx - token' - }) - +const L7AMap = new GaodeMap({ + pitch: 35.210526315789465, + style: 'dark', + center: [104.288144, 31.239692], + zoom: 4.4, + token: 'xxxx - token', +}); ``` #### Mapbox 地图实例化 @@ -55,53 +53,45 @@ const scene = new Scene({ ### 传入外部实例 -为了支持已有地图项目快速接入L7的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用Scene初始化地图 +为了支持已有地图项目快速接入 L7 的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用 Scene 初始化地图 -⚠️ scene id 参数需要地图的Map实例是同个容器。 +⚠️ scene id 参数需要地图的 Map 实例是同个容器。 -⚠️ 传入地图实例需要自行引入相关地图的API +⚠️ 传入地图实例需要自行引入相关地图的 API #### 传入高德地图实例 ```javascript - const map = new AMap.Map('map', { - viewMode: '3D', - resizeEnable: true, // 是否监控地图容器尺寸变化 - zoom: 11, // 初始化地图层级 - center: [116.397428, 39.90923], // 初始化地图中心点 - }); - const scene = new Scene({ - id: 'map', - map: new GaodeMap({ - mapInstance: map, - }), - }); - +const map = new AMap.Map('map', { + viewMode: '3D', + resizeEnable: true, // 是否监控地图容器尺寸变化 + zoom: 11, // 初始化地图层级 + center: [116.397428, 39.90923], // 初始化地图中心点 +}); +const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + mapInstance: map, + }), +}); ``` -#### 传入Mapbox 地图实例 +#### 传入 Mapbox 地图实例 ```javascript +mapboxgl.accessToken = + 'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ'; +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 +}); - mapboxgl.accessToken = - 'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ'; - 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, - }), - }); +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + mapInstance: map, + }), +}); ``` - - - - - - diff --git a/docs/api/scene.en.md b/docs/api/scene.en.md index 314e909838..11d6c127b8 100644 --- a/docs/api/scene.en.md +++ b/docs/api/scene.en.md @@ -15,7 +15,7 @@ const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'dark', - center: [ 110.770672, 34.159869 ], + center: [110.770672, 34.159869], pitch: 45, }), }); @@ -25,75 +25,73 @@ const scene = new L7.Scene({ id: 'map', map: new L7.GaodeMap({ style: 'dark', - center: [ 110.770672, 34.159869 ], + center: [110.770672, 34.159869], pitch: 45, }), }); ``` - ## Map - L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理 - 只需要通过Scene传入地图配置项即可。 +L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过 Scene 统一创建，创建管理 +只需要通过 Scene 传入地图配置项即可。 -目前L7 支持两种地图底图 +目前 L7 支持两种地图底图 - 高德地图 国内业务场景 合规中国地图 - MapBox 国际业务，或者内网离线部署场景 +### map -### map - -可以通过scene map 属性获取 map实例 +可以通过 scene map 属性获取 map 实例 ```javascript -const map = scene.map - +const map = scene.map; ``` -为了统一不同底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。 + +为了统一不同底图之前的接口差异 L7 在 scene 层对 map 的方法做了统一，因此一些地图的操作方法可以通过 scene 调用这样，切换不同底图时保证表现一致。 示例代码 ```javascript -const scene =new L7.Scene({ +const scene = new L7.Scene({ id: 'map', map: new L7.GaodeMap({ style: 'dark', - center: [ 110.770672, 34.159869 ], + center: [110.770672, 34.159869], pitch: 45, }), -}) +}); ``` - ### 构造函数 -**Scene** - - - +**Scene** ## 配置项 ### 地图配置项 ### id + 需传入 dom 容器或者容器 id {domObject || string} [必选] - ### zoom -地图初始显示级别 {number} （0-22） + +地图初始显示级别 {number} （0-22） ### center + 地图初始中心经纬度 {Lnglat} ### pitch + 地图初始俯仰角度 {number} default 0 ### style 简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用 + - dark - light - normal @@ -103,62 +101,69 @@ const scene =new L7.Scene({ 比如高德地图 ```javascript - { - style:'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true' // 设置方法和高德地图一致 - } - +{ + style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致 +} ``` - ### minZoom -地图最小缩放等级 {number} default 0 (0-22) + +地图最小缩放等级 {number} default 0 (0-22) ### maxZoom -地图最大缩放等级 {number} default 22 (0-22) + +地图最大缩放等级 {number} default 22 (0-22) ### rotateEnable + 地图是否可旋转 {Boolean} default true - - - ## 方法 ### getZoom + 获取当前缩放等级 ```javascript scene.getZoom(); ``` -return {float} 当前缩放等级 +return {float} 当前缩放等级 ### getLayers() + 获取所有的地图图层 + ```javascript scene.getLayers(); ``` -return 图层数组 {Array} - +return 图层数组 {Array} ### getCenter() + 获取地图中心点 + ```javascript -scene.getCenter() +scene.getCenter(); ``` return {Lnglat} :地图中心点 ### getSize() + 获取地图容器大小 + ```javascript -scene.getSize() +scene.getSize(); ``` + return { Object } 地图容器的 width,height ### getPitch() + 获取地图俯仰角 + ```javascript scene.getPitch(); ``` @@ -167,9 +172,9 @@ return {number} pitch ### setMapStyle -参数：`style` {string} 地图样式 具体样式格式和各底图设置方法一致 +参数：`style` {string} 地图样式 具体样式格式和各底图设置方法一致 -L7 内置了三种地图样式，AMAP 和MapBox都适用 +L7 内置了三种地图样式，AMAP 和 MapBox 都适用 - light - dark @@ -183,150 +188,163 @@ L7 内置了三种地图样式，AMAP 和MapBox都适用 scene.setMapStyle('light'); // mapbox 主题设置 -scene.setMapStyle('mapbox://styles/mapbox/streets-v11') - -// AMap -scene.setMapStyle('amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true') +scene.setMapStyle('mapbox://styles/mapbox/streets-v11'); +// AMap +scene.setMapStyle( + 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true', +); ``` ### setCenter() + 设置地图中心点坐标 ```javascript -scene.setCenter([lng,lat]) +scene.setCenter([lng, lat]); ``` -参数：`center` {LngLat} 地图中心点 - +参数：`center` {LngLat} 地图中心点 ### setZoomAndCenter + 设置地图等级和中心 + ```javascript -scene.setZoomAndCenter(zoom,center) +scene.setZoomAndCenter(zoom, center); ``` 参数：zoom {number}