创建地图场景

``` 2. 初始化高德地图 ```javascript import { GaodeMap } from '@antv/l7-maps'; // 同样你也可以初始化一个 Mapbox 地图 const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 35.210526315789465, style: 'dark', center: [104.288144, 31.239692], zoom: 4.4, }), }); ``` 🌟 此时在页面上就会出现可交互的地图内容。 ### 绘制填充图地图初始化完成之后我们，那我们就可以往地图添加可视化数据了，这里我们以中国行政区区数据为例，如何可视化面数据。数据源：中国各省 [GeoJSON](https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.json) 数据。 1. 我们使用面图层来绘制行政区划数据，得到覆盖在地图表面的几何平面。 ```javascript import { PolygonLayer } from '@antv/l7'; const chinaPolygonLayer = new PolygonLayer({}) .source(data) .color('name', [ 'rgb(239,243,255)', 'rgb(189,215,231)', 'rgb(107,174,214)', 'rgb(49,130,189)', 'rgb(8,81,156)', ]); ``` 2. 图层创建完成之后我们需要将它添加到 `Scene` 中进行显示。 ```javascript scene.addLayer(chinaPolygonLayer); ``` ![image.png](https://gw.alipayobjects.com/mdn/rms_5e897d/afts/img/A*iUZVSYBtKnMAAAAAAAAAAAAAARQnAQ) 3. 简单的填充可视化还是不够直观，我们可以使用 `LineLayer` 和 `PointLayer` 增加行政区划描边和行政区划文字标注。 ![image.png](https://gw.alipayobjects.com/mdn/rms_5e897d/afts/img/A*Tf95Qp43Z6IAAAAAAAAAAAAAARQnAQ) 4. 添边界和文本标注之后可视化效果更加清晰。 [查看完整代码](https://codesandbox.io/s/l7-tianchongtujiaocheng-275ix?file=/index.js) ### 交互式填充图单纯的数据展现出来，并不能满足我的需求，我们可能需要查看每个区块的相关信息，或者添加一些高亮效果。 #### 默认高亮 `L7` 图层添加默认的高亮效果，默认的高亮效果可以改变颜色。 ```javascript chinaPolygonLayer.active(true); // 开启默认高亮效果 chinaPolygonLayer.active({ color: red }); // 开启并设置高亮颜色为红色 ``` | **![image.png](https://gw.alipayobjects.com/mdn/rms_5e897d/afts/img/A*vik-Q7frCMMAAAAAAAAAAAAAARQnAQ)** | **![image.png](https://gw.alipayobjects.com/mdn/rms_5e897d/afts/img/A*RJiaS498G4wAAAAAAAAAAAAAARQnAQ)** | | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | 默认蓝色高亮效果 | 更改高亮颜色 | #### 自定义高亮效果默认的高亮效果只能改变颜色，可能并不能满足我的需求，我们可能需要白色的描边，这能够实现吗，答案肯定是可以的。 1. 添加一个新的图层的作为高亮图层, 数据我们设置成空数据，形状设置成 `line` ```javascript const hightLayer = new LineLayer({ zIndex: 4, // 设置显示层级 name: 'hightlight', }) .source({ type: 'FeatureCollection', features: [], }) .shape('line') .size(2) .color('red'); scene.addLayer(hightLayer); ``` 2. 这样我们就可以监听需要高亮图层的鼠标事件，获取当前选中的数据，然后更新 `hightLayer` 既可实现描边高亮效果。 ```javascript chinaPolygonLayer.on('click', (feature) => { hightLayer.setData({ type: 'FeatureCollection', features: [feature.feature], }); }); ``` ![image.png](https://gw.alipayobjects.com/mdn/rms_5e897d/afts/img/A*fr9DTY54rhUAAAAAAAAAAAAAARQnAQ) 3. 为图层添加点击高亮红色描边效果到这里我们就学会了如何自定义高亮效果，这里提个小问题“如何实现双描边的高亮效果？” [查看示例](https://codesandbox.io/s/zidingyigaoliang-7vkso?file=/index.js) #### 添加信息 Popup 信息窗鼠标交互时，我们除了高亮显示划过的区域我们还需要信息区域相关的信息，这里 `L7` 提供了 `Popup` 组件用于在地图显示相关信息。引入对象 ```javascript import { Popup } from '@antv/l7'; ``` 我们可以通过对 Layer 监听鼠标事件，决定何时显示Popup, ```javascript layer.on('mousemove', (e) => { const popup = new Popup({ offsets: [0, 0], closeButton: false, }) .setLnglat(e.lngLat) .setHTML( `地区: ${e.feature.properties.name}
确诊数: ${e.feature.properties.case}`, ); scene.addPopup(popup); }); ``` ![image.png](https://gw.alipayobjects.com/mdn/rms_5e897d/afts/img/A*2isvTq-s0OMAAAAAAAAAAAAAARQnAQ) [查看示例](https://codesandbox.io/s/popup-x3j00?file=/index.js) ### 添加图例上面我们已经学会了如何可视化数据，在地图我们将不同的区域可视为不同颜色，但是如何读懂不同的颜色表达的什么含义，我们需要添加一个图例。 `L7` 目前没有默认的图例组件，需要自己创建图例，这里我们介绍通过 `L7 Control` 基类创建图例组件，当然你也可以实现一个独立的图例 `DOM` 组件。 `L7` 提供了默认的 `Zoom`，`Scale`，`Logo` 等组件这些组件都基于同一个基类 `Control` 组件，今天我们基于 `Control` 实现自定义图例组件。 1. 引入 `Control` 基类 ```javascript import { Control } from '@antv/l7'; ``` 2. 初始化基类 ```javascript const legend = new Control({ position: 'bottomright', }); ``` 3. 设置 `Control` 展示内容通过扩展 `Control` 的 `onAdd` 方法我们自由定制 `Control` 需要展示内容和交互。 ```javascript legend.onAdd = function () { var el = document.createElement('div'); el.className = 'infolegend legend'; var grades = [0, 10, 20, 50, 100, 200, 500]; for (var i = 0; i < grades.length; i++) { el.innerHTML += ' ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+'); } return el; }; ``` 4. 添加到地图 ```javascript scene.addControl(legend); ``` ![image.png](https://gw.alipayobjects.com/mdn/rms_5e897d/afts/img/A*7VNfRodZ_8AAAAAAAAAAAAAAARQnAQ) [查看示例](https://codesandbox.io/s/tuli-keov0?file=/index.js) 这里我们介绍了，如何通过自己定义 `Control` 的方式实现图例，通过自定义 `Control` 我们很多地图组件，如全屏组件，定位组件，很多业务上需要的组件，有幸运的同学们可以动手尝试一下了。 ### 时序变化图上面我们可视化的是一个静态数据，但是很多时候我们的数据是随时间变化的，如何进行时序数据的可视化，这里我们介绍两种时序数据可视化方法。 #### 准备数据地理数据：[美国各州行政区划数据](https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json) 属性数据：[0908-1008近30天的美国各州新冠确诊数据](https://gw.alipayobjects.com/os/bmw-prod/bed5e504-04d5-4d96-a335-163e038dc65a.csv)。 #### 更新数据随着时间的变化，数据肯定发生变化，因此最简单的方式我每个时间更新一下数据即可. ```javascript chinaPolygonLayer.setData(newData); ``` [完整示例](https://codesandbox.io/s/shujugengxin-kgwy0?file=/index.js) #### 更新颜色时序数据的更新很大一部分场景是属性数据的更新，比如各省不同年份的 `GDP` 数据，空间数据本身没有发生变化（没有增加或者减少也没有更新边界）这种情况对面图层来说可能只需要根据新的数据更新一下就可以实现。当然通过 `setData` 也可以实现。`L7` 内部实现机制来看更新 `color` 的效率要比 `setData` 效率高的多。通过更新颜色映射字段，实现数据显示的更新。 ```javascript const setColor = (d) => { return d > 100000 ? color[7] : d > 80000 ? color[6] : d > 40000 ? color[5] : d > 20000 ? color[4] : d > 10000 ? color[3] : d > 5000 ? color[2] : d > 1000 ? color[1] : color[0]; }; chinaPolygonLayer.color('2020-09-01', setColor); chinaPolygonLayer.color('2020-09-02', setColor); ``` 注意更新颜色生效，需要调用 `Scene.render();`。 [查看示例](https://codesandbox.io/s/shujugengxin-forked-0zul8?file=/index.js) ### 添加地图标注 `L7` 基础 `WebGL` 实现绘制简单的点、线、面，比较简单，如果要实现比较复杂的地图标注就比较困难，为了解决这个问题 `L7` 添加了 `Marker` 组件，你可以基于 `DOM` 实现各种复杂的标注。 ```javascript import { Marker } from '@antv/l7'; const el = document.createElement('label'); el.className = 'labelclass'; el.textContent = nodes[i].v + '℃'; el.style.background = 'red'; el.style.borderColor = '#fff; const marker = new Marker({ element: el}) .setLnglat({ lng: 112, lat: 30}); scene.addMarker(marker); ``` ![image.png](https://gw.alipayobjects.com/mdn/rms_5e897d/afts/img/A*8X9uRZPI3-oAAAAAAAAAAAAAARQnAQ) [查看完整代码](https://codesandbox.io/s/nifty-yonath-k6zor?file=/index.html) ### 添加地图组件除了地图可视化层之外我们可能需要添加辅助性的地图工具比如放大缩小，比例尺，图层列表等组件。 ```javascript import { Scale, Zoom } from '@antv/l7'; const zoomControl = new Zoom({ position: 'topright' }); const scaleControl = new Scale({ position: 'bottomright' }); // 添加到地图场景 scene.addControl(zoomControl); scene.addControl(scaleControl); ``` #### 自定义组件上面介绍的图例就是一个自定义组件，同样我们可以任意组件内容，也可以为组件添加地图交互。更多使用方式我们参考 `L7` 提供默认组件的[源码](https://github.com/antvis/L7/tree/master/packages/component/src/control) ## 不同项目使用模板不同项目模板在 `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) #### 栅格瓦片 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/tile/raster_tile/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/tile/raster_tile.md - Description: 栅格瓦片 --- title: "栅格瓦片" description: "栅格瓦片" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/tile/raster_tile/" --- 栅格瓦片图层包括图片栅格和数据栅格，其中图片栅格通常加载 `png/jpg` 图片，数据栅格则加载 `tiff/lerc` 等栅格数据文件. ### 绘制图片栅格 - TMS ```javascript // 图片瓦片图层 - 卫星图 const layer = new RasterLayer().source( 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', { parser: { type: 'rasterTile', updateStrategy: 'overlap', }, }, ); ``` ### 绘制图片栅格 - WMS ```javascript // 绘制 WMS 格式瓦片 const url = 'https://pnr.sz.gov.cn/d-suplicmap/dynamap_1/rest/services/LAND_CERTAIN/MapServer/export?F=image&FORMAT=PNG32&TRANSPARENT=true&layers=show:1&SIZE=256,256&BBOX={bbox}&BBOXSR=4326&IMAGESR=3857&DPI=90'; const layer = new RasterLayer().source(url, { parser: { type: 'rasterTile', tileSize: 256, zoomOffset: 1, }, }); ``` ### 绘制图片栅格 - WMTS ```javascript // 绘制 WMTS 格式瓦片 const url1 = 'https://t0.tianditu.gov.cn/img_w/wmts?tk=b72aa81ac2b3cae941d1eb213499e15e&'; const layer1 = new RasterLayer().source(url1, { parser: { type: 'rasterTile', tileSize: 256, wmtsOptions: { layer: 'img', tileMatrixset: 'w', format: 'tiles', }, }, }); ``` ### 绘制数据栅格 - arraybuffer ```javascript const tileSource = new Source( 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff', { parser: { type: 'rasterTile', dataType: 'arraybuffer', tileSize: 256, maxZoom: 13.1, format: async (data) => { const tiff = await GeoTIFF.fromArrayBuffer(data); const image = await tiff.getImage(); const width = image.getWidth(); const height = image.getHeight(); const values = await image.readRasters(); return { rasterData: values[0], width, height }; }, }, }, ); layer.source(tileSource).style({ domain: [0.001, 11.001], clampLow: false, rampColors: { colors: colorList, positions, }, }); ``` ### 绘制数据栅格 - rgb ```javascript const url = 'https://gw.alipayobjects.com/zos/raptor/1667832825992/LC08_3857_clip_2.tif'; const tiffdata = await getTiffData(url); const layer = new RasterLayer({ zIndex: 10 }).source( [ { data: tiffdata, bands: [7, 6, 5].map((v) => v - 1), }, ], { parser: { type: 'rasterRgb', format: async (data, bands) => { const tiff = await GeoTIFF.fromArrayBuffer(data); const image1 = await tiff.getImage(); const value = await image1.readRasters(); return bands.map((band) => { return { rasterData: value[band], width: value.width, height: value.height, }; }); }, operation: 'rgb', extent: [130.39565357746957, 46.905730725742366, 130.73364094187343, 47.10217234153133], }, }, ); ``` #### 数据 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/data/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/data.md - Description: 数据 --- title: "数据" description: "数据" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/data/" --- ## 数据目前L7支持的数据格式有 `GeoJSON`，`CSV`，`JSON`，`Image`。 - `GeoJSON` 支持点、线、面等所有的标准空间数据格式。 - `CSV` 支持点、线段、弧线等数据类型。 - `JSON` 支持简单的点、线，面数据类型，不支持多点，多线的，多面数据格式。 ### GeoJSON `GeoJSON` 是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。 ```json { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "type": "Polygon", "coordinates": [ [ [110.478515625, 32.76880048488168], [117.68554687499999, 32.76880048488168], [117.68554687499999, 37.64903402157866] ] ] } } ] } ``` ## 地理统计分析工具 [turfjs](http://turfjs.org/): 地理数据计算，处理，统计，分析的Javascript 库 ## 在线工具 [http://geojson.io/](http://geojson.io/) 可以在线查看，绘制，修改GeoJSON数据 [https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的geojson，还能够简化GeoJSON数据 ## 数据资源 #### 全国行政区划GeoJON 支持省市县维度 [geojson, svg下载](http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4) #### HighCharts 全球行政区划数据集 [https://img.hcharts.cn/mapdata/](https://img.hcharts.cn/mapdata/) #### 蜂窝热力图 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/heatmap/hexagon/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/heatmap/hexagon.md - Description: 蜂窝热力图 --- title: "蜂窝热力图" description: "蜂窝热力图" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/heatmap/hexagon/" --- 将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局。

### 实现下面我们来介绍如何绘制一个简单的蜂窝热力图。 - 你可以在 `L7` 官网上找到[在线案例](/zh/examples/heatmap/hexagon/china/) ```javascript import { Scene, HeatmapLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'dark', pitch: 43, center: [120.13383079335335, 29.651873105004427], zoom: 7.068989519212174, }), }); scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv') .then((res) => res.text()) .then((data) => { const layer = new HeatmapLayer({}) .source(data, { parser: { type: 'csv', x: 'lng', y: 'lat', }, transforms: [ { type: 'hexagon', size: 2500, field: 'v', method: 'sum', }, ], }) .size('sum', (sum) => { return sum * 200; }) .shape('hexagonColumn') .style({ coverage: 0.8, angle: 0, }) .color('sum', [ '#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#C3F9CC', '#DEFAC0', '#ECFFB1', ]); scene.addLayer(layer); }); }); ``` ### source 网格数据只支持点数据作为数据源，数据格式支持 `csv`、`json`、`geojson`。 #### 设置网格聚合参数布局方法通过 `source` 的 `transforms` 属性配置。 - type 数据聚合类型 `hexagon`。 - size 网格半径单位米。 - field 聚合字段。 - method 聚合方法 `count`，`max`，`min`，`sum`，`mean` 5 个统计维度。 ```javascript layer.source(data, { parser: { type: 'csv', x: 'lng', y: 'lat', }, transforms: [ { type: 'hexagon', size: 15000, field: 'v', method: 'sum', }, ], }); ``` ### shape 网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量 #### 2d - circle, - triangle - square - heaxgon ```javascript layer.shape('circle'); ``` #### 3d - cylinder - triangleColumn - hexagonColumn - squareColumn, ```javascript layer.shape('cylinder'); ``` ### size ### 2D shape 不需要设置 size 方法 ### 3D 图形 size 表示高度, 支持常量和数据映射 ```javascript layer.size(10); // 常量 layer.size('value', [10, 50]); // 根据value 字段映射大小 layer.size('value', (value) => {}); // 回调函数设置高度 ``` ### style - coverage 网格覆盖度 0 - 1 - angle 网格旋转角度 0 - 360 - opacity 透明度 0 - 1.0 ```javascript layer.style({ coverage: 0.9, angle: 0, opacity: 1.0, }); ``` #### 3D 弧线图 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/line/arc3d/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/line/arc3d.md - Description: 3D 弧线图 --- title: "3D 弧线图" description: "3D 弧线图" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/line/arc3d/" --- 除了 2D 的弧线，我们还指出 3D 的弧线，在使用上只要改变 `shape` 的参数即可。

### 实现下面我们来介绍如何绘制一个简单的 `3D` 弧线图。 - 你可以在 `L7` 官网上找到[在线案例](/zh/examples/line/arc/trip-arc/) ```javascript import { LineLayer } from '@antv/l7'; const layer = new LineLayer({}) .source(data, { parser: { type: 'csv', x: 'lng1', y: 'lat1', x1: 'lng2', y1: 'lat2', }, }) .size(1) .shape('arc') .color('#8C1EB2') .style({ opacity: 0.8, }); ``` ### source 绘制弧线需要同时提供起点和止点的坐标（起止点调换位置，弧线的形状会对称相反，飞线动画的方向也会相反）。 ```javascript const data = [ { lng1: 120, lat1: 30, lng2: 130, lat2: 30, }, ]; layer.source(data, { parser: { type: 'json', x: 'lng1', y: 'lat1', x1: 'lng2', y1: 'lat2', }, }); ``` ### shape 为了绘制弧线图，我们需要将 `shape` 的参数设置成 `arc3d`。 ### animate #### 开启关闭动画 ```javascript layer.animate(true); layer.animate(false); ``` #### 设置动画参数 - duration 动画时间单位(s)秒 - interval 轨迹间隔, 取值区间 0 - 1 - trailLength 轨迹长度取值区间 0 - 1 ```javascript layer.animate({ duration: 4, interval: 0.2, trailLength: 0.1, }); ``` ##### 参数动画介绍 L7 目前动画参数为相对单位，我们默认一条线段的长度为 1 ![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ) 如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。

[在线案例](/zh/examples/line/animate/plane-animate2/) ### style #### linearColor 线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高 ```javascript const layer = new LineLayer({}) .source(data, { parser: { type: 'csv', x: 'lng1', y: 'lat1', x1: 'lng2', y1: 'lat2', }, }) .size(1) .shape('arc') .color('#8C1EB2') .style({ sourceColor: '#f00', // 起点颜色 targetColor: '#0f0', // 终点颜色 }); ```

[在线案例](/zh/examples/line/arc/trip-arc-dark-linear/) #### dash 线图层通过在 style 中设置线的类型，同时指定虚线部分和实线部分 ```javascript const layer = new LineLayer({}) .source(data) .size(1.5) .shape('line') .color('标准名称', ['#5B8FF9', '#5CCEA1', '#F6BD16']) .active(true) .style({ lineType: 'dash', dashArray: [5, 5], }); scene.addLayer(layer); ```

- lineType 默认为 solid，表示实线，dash 表示虚线 - dashArray[len1: number, len2: number] len1 实线长度 len2 间隔长度 [在线案例](/zh/examples/line/arc/trip-arc-dark-linear/) 线图层支持纹理贴图和多种表现形式，通过 `scene.addImage` 方法添加到全局的资源，使用 `texture` 方法指定贴图。 ```javascript scene.addImage( '02', 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg', ); const layer = new LineLayer() .source(data) .size(4) .shape('line') .texture('02') .color('#25d8b7') .animate({ interval: 1, // 间隔 duration: 1, // 持续时间，延时 trailLength: 2, // 流线长度 }) .style({ lineTexture: true, // 开启线的贴图功能 iconStep: 20, // 设置贴图纹理的间距 }); ```

### L7-Leaflet - `L7-Leaflet` 是对外开源的插件 [github 地址](https://github.com/antvis/L7-Leaflet) ### 安装 #### npm ```bash npm install @antv/l7-leaflet ``` #### cdn ```javascript ``` ### 使用 #### L7 plugin for Lealfet use in Leaflet ```js import * as L from 'leaflet'; import 'leaflet/dist/leaflet.css'; import { LineLayer } from '@antv/l7'; import { L7Layer } from '@antv/l7-leaflet'; import React, { useEffect } from 'react'; export default () => { useEffect(() => { 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: '© 天地图 GS(2022)3124号 - 甲测资字1100471', }, ).addTo(map); const mapLabelType = 'cva'; L.tileLayer( 'https://t{s}.tianditu.gov.cn/' + mapLabelType + '_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' + mapLabelType + '&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=b72aa81ac2b3cae941d1eb213499e15e', { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], }, ).addTo(map); L.marker([30, 112]) .addTo(map) .setIcon( new L.Icon({ iconUrl: 'https://gw.alipayobjects.com/mdn/rms_5e897d/afts/img/A*6ONoRKNECC0AAAAAAAAAAAAAARQnAQ', iconSize: [16, 16], }), ) .bindPopup('A pretty CSS3 popup.
Easily customizable.') .openPopup(); const l7layer = new L7Layer().addTo(map); const scene = l7layer.getScene(); fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') .then((res) => res.text()) .then((data) => { const layer = new LineLayer({}) .source(data, { parser: { type: 'csv', x: 'lng1', y: 'lat1', x1: 'lng2', y1: 'lat2', }, }) .size(1) .shape('arc') .color('#8C1EB2') .style({ opacity: 0.8, blur: 0.99, }); scene.addLayer(layer); }); }, []); return (

); }; ``` #### Leafet BaseMap for L7 use in L7 ```js import * as L from 'leaflet'; import 'leaflet/dist/leaflet.css'; import { LineLayer } from '@antv/l7'; import { L7Layer } from '@antv/l7-leaflet'; import React, { useEffect } from 'react'; export default () => { useEffect(() => { 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: '© 天地图 GS(2022)3124号 - 甲测资字1100471', }, ).addTo(map); const mapLabelType = 'cva'; L.tileLayer( 'https://t{s}.tianditu.gov.cn/' + mapLabelType + '_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' + mapLabelType + '&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=b72aa81ac2b3cae941d1eb213499e15e', { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], }, ).addTo(map); L.marker([30, 112]) .addTo(map) .setIcon( new L.Icon({ iconUrl: 'https://gw.alipayobjects.com/mdn/rms_5e897d/afts/img/A*6ONoRKNECC0AAAAAAAAAAAAAARQnAQ', iconSize: [16, 16], }), ) .bindPopup('A pretty CSS3 popup.
Easily customizable.') .openPopup(); const l7layer = new L7Layer().addTo(map); const scene = l7layer.getScene(); fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') .then((res) => res.text()) .then((data) => { const layer = new LineLayer({}) .source(data, { parser: { type: 'csv', x: 'lng1', y: 'lat1', x1: 'lng2', y1: 'lat2', }, }) .size(1) .shape('arc') .color('#8C1EB2') .style({ opacity: 0.8, blur: 0.99, }); scene.addLayer(layer); }); }, []); return (

); }; ``` #### 天地图 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/map/tianditu/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/map/tianditu.md - Description: 天地图 --- title: "天地图" description: "天地图" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/map/tianditu/" --- `L7` 支持通过瓦片图层的方式来加载天地图瓦片。

### 实现下面我们来介绍如何快速创建天地图地图。 ```js import { Scene, RasterLayer } from '@antv/l7'; import { Map } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new Map({ center: [90.268, 40.3628], zoom: 3, }), }); scene.on('loaded', () => { // 底图服务 const baseLayer = new RasterLayer({ zIndex: 1 }).source( 'https://t1.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=6557fd8a19b09d6e91ae6abf9d13ccbd', { parser: { type: 'rasterTile', tileSize: 256, }, }, ); // 注记服务 const annotionLayer = new RasterLayer({ zIndex: 2 }).source( 'https://t1.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=6557fd8a19b09d6e91ae6abf9d13ccbd', { parser: { type: 'rasterTile', tileSize: 256, }, }, ); scene.addLayer(baseLayer); scene.addLayer(annotionLayer); }); ``` #### 聚合图 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/point/cluster/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/point/cluster.md - Description: 聚合图 --- title: "聚合图" description: "聚合图" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/point/cluster/" --- 聚合图通常用来描述数据在地理上表现的聚合情况，类似热力图，可以用来表示数据点位的集中。 🌟 目前 `L7` 只有点数据支持聚合图，聚类方法主要从数据层聚合数据，在 `Source` 方法配置 `cluster` 参数。

### 实现下面我们来介绍如何绘制一个常见的聚合图。 - 你可以在 `L7` 官网上找到[在线案例](/zh/examples/point/cluster/cluster/) ```js 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], style: 'dark', zoom: 3, }), }); scene.on('loaded', () => { 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]) .active(true) .color('yellow') .style({ opacity: 0.5, strokeWidth: 1, }); scene.addLayer(pointLayer); }); }); ``` ### source 聚合图在接受普通的点数据之后还需要配置聚合参数。 ```js const source = new Source(data, { cluster: true, clusterOption: { radius: 40, minZoom: 0, maxZoom: 16, }, }); ``` - `cluster: boolean` 表示是否对数据进行聚合操作，目前只有点图层支持，默认值为 `false`。 - `clusterOption: IClusterOption` 具体的聚合参数 - `radius: number` 聚合半径，默认值为 `40`。 - `minZoom: number` 最小聚合缩放等级，默认值为 `0`。 - `maxZoom: number` 最大聚合缩放等级，默认值为 `16`。 ```js interface IClusterOption { radius, minZoom maxZoom } ``` [在线案例](/zh/examples/point/cluster/cluster/) ### shape 聚合图使用通用的聚合样式，`shape` 只要使用点图层类型的 `shape` 即可。 ### FAQ `PointLayer` 的聚合图采用 `WebGL` 绘制，不支持自定义具体聚合样式，如果有自定义的需求可以使用 `MarkerLayer` 的聚合功能，你可以通过 `DOM` 完全自定义样式。 [MarkerLayer 聚合](/zh/api/component/marker_layer) #### 散点图 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/point/scatter/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/point/scatter.md - Description: 散点图 --- title: "散点图" description: "散点图" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/point/scatter/" --- 散点图在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。

### 实现下面我们来介绍如何绘制一个常见的散点图。 - 你可以在 `L7` 官网上找到[在线案例](/zh/examples/point/scatter/scatter/) ```javascript import { Scene, PointLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', center: [-121.24357, 37.58264], zoom: 6.45, }), }); scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv') .then((res) => res.text()) .then((data) => { const pointLayer = new PointLayer({}) .source(data, { parser: { type: 'csv', x: 'Longitude', y: 'Latitude', }, }) .shape('circle') .size(4) .color('Magnitude', [ '#0A3663', '#1558AC', '#3771D9', '#4D89E5', '#64A5D3', '#72BED6', '#83CED6', '#A6E1E0', '#B8EFE2', '#D7F9F0', ]); scene.addLayer(pointLayer); }); }); ``` ### shape 散点图 `shape` 一般设置成常量，通常是 `2D` 的图表。 - circle - square - hexagon - triangle - pentagon - octogon - hexagram - rhombus - vesica #### water fill - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/polygon/water/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/polygon/water.md - Description: water fill --- title: "water fill" description: "water fill" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/polygon/water/" --- 几何体图层支持特殊的表现形式，水面图层。

### 实现下面我们来介绍如何绘制水面。 - 你可以在 `L7` 官网上找到[在线案例](/zh/examples/polygon/fill/ocean/) 🌟 从 v2.8.1 版本开始支持简单水面。
🌟 从 v2.8.4 版本开始支持拟真水面。 ### 拟真水面

### source 几何体图层推荐使用标准的 `GeoJSON` 数据。 ### shape 我们需要设置 `shape` 为 `ocean`。 ### animate 我们需要显示的设置 `animate` 为 `true`。 ```javascript layer.aniamte(true); ``` ### style - `watercolor` 浅水区域的颜色默认为 '#6D99A8'。 - `watercolor2` 深水区域的颜色默认为 '#0F121C'。 [在线案例](/zh/examples/polygon/fill/ocean/) ### 简单水面

### source 几何体图层推荐使用标准的 `GeoJSON` 数据。 ### shape 我们需要设置 `shape` 为 `water`。 ### animate 我们需要显示的设置 `animate` 为 `true`。 ```javascript layer.aniamte(true); ``` ### style - `speed` 我们可以通过 `speed` 来控制水面的流速度。 ```javascript style({ speed: 0.5, }); ``` - `waterTexture` 我们可以通过设置该属性来替换水面的纹理。
默认值是 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EojwT4VzSiYAAAAAAAAAAAAAARQnAQ' [在线案例](/zh/examples/polygon/fill/water/) #### Scale 度量 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/scale/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/scale.md - Description: Scale 度量 --- title: "Scale 度量" description: "Scale 度量" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/scale/" --- ## Scale 简介 Scale 度量是用于将地图数据值（数字、日期、类别等数据）转成视觉变量（颜色、大小、形状）。Scale 是数据可视化的基本元素，因为它们决定了数据视觉编码的方式。L7 目前支持连续、离散、枚举类型等常用的 Scale。 ![L7 Scale](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*AOIvTpmPOmgAAAAAAAAAAAAADmJ7AQ/original) ## Scale 中的两个重要概念: Range 和 Domain Domain: 地图数据值的定义区间 Range：视觉值的区间定义不同 Scale 的差异在于 Domain-> Range 的转换方法不同 | 数据类 | 度量类型 | | --------- | ------------------------------------- | | 连续 | linear、log、pow | | 连续分类 | quantize quantile,threshold,diverging | | 分类枚举 | cat | ## L7 Scale 在使用 L7 过程中，默认情况下不需要进行 Scale 的配置，因为 L7 会根据数据类型对 scale 推断，推断过程如下：查看用户是否设置了 Scale，如果没有: 判断字段的第一条数据的字段类型，如果数据中不存在对应的字段：认为是常量为固定值如果是数字则为 'linear'; 如果是字符串类型 'cat'; ## Cat 枚举 Cat 指枚举类型，用于展示分类数据，比如农作物种植区分布图，水稻、玉米、大豆等不同类别需要映射为不同的颜色。在 L7 如果判断字段的值为字符串，将认为是 Cat 类型并自动获取类型的唯一值，设置为 domain 。这样三种作物就会被一一映射成对应的颜色。 ```tsx const data = [ { type:'A', x: 110, y:30 }, { type:'B', x: 110, y:32 }, { type:'C', x: 110, y:31 } ,{ type:'D', x: 111, y:33 }， ,{ type:'E', x: 112, y:30 } ,{ type:'F', x: 110, y:30 } ] layer.color('type',['red','white','blue','yellow']) ``` 如上面的代码所示，图层没有设置 Scale, L7 根据第一个数据"A"的类型 ,推断为枚举类型。同时取出该字段的去重后的所有值 ['A','B','C','D','E','F'] 设置为 scale 的 domain, 那么 range 就是对应的颜色 ['red','white','blue','yellow']。 ![L7 scale Cat映射](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*rO53SYNk8hgAAAAAAAAAAAAADmJ7AQ/original) 如果不设置 domain，L7 内部会自动计算 domain，domain 顺序跟数据顺序相关。如果希望固定domain 可自己设置 domain。domain 数值和 range数值一一对应。 ``` layer.scale('type', { type: 'cat', domain: ['B', 'A', 'C', 'D'], }); layer.color('type', ['red', 'white', 'blue', 'yellow']); ``` ![L7 Cat ](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*kyP2RpUXdGUAAAAAAAAAAAAADmJ7AQ/original) ## Linear 连续线性线性是连续数据的映射方法，数据和视觉值是通过线性方法计算的。如数据范围domain [0,1000] 线性映射到 range [red,blue] 渐变色，就是依据线性函完成一一转换。 ![L7 Scale 线性](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Z_rGRr-jgI0AAAAAAAAAAAAADmJ7AQ/original') ```tsx layer.color('rate', ['#ffffcc', '#b6e2b6', '#64c1c0', '#338cbb', '#253494']); ``` 对于连续型数据 L7 默认会设置为 linear, domain为数据的min、max值。颜色会根据 range 颜色生成渐变色。linear 默认可不设置 domain 区间 ```ts layer.scale('value', { type: 'linear', domain: [5, 100], // 可定义domain,也可以不设置，自定根据数据计算 }); ``` ## quantize 连续等间距等间距分类会根据属性值范围划分为若干个大小相等的子范围。相等间隔最适用于常见的数据范围，如百分比和温度。这种方法强调的是某个属性值相对于其他值的量。 ![L7 Scale 连续等间距](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*YmwwQ5L-d7QAAAAAAAAAAAAADmJ7AQ/original) 等间距分类只与数据 mix、max 有关，如果没有设置 domain,将自动计算数据的 min、max 进行分段，分段个数依据 range 颜色的个数。等间距会出现空类，而且每个分类要素分布不均匀。 ```tsx layer.color('type', ['red', 'white', 'blue', 'yellow']); ``` 你也可以自定义 domain ```ts layer.scale('value', { type: 'quantize', domain: [5, 100], }); layer.color('type', ['red', 'white', 'blue', 'yellow']); ``` ![L7 scale quantize](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*N61_Q6-U7jIAAAAAAAAAAAAADmJ7AQ/original) ## quantile 连续等分位等分位要求每个分类区间都含有相等数量的要素。分位数为每个分类分配相等数量数据值，不存在空类，也不存在值过多或过少的类。 ![L7 scale quantile](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2SFpSLRD3yYAAAAAAAAAAAAADmJ7AQ/original) 等分位与数据的分布相关，需要拿到全量数据才能计算，因此等分位的 scale 不能单独设置 domain，只能自动计算。 ```tsx layer.scale('value', { type: 'quantile', }); layer.color('value', ['red', 'white', 'blue', 'yellow']); ``` ![L7 Scale quantile](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EMcjSrYe1l0AAAAAAAAAAAAADmJ7AQ/original) ## threshold 自定义分类自定义分类可以设定任意分类区间映射到对于视觉变量。domain 仍然是连续的，并根据提供的domain 进行分类。range 属性必须有 N+1 个元素，其中 N 是 domain 的个数。 threshold 为自定义分段，在使用时必须为 Scale 设置 domain, domain可以依据需求任意设置。 ```tsx layer .scale('rate', { type: 'threshold', domain: [3, 6, 8, 10], }) .color('rate', ['#ffffcc', '#b6e2b6', '#64c1c0', '#338cbb', '#253494']); ``` ![ L7 Scale threshold](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*e1YyRKELsjwAAAAAAAAAAAAADmJ7AQ/original) ## diverging 离散分类离散分类通常与两种相反的色调一起使用，以显示从负值到中心到正值的变化。这些类型的地图显示了彼此相关的值的大小。 ![L7 diverging](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*8anRRLJNu6YAAAAAAAAAAAAADmJ7AQ/original) diverging 如果没有设置 domain 会自动根据数据计算min、middle、max 三个值作为domain。range 至少需要设置三个颜色，形成双极色带。 ```ts layer.scale('rate', { type: 'diverging' domain: [3, 6, 8, 10], // the input domain and output range of a diverging scal }) .color('rate', ['#ffffcc', '#b6e2b6', '#64c1c0', '#338cbb', '#253494']) ``` ![L7 scale diverging](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*4rcDQIRdRdEAAAAAAAAAAAAADmJ7AQ/original) #### 矢量瓦片 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/tile/vector_tile/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/tile/vector_tile.md - Description: 矢量瓦片 --- title: "矢量瓦片" description: "矢量瓦片" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/tile/vector_tile/" --- 矢量瓦片通常可以用于大数据量地理数据的渲染，借助瓦片的特性分布请求渲染数据，从而达到减少请求、加载时间的等待，优化使用体验的目的。同时，在不需要全量加载数据的场景下，通过矢量瓦片的形式可以在保证体验的前提下有效减少数据的渲染量，减少渲染压力。 ### 绘制矢量瓦片 - point ```javascript import { PointLayer } from '@antv/l7'; const point = new PointLayer({ featureId: 'COLOR', sourceLayer: 'ecoregions2', }) .source(vectorSource) .shape('circle') .color('red') .size(10); ``` ### 绘制矢量瓦片 - line ```javascript import { LineLayer } from '@antv/l7'; const line = new LineLayer({ featureId: 'COLOR', sourceLayer: 'ecoregions2', }) .source(vectorSource) .color('COLOR') .size(2); ``` ### 绘制矢量瓦片 - polygon ```javascript // 矢量瓦片图层 import { PolygonLayer } from '@antv/l7'; const polygon = new PolygonLayer({ featureId: 'COLOR'， sourceLayer: 'ecoregions2', }) .source(source) .color('red'); ``` ### 绘制矢量瓦片 - 掩模图层矢量掩模图层一般配合栅格图层使用，对栅格图层进行掩模处理。 ```js import { MaskLayer } from '@antv/l7'; const mask = new MaskLayer({sourceLayer: 'ecoregions2' }) .source( 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf' { parser: { type: 'mvt', maxZoom: 9, extent: [-180, -85.051129, 179, 85.051129], }}); ``` ### 绘制矢量瓦片 - 测试图层 ```js // 测试瓦片图层 const debugerLayer = new TileDebugLayer(); ``` #### 大圆航线 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/line/greatcircle/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/line/greatcircle.md - Description: 大圆航线 --- title: "大圆航线" description: "大圆航线" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/line/greatcircle/" --- 把地球看做一个球体，通过地面上任意两点和地心做一平面，平面与地球表面相交看到的圆周就是大圆。两点之间的大圆劣弧线是两点在地面上的最短距离。沿着这一段大圆弧线航行时的航线称为大圆航线。

### 实现下面我们来介绍如何绘制一个简单的大圆弧线。 - 你可以在 `L7` 官网上找到[在线案例](/zh/examples/line/arc/arc-circle/) ```javascript import { Scene, LineLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'dark', center: [107.77791556935472, 35.443286920228644], zoom: 2.9142882493605033, }), }); scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') .then((res) => res.text()) .then((data) => { const layer = new LineLayer({}) .source(data, { parser: { type: 'csv', x: 'lng1', y: 'lat1', x1: 'lng2', y1: 'lat2', }, }) .size(1) .shape('greatcircle') .color('#8C1EB2') .style({ opacity: 0.8, }); scene.addLayer(layer); }); }); ``` ### source 绘制弧线需要同时提供起点和止点的坐标（起止点调换位置，弧线的形状会对称相反，飞线动画的方向也会相反）。 ```javascript const data = [ { lng1: 120, lat1: 30, lng2: 130, lat2: 30, }, ]; layer.source(data, { parser: { type: 'json', x: 'lng1', y: 'lat1', x1: 'lng2', y1: 'lat2', }, }); ``` ### shape 为了绘制大圆弧线图，我们需要将 `shape` 的参数设置成 `greatcircle`。 ### animate #### 开启关闭动画 ```javascript layer.animate(true); layer.animate(false); ``` #### 设置动画参数 - duration 动画时间单位(s)秒 - interval 轨迹间隔, 取值区间 0 - 1 - trailLength 轨迹长度取值区间 0 - 1 ```javascript layer.animate({ duration: 4, interval: 0.2, trailLength: 0.1, }); ``` ##### 参数动画介绍 L7 目前动画参数为相对单位，我们默认一条线段的长度为 1 ![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ) 如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。

- lineTexture 指定是否开启纹理贴图能力 - iconStep 指定贴图在线图层上面排布的间隔 [在线案例](/zh/examples/gallery/animate/animate-path-texture/) #### texture advance ✨ animate
当线图层 (`shape` 为 `arc`/`arc3d`) 开启动画模式的时候，纹理在线图层上的分布还会和 `animate` 的参数相关. 线图层上排列的纹理的数量大致为 duration/interval ```javascript .animate({ duration: 1, interval: 0.2, trailLength: 0.1 }); // 此时纹理贴图数量为 duration / interval = 5 ``` ✨ textureBlend 参数
通过控制 style 方法中的 textureBlend 参数，我们可以控制纹理图层和线图层的混合情况 - normal - replace ```javascript .style({ lineTexture: true, // 开启线的贴图功能 iconStep: 30, // 设置贴图纹理的间距 textureBlend: 'replace', // 设置纹理混合方式，默认值为 normal，可选值有 normal/replace 两种 }); ``` [在线案例](zh/examples/line/animate#plane_animate2) #### 使用高德插件 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/map/amapplugin/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/map/amapplugin.md - Description: 使用高德插件 --- title: "使用高德插件" description: "使用高德插件" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/map/amapplugin/" --- 我们在使用高德地图作为地图底图的时候，可以借助高德地图提供的插件实现也中需求。 ### AMap.LineSearch - 道路查询 ```javascript const scene = new Scene({ id: 'map', map: new Mapbox({ style: 'blank', center: [103.83735604457024, 1.360253881403068], pitch: 4.00000000000001, zoom: 10.210275860702593, rotation: 19.313180925794313, }), }); ``` [在线案例](/zh/examples/amap-plugin/bus/busstop/) ### AMap.ToolBar - 地图工具栏 ```javascript scene.on('loaded', () => { window.AMap.plugin([ 'AMap.ToolBar', 'AMap.LineSearch' ], () => { scene.map.addControl(new AMap.ToolBar()); const linesearch = new AMap.LineSearch({ pageIndex: 1, // 页码，默认值为1 pageSize: 1, // 单页显示结果条数，默认值为20，最大值为50 city: '北京', // 限定查询城市，可以是城市名（中文/中文全拼）、城市编码，默认值为『全国』 extensions: 'all' // 是否返回公交线路详细信息，默认值为『base』 }); ``` [在线案例](/zh/examples/amap-plugin/bus/busstop/) ### AMap.TileLayer - 加载使用 `xyz` 地图瓦片 ```javascript scene.on('loaded', () => { var xyzTileLayer = new window.AMap.TileLayer({ getTileUrl: 'https://wprd0{1,2,3,4}.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&size=1&scl=1&style=8<ype=11', zIndex: 100, }); scene.map.add(xyzTileLayer); }); ``` [在线案例](/zh/examples/amap-plugin/bus/xyztile/) ### AMap.TileLayer.Satellite - 加载使用默认的卫星瓦片 ```javascript scene.on('loaded', () => { scene.map.add(new window.AMap.TileLayer.Satellite()); }); ``` [在线案例](/zh/examples/amap-plugin/bus/satellite/) #### 渲染监控 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/monitor/render/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/monitor/render.md - Description: 渲染监控 --- title: "渲染监控" description: "渲染监控" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/monitor/render/" --- 在地图应用中，渲染大数据的地理数据是十分常见的需求，为了保证应用的流畅性，需要追求极致的渲染性能，为此监控引擎渲染内容对于优化性能，建设地图可视化应用性能指标有切实的意义。 ### 实现下面介绍如何使用 L7 提供的能力简单获取应用的渲染性能信息。 ```javascript import { Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ center: [ 60, 40.7128 ], zoom: 2 }), debug: true }); scene.on('loaded', () => { const debugService = scene.getDebugService(); // 开启每帧渲染的监控 debugService.renderDebug(true) debugService.on('renderEnd', renderInfo => { const { renderUid, // 当前帧渲染唯一编号 renderStart, // 当前帧渲染开始时间 renderEnd, // 当前帧渲染结束时间 renderDuration // 当前帧渲染时间 } = renderInfo; ... } setTimeout(() => { debugService.renderDebug(false); debugService.off('renderEnd'); }, 1000); // 监听 1s 内的渲染情况 }); ``` #### 水波图 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/point/wave/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/point/wave.md - Description: 水波图 --- title: "水波图" description: "水波图" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/point/wave/" --- 平面点图层在开启动画模式的情况下，是一种特殊的图层类型：水波点。图层由一圈圈向外扩散的圆环构成。

### 实现根据下面的代码可以实现一个简单的水波点案例。 - 你可以在 `L7` 官网上找到[在线案例](/zh/examples/point/scatter/animatepoint/)。 - 具体的使用可以查看[详细文档](/zh/api/point_layer/animate#水波点)。 ```js import { Scene, PointLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', center: [112, 23.69], zoom: 2.5, }), }); fetch('https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv') .then((res) => res.text()) .then((data) => { const pointLayer = new PointLayer({}) .source(data, { parser: { type: 'csv', x: 'Longitude', y: 'Latitude', }, }) .shape('circle') .animate(true) .size(40) .color('#ffa842'); scene.addLayer(pointLayer); }); ``` ### shape 为了实现水波点，点图层的 `shape` 参数只要是 `circle`、`triangle`、`square` 等平面图形即可。 ### animate - boolean ｜ animateOption ```javascript .animate(true) .animate({ enable: true }) ``` #### 水波配置项 - `speed` 水波速度 - `rings` 水波环数 ### size 在水波点图层中，由于边缘透明的原因，点的大小看上去要比相同 size 的非水波点要小一些。 #### 简单线图层 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/line/simple/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/line/simple.md - Description: 简单线图层 --- title: "简单线图层" description: "简单线图层" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/line/simple/" --- 简单线图层为用户提供了一种大数据量性能更优的选择，能轻松渲染有几十万个节点的线段，但相应的，对比与普通的线图层，简单线图层也丢失了一些其他能力。

### 实现下面我们来介绍如何绘制简单线。 - 你可以在 `L7` 官网上找到[在线案例](/zh/examples/gallery/animate/grid/) ```javascript import { LineLayer } from '@antv/l7'; const layer = new LineLayer() .source(data) .shape('simple') .size(10) // size 方法不生效线宽始终为 1px .color('#f00') .style(...) ``` ### shape 为了绘制简单线，我们需要将 `shape` 的参数设置成 `simple`。 #### linearColor 线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高 ```javascript const layer = new LineLayer({}) .source(data, { parser: { type: 'csv', x: 'lng1', y: 'lat1', x1: 'lng2', y1: 'lat2', }, }) .size(1) .shape('arc') .color('#8C1EB2') .style({ sourceColor: '#f00', // 起点颜色 targetColor: '#0f0', // 终点颜色 }); ```

[在线案例](/zh/examples/line/arc/trip-arc-dark-linear/) 🌟 简单线图层不支持动画和纹理 #### 亮度图 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/point/dot/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/point/dot.md - Description: 亮度图 --- title: "亮度图" description: "亮度图" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/point/dot/" --- 亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况

### 实现下面我们来介绍如何绘制一个简单的亮度图。 - 你可以在 `L7` 官网上找到[在线案例](/zh/examples/gallery/basic/normal/) ```javascript import { Scene, PointLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ center: [121.417463, 31.215175], style: 'dark', zoom: 11, }), }); scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt') .then((res) => res.text()) .then((data) => { const pointLayer = new PointLayer({}) .source(data, { parser: { type: 'csv', y: 'lat', x: 'lng', }, }) .size(0.5) .color('#080298'); scene.addLayer(pointLayer); }); }); ``` ### shape 使用亮度图需要将 `shape` 的参数设置为 `dot`，或者不设置 `shape` 函数。 #### 雷达图 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/point/radar/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/point/radar.md - Description: 雷达图 --- title: "雷达图" description: "雷达图" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/point/radar/" --- 点图层还支持一种特殊的图层类型：雷达图。

### 实现下面我们来介绍如何绘制一个常见的雷达图。 - 你可以在 `L7` 官网上找到[在线案例](/zh/examples/point/scatter/radarpoint/) ```javascript import { Scene, PointLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ center: [120, 30], zoom: 13, }), }); const layer = new PointLayer() .source([{ lng: 120, lat: 30 }], { parser: { type: 'json', x: 'lng', y: 'lat', }, }) .shape('radar') .size(100) .color('#d00') .style({ speed: 5, }) .animate(true); ``` ### source 雷达图接受普通的点数据。 ### shape 雷达图的 `shape` 为固定值 `radar`。 ### animate 雷达图需要将 `animate` 设置为 `true` 才会生效 ```javascript .animate(true) .animate({ enable: true }) ``` ### style 通过 `speed` 设置旋转速度，默认为 `1`，值越大转速越快。 #### 开发者教程 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/develop/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/develop.md - Description: 开发者教程 --- title: "开发者教程" description: "开发者教程" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/develop/" --- 这里的开发者，是指开发 L7 的开发者，为 L7 修复 bug、完善文档、升级功能、新功能开发等能力。 ### Fork 仓库 Fork L7 仓库到自己的空间。 ### 下载 Fork 后的代码 ```bash git clone https://github.com/antvis/L7 --depth=1 ``` ### 安装依赖 node 版本推荐 v16.20.2 ```bash yarn install ``` ### 启动 Demo 如需功能调试 ```bash yarn run dev ``` 打开 `http://localhost:6006/`： ### 启动官网如需更新 API 或者写文档、demo,使用该命令 ```bash yarn start ``` 打开 `http://localhost:8000/`： ### 运行单测运行单元测试： ```bash yarn test // 全量跑 yarn test ../tes.spec.ts // 单个文件 ``` ## 提交代码可以使用 yarn commit 模板化提交： ```bash yarn commit ``` ## 开发任务 L7 Issue 和 Feature 通过开源社区的方式运作管理，可以完全的开放的探索、交流技术方案。开发任务，[认领查看](https://github.com/orgs/antvis/projects/16) 针对 L7 开发者我们制定了成长计划，帮助大家从初级走向高级 GIS 领域可视化引擎开发者。如有兴趣可以加微信 "antv2030",注明 “参与L7研发”，期待你加入，一起学习。 #### 地理围墙 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/line/wall/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/line/wall.md - Description: 地理围墙 --- title: "地理围墙" description: "地理围墙" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/line/wall/" --- 地理围墙在原有线图层的基础上赋予了高度的概念，其他的使用和普通的线图保持一致。

### 实现下面我们来介绍如何绘制简单的地理围墙。 - 你可以在 `L7` 官网上找到[在线案例](/zh/examples/line/wall/hangzhou-wall/) ## 使用 ```javascript import { Scene, LineLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ center: [119.297868, 29.732983], zoom: 7.11, rotation: 1.22, pitch: 45.42056074766357, style: 'dark', }), }); scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/bmw-prod/93a55259-328e-4e8b-8dc2-35e05844ed31.json') .then((res) => res.json()) .then((data) => { const layer = new LineLayer({}).source(data).size(40).shape('wall').style({ opacity: 1, sourceColor: '#0DCCFF', targetColor: 'rbga(255,255,255, 0)', }); scene.addLayer(layer); }); }); ``` ### shape 为了绘制地理围墙，我们需要将 `shape` 的参数设置成 `wall`。 ### animate #### 开启关闭动画 ```javascript layer.animate(true); layer.animate(false); ``` #### 设置动画参数 - duration 动画时间单位(s)秒 - interval 轨迹间隔, 取值区间 0 - 1 - trailLength 轨迹长度取值区间 0 - 1 ```javascript layer.animate({ duration: 4, interval: 0.2, trailLength: 0.1, }); ``` ##### 参数动画介绍 L7 目前动画参数为相对单位，我们默认一条线段的长度为 1 ![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ) 如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。

[在线案例](/zh/examples/line/arc/trip-arc-dark-linear/) 🌟 目前渐变色的方向为垂直向上线图层支持纹理贴图和多种表现形式，通过 `scene.addImage` 方法添加到全局的资源，使用 `texture` 方法指定贴图。 ```javascript scene.addImage( '02', 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg', ); const layer = new LineLayer() .source(data) .size(4) .shape('line') .texture('02') .color('#25d8b7') .animate({ interval: 1, // 间隔 duration: 1, // 持续时间，延时 trailLength: 2, // 流线长度 }) .style({ lineTexture: true, // 开启线的贴图功能 iconStep: 20, // 设置贴图纹理的间距 }); ```

#### heightfixed `wall` 支持了固定高度配置 `heightfixed`。 ```javascript .style({ heightfixed: true // 默认为 false，开启后实际世界高度不变（注意调整尺寸） }) ``` #### 符号图 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/point/symbol/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/point/symbol.md - Description: 符号图 --- title: "符号图" description: "符号图" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/point/symbol/" --- 点图层支持绘制图标，在地理区域上放置不同图片作为符号，通常表示不同地理要素分布情况

### 实现下面我们来介绍如何绘制一个常见的符号地图。 - 你可以在 `L7` 官网上找到[在线案例](/zh/examples/point/image/image/) ```javascript import { Scene, PointLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', center: [121.434765, 31.256735], zoom: 14.83, }), }); scene.addImage( '00', 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', ); scene.addImage( '01', 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg', ); scene.addImage( '02', 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg', ); scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json') .then((res) => res.json()) .then((data) => { const imageLayer = new PointLayer() .source(data, { parser: { type: 'json', x: 'longitude', y: 'latitude', }, }) .shape('name', ['00', '01', '02']) .size(25); scene.addLayer(imageLayer); }); }); ``` ### addImage(field: string, url: string): void 为了使用点图层绘制图标，我们需要事先在 `scene` 全局添加对应的图片资源。之后我们就可以在点图层的 `shape` 方法中指定对应的图片。 ```js scene.addImage( '02', 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg', ); ``` ### shape 我们需要通过 `shape` 方法指定当前点图层需要加载的图片资源 `ID`，`ID` 是用户使用 `scene.addImage(id, url)` 全局添加图片资源时候的 `ID`，即符号图需要把 `shape` 设置成图片的 `id`。 ```javascript scene.addImage( '00', 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', ); scene.addImage( '01', 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', ); layer.shape('00'); ``` ⚠️ 符号图的 `ID` 不能与点图层已有 shape 名称相同，比如不能设置 `circle`。同样符号图 `shape` 也支持数据映射 ```javascript const scatter = new PointLayer() .source(data) .shape('name', (v) => { switch (v) { case 'p1': return '00'; case 'p2': return '01'; } }) .size(5) .style({ opacity: 0.3, strokeWidth: 1, }); ``` ⚠️ 符号图不应该设置 `color` 传入颜色，`color` 设置的颜色会覆盖图片的颜色。 ⚠️ 为了得到更好的现实效果（图片清晰，无明显锯齿），我们在选择图片以及设置图标大小的时候应保持相当，或者在 L7 图层中设置的图标大小略小于实际图片的像素大小。 [在线案例](/zh/examples/point/image/image/) ### style #### billboard 1. 默认通过 `PointLayer` 实例化的 `image` 本质上是精灵贴图，因此有始终面向相机的特性，同时贴图的大小也收到设备的限制。 2. 由于精灵始终面向相机，因此我们也无法自定义配置 `image` 的旋转角度。为了解决上述的两个问题（1. 大小受限，2. 无法自定义旋转角度），我们单独提供了非精灵模式`billboard` 的模式。只需要在 style 中配置 billboard 为 `false` ```javascript const imageLayer = new PointLayer({ layerType: 'fillImage' }) .source(data, { parser: { type: 'json', x: 'longitude', y: 'latitude', }, }) .shape('name', ['00', '01', '02']) .style({ rotation: 0, billboard: false, }) .size(45); ``` ##### rotation 我们支持使用 `rotation` 自定义配置图标的旋转角度（顺时针方向、角度制）。 - `rotation`: number|undefined // 角度单位 0-360 ```ts layer.style({ rotation: 90, }); ``` rotation 支持常量，也支持数据映射 ```ts layer.style({ rotation: { field: 'rotate', value: [0, 360], }, }); ``` ```tsx layer.style({ rotation: { field: 'rotate', value: (rotate) => { return rotate; }, }, }); ```

[在线案例](/zh/examples/point/image/image/) 符号图的非 billboard 模式支持 `rotation` 方法根据数据映射旋转角度。 ```javascript const imageLayer = new PointLayer() .source(data) .shape('wind', (wind) => { if (wind === 'up') { return 'arrBlue'; } return 'arrRed'; }) .size(15) .style({ rotation: 0, // billboard: false, }); scene.addLayer(imageLayer); ``` [在线案例](/zh/examples/point/image/monsoon/) #### 快速 issue - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/quick_issue/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/quick_issue.md - Description: 快速 issue --- title: "快速 issue" description: "快速 issue" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/quick_issue/" --- ### 为什么提 Issue - Issue 是开放的，看到的同学可以解答，提出想法，提升 Issue 的解决效率 - Issue 能够做到很好的任务管理 - 如果该问题得到解决，遇到同样问题是人，可以参考解决。 ### 如何提 issue 1. 提交问题前，请先阅读 https://l7.antv.antgroup.com/tutorial/quickstart 上的文档。 2. 我们推荐如果是小问题（错别字修改，小的 bug fix）直接提交 PR。 3. 如果是一个新需求，请提供：详细需求描述，最好是有伪代码实现。 4. 如果是一个 BUG，请提供：复现步骤，错误日志以及相关配置，并尽量填写下面的模板中的条目。 5. 如果可以，请提供尽可能精简的 codesandbox 链接，可使用 codesandbox 模板 https://codesandbox.io/s/45smpb，方便我们排查问题。 6. 扩展阅读：[如何向开源项目提交无法解答的问题](https://zhuanlan.zhihu.com/p/25795393) ### 如果提供复现 demo 复现demo 是指可运行的代码环境，不是复制代码，推荐使用 https://codesandbox.io/s/45smpb ，同时官网提供了自动跳转到codebox 的能力。 - L7 demo 页面找到，需要复现的图层或者相似的demo - 在 sandbox 打开当前demo

你可能没有注意到，代码区的上方有一排工具按钮。点击左侧第三个按钮，你就进入了 `codesandbox`。 ![L7 地理可视化](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*TrpMSJrrSDMAAAAAAAAAAABkARQnAQ)

你发现你进入了一个在线的代码编辑器，在这里面你可以修改代码，复现你发现的问题，然后保存，并在链接复制到 Issue 内容中。 ### 现在你可以去 L7 仓库提 issue https://github.com/antvis/L7/issues/new 如果还没有 star L7,可顺手点个 star。 #### 文本标注 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/point/text/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/point/text.md - Description: 文本标注 --- title: "文本标注" description: "文本标注" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/point/text/" --- 点图层支持绘制文本标注。

### 实现下面我们来介绍如何绘制一个常见的文本标注地图。 - 你可以在 `L7` 官网上找到[在线案例](/zh/examples/point/text/point-text/) ```javascript import { Scene, PointLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ center: [110, 36], style: 'light', zoom: 3, }), }); scene.on('loaded', () => { 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(12) .color('w', ['#0e0030', '#0e0030', '#0e0030']) .style({ textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直] spacing: 2, // 字符间距 padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 stroke: '#ffffff', // 描边颜色 strokeWidth: 0.3, // 描边宽度 }); scene.addLayer(pointLayer); }); }); ``` ### shape(field: name: shapeType: 'text'): ILayer - `field` 标注的字段名称。 - `shapeType` 默认值为 `text`。 ```javascript layer.shape('name', 'text'); ``` ### style - textAnchor `string` 文本相对锚点的位置 `'right' | 'top-right' | 'left' | 'bottom-right' | 'left' | 'top-left' | 'bottom-left' | 'bottom' | 'bottom-right' | 'bottom-left' | 'top' | 'top-right' | 'top-left' | 'center';` - padding: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - spacing: number 文本间隔 - stroke: `string`; 描边颜色 - strokeWidth `number` 描边宽度 - strokeOpacity `number` 描边透明度 - fontWeight `string` 字体粗细 - fontFamily `string` 字号 - textOffset `[number, number]` 文本偏移量 - textAllowOverlap: `boolean` 是否允许文字遮盖 - raisingHeight 设置文本标注的抬升高度 #### iconfont 标注 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/point/iconfont/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/point/iconfont.md - Description: iconfont 标注 --- title: "iconfont 标注" description: "iconfont 标注" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/point/iconfont/" --- 点图层除了支持绘制文字标注之外还支持通过绘制文字的方式绘制建简单的图标，即绘制 `iconfont`。通过文字方式绘制的简单图标，我们可以 `color` 方法直接修改颜色。

### 实现下面我们来介绍如何绘制一个简单的 `iconfont` 图标点图层。 - 你可以在 `L7` 官网上找到[在线案例](/zh/examples/point/text/iconfont/) ```javascript // 指定 iconfont 映射为字体样式的名称 const fontFamily = 'iconfont'; // 指定 iconfont 字体文件 const fontPath = '//at.alicdn.com/t/font_2534097_fcae9o2mxbv.woff2?t=1622200439140'; // 全局添加资源 scene.addFontFace(fontFamily, fontPath); // 全局添加 iconfont 字段的映射 scene.addIconFont('icon1', ''); scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json') .then((res) => res.json()) .then((data) => { const pointLayer = new PointLayer({}) .source(data.list, { parser: { type: 'json', x: 'j', y: 'w', }, }) .shape('icon', 'text') // 指定需要映射字段为 icon、shape 类型和普通的文字标注一样为 text .size(20) .color('w', ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99']) .style({ textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textOffset: [40, 0], // 文本相对锚点的偏移量 [水平, 垂直] padding: [0, 0], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 stroke: '#ffffff', // 描边颜色 fontFamily, iconfont: true, // 开启 iconfont 映射 }); scene.addLayer(pointLayer); }); }); ``` 1. `iconfont` 绘制的是 `unicode` 图标，在使用的时候需要提前指定对应的 `unicode` 映射文件。 2. 关于 `iconfont` 资源使用可以前往 `iconfont` 官网 [官网传送门](https://iconfont.cn/)。 ### shape(field: string, shapeType: 'text'): ILayer `iconfont` 其实就是特殊的文本标注，因此 `shape` 的用法和普通文本标注的用法保持一致。 - `field` 标注的字段名称。 - `shapeType` 默认为 `text`。 ```javascript layer.shape('iconfontField', 'text'); ``` ### style 我们在使用 `iconfont` 绘制简单图标的时候需要在 `style` 方法中将 `iconfont` 参数设置为 `true`。 ✨ iconfont 其他 style 参数的使用和普通的文本标注的参数保持一致。 #### 复合图表地图 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/point/chart/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/point/chart.md - Description: 复合图表地图 --- title: "复合图表地图" description: "复合图表地图" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/point/chart/" --- 我们在通过自定义 `Marker` 代替点图层节点的时候剋插入实现自定义图表，如使用二维统计图表代替点状符号。复合图表地图中常用扩展图形有柱状图、曲线图、玫瑰图等

### 实现下面我们来介绍如何绘制一个简单的地图复合图表。 - 你可以在 `L7` 官网上找到[在线案例](/zh/examples/point/chart/bar/) ```javascript import { Scene, Marker } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as G2 from '@antv/g2'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', center: [2.6125016864608597, 49.359131], zoom: 4.19, }), }); scene.on('loaded', () => { addChart(); scene.render(); }); function addChart() { fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json') .then((res) => res.json()) .then((data) => { data.nodes.forEach(function (item) { const el = document.createElement('div'); const total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service; const size = Math.min(parseInt(total / 30000, 10), 70); if (size < 30) { return; } const itemData = [ { item: 'Agriculture', count: item.gdp.Agriculture, percent: item.gdp.Agriculture / total, }, { item: 'Industry', count: item.gdp.Industry, percent: item.gdp.Industry / total, }, { item: 'Service', count: item.gdp.Service, percent: item.gdp.Service / total, }, ]; const chart = new G2.Chart({ container: el, width: size, height: size, render: 'svg', padding: 0, }); chart.legend(false); chart.source(itemData); chart.tooltip(false); chart.axis('count', { grid: false }); chart .interval() .position('item*count') .color('item', ['#5CCEA1', '#5D7092', '#5B8FF9']) .opacity(1); chart.render(); const marker = new Marker({ element: el }).setLnglat({ lng: item.coordinates[0], lat: item.coordinates[1], }); scene.addMarker(marker); }); }); } ``` #### Marker - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/point/mark/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/point/mark.md - Description: Marker --- title: "Marker" description: "Marker" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/point/mark/" --- 地图上的点可以是自定义的 `DOM`，我们将自定的 `DOM` 称为 `Marker` 。

### 实现下面我们来介绍如何绘制一个简单的 `Marker` 图层。 - 你可以在 `L7` 官网上找到[在线案例](/zh/examples/component/marker/marker/) ```javascript import { Scene, Marker } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', center: [105.790327, 36.495636], zoom: 4, }), }); scene.on('loaded', () => { addMarkers(); scene.render(); }); function addMarkers() { fetch('https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json') .then((res) => res.json()) .then((nodes) => { for (let i = 0; i < nodes.length; i++) { if (nodes[i].g !== '1' || nodes[i].v === '') { continue; } const el = document.createElement('label'); el.className = 'labelclass'; el.textContent = nodes[i].v + '℃'; el.style.background = getColor(nodes[i].v); el.style.borderColor = getColor(nodes[i].v); const marker = new Marker({ element: el, }).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y }); scene.addMarker(marker); } }); } function getColor(v) { return v > 50 ? '#800026' : v > 40 ? '#BD0026' : v > 30 ? '#E31A1C' : v > 20 ? '#FC4E2A' : v > 10 ? '#FD8D3C' : v > 5 ? '#FEB24C' : v > 0 ? '#FED976' : '#FFEDA0'; } ``` ### 使用文档 [Marker 文档](/zh/api/component/marker) [MarkerLayer 文档](/zh/api/component/marker_layer) #### 简单点 - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/point/simple/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/point/simple.md - Description: 简单点 --- title: "简单点" description: "简单点" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/point/simple/" --- 点图层支持精灵模式的简单点，精灵模式的点图层效率更高，点始终面向相机。

### 实现下面我们来介绍如何绘制一个简单点图层。 - 你可以在 `L7` 官网上找到[在线案例](/zh/examples/point/simple/simple/) ```javascript import { Scene, PointLayer } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 20, center: [ 120, 20 ], zoom: 3 }) }); scene.on('loaded', () => { 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) .shape('simple') .size(15) .color('mag', mag => mag > 4.5 ? '#5B8FF9' : '#5CCEA1';) .style({ opacity: 0.6, strokeWidth: 3 }); scene.addLayer(pointLayer); }); }); ``` ### shape 简单点图层使用的 `shape` 参数固定为 `simple`。 ### use - 简单点图层的使用和一般的点图层表现一致 - 简单点图层的实质是精灵贴图，因此简单点图层始终面向相机（普通的 2D 点图层保持面向上） - 🌟 当用户对点图层的朝向没有要求或是对点图层的可视化效果要求比较简单，那么推荐尽量使用简单点图层，可以节省大量性能 - 🌟 简单点图层由于实质是精灵贴图，因此有大小限制：一般是 [1, 64]，不同设备之间存在差异 ```javascript // L7 提供了查询方法快速查看 scene.getPointSizeRange(); // Float32Array - [min, max] ``` #### FAQ - Canonical page: https://l7.antv.antgroup.com/zh/tutorial/FAQ/ - Markdown source: https://l7.antv.antgroup.com/zh/tutorial/FAQ.md - Description: FAQ --- title: "FAQ" description: "FAQ" language: "zh" canonical: "https://l7.antv.antgroup.com/zh/tutorial/FAQ/" --- ### 项目中 L7 各个依赖包版本不一致导致报错 ```js Error: Cannot apply @injectable decorator multiple times. ```

🌟 解决方法：
删除 `node_modules` 下所有不同版本的 `L7` 包，重新安装启动即可。 ### 禁止地图交互 1. 初始化的时候可以在 `map` 配置项设置 - 高德地图可查看 https://lbs.amap.com/api/javascript-api/reference/map - mapbox https://docs.mapbox.com/mapbox-gl-js/api/#map 2. 加载完成后设置调用 `scene` 的 [setMapStatus](/zh/api/scene/#setmapstatus) 方法 ### webcontext lost 1. 浏览器存在 `webgl` 实例上限，一般浏览器为 16 个，因此浏览器中可以存在的地图实例是有限的。 2. 在销毁地图后需要调用 `scene.destroy();` 对 `webgl` 实例进行销毁。 ## Examples ### 公交线路插件 - zh page: https://l7.antv.antgroup.com/zh/examples/amap-plugin/bus/busstop/ - Source path: examples/amap-plugin/bus/demo/busstop.js ```js import { LineLayer, PointLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ center: [116.475, 39.985], zoom: 12.2, plugin: ['AMap.ToolBar', 'AMap.LineSearch'], }), }); scene.addImage( 'road', 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg', ); scene.addImage( 'start', 'https://gw.alipayobjects.com/zos/bmw-prod/1c301f25-9bb8-4e67-8d5c-41117c877caf.svg', ); scene.addImage( 'end', 'https://gw.alipayobjects.com/zos/bmw-prod/f3db4998-e657-4c46-b5ab-205ddc12031f.svg', ); scene.addImage( 'busStop', 'https://gw.alipayobjects.com/zos/bmw-prod/54345af2-1d01-43e1-9d11-cd9bb953202c.svg', ); scene.on('loaded', () => { window.AMap.plugin(['AMap.ToolBar', 'AMap.LineSearch'], () => { scene.map.addControl(new AMap.ToolBar()); const linesearch = new AMap.LineSearch({ pageIndex: 1, // 页码，默认值为1 pageSize: 1, // 单页显示结果条数，默认值为20，最大值为50 city: '北京', // 限定查询城市，可以是城市名（中文/中文全拼）、城市编码，默认值为『全国』 extensions: 'all', // 是否返回公交线路详细信息，默认值为『base』 }); // 执行公交路线关键字查询 linesearch.search('536', function (status, result) { // 打印状态信息status和结果信息result const { path, via_stops } = result.lineInfo[0]; const startPoint = [path[0]]; const endpoint = [path[path.length - 1]]; const budStopsData = via_stops.map((stop) => ({ lng: stop.location.lng, lat: stop.location.lat, name: stop.name, })); const data = [ { id: '1', coord: path.map((p) => [p.lng, p.lat]), }, ]; const busLine = new LineLayer({ blend: 'normal' }) .source(data, { parser: { type: 'json', coordinates: 'coord', }, }) .size(5) .shape('line') .color('rgb(99, 166, 242)') .texture('road') .animate({ interval: 1, // 间隔 duration: 1, // 持续时间，延时 trailLength: 2, // 流线长度 }) .style({ lineTexture: true, iconStep: 25, }); scene.addLayer(busLine); const startPointLayer = new PointLayer({ zIndex: 1 }) .source(startPoint, { parser: { x: 'lng', y: 'lat', type: 'json', }, }) .shape('start') .size(20) .style({ offsets: [0, 25], }); scene.addLayer(startPointLayer); const endPointLayer = new PointLayer({ zIndex: 1 }) .source(endpoint, { parser: { x: 'lng', y: 'lat', type: 'json', }, }) .shape('end') .size(25) .style({ offsets: [0, 25], }); scene.addLayer(endPointLayer); const busStops = new PointLayer() .source(budStopsData, { parser: { x: 'lng', y: 'lat', type: 'json', }, }) .shape('busStop') .size(13) .style({ offsets: [20, 0], }); scene.addLayer(busStops); const busStopsName = new PointLayer() .source(budStopsData, { parser: { x: 'lng', y: 'lat', type: 'json', }, }) .shape('name', 'text') .size(12) .color('#000') .style({ textAnchor: 'left', textOffset: [80, 0], stroke: '#fff', strokeWidth: 1, }); scene.addLayer(busStopsName); }); }); }); ``` ### 卫星地图 - zh page: https://l7.antv.antgroup.com/zh/examples/amap-plugin/bus/satellite/ - Source path: examples/amap-plugin/bus/demo/satellite.js ```js import { Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ center: [105, 30], zoom: 2, }), }); scene.on('loaded', () => { scene.map.add(new window.AMap.TileLayer.Satellite()); }); ``` ### xyz瓦片地图 - zh page: https://l7.antv.antgroup.com/zh/examples/amap-plugin/bus/xyztile/ - Source path: examples/amap-plugin/bus/demo/xyztile.js ```js import { Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ center: [105, 30], zoom: 2, }), }); scene.on('loaded', () => { const xyzTileLayer = new window.AMap.TileLayer({ getTileUrl: 'https://wprd0{1,2,3,4}.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&size=1&scl=1&style=8<ype=11', zIndex: 100, }); scene.map.add(xyzTileLayer); }); ``` ### 杭州市地图 - zh page: https://l7.antv.antgroup.com/zh/examples/choropleth/administrative/hangzhou-city/ - Source path: examples/choropleth/administrative/demo/hangzhou-city.ts ```ts import { GaodeMap, Scene } from '@antv/l7'; import { Choropleth } from '@antv/l7plot'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'blank', center: [120.19382669582967, 30.258134], zoom: 3, }), }); scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json') .then((response) => response.json()) .then((list) => { const data = list .filter(({ level, parent }) => level === 'district' && parent === 330100) .map((item) => ({ ...item, value: Math.random() * 5000 })); const choropleth = new Choropleth({ source: { data, joinBy: { sourceField: 'adcode', geoField: 'adcode', }, }, viewLevel: { level: 'city', adcode: 330100, }, autoFit: true, color: { field: 'value', value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'], scale: { type: 'quantize' }, }, style: { opacity: 1, stroke: '#ccc', lineWidth: 0.6, lineOpacity: 1, }, label: { visible: true, field: 'name', style: { fill: '#000', opacity: 0.8, fontSize: 10, stroke: '#fff', strokeWidth: 1.5, textAllowOverlap: false, padding: [5, 5], }, }, state: { active: { stroke: 'black', lineWidth: 1 }, }, tooltip: { items: ['name', 'adcode', 'value'], }, zoom: { position: 'bottomright', }, legend: { position: 'bottomleft', }, }); choropleth.addToScene(scene); }); }); ``` ### 西湖区地图 - zh page: https://l7.antv.antgroup.com/zh/examples/choropleth/administrative/xihu-district/ - Source path: examples/choropleth/administrative/demo/xihu-district.ts ```ts import { GaodeMap, Scene } from '@antv/l7'; import { Choropleth } from '@antv/l7plot'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'blank', center: [120.19382669582967, 30.258134], zoom: 3, }), }); const choropleth = new Choropleth({ source: { data: [{ adcode: 330106, value: 200 }], joinBy: { sourceField: 'adcode', geoField: 'adcode', }, }, viewLevel: { level: 'district', adcode: 330106, }, autoFit: true, color: { field: 'value', value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'], scale: { type: 'quantize' }, }, style: { opacity: 1, stroke: '#ccc', lineWidth: 0.6, lineOpacity: 1, }, label: { visible: true, field: 'name', style: { fill: '#000', opacity: 0.8, fontSize: 10, stroke: '#fff', strokeWidth: 1.5, textAllowOverlap: false, padding: [5, 5], }, }, state: { active: { stroke: 'black', lineWidth: 1 }, }, tooltip: { items: ['name', 'adcode', 'value'], }, zoom: { position: 'bottomright', }, legend: { position: 'bottomleft', }, }); scene.on('loaded', () => { choropleth.addToScene(scene); }); ``` ### 浙江省地图 - zh page: https://l7.antv.antgroup.com/zh/examples/choropleth/administrative/zhejiang-province/ - Source path: examples/choropleth/administrative/demo/zhejiang-province.ts ```ts import { GaodeMap, Scene } from '@antv/l7'; import { Choropleth } from '@antv/l7plot'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'blank', center: [120.19382669582967, 30.258134], zoom: 3, }), }); scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json') .then((response) => response.json()) .then((list) => { const data = list .filter(({ level, parent }) => level === 'city' && parent === 330000) .map((item) => ({ ...item, value: Math.random() * 5000 })); const choropleth = new Choropleth({ source: { data, joinBy: { sourceField: 'adcode', geoField: 'adcode', }, }, viewLevel: { level: 'province', adcode: 330000, }, autoFit: true, color: { field: 'value', value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'], scale: { type: 'quantize' }, }, style: { opacity: 1, stroke: '#ccc', lineWidth: 0.6, lineOpacity: 1, }, label: { visible: true, field: 'name', style: { fill: '#000', opacity: 0.8, fontSize: 10, stroke: '#fff', strokeWidth: 1.5, textAllowOverlap: false, padding: [5, 5], }, }, state: { active: { stroke: 'black', lineWidth: 1 }, }, tooltip: { items: ['name', 'adcode', 'value'], }, zoom: { position: 'bottomright', }, legend: { position: 'bottomleft', }, }); choropleth.addToScene(scene); }); }); ``` ### 浙江省县级地图 - zh page: https://l7.antv.antgroup.com/zh/examples/choropleth/administrative/zhejiang-province-district/ - Source path: examples/choropleth/administrative/demo/zhejiang-province-district.ts ```ts import { GaodeMap, Scene } from '@antv/l7'; import { Choropleth } from '@antv/l7plot'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'blank', center: [120.19382669582967, 30.258134], zoom: 3, }), }); scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json') .then((response) => response.json()) .then((list) => { const data = list .filter(({ level }) => level === 'district') .map((item) => ({ ...item, value: Math.random() * 5000 })); const choropleth = new Choropleth({ source: { data, joinBy: { sourceField: 'adcode', geoField: 'adcode', }, }, viewLevel: { level: 'province', adcode: 330000, granularity: 'district', }, autoFit: true, color: { field: 'value', value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'], scale: { type: 'quantize' }, }, style: { opacity: 1, stroke: '#ccc', lineWidth: 0.6, lineOpacity: 1, }, label: { visible: true, field: 'name', style: { fill: '#000', opacity: 0.8, fontSize: 10, stroke: '#fff', strokeWidth: 1.5, textAllowOverlap: false, padding: [5, 5], }, }, state: { active: { stroke: 'black', lineWidth: 1 }, }, tooltip: { items: ['name', 'adcode', 'value'], }, zoom: { position: 'bottomright', }, legend: { position: 'bottomleft', }, }); choropleth.addToScene(scene); }); }); ``` ### ExportImage 导出图片 - zh page: https://l7.antv.antgroup.com/zh/examples/component/control/exportimage/ - Source path: examples/component/control/demo/exportimage.ts ```ts import { ExportImage, GaodeMap, PolygonLayer, Scene } from '@antv/l7'; const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 0, style: 'normal', center: [120.154672, 30.241095], zoom: 12, WebGLParams: { preserveDrawingBuffer: true, }, }), }); scene.on('loaded', () => { const polygonLayer = new PolygonLayer({}); polygonLayer .source({ type: 'FeatureCollection', features: [ { type: 'Feature', properties: {}, geometry: { type: 'Polygon', coordinates: [ [ [120.143575, 30.239811], [120.143575, 30.247856], [120.151213, 30.247856], [120.151213, 30.239811], [120.143575, 30.239811], ], ], }, }, ], }) .color('#ff0000') .style({ opacity: 0.5, }); scene.addLayer(polygonLayer); const exportImage = new ExportImage({ onExport: (base64) => { alert(base64); }, }); scene.addControl(exportImage); }); ``` ### Fullscreen 全屏 - zh page: https://l7.antv.antgroup.com/zh/examples/component/control/fullscreen/ - Source path: examples/component/control/demo/fullscreen.ts ```ts import { Fullscreen, GaodeMap, Scene } from '@antv/l7'; const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 0, style: 'normal', center: [120.154672, 30.241095], zoom: 12, }), }); scene.on('loaded', () => { const fullscreen = new Fullscreen(); scene.addControl(fullscreen); }); ``` ### GeoLocate 定位 - zh page: https://l7.antv.antgroup.com/zh/examples/component/control/geolocate/ - Source path: examples/component/control/demo/geolocate.ts ```ts import { GaodeMap, GeoLocate, Scene } from '@antv/l7'; import gcoord from 'gcoord'; const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 0, style: 'normal', center: [120.154672, 30.241095], zoom: 12, }), }); scene.on('loaded', () => { const geoLocate = new GeoLocate({ transform: (position) => { // 将获取到基于 WGS84 地理坐标系的坐标转成 GCJ02 坐标系 return gcoord.transform(position, gcoord.WGS84, gcoord.GCJ02); }, }); scene.addControl(geoLocate); }); ``` ### LayerSwitch 图层显隐控制 - zh page: https://l7.antv.antgroup.com/zh/examples/component/control/layerswitch/ - Source path: examples/component/control/demo/layerswitch.ts ```ts import { GaodeMap, LayerSwitch, LineLayer, PolygonLayer, Scene } from '@antv/l7'; const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 0, style: 'normal', center: [120.154672, 30.241095], zoom: 12, }), }); scene.on('loaded', () => { const polygonLayer = new PolygonLayer({ name: '填充图层', }); polygonLayer .source({ type: 'FeatureCollection', features: [ { type: 'Feature', properties: {}, geometry: { type: 'Polygon', coordinates: [ [ [120.143575, 30.239811], [120.143575, 30.247856], [120.151213, 30.247856], [120.151213, 30.239811], [120.143575, 30.239811], ], ], }, }, ], }) .color('#ff0000') .style({ opacity: 0.5, }); scene.addLayer(polygonLayer); const lineLayer = new LineLayer({ name: '边框图层', }); lineLayer .source({ type: 'FeatureCollection', features: [ { type: 'Feature', properties: {}, geometry: { type: 'Polygon', coordinates: [ [ [120.143575, 30.239811], [120.143575, 30.247856], [120.151213, 30.247856], [120.151213, 30.239811], [120.143575, 30.239811], ], ], }, }, ], }) .color('#700000') .size(2); scene.addLayer(lineLayer); const layerSwitch = new LayerSwitch({ layers: [polygonLayer, lineLayer], }); scene.addControl(layerSwitch); }); ``` ### LayerSwitch 图层显隐控制（展示图层图片） - zh page: https://l7.antv.antgroup.com/zh/examples/component/control/layerswitch1/ - Source path: examples/component/control/demo/layerswitch1.ts ```ts import { GaodeMap, LayerSwitch, RasterLayer, Scene } from '@antv/l7'; const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 0, style: 'normal', center: [120.154672, 30.241095], zoom: 12, }), }); scene.on('loaded', () => { const url1 = 'https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s&gl=CN&x={x}&y={y}&z={z}'; const rasterLayer1 = new RasterLayer({ zIndex: 1, }).source(url1, { parser: { type: 'rasterTile', tileSize: 256, zoomOffset: 0, }, }); const url2 = 'https://gac-geo.googlecnapps.cn/maps/vt?lyrs=h&gl=CN&x={x}&y={y}&z={z}'; const rasterLayer2 = new RasterLayer({ zIndex: 1, }).source(url2, { parser: { type: 'rasterTile', tileSize: 256, zoomOffset: 0, }, }); scene.addLayer(rasterLayer1); scene.addLayer(rasterLayer2); const layerSwitch = new LayerSwitch({ layers: [ { layer: rasterLayer1, name: '遥感影像图层', img: 'https://mdn.alipayobjects.com/huamei_k6sfo0/afts/img/A*fG9HQpyNuv0AAAAAAAAAAAAADjWqAQ/original', }, { layer: rasterLayer2, name: '文字标注图层', img: 'https://mdn.alipayobjects.com/huamei_k6sfo0/afts/img/A*CP5pQY_8Q_YAAAAAAAAAAAAADjWqAQ/original', }, ], }); scene.addControl(layerSwitch); }); ``` ### Logo - zh page: https://l7.antv.antgroup.com/zh/examples/component/control/logo/ - Source path: examples/component/control/demo/logo.ts ```ts import { GaodeMap, Logo, Scene } from '@antv/l7'; const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 0, style: 'normal', center: [120.154672, 30.241095], zoom: 12, }), // 关闭默认 L7 Logo logoVisible: false, }); scene.on('loaded', () => { const logo = new Logo(); scene.addControl(logo); }); ``` ### MapTheme 地图样式切换 - zh page: https://l7.antv.antgroup.com/zh/examples/component/control/maptheme/ - Source path: examples/component/control/demo/maptheme.ts ```ts import { GaodeMap, MapTheme, Scene } from '@antv/l7'; const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 0, style: 'normal', center: [120.154672, 30.241095], zoom: 12, }), }); scene.on('loaded', () => { const mapTheme = new MapTheme(); scene.addControl(mapTheme); }); ``` ### MouseLocation 鼠标经纬度 - zh page: https://l7.antv.antgroup.com/zh/examples/component/control/mouselocation/ - Source path: examples/component/control/demo/mouselocation.ts ```ts import { GaodeMap, MouseLocation, Scene } from '@antv/l7'; const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 0, style: 'normal', center: [120.154672, 30.241095], zoom: 12, }), }); scene.on('loaded', () => { const mouseLocation = new MouseLocation({ position: 'bottomright', }); scene.addControl(mouseLocation); }); ``` ### Scale 比例尺 - zh page: https://l7.antv.antgroup.com/zh/examples/component/control/scale/ - Source path: examples/component/control/demo/scale.ts ```ts import { GaodeMap, Scale, Scene } from '@antv/l7'; const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 0, style: 'normal', center: [120.154672, 30.241095], zoom: 12, }), logoVisible: false, }); scene.on('loaded', () => { const scale = new Scale(); scene.addControl(scale); }); ``` ### Swipe 卷帘对比 - zh page: https://l7.antv.antgroup.com/zh/examples/component/control/swipe/ - Source path: examples/component/control/demo/swipe.ts ```ts import { GaodeMap, RasterLayer, Scene, Swipe } from '@antv/l7'; const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 0, style: 'normal', center: [127.5671666579043, 7.445038892195569], zoom: 2.632456779444394, }), }); scene.on('loaded', () => { // 地形地图图层 const leftLayer = new RasterLayer({}).source( 'https://tiles{1-3}.geovisearth.com/base/v1/ter/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788', { parser: { maxZoom: 21, minZoom: 3, type: 'rasterTile', tileSize: 256, zoomOffset: 0, }, }, ); // 影像地图图层 const rightLayer = new RasterLayer({}).source( 'https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788', { parser: { type: 'rasterTile', tileSize: 256, zoomOffset: 0, }, }, ); scene.addLayer(leftLayer); scene.addLayer(rightLayer); const swipe = new Swipe({ orientation: 'vertical', ratio: 0.5, layers: [leftLayer], rightLayers: [rightLayer], }); scene.addControl(swipe); }); ``` ### 双屏对比 - zh page: https://l7.antv.antgroup.com/zh/examples/component/control/syncscene/ - Source path: examples/component/control/demo/syncscene.ts ```ts import { GaodeMap, HeatmapLayer, PointLayer, Scene } from '@antv/l7'; import { isNumber } from 'lodash-es'; // 通过 Scene 获取到地图引擎类型 function getMapType(scene) { const mapVersion = scene.getMapService().version; return mapVersion?.includes('MAPBOX') ? 'Mapbox' : 'Gaode'; } // 根据不同地图引擎类型，设置地图的状态「缩放层级、地图中心点、旋转角、倾角」 const updateSceneStatus = ( scene, status = { zoom, center, pitch, rotation, }, ) => { const mapType = getMapType(scene); const { zoom, center, pitch, rotation } = status; if (mapType === 'Gaode') { const map = scene?.map; // 高德地图关闭动画效果 if (center) map.setCenter(center, true); if (isNumber(zoom)) map?.setZoom(zoom + 1, true); if (isNumber(rotation)) map?.setRotation(360 - rotation, true); if (isNumber(pitch)) map?.setPitch(pitch, true); } else { if (isNumber(zoom)) scene?.setZoom(zoom); if (center) scene?.setCenter(center); if (isNumber(rotation)) scene.setRotation(rotation); if (isNumber(pitch)) scene?.setPitch(pitch); } }; export function syncScene(scenes, options = {}) { const { zoomGap = 0, mainIndex = 0 } = options ?? {}; const listeners = []; let handlers = []; // 添加地图事件监听 const listen = (index) => { const scene = scenes[index]; scene.on('mapmove', handlers[index]); // Gaode 地图调整倾角和旋转角的事件 scene.on('dragging', handlers[index]); // Mapbox 地图调整倾角和旋转角的事件 scene.on('rotate', handlers[index]); scene.on('zoomchange', handlers[index]); return () => { scene.off('mapmove', handlers[index]); scene.off('dragging', handlers[index]); scene.off('zoomchange', handlers[index]); scene.off('rotate', handlers[index]); }; }; const clearListener = () => { listeners?.forEach((call) => call()); listeners.length = 0; }; // 根据指定索引的 scene 同步其他 scene 状态 const moveScenePosition = (index) => { const movedScene = scenes[index]; const center = movedScene.getCenter(); const zoom = movedScene.getZoom(); const rotation = movedScene.getRotation(); const pitch = movedScene.getPitch(); /** * 根据当前地图是否为主地图，分两种情况 * 1. 非主地图，则其他非主地图 zoom 设置当前 zoom ，主地图设置为 zoom - zoomGap * 2. 主地图，则其他非主地图 zoom 设置为 zoom + zoomGap */ const isMovedMainScene = index === mainIndex; scenes.forEach((scene, num) => { if (num !== index) { // 当前需要同步的状态是不是主地图 const sceneZoom = isMovedMainScene ? zoom + zoomGap : num === mainIndex ? zoom - zoomGap : zoom; updateSceneStatus(scene, { zoom: sceneZoom, center: [center.lng, center.lat], rotation, pitch, }); } }); }; const syncHandler = (index) => { clearListener(); moveScenePosition(index); initListener(); }; function initListener() { handlers = scenes.map((value, index) => { // 每个地图有自己的状态同步函数 return syncHandler.bind(null, index); }); scenes.forEach((scene, index) => { // 给每个地图绑定监听 listeners.push(listen(index)); }); } // 初始化,先将所有地图状态同步。 scenes.forEach((value, index) => { moveScenePosition(index); }); // 添加地图事件监听 initListener(); // 返回清除绑定的监听事件函数 return clearListener; } const mapDiv = document.getElementById('map'); if (mapDiv) { mapDiv.style.cssText = 'display: flex; height: 700px'; // 创建第一个新div并设置一些属性或内容 const newMapDiv1 = document.createElement('div'); newMapDiv1.style.cssText = 'width: 50%; height: 700px; position: relative; margin-right: 5px;'; newMapDiv1.id = 'map1'; // 给新div设置id // 创建第二个新div并设置一些属性或内容 const newMapDiv2 = document.createElement('div'); newMapDiv2.style.cssText = 'width: 50%; height: 700px; position: relative; margin-left: 5px;'; newMapDiv2.id = 'map2'; // 给新div设置id mapDiv.appendChild(newMapDiv1); mapDiv.appendChild(newMapDiv2); const scene = new Scene({ id: 'map1', map: new GaodeMap({ pitch: 0, style: 'normal', center: [114.07737552216226, 22.542656745583486], rotation: 90, zoom: 12.47985, }), // 关闭默认 L7 Logo logoVisible: false, }); scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json') .then((res) => res.json()) .then((data) => { const pointLayer = new PointLayer({}) .source(data) .shape('circle') .size('h12', [2, 5]) .color( 'h12', [ '#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', ].reverse(), ); scene.addLayer(pointLayer); }); }); const scene1 = new Scene({ id: 'map2', map: new GaodeMap({ pitch: 0, style: 'normal', center: [114.07737552216226, 22.542656745583486], rotation: 90, zoom: 12.47985, }), // 关闭默认 L7 Logo logoVisible: false, }); scene1.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json') .then((res) => res.json()) .then((data) => { const pointLayer = new HeatmapLayer({}) .source(data, { transforms: [ { type: 'hexagon', size: 400, field: 'h12', method: 'sum', }, ], }) .shape('hexagon') .style({ coverage: 0.9, angle: 0, }) .color( 'sum', [ '#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', ].reverse(), ); scene1.addLayer(pointLayer); }); }); syncScene([scene, scene1]); } ``` ### Zoom 缩放 - zh page: https://l7.antv.antgroup.com/zh/examples/component/control/zoom/ - Source path: examples/component/control/demo/zoom.ts ```ts import { GaodeMap, Scene, Zoom } from '@antv/l7'; const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 0, style: 'normal', center: [120.154672, 30.241095], zoom: 12, }), }); scene.on('loaded', () => { const zoom = new Zoom(); scene.addControl(zoom); }); ``` ### MarkerLayer 聚合Marker - zh page: https://l7.antv.antgroup.com/zh/examples/component/marker/clustermarker/ - Source path: examples/component/marker/demo/clustermarker.js ```js import { Marker, MarkerLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', center: [105.790327, 30], zoom: 2, }), }); scene.on('loaded', () => { addMarkers(); scene.render(); }); function addMarkers() { fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json') .then((res) => res.json()) .then((nodes) => { const markerLayer = new MarkerLayer({ cluster: true, }); for (let i = 0; i < nodes.features.length; i++) { const { coordinates } = nodes.features[i].geometry; const marker = new Marker().setLnglat({ lng: coordinates[0], lat: coordinates[1], }); markerLayer.addMarker(marker); } scene.addMarkerLayer(markerLayer); }); } ``` ### 默认 Marker - zh page: https://l7.antv.antgroup.com/zh/examples/component/marker/defaultmarker/ - Source path: examples/component/marker/demo/defaultmarker.js ```js import { Marker, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', center: [105.790327, 36.495636], zoom: 4, }), }); scene.on('loaded', () => { addMarkers(); scene.render(); }); function addMarkers() { fetch('https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json') .then((res) => res.json()) .then((nodes) => { for (let i = 0; i < nodes.length; i++) { if (nodes[i].g !== '1' || nodes[i].v === '') { continue; } const marker = new Marker().setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y }); scene.addMarker(marker); } }); } ``` ### 温度 - zh page: https://l7.antv.antgroup.com/zh/examples/component/marker/marker/ - Source path: examples/component/marker/demo/marker.js ```js import { Marker, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', center: [105.790327, 36.495636], zoom: 4, }), }); scene.on('loaded', () => { addMarkers(); scene.render(); }); function addMarkers() { fetch('https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json') .then((res) => res.json()) .then((nodes) => { for (let i = 0; i < nodes.length; i++) { if (nodes[i].g !== '1' || nodes[i].v === '') { continue; } const el = document.createElement('label'); el.className = 'labelclass'; el.textContent = nodes[i].v + '℃'; el.style.background = getColor(nodes[i].v); el.style.borderColor = getColor(nodes[i].v); const marker = new Marker({ element: el, }).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y }); scene.addMarker(marker); } }); } function getColor(v) { return v > 50 ? '#800026' : v > 40 ? '#BD0026' : v > 30 ? '#E31A1C' : v > 20 ? '#FC4E2A' : v > 10 ? '#FD8D3C' : v > 5 ? '#FEB24C' : v > 0 ? '#FED976' : '#FFEDA0'; } ``` ### MarkerLayer 统一管理Marker - zh page: https://l7.antv.antgroup.com/zh/examples/component/marker/markerlayer/ - Source path: examples/component/marker/demo/markerlayer.js ```js import { Marker, MarkerLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', center: [105.790327, 36.495636], zoom: 4, }), }); scene.on('loaded', () => { addMarkers(); scene.render(); }); function addMarkers() { fetch('https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json') .then((res) => res.json()) .then((nodes) => { const markerLayer = new MarkerLayer(); for (let i = 0; i < nodes.length; i++) { if (nodes[i].g !== '1' || nodes[i].v === '') { continue; } const el = document.createElement('label'); el.className = 'labelclass'; el.textContent = nodes[i].v + '℃'; el.style.background = getColor(nodes[i].v); el.style.borderColor = getColor(nodes[i].v); const marker = new Marker({ element: el, }).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y }); markerLayer.addMarker(marker); } scene.addMarkerLayer(markerLayer); }); } function getColor(v) { const colors = [ '#ffffe5', '#f7fcb9', '#d9f0a3', '#addd8e', '#78c679', '#41ab5d', '#238443', '#005a32', ]; return v > 50 ? colors[7] : v > 40 ? colors[6] : v > 30 ? colors[5] : v > 20 ? colors[4] : v > 10 ? colors[3] : v > 5 ? colors[2] : v > 0 ? colors[1] : colors[0]; } ``` ### 图层气泡自定义内容 - zh page: https://l7.antv.antgroup.com/zh/examples/component/popup/customcontent/ - Source path: examples/component/popup/demo/customcontent.ts ```ts import * as G2 from '@antv/g2'; import { GaodeMap, LayerPopup, PointLayer, Scene } from '@antv/l7'; const data: any[] = [ { lng: 120.132235, lat: 30.250868, value: 34.71314604052238, name: '坐标点1', }, { lng: 120.156236, lat: 30.260268, value: 96.807880210153, name: '坐标点2', }, { lng: 120.163014, lat: 30.251297, value: 29.615472482876815, name: '坐标点3', }, { lng: 120.15394, lat: 30.231489, value: 49.90316258911784, name: '坐标点4', }, { lng: 120.154596, lat: 30.24065, value: 45.788587061188466, name: '坐标点5', }, { lng: 120.150223, lat: 30.235078, value: 29.741111717098544, name: '坐标点6', }, { lng: 120.143992, lat: 30.229411, value: 40.241555782182935, name: '坐标点7', }, { lng: 120.136995, lat: 30.237439, value: 86.5369792415296, name: '坐标点8', }, ]; const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 0, style: 'normal', center: [120.154672, 30.241095], zoom: 12, }), logoVisible: false, }); scene.on('loaded', () => { const pointLayer = new PointLayer({}); pointLayer .source(data, { parser: { type: 'json', x: 'lng', y: 'lat', }, }) .color('value', ['#FFCCC6', '#CF1421']) .size(10) .shape('circle'); scene.addLayer(pointLayer); const div = document.createElement('div'); const chart = new G2.Chart({ container: div, autoFit: true, width: 200, height: 200, }); // 新建一个 view 用来单独渲染Annotation chart.coordinate('theta', { radius: 0.75, innerRadius: 0.5, }); chart.scale('percent', { formatter: (val) => { val = val * 100 + '%'; return val; }, }); chart.tooltip(false); // 声明需要进行自定义图例字段： 'item' chart.legend(false); chart.interval().adjust('stack').position('percent').color('item', ['#5B8FF9', '#797979']).style({ fillOpacity: 1, }); const layerPopup = new LayerPopup({ items: [ { layer: pointLayer, customContent: (e) => { const otherValue = 100 - e.value; chart.data([ { item: '值', count: e.value, percent: e.value / 100 }, { item: '', count: otherValue, percent: otherValue / 100 }, ]); chart.render(); return div; }, }, ], }); scene.addPopup(layerPopup); }); ``` ### LayerPopup 图层气泡 - zh page: https://l7.antv.antgroup.com/zh/examples/component/popup/layerpopup/ - Source path: examples/component/popup/demo/layerpopup.ts ```ts import { GaodeMap, LayerPopup, PointLayer, Scene } from '@antv/l7'; const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 0, style: 'normal', center: [120.154672, 30.241095], zoom: 12, }), logoVisible: false, }); scene.on('loaded', () => { const pointLayer = new PointLayer({}); pointLayer .source( [ { lng: 120.132235, lat: 30.250868, value: 34.71314604052238, name: '坐标点1', }, { lng: 120.156236, lat: 30.260268, value: 96.807880210153, name: '坐标点2', }, { lng: 120.163014, lat: 30.251297, value: 29.615472482876815, name: '坐标点3', }, { lng: 120.15394, lat: 30.231489, value: 49.90316258911784, name: '坐标点4', }, { lng: 120.154596, lat: 30.24065, value: 45.788587061188466, name: '坐标点5', }, { lng: 120.150223, lat: 30.235078, value: 29.741111717098544, name: '坐标点6', }, { lng: 120.143992, lat: 30.229411, value: 40.241555782182935, name: '坐标点7', }, { lng: 120.136995, lat: 30.237439, value: 86.5369792415296, name: '坐标点8', }, ], { parser: { type: 'json', x: 'lng', y: 'lat', }, }, ) .color('value', ['#FFCCC6', '#CF1421']) .size(10) .shape('circle'); scene.addLayer(pointLayer); const layerPopup = new LayerPopup({ items: [ { layer: pointLayer, fields: [ { field: 'name', formatField: () => '名称', }, { field: 'value', formatField: () => '权值', formatValue: (val) => val.toFixed(2), }, 'lng', 'lat', ], }, ], }); scene.addPopup(layerPopup); }); ``` ### Popup 基础气泡 - zh page: https://l7.antv.antgroup.com/zh/examples/component/popup/popup/ - Source path: examples/component/popup/demo/popup.ts ```ts import { GaodeMap, Popup, Scene } from '@antv/l7'; const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 0, style: 'normal', center: [120.154672, 30.241095], zoom: 12, }), logoVisible: false, }); scene.on('loaded', () => { const popup = new Popup({ title: '自定义标题', html: '

Popup 示例的自定义内容

', lngLat: { lng: 120.154672, lat: 30.241095, }, }); scene.addPopup(popup); }); ``` ### 图层点击气泡 - zh page: https://l7.antv.antgroup.com/zh/examples/component/popup/popup2/ - Source path: examples/component/popup/demo/popup2.ts ```ts // @ts-ignore import { PointLayer, Popup, Scene } from '@antv/l7'; // @ts-ignore import { GaodeMap } from '@antv/l7-maps'; async function initMap() { const response = await fetch( 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', ); const scene = new Scene({ id: 'map', map: new GaodeMap({ center: [121.4, 31.258134], zoom: 12, pitch: 0, style: 'normal', }), }); scene.addImage( '00', 'https://gw.alipayobjects.com/mdn/rms_fcd5b3/afts/img/A*g8cUQ7pPT9YAAAAAAAAAAAAAARQnAQ', ); scene.addImage( '01', 'https://gw.alipayobjects.com/mdn/rms_fcd5b3/afts/img/A*LTcXTLBM7kYAAAAAAAAAAAAAARQnAQ', ); scene.addImage( '02', 'https://gw.alipayobjects.com/zos/bmw-prod/904d047a-16a5-461b-a921-98fa537fc04a.svg', ); const data = await response.json(); const newData = data.map((item: any) => { item.type = ['00', '01', '02'][Math.floor(Math.random() * 3)]; return item; }); const imageLayer = new PointLayer({}) .source(newData, { parser: { type: 'json', x: 'longitude', y: 'latitude', }, }) .shape('type', (v: any) => { return v; }) .active(false) .size(20); scene.addLayer(imageLayer); imageLayer.on('mousedown', (e) => { console.log('mousedown', e); }); const popup = new Popup({}); scene.addPopup(popup); imageLayer.on('click', (e) => { console.log(e); const { lng, lat } = e.lngLat; popup.setOptions({ title: e.feature.name, html: e.feature.name, lngLat: { lng, lat, }, }); }); } initMap(); ``` ### 客流图层 - zh page: https://l7.antv.antgroup.com/zh/examples/composite-layers/l7plot/flow-layer/ - Source path: examples/composite-layers/l7plot/demo/flow-layer.js ```js import { GaodeMapV2, LayerPopup, Scene } from '@antv/l7'; import { FlowLayer } from '@antv/l7-composite-layers'; // 详情可见：https://l7plot.antv.antgroup.com/api/composite-layers/flow-layer const scene = new Scene({ id: 'map', map: new GaodeMapV2({ pitch: 0, style: 'dark', center: [121.458794, 31.205302], zoom: 10.95, }), }); scene.on('loaded', async () => { const response = await fetch( 'https://gw.alipayobjects.com/os/bmw-prod/f4f3e99a-1d6c-4ab0-b08f-ec730c576b62.json', ); const data = await response.json(); const flowLayer = new FlowLayer({ source: { data, parser: { type: 'json', x: 'f_lon', y: 'f_lat', x1: 't_lon', y1: 't_lat', weight: 'weight', }, }, }); flowLayer.on('circleLayer:click', (e) => console.log('circle layer click', e)); flowLayer.on('lineLayer:click', (e) => console.log('line layer click', e)); scene && flowLayer.addTo(scene); const layerPopup = new LayerPopup({ items: [ { layer: 'circleLayer', fields: ['id', 'weight'], }, { layer: 'lineLayer', fields: ['id', 'weight'], }, ], }); scene.addPopup(layerPopup); }); ``` ### 字体标注图层 - zh page: https://l7.antv.antgroup.com/zh/examples/composite-layers/l7plot/icon-layer/ - Source path: examples/composite-layers/l7plot/demo/icon-layer.js ```js import { GaodeMap, Scene } from '@antv/l7'; import { IconFontLayer } from '@antv/l7-composite-layers'; // 详情可见：https://l7plot.antv.antgroup.com/api/composite-layers/icon-font-layer fetch('https://gw.alipayobjects.com/os/bmw-prod/9eb3f1b5-0c3b-49b2-8221-191d4ba8aa5e.json') .then((response) => response.json()) .then((data) => { const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 0, style: 'dark', zoom: 3, center: [120.19660949707033, 30.234747338474293], }), }); scene.on('loaded', () => { const iconLayer = new IconFontLayer({ id: 'iconImageLayer1', autoFit: true, source: { data, parser: { type: 'json', x: 'lng', y: 'lat', }, }, // color:{ // value:'red', // }, iconAtlas: { fontFamily: 'iconfont', fontPath: '//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076', iconFonts: [ ['smallRain', ''], ['middleRain', ''], ['hugeRain', ''], ['sun', ''], ['cloud', ''], ], }, icon: { field: 'iconType', value: 'text', }, iconStyle: { textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textOffset: [-10, 10], // 文本相对锚点的偏移量 [水平, 垂直] fontFamily: 'iconfont', textAllowOverlap: true, iconfont: true, }, fillColor: 'blue', radius: 40, opacity: 1, label: { visible: false, field: 'weather', style: { fill: '#fff', opacity: 0.6, fontSize: 12, textAnchor: 'top', textOffset: [0, 20], spacing: 1, padding: [5, 5], stroke: '#ffffff', strokeWidth: 0.3, strokeOpacity: 1.0, }, }, state: { active: { color: 'red', }, select: { radius: 20, opacity: 1, }, }, }); scene && iconLayer.addTo(scene); }); }); ``` ### 图片标注图层 - zh page: https://l7.antv.antgroup.com/zh/examples/composite-layers/l7plot/image-layer/ - Source path: examples/composite-layers/l7plot/demo/image-layer.js ```js import { GaodeMap, Scene } from '@antv/l7'; import { IconImageLayer } from '@antv/l7-composite-layers'; // 详情可见：https://l7plot.antv.antgroup.com/api/composite-layers/icon-image-layer fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json') .then((response) => response.json()) .then((data) => { const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 0, style: 'dark', zoom: 3, center: [120.19660949707033, 30.234747338474293], }), }); scene.on('loaded', () => { const iconLayer = new IconImageLayer({ id: 'iconImageLayer1', autoFit: true, source: { data, parser: { type: 'json', x: 'longitude', y: 'latitude', }, }, // color:{ // value:'red', // }, iconAtlas: { icon1: 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', icon2: 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg', }, icon: 'icon1', radius: { field: 'unit_price', value: [1, 20], }, opacity: 1, label: { field: 'name', state: { active: { color: 'blue', }, }, style: { fill: '#fff', opacity: 0.6, fontSize: 12, textAnchor: 'top', textOffset: [0, -40], spacing: 1, padding: [5, 5], stroke: '#ffffff', strokeWidth: 0.3, strokeOpacity: 1.0, }, }, state: { active: false, select: { radius: 20, opacity: 1, icon: 'icon2', }, }, }); scene && iconLayer.addTo(scene); }); }); ``` ### 绘制圆 - zh page: https://l7.antv.antgroup.com/zh/examples/draw/basic/draw-circle/ - Source path: examples/draw/basic/demo/draw-circle.js ```js import { Scene } from '@antv/l7'; import { DrawCircle, DrawEvent } from '@antv/l7-draw'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', center: [120.211944, 30.288946], zoom: 7.05, }), }); scene.on('loaded', () => { const drawCircle = new DrawCircle(scene, {}); drawCircle.enable(); drawCircle.on(DrawEvent.Change, (allFeatures) => { console.log(allFeatures); }); }); ``` ### 绘制线 - zh page: https://l7.antv.antgroup.com/zh/examples/draw/basic/draw-line/ - Source path: examples/draw/basic/demo/draw-line.js ```js import { Scene } from '@antv/l7'; import { DrawEvent, DrawLine } from '@antv/l7-draw'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', center: [120.211944, 30.288946], zoom: 7.05, }), }); scene.on('loaded', () => { const drawLine = new DrawLine(scene, { distanceOptions: {}, }); drawLine.enable(); drawLine.on(DrawEvent.Change, (allFeatures) => { console.log(allFeatures); }); }); ``` ### 绘制点 - zh page: https://l7.antv.antgroup.com/zh/examples/draw/basic/draw-point/ - Source path: examples/draw/basic/demo/draw-point.js ```js import { Scene } from '@antv/l7'; import { DrawEvent, DrawPoint } from '@antv/l7-draw'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', center: [120.211944, 30.288946], zoom: 7.05, }), }); scene.on('loaded', () => { const drawPoint = new DrawPoint(scene, {}); drawPoint.enable(); drawPoint.on(DrawEvent.Change, (allFeatures) => { console.log(allFeatures); }); setInterval(() => { console.log(scene.getZoom(), scene.getCenter()); }, 2000); }); ``` ### 绘制面 - zh page: https://l7.antv.antgroup.com/zh/examples/draw/basic/draw-polygon/ - Source path: examples/draw/basic/demo/draw-polygon.js ```js import { Scene } from '@antv/l7'; import { DrawEvent, DrawPolygon } from '@antv/l7-draw'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', center: [120.211944, 30.288946], zoom: 7.05, }), }); scene.on('loaded', () => { const drawPolygon = new DrawPolygon(scene, { areaOptions: {}, }); drawPolygon.enable(); drawPolygon.on(DrawEvent.Change, (allFeatures) => { console.log(allFeatures); }); }); ``` ### 绘制矩形 - zh page: https://l7.antv.antgroup.com/zh/examples/draw/basic/draw-rect/ - Source path: examples/draw/basic/demo/draw-rect.js ```js import { Scene } from '@antv/l7'; import { DrawEvent, DrawRect } from '@antv/l7-draw'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', center: [120.211944, 30.288946], zoom: 7.05, }), }); scene.on('loaded', () => { const drawRect = new DrawRect(scene, {}); drawRect.enable(); drawRect.on(DrawEvent.Change, (allFeatures) => { console.log(allFeatures); }); }); ``` ### 高德地图绘制 - zh page: https://l7.antv.antgroup.com/zh/examples/draw/control/amap/ - Source path: examples/draw/control/demo/amap.js ```js // https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tif import { Scene } from '@antv/l7'; import { ControlEvent, DrawControl } from '@antv/l7-draw'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', center: [116.1608, 40.1119], zoom: 15, }), }); scene.on('loaded', () => { const tileLayer = new AMap.TileLayer.Satellite(); tileLayer.setMap(scene.map); const drawControl = new DrawControl(scene, {}); scene.addControl(drawControl); drawControl.on(ControlEvent.DrawChange, (changeType) => { console.log(changeType); }); }); ``` ### 飞线 - zh page: https://l7.antv.antgroup.com/zh/examples/earth/arc3d/flyline/ - Source path: examples/earth/arc3d/demo/flyline.js ```js import { EarthLayer, LineLayer, Scene } from '@antv/l7'; import { Earth } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new Earth({}), }); // 地球模式下背景色默认为 #000 通过 setBgColor 方法我们可以设置可视化层的背景色 scene.setBgColor('#333'); const earthlayer = new EarthLayer() .source('https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ', { parser: { type: 'image', }, }) .color('#2E8AE6') .shape('fill') .style({ globalOptions: { ambientRatio: 0.6, // 环境光 diffuseRatio: 0.4, // 漫反射 specularRatio: 0.1, // 高光反射 }, }) .animate(true); const atomLayer = new EarthLayer().color('#2E8AE6').shape('atomSphere'); const bloomLayer = new EarthLayer().color('#fff').shape('bloomSphere').style({ opacity: 0.7, }); scene.on('loaded', () => { scene.addLayer(earthlayer); scene.addLayer(atomLayer); scene.addLayer(bloomLayer); fetch('https://gw.alipayobjects.com/os/bmw-prod/20a69b46-3d6d-4ab5-b8b5-150b6aa52c88.json') .then((res) => res.json()) .then((flydata) => { const flyLine = new LineLayer({ blend: 'normal' }) .source(flydata, { parser: { type: 'json', coordinates: 'coord', }, }) .color('#b97feb') .shape('arc3d') .size(0.5) .active(true) .animate({ interval: 2, trailLength: 2, duration: 1, }) .style({ segmentNumber: 60, globalArcHeight: 20, }); scene.addLayer(flyLine); }); earthlayer.setEarthTime(4.0); }); ``` ### 高德地图 - zh page: https://l7.antv.antgroup.com/zh/examples/engine/three/amap-ant/ - Source path: examples/engine/three/demo/amap-ant.js ```js import { Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import { ThreeLayer, ThreeRender } from '@antv/l7-three'; import * as THREE from 'three'; const scene = new Scene({ id: 'map', map: new GaodeMap({ center: [111.4453125, 32.84267363195431], pitch: 45, rotation: 30, zoom: 12, }), }); scene.on('loaded', () => { scene.registerRenderService(ThreeRender); const threeJSLayer = new ThreeLayer({ enableMultiPassRenderer: false, onAddMeshes: (threeScene, layer) => { threeScene.add(new THREE.AmbientLight(0xffffff)); const sunlight = new THREE.DirectionalLight(0xffffff, 0.25); sunlight.position.set(0, 80000000, 100000000); sunlight.matrixWorldNeedsUpdate = true; threeScene.add(sunlight); const center = scene.getCenter(); const cubeGeometry = new THREE.BoxBufferGeometry(10000, 10000, 10000); const cubeMaterial = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide }); const cube = new THREE.Mesh(cubeGeometry, cubeMaterial); layer.setObjectLngLat(cube, [center.lng + 0.05, center.lat], 0); threeScene.add(cube); // 使用 Three.js glTFLoader 加载模型 const loader = new window.GLTFLoader(); loader.load( 'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf', (gltf) => { const gltfScene = gltf.scene; setDouble(gltfScene); layer.adjustMeshToMap(gltfScene); // gltfScene.scale.set(1000, 1000, 1000) layer.setMeshScale(gltfScene, 1000, 1000, 1000); layer.setObjectLngLat(gltfScene, [center.lng, center.lat], 0); const animations = gltf.animations; if (animations && animations.length) { const mixer = new THREE.AnimationMixer(gltfScene); const animation = animations[2]; const action = mixer.clipAction(animation); action.play(); layer.addAnimateMixer(mixer); } // layer.setObjectLngLat(gltfScene, [center.lng + 0.05, center.lat] as ILngLat, 0) let t = 0; setInterval(() => { t += 0.01; layer.setObjectLngLat(gltfScene, [center.lng, center.lat + Math.sin(t) * 0.1], 0); }, 16); // 向场景中添加模型 threeScene.add(gltfScene); // 重绘图层 layer.render(); }, ); }, }).animate(true); scene.addLayer(threeJSLayer); }); function setDouble(object) { if (object.children && object.children.length && object.children.length > 0) { object.children.map((child) => setDouble(child)); } else if (object.material) { object.material.side = THREE.DoubleSide; } } ``` ### 基础图形与光照 - zh page: https://l7.antv.antgroup.com/zh/examples/engine/three/basic-geometry/ - Source path: examples/engine/three/demo/basic-geometry.js ```js import { Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import { ThreeLayer, ThreeRender } from '@antv/l7-three'; import * as THREE from 'three'; const scene = new Scene({ id: 'map', map: new GaodeMap({ center: [111.4453125, 32.84267363195431], pitch: 45, rotation: 30, zoom: 12, mapStyle: 'amap://styles/darkblue', }), }); scene.on('loaded', () => { scene.registerRenderService(ThreeRender); const threeJSLayer = new ThreeLayer({ enableMultiPassRenderer: false, onAddMeshes: (threeScene, layer) => { // 当前场景的中心 const center = scene.getCenter(); // 环境光照 threeScene.add(new THREE.AmbientLight(0xffffff, 0.2)); const sunlight = new THREE.DirectionalLight(0xff0000, 0.8); layer.setObjectLngLat(sunlight, [center.lng + 0.3, center.lat + 0.08], 1000); sunlight.matrixWorldNeedsUpdate = true; threeScene.add(sunlight); const directionalLightHelper = new THREE.DirectionalLightHelper(sunlight, 5); threeScene.add(directionalLightHelper); const box = createBoxGeometry(); box.scale.set(1000, 1000, 1000); box.rotation.set(0, 90, 0); layer.setObjectLngLat(box, [center.lng - 0.05, center.lat], 0); threeScene.add(box); const circle = createCircleGeometry(); circle.scale.set(100, 100, 1000); layer.setObjectLngLat(circle, [center.lng - 0.03, center.lat], 0); threeScene.add(circle); const cylinder = createCylinderGeometry(); cylinder.scale.set(100, 100, 100); layer.setObjectLngLat(cylinder, [center.lng - 0.015, center.lat], 0); threeScene.add(cylinder); const cone = createConeGeometry(); cone.scale.set(100, 100, 100); layer.setObjectLngLat(cone, [center.lng + 0.01, center.lat], 0); threeScene.add(cone); const plane = createPlaneGeometry(); plane.scale.set(1000, 1000, 1000); layer.setObjectLngLat(plane, [center.lng + 0.03, center.lat], 0); threeScene.add(plane); const shape = createShape(); shape.scale.set(100, 100, 100); layer.setObjectLngLat(shape, [center.lng + 0.03, center.lat], 0); threeScene.add(shape); const sphere = createSphereGeometry(); sphere.scale.set(10, 10, 10); layer.setObjectLngLat(sphere, [center.lng + 0.07, center.lat], 0); threeScene.add(sphere); const tube = createTube(); tube.scale.set(100, 100, 100); layer.setObjectLngLat(tube, [center.lng + 0.07, center.lat], 0); threeScene.add(tube); const points = createPoints(); points.scale.set(100, 100, 100); layer.setObjectLngLat(points, [center.lng + 0.11, center.lat], 0); threeScene.add(points); const line = createLine(); line.scale.set(100, 100, 100); layer.setObjectLngLat(line, [center.lng + 0.13, center.lat], 0); threeScene.add(line); const camera = layer.threeRenderService.getRenderCamera(); const cameraHelper = createCameraHelper(camera); layer.setObjectLngLat(plane, [center.lng, center.lat], 0); threeScene.add(cameraHelper); }, }).animate(true); scene.addLayer(threeJSLayer); }); function createBoxGeometry() { const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshPhongMaterial({ color: 0xffffff, reflectivity: 0.8, shininess: 80, emissive: 0x049ef4, specular: 0x049ef4, }); const cube = new THREE.Mesh(geometry, material); return cube; } function createCircleGeometry() { const geometry = new THREE.CircleGeometry(5, 32); const material = new THREE.MeshPhongMaterial({ color: 0xffffff, reflectivity: 0.8, shininess: 80, emissive: 0x049ef4, specular: 0x049ef4, }); const circle = new THREE.Mesh(geometry, material); return circle; } function createCylinderGeometry() { const geometry = new THREE.CylinderGeometry(5, 5, 20, 32); const material = new THREE.MeshPhongMaterial({ color: 0xffffff, reflectivity: 0.8, shininess: 80, emissive: 0x049ef4, specular: 0x049ef4, }); const cylinder = new THREE.Mesh(geometry, material); return cylinder; } function createConeGeometry() { const geometry = new THREE.ConeGeometry(5, 20, 32); const material = new THREE.MeshPhongMaterial({ color: 0xffffff, reflectivity: 0.8, shininess: 80, emissive: 0x049ef4, specular: 0x049ef4, }); const cone = new THREE.Mesh(geometry, material); return cone; } function createPlaneGeometry() { const geometry = new THREE.PlaneGeometry(1, 1); const material = new THREE.MeshPhongMaterial({ color: 0xffffff, reflectivity: 0.8, shininess: 80, emissive: 0x049ef4, specular: 0x049ef4, }); const plane = new THREE.Mesh(geometry, material); return plane; } function createShape() { const x = 0, y = 0; const heartShape = new THREE.Shape(); heartShape.moveTo(x + 5, y + 5); heartShape.bezierCurveTo(x + 5, y + 5, x + 4, y, x, y); heartShape.bezierCurveTo(x - 6, y, x - 6, y + 7, x - 6, y + 7); heartShape.bezierCurveTo(x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19); heartShape.bezierCurveTo(x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7); heartShape.bezierCurveTo(x + 16, y + 7, x + 16, y, x + 10, y); heartShape.bezierCurveTo(x + 7, y, x + 5, y + 5, x + 5, y + 5); const geometry = new THREE.ShapeGeometry(heartShape); const material = new THREE.MeshPhongMaterial({ color: 0xffffff, reflectivity: 0.8, shininess: 80, emissive: 0x049ef4, specular: 0x049ef4, }); const mesh = new THREE.Mesh(geometry, material); return mesh; } function createSphereGeometry() { const geometry = new THREE.SphereGeometry(15, 32, 16); const material = new THREE.MeshPhongMaterial({ color: 0xffffff, reflectivity: 0.8, shininess: 80, emissive: 0x049ef4, specular: 0x049ef4, }); const sphere = new THREE.Mesh(geometry, material); return sphere; } function createTube() { class CustomSinCurve extends THREE.Curve { constructor(scale = 1) { super(); this.scale = scale; } getPoint(t, optionalTarget = new THREE.Vector3()) { const tx = t * 3 - 1.5; const ty = Math.sin(2 * Math.PI * t); const tz = 0; return optionalTarget.set(tx, ty, tz).multiplyScalar(this.scale); } } const path = new CustomSinCurve(10); const geometry = new THREE.TubeGeometry(path, 20, 2, 8, false); const material = new THREE.MeshPhongMaterial({ color: 0xffffff, reflectivity: 0.8, shininess: 80, emissive: 0x049ef4, specular: 0x049ef4, }); const mesh = new THREE.Mesh(geometry, material); return mesh; } function createCameraHelper(camera = undefined) { const cameraObj = camera ?? new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const helper = new THREE.CameraHelper(cameraObj); return helper; } function createPoints() { const points = []; points.push(new THREE.Vector3(-10, 0, 0)); points.push(new THREE.Vector3(0, 10, 0)); points.push(new THREE.Vector3(10, 0, 0)); const geometry = new THREE.BufferGeometry().setFromPoints(points); const material = new THREE.PointsMaterial({ size: 200, color: 0x049ef4 }); const pointsGeometry = new THREE.Points(geometry, material); return pointsGeometry; } function createLine() { const material = new THREE.LineBasicMaterial({ color: 0x049ef4, linewidth: 6, }); const points = []; points.push(new THREE.Vector3(-10, 0, 0)); points.push(new THREE.Vector3(0, 10, 0)); points.push(new THREE.Vector3(10, 0, 0)); const geometry = new THREE.BufferGeometry().setFromPoints(points); const line = new THREE.Line(geometry, material); return line; } ``` ### 点击建筑 - zh page: https://l7.antv.antgroup.com/zh/examples/engine/three/space-click/ - Source path: examples/engine/three/demo/space-click.js ```js import { Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import { ThreeLayer, ThreeRender } from '@antv/l7-three'; import { animate, easeInOut } from 'popmotion'; import * as THREE from 'three'; import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; function changeValue(startValue, endValue, duration = 500, callback, complete) { if (typeof startValue === 'number') { animate({ from: { v: startValue, }, to: { v: endValue, }, ease: easeInOut, duration, onUpdate: (o) => { callback(o.v); return ''; }, onComplete: () => { complete && complete(); return ''; }, }); } else { animate({ from: { lng: startValue.lng, lat: startValue.lat, pitch: startValue.pitch, rotation: startValue.rotation, zoom: startValue.zoom, }, to: { lng: endValue.lng, lat: endValue.lat, pitch: endValue.pitch, rotation: endValue.rotation, zoom: endValue.zoom, }, ease: easeInOut, duration, onUpdate: (o) => { callback(o); return ''; }, onComplete: () => { complete && complete(); return ''; }, }); } return ''; } const raycaster = new THREE.Raycaster(); const lng = 120.1; const lat = 30.265; const scene = new Scene({ id: 'map', map: new GaodeMap({ center: [lng, lat], pitch: 70, rotation: 220, zoom: 16, }), }); scene.on('loaded', () => { const mouse = new THREE.Vector2(); let zspace, aspace, ASpaceTextMesh, ZSpaceTextMesh; scene.registerRenderService(ThreeRender); const center = scene.getCenter(); const threeJSLayer = new ThreeLayer({ enableMultiPassRenderer: false, // @ts-ignore onAddMeshes: (threeScene, layer) => { threeScene.add(new THREE.AmbientLight(0xffffff)); const sunlight = new THREE.DirectionalLight(0xffffff, 0.25); sunlight.position.set(0, 80000000, 100000000); sunlight.matrixWorldNeedsUpdate = true; threeScene.add(sunlight); // map // https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*gA0NRbuOF5cAAAAAAAAAAAAAARQnAQ // height // https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*eYFaRYlnnOUAAAAAAAAAAAAAARQnAQ const image = new Image(); image.crossOrigin = ''; image.src = 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*eYFaRYlnnOUAAAAAAAAAAAAAARQnAQ'; image.onload = () => { const canvas = document.createElement('canvas'); canvas.width = image.width; canvas.height = image.height; const ctx = canvas.getContext('2d'); ctx.drawImage(image, 0, 0, image.width, image.height); const heightData = ctx.getImageData(0, 0, image.width, image.height).data; const s = 53000; const geometry = new THREE.PlaneGeometry(s, s, 255, 255); geometry.vertices.map((v, i) => { const r = heightData[i * 4]; const g = heightData[i * 4 + 1]; const b = heightData[i * 4 + 2]; let h = -10000.0 + (r * 255.0 * 256.0 * 256.0 + g * 255.0 * 256.0 + b * 255.0) * 0.1; h = h / 20 - 127600; h = Math.max(0, h); v.z = h; return ''; }); const material = new THREE.MeshPhongMaterial({ transparent: true, // opacity: 0.6, map: new THREE.TextureLoader().load( 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*gA0NRbuOF5cAAAAAAAAAAAAAARQnAQ', ), side: THREE.DoubleSide, }); const plane = new THREE.Mesh(geometry, material); layer.setObjectLngLat(plane, [120.1008, 30.2573], 0); plane.position.z = 10; threeScene.add(plane); return ''; }; // 使用 Three.js glTFLoader 加载模型 const loader = new GLTFLoader(); loader.load( 'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf', (gltf) => { const antModel = gltf.scene; setDouble(antModel); // antModel.children[0].material.side = THREE.DoubleSide layer.adjustMeshToMap(antModel); layer.setMeshScale(antModel, 20, 20, 20); layer.setObjectLngLat(antModel, [center.lng - 0.002, center.lat], 0); const animations = gltf.animations; if (animations && animations.length) { const mixer = new THREE.AnimationMixer(antModel); const animation = animations[1]; const action = mixer.clipAction(animation); action.play(); layer.addAnimateMixer(mixer); } antModel.rotation.y = Math.PI; // 向场景中添加模型 threeScene.add(antModel); // 重绘图层 layer.render(); return ''; }, ); const v = ` varying vec2 vUv; varying vec4 worldPosition; void main() { vUv = uv; worldPosition = modelMatrix * vec4(position, 1.0); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`; const f = ` varying vec2 vUv; varying vec4 worldPosition; uniform vec3 color; void main() { gl_FragColor = vec4(color, fract(worldPosition.z / 50.0)); }`; const shadermaterial = new THREE.ShaderMaterial({ uniforms: { color: { value: new THREE.Vector3(0.21372549, 0.34705882, 0.56470588), }, }, vertexShader: v, fragmentShader: f, side: THREE.DoubleSide, }); const fbxLoaded = new FBXLoader(); // load ZSpace fbxLoaded.load( 'https://gw.alipayobjects.com/os/bmw-prod/af1652c9-3c4f-4e73-ac4c-1f78fefbaf6a.fbx', (gltf) => { zspace = gltf; layer.adjustMeshToMap(zspace); // @ts-ignore zspace.children[0].material = shadermaterial; layer.setMeshScale(zspace, 10, 10, 10); layer.setObjectLngLat(zspace, [120.1015, 30.2661], 0); zspace.rotation.x = Math.PI * 2; zspace.rotation.z = -Math.PI * (-2 / 15); threeScene.add(zspace); return ''; }, ); fbxLoaded.load( 'https://gw.alipayobjects.com/os/bmw-prod/11d6e4c1-bd5b-4dc1-bae5-ac51c14e9056.fbx', (model) => { aspace = model; layer.adjustMeshToMap(aspace); // @ts-ignore aspace.children[0].material = shadermaterial; layer.setMeshScale(aspace, 8, 8, 8); layer.setObjectLngLat(aspace, [120.099, 30.261], 0); aspace.rotation.x = Math.PI * 2; aspace.rotation.z = -Math.PI * (3 / 15); threeScene.add(aspace); return ''; }, ); console.log(THREE.FontLoader); const textLoader = new THREE.FontLoader(); textLoader.load( 'https://gw.alipayobjects.com/os/bmw-prod/0a3f46eb-294e-4d95-87f2-052c26ad4bf1.json', (font) => { const fontOptions = { size: 360, // 字号大小，一般为大写字母的高度 height: 50, // 文字的厚度 font, // 字体，默认是'helvetiker'，需对应引用的字体文件 bevelThickness: 10, // 倒角厚度 bevelSize: 10, // 倒角宽度 curveSegments: 30, // 弧线分段数，使得文字的曲线更加光滑 bevelEnabled: true, // 布尔值，是否使用倒角，意为在边缘处斜切 }; const aspaceGeo = new THREE.TextGeometry('ASpace', fontOptions); aspaceGeo.center(); const zspaceGeo = new THREE.TextGeometry('ZSpace', fontOptions); zspaceGeo.center(); const fontMat = new THREE.MeshPhongMaterial({ color: 0xcccccc, shininess: 60, specular: 0xcccccc, side: THREE.DoubleSide, }); const testHeight = 900; ASpaceTextMesh = new THREE.Mesh(aspaceGeo, fontMat); ASpaceTextMesh.rotation.x = Math.PI / 2; ASpaceTextMesh.rotation.y = (-Math.PI * 3) / 4; layer.setObjectLngLat(ASpaceTextMesh, [120.099, 30.261], testHeight); threeScene.add(ASpaceTextMesh); ZSpaceTextMesh = new THREE.Mesh(zspaceGeo, fontMat); ZSpaceTextMesh.rotation.x = Math.PI / 2; ZSpaceTextMesh.rotation.y = (-Math.PI * 3) / 4; layer.setObjectLngLat(ZSpaceTextMesh, [120.103, 30.2661], testHeight); threeScene.add(ZSpaceTextMesh); getH(0, 200); function getH(h1, h2) { changeValue( h1, h2, 1000, (h) => { ASpaceTextMesh.position.z = testHeight + h; ZSpaceTextMesh.position.z = testHeight + h; return ''; }, () => { setTimeout(() => getH(h2, h1), 10); return ''; }, ); } return ''; }, ); }, }).animate(true); scene.addLayer(threeJSLayer); // @ts-ignore let currentCamera = threeJSLayer.threeRenderService?.getRenderCamera(); const currentView = { lng: center.lng, lat: center.lat, pitch: 70, rotation: 220, zoom: 16, }; scene.on('zoom', () => { const cen = scene.getCenter(); currentView.lng = cen.lng; currentView.lat = cen.lat; currentView.pitch = scene.getPitch(); currentView.zoom = scene.getZoom(); return ''; }); scene.map.on('mapchange', () => { // @ts-ignore currentCamera = threeJSLayer.getRenderCamera(); currentView.pitch = scene.getPitch(); return ''; }); const ASpaceView = { lng: 120.109509, lat: 30.251529, pitch: 83, rotation: 225, zoom: 15, }; const ZSpaceView = { lng: 120.112026, lat: 30.256881, pitch: 80, rotation: 220, zoom: 15, }; scene.on('click', (ev) => { // @ts-ignore const size = scene?.map?.getSize(); mouse.x = (ev.pixel.x / size.width) * 2 - 1; mouse.y = -(ev.pixel.y / size.height) * 2 + 1; raycaster.setFromCamera(mouse, currentCamera); const intersects = raycaster.intersectObjects([zspace, aspace], true); if (intersects.length > 0) { const object = intersects[0].object; if (object.name === 'Z空间') { selectSpace(currentView, ZSpaceView, ZSpaceTextMesh); } else { selectSpace(currentView, ASpaceView, ASpaceTextMesh); } } return ''; }); function selectSpace(currentView, targetView, spaceText) { if (spaceText) { changeValue(spaceText.rotation.y, spaceText.rotation.y + Math.PI * 2, 500, (r) => { spaceText.rotation.y = r; return ''; }); } changeValue(currentView, targetView, 500, (view) => { scene.setCenter([view.lng, view.lat]); scene.setPitch(view.pitch); scene.setRotation(view.rotation); scene.setZoom(view.zoom); currentView.lng = view.lng; currentView.lat = view.lat; currentView.pitch = view.pitch; currentView.rotation = view.rotation; currentView.zoom = view.zoom; return ''; }); } return ''; }); function setDouble(object) { if (object.children && object.children.length && object.children.length > 0) { object.children.map((child) => setDouble(child)); } else if (object.material) { object.material.side = THREE.DoubleSide; } } ``` ### 3D底图 - zh page: https://l7.antv.antgroup.com/zh/examples/gallery/animate/3d-base-map/ - Source path: examples/gallery/animate/demo/3d-base-map.js ```js /* eslint-disable no-undef */ import { LineLayer, Marker, PointLayer, PolygonLayer, Scene } from '@antv/l7'; import { Map } from '@antv/l7-maps'; const pointData = [ { data: [113.177855, 23.068432], longitude: '113.177855', latitude: '23.068432', to_longitude: '108.484899', to_latitude: '22.826101', text: '广州', color: 'rgb(57,255,20)', value: '1', unit: '天', }, { data: [108.484899, 22.826101], longitude: '108.484899', latitude: '22.826101', to_longitude: '106.467366', to_latitude: '26.64921', text: '南宁', color: 'rgb(57,255,20)', value: '6', unit: '小时', }, { data: [106.467366, 26.64921], longitude: '106.467366', latitude: '26.64921', text: '贵阳', color: 'rgb(57,255,20)', value: '3', unit: '小时', }, { data: [106.563516, 29.618267], longitude: '106.563516', latitude: '29.618267', text: '重庆', color: 'rgb(255,255,255)', value: '3', unit: '小时', }, { data: [125.403053, 43.907546], longitude: '125.403053', latitude: '43.907546', text: '长春', color: 'rgb(255,255,255)', value: '3', unit: '小时', }, { data: [113.607498, 34.794084], longitude: '113.607498', latitude: '34.794084', to_longitude: '125.403053', to_latitude: '43.907546', text: '郑州', color: 'rgb(57,255,20)', value: '1', unit: '天', }, { data: [114.63332, 38.174659], longitude: '114.63332', latitude: ' 38.174659', text: '石家庄', color: 'rgb(255,255,255)', value: '3', unit: '小时', }, { data: [101.740747, 36.558335], longitude: '101.740747', latitude: '36.558335', text: '西宁', color: 'rgb(255,255,255)', value: '3', unit: '小时', }, { data: [111.677604, 40.853815], longitude: '111.677604', latitude: '40.853815', to_longitude: '106.563516', to_latitude: '29.618267', text: '呼和浩特', color: 'rgb(255,255,255)', value: '1', unit: '天', }, { data: [120.152667, 30.195612], longitude: '120.152667', latitude: '30.195612', text: '杭州', color: 'rgb(255,255,255)', value: '3', unit: '小时', }, { data: [115.804205, 28.766485], longitude: '115.804205', latitude: '28.766485', to_longitude: '120.152667', to_latitude: '30.195612', text: '南昌', color: 'rgb(255,255,255)', value: '1', unit: '天', }, { data: [126.520858, 45.842367], longitude: '126.520858', latitude: '45.842367', text: '哈尔滨', color: 'rgb(255,255,255)', value: '3', unit: '小时', }, { data: [123.459186, 41.711976], longitude: '123.459186', latitude: '41.711976', to_longitude: '126.520858', to_latitude: '45.842367', text: '沈阳', color: 'rgb(255,255,255)', value: '3', unit: '小时', }, { data: [117.113981, 36.624459], longitude: '117.113981', latitude: '36.624459', to_longitude: '114.63332', to_latitude: '38.174659', text: '济南', color: 'rgb(255,255,255)', value: '3', unit: '小时', }, ]; const source = new District.RDBSource({ version: 2023, }); const scene = new Scene({ id: 'map', map: new Map({ center: [111.4453125, 32.84267363195431], pitch: 35, zoom: 3, }), }); scene.addImage( '00', 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PPo0QYHNResAAAAAAAAAAAAADmJ7AQ/original', ); scene.addImage( '01', 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*epXiTZ8B1McAAAAAAAAAAAAADmJ7AQ/original', ); scene.addImage( '02', 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*6WGaQKkJppIAAAAAAAAAAAAADmJ7AQ/original', ); scene.setBgColor('#131722'); scene.on('loaded', () => { const map = document.getElementById('map'); map.style.background = '#131722'; for (let i = 0; i < pointData.length; i++) { const el = document.createElement('label'); el.className = 'labelclass'; el.textContent = pointData[i].value + pointData[i].unit; el.style.background = '#e24c4c8c'; el.style.borderRadius = '50%'; // 圆角半径设为半个宽度/高度，形成圆形 el.style.width = '40px'; el.style.height = '40px'; el.style.borderColor = '#e24c4c8c'; el.style.textAlign = 'center'; el.style.lineHeight = '40px'; el.style.color = '#fff'; const marker = new Marker({ element: el, offsets: [50, 10], }).setLnglat({ lng: Number(pointData[i].longitude) * 1, lat: Number(pointData[i].latitude), }); scene.addMarker(marker); } source .getData({ level: 'province', precision: 'low', }) .then((data) => { const newFeatures = data.features.filter((item) => { return item.properties.name; }); const newData = { type: 'FeatureCollection', features: newFeatures, }; // 省份边界 const lineDown = new LineLayer({ zIndex: 10, }) .source(newData) .shape('line') .color('#989494') .size(0.6) .style({ raisingHeight: 650000, opacity: 0.8, }); scene.addLayer(lineDown); return ''; }); source .getData({ level: 'country', precision: 'low', }) .then((data) => { // 中国地图填充面 const provincelayer = new PolygonLayer({ autoFit: true, }) .source(data) .size(650000) .shape('extrude') .color('#5886CF') .style({ heightfixed: true, pickLight: true, opacity: 0.8, }); // 国界线九段线 const boundaryLine = new LineLayer({ zIndex: 10 }) .source(data) .shape('line') .color('#5DDDFF') .size(1) .style({ raisingHeight: 650000, }); scene.addLayer(boundaryLine); scene.addLayer(provincelayer); return ''; }); const flyLine3 = new LineLayer({ blend: 'normal', }) .source(pointData, { parser: { type: 'json', x: 'longitude', y: 'latitude', x1: 'to_longitude', y1: 'to_latitude', }, }) .size(2) .shape('arc3d') .color('rgb(0, 191, 255)') .animate({ interval: 0.1, trailLength: 0.4, duration: 0.5, }) .style({ sourceColor: 'rgb(0, 191, 255)', targetColor: 'rgb(57,255,20)', thetaOffset: 1, opacity: 1, }); const pointLayer = new PointLayer({ depth: false, zIndex: 11, heightFixed: true, }) .source(pointData, { parser: { type: 'json', x: 'longitude', y: 'latitude', }, }) .shape('cylinder') .size([4, 4, 90]) .active(true) .color('color') .style({ opacity: 1, opacityLinear: { enable: true, // true - false dir: 'up', // up - down }, lightEnable: false, }); const pointLayer2 = new PointLayer({ zIndex: 10 }) .source(pointData, { parser: { type: 'json', x: 'longitude', y: 'latitude', }, }) .shape('circle') .active(true) .animate(true) .size(40) .color('color'); const textLayer = new PointLayer({ zIndex: 2 }) .source(pointData, { parser: { type: 'json', x: 'longitude', y: 'latitude', }, }) .shape('text', 'text') .size(14) .color('#0ff') .style({ textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left spacing: 2, // 字符间距 padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 stroke: '#0ff', // 描边颜色 strokeWidth: 0.2, // 描边宽度 raisingHeight: 2551000, textAllowOverlap: true, heightFixed: true, }); const imageLayer = new PointLayer({ zIndex: 15 }) .source(pointData, { parser: { type: 'json', x: 'longitude', y: 'latitude', }, }) .shape('text', ['00', '01', '02']) .size(10) .style({ raisingHeight: 110, }); scene.addLayer(textLayer); scene.addLayer(imageLayer); scene.addLayer(pointLayer); scene.addLayer(pointLayer2); scene.addLayer(flyLine3); return ''; }); ``` ### 路径贴图 - zh page: https://l7.antv.antgroup.com/zh/examples/gallery/animate/animate-path-texture/ - Source path: examples/gallery/animate/demo/animate-path-texture.js ```js import { LineLayer, PolygonLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ center: [120.15, 30.246], zoom: 13.5, style: 'dark', pitchEnable: false, rotation: -90, }), }); scene.on('loaded', () => { scene.addImage( 'arrow', 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg', ); fetch('https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json') .then((data) => data.json()) .then(({ lakeBorderData, lakeData, landData }) => { const lakeLayer = new PolygonLayer() .source(lakeData) .shape('fill') .color('#1E90FF') .style({ opacity: 0.4, opacityLinear: { enable: true, dir: 'out', // in - out }, }); const landLayer = new PolygonLayer() .source(landData) .shape('fill') .color('#3CB371') .style({ opacity: 0.4, opacityLinear: { enable: true, dir: 'in', // in - out }, }); const lakeBorderLayer = new PolygonLayer() .source(lakeBorderData) .shape('fill') .color('#ccc') .style({ opacity: 0.5, opacityLinear: { enable: true, dir: 'in', // in - out }, }); scene.addLayer(lakeLayer); scene.addLayer(lakeBorderLayer); scene.addLayer(landLayer); }); 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(3) .shape('line') .texture('arrow') .color('rgb(22,119,255)') .animate({ interval: 1, // 间隔 duration: 1, // 持续时间，延时 trailLength: 2, // 流线长度 }) .style({ opacity: 0.6, lineTexture: true, // 开启线的贴图功能 iconStep: 10, // 设置贴图纹理的间距 borderWidth: 0.4, // 默认文 0，最大有效值为 0.5 borderColor: '#fff', // 默认为 #ccc }); scene.addLayer(layer); }); }); ``` ### 圆形扫光城市 - zh page: https://l7.antv.antgroup.com/zh/examples/gallery/animate/build-sweep/ - Source path: examples/gallery/animate/demo/build-sweep.js ```js import { CityBuildingLayer, LineLayer, PolygonLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'dark', center: [120.145, 30.238915], pitch: 60, zoom: 13.2, }), }); fetch('https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json').then(async (res) => { const pointLayer = new CityBuildingLayer(); pointLayer .source(await res.json()) .size('floor', [0, 500]) .color('rgba(242,246,250,1.0)') .animate({ enable: true, }) .active({ color: '#0ff', mix: 0.5, }) .style({ opacity: 0.7, baseColor: 'rgb(16, 16, 16)', windowColor: 'rgb(30, 60, 89)', brightColor: 'rgb(255, 176, 38)', sweep: { enable: true, sweepRadius: 2, sweepColor: '#1990FF', sweepSpeed: 0.5, sweepCenter: [120.145319, 30.238915], }, }); scene.addLayer(pointLayer); }); fetch('https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json') .then((data) => data.json()) .then(({ lakeBorderData, lakeData, landData }) => { const lakeLayer = new PolygonLayer() .source(lakeData) .shape('fill') .color('#1E90FF') .style({ opacity: 0.4, opacityLinear: { enable: true, dir: 'out', // in - out }, }); const landLayer = new PolygonLayer() .source(landData) .shape('fill') .color('#3CB371') .style({ opacity: 0.4, opacityLinear: { enable: true, dir: 'in', // in - out }, }); const lakeBorderLayer = new PolygonLayer() .source(lakeBorderData) .shape('fill') .color('#ccc') .style({ opacity: 0.5, opacityLinear: { enable: true, dir: 'in', // in - out }, }); scene.addLayer(lakeLayer); scene.addLayer(lakeBorderLayer); scene.addLayer(landLayer); }); fetch('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json') .then((res) => res.json()) .then((data) => { const layer = new LineLayer({ zIndex: 0, depth: true, }) .source(data) .size(1) .shape('line') .color('#1990FF') .animate({ interval: 1, // 间隔 duration: 2, // 持续时间，延时 trailLength: 2, // 流线长度 }); scene.addLayer(layer); }); ``` ### 网格地图 - zh page: https://l7.antv.antgroup.com/zh/examples/gallery/animate/grid/ - Source path: examples/gallery/animate/demo/grid.js ```js import { LineLayer, PointLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import { ThreeLayer, ThreeRender } from '@antv/l7-three'; import * as THREE from 'three'; function getImageData(img) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const { width, height } = img; canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); const imageData = ctx.getImageData(0, 0, width, height); return imageData; } function getLatData(data) { const size = Math.floor(Math.sqrt(data.length)); const arr = []; const startLng = 110, lngStep = 5 / (size - 1); const startLat = 30, latStep = -5 / (size - 1); for (let i = 0; i < size; i++) { const arr2 = []; for (let j = 0; j < size; j++) { const index = i + j * size; const x = startLng + lngStep * i; const y = startLat + latStep * j; arr2.push([x, y, data[index]]); } arr.push(arr2); } return arr; } function getLngData(data) { const size = Math.floor(Math.sqrt(data.length)); const arr = []; const startLng = 110, lngStep = 5 / (size - 1); const startLat = 30, latStep = -5 / (size - 1); for (let i = 0; i < size; i++) { const arr2 = []; for (let j = 0; j < size; j++) { const index = i * size + j; const x = startLng + lngStep * j; const y = startLat + latStep * i; arr2.push([x, y, data[index]]); } arr.push(arr2); } return arr; } function getR(data) { const arr = []; for (let i = 0; i < data.length; i += 4) { arr.push(data[i]); } return arr; } function setMaterial(object) { if (object.children && object.children.length && object.children.length > 0) { object.children.map((child) => setMaterial(child)); } else if (object.material) { object.material.wireframe = true; object.material.opacity = 0.6; } } const airPorts = [ { name: '常德桃花源机场', lng: 111.641101, lat: 28.91165, }, { name: '芷江机场', lng: 109.709699, lat: 27.442172, }, { name: '铜仁凤凰机场', lng: 109.313971, lat: 27.880629, }, { name: '永州零陵机场', lng: 111.616049, lat: 26.335053, }, { name: '桂林两江国际机场', lng: 110.049256, lat: 25.210065, }, { name: '长沙黄花国际机场', lng: 113.216412, lat: 28.183613, }, { name: '井冈山机场', lng: 114.745845, lat: 26.852646, }, ]; const planeTarget = { lng2: 111.616049, lat2: 26.335053, }; const airLineData = [ { name: '常德桃花源机场', lng: 111.641101, lat: 28.91165, ...planeTarget, }, { name: '芷江机场', lng: 109.709699, lat: 27.442172, ...planeTarget, }, { name: '铜仁凤凰机场', lng: 109.313971, lat: 27.880629, ...planeTarget, }, { name: '桂林两江国际机场', lng: 110.049256, lat: 25.210065, ...planeTarget, }, { name: '长沙黄花国际机场', lng: 113.216412, lat: 28.183613, ...planeTarget, }, { name: '井冈山机场', lng: 114.745845, lat: 26.852646, ...planeTarget, }, ]; const scene = new Scene({ id: 'map', map: new GaodeMap({ center: [113, 29], pitch: 70, zoom: 7.5, rotation: 170, style: 'blank', }), }); scene.setBgColor('#000'); scene.registerRenderService(ThreeRender); const threeJSLayer = new ThreeLayer({ enableMultiPassRenderer: false, // @ts-ignore onAddMeshes: (threeScene, layer) => { threeScene.add(new THREE.AmbientLight(0xffffff)); const sunlight = new THREE.DirectionalLight(0xffffff, 0.25); sunlight.position.set(0, 800000, 1000000); sunlight.matrixWorldNeedsUpdate = true; threeScene.add(sunlight); // 使用 Three.js glTFLoader 加载模型 const loader = new window.GLTFLoader(); loader.load( 'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf', (gltf) => { const antModel = gltf.scene; setMaterial(antModel); layer.adjustMeshToMap(antModel); layer.setMeshScale(antModel, 2000, 2000, 2000); layer.setObjectLngLat(antModel, [113, 29], 0); const animations = gltf.animations; if (animations && animations.length) { const mixer = new THREE.AnimationMixer(antModel); const animation = animations[1]; const action = mixer.clipAction(animation); action.timeScale = 1; action.play(); layer.addAnimateMixer(mixer); } antModel.rotation.y = Math.PI; threeScene.add(antModel); layer.render(); return ''; }, ); }, zIndex: 1, }); scene.addImage( 'plane', 'https://gw.alipayobjects.com/zos/bmw-prod/96327aa6-7fc5-4b5b-b1d8-65771e05afd8.svg', ); const airPrtsLayer = new PointLayer() .source(airPorts, { parser: { type: 'json', x: 'lng', y: 'lat', }, }) .shape('name', 'text') .color('rgb(22,119,255)') .size(10); const airLineLayer = new LineLayer({ blend: 'normal' }) .source(airLineData, { parser: { type: 'json', x: 'lng', y: 'lat', x1: 'lng2', y1: 'lat2', }, }) .shape('arc3d') .size(1) .color('#f00') .style({ sourceColor: 'rgb(22,119,255)', targetColor: 'rgba(242,246,250,0.1)', }); const airPlaneLayer = new LineLayer({ blend: 'normal', zIndex: 1 }) .source(airLineData, { parser: { type: 'json', x: 'lng2', y: 'lat2', x1: 'lng', y1: 'lat', }, }) .shape('arc3d') .texture('plane') .size(30) .color('#f00') .animate({ duration: 0.2, interval: 0.2, trailLength: 0.2, }) .style({ textureBlend: 'replace', lineTexture: true, // 开启线的贴图功能 iconStep: 6, // 设置贴图纹理的间距 }); fetch('https://gw.alipayobjects.com/os/bmw-prod/ec5351c9-d22b-4918-ad6c-1838064d3a64.json') .then((res) => res.json()) .then((data) => { const layer = new LineLayer({}).source(data).size(10000).shape('wall').style({ opacity: 0.4, sourceColor: '#0DCCFF', targetColor: 'rbga(255,255,255, 0)', heightfixed: true, }); scene.addLayer(layer); const nameLayer = new PointLayer({ zIndex: 3 }) .source(data) .color('rgb(22,119,255)') .size(15) .shape('name', 'text'); scene.addLayer(nameLayer); }); const img = new Image(); img.crossOrigin = 'none'; img.src = 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*UkvYRYS5jTAAAAAAAAAAAAAAARQnAQ'; img.onload = function () { const data = getImageData(img); const rData = getR(data.data); const d1 = getLngData(rData); const d2 = getLatData(rData); const geoData = { type: 'FeatureCollection', features: [ { type: 'Feature', properties: {}, geometry: { type: 'MultiLineString', coordinates: d1, }, }, { type: 'Feature', properties: {}, geometry: { type: 'MultiLineString', coordinates: d2, }, }, ], }; const layer = new LineLayer({}) .source(geoData) .size(1) .shape('simple') .color('rgb(22, 119, 255)') .style({ vertexHeightScale: 2000, opacity: 0.4, }); scene.addLayer(layer); }; const pointData = [ { lng: 113, lat: 29, size: 10000 }, { lng: 113.5, lat: 29.5, size: 30000 }, { lng: 110.23681640625, lat: 29.64509464986076, size: 74020.50373907911 }, { lng: 115.01586914062499, lat: 26.88777988202911, size: 22908.885529976185 }, { lng: 111.181640625, lat: 28.724313406473463, size: 73359.37302978932 }, { lng: 112.686767578125, lat: 29.257648503615542, size: 18500.90838085843 }, { lng: 114.664306640625, lat: 28.98892237190413, size: 20293.183968726793 }, { lng: 113.90075683593749, lat: 28.17855984939698, size: 18051.412077639496 }, { lng: 111.51123046875, lat: 27.45466493898314, size: 37645.94186119526 }, { lng: 110.67626953125, lat: 28.004101830368654, size: 4214.588023703825 }, { lng: 114.43359375, lat: 29.477861195816843, size: 61722.01580332115 }, { lng: 110.445556640625, lat: 26.96124577052697, size: 70806.75519747598 }, { lng: 113.75244140624999, lat: 27.88278388425912, size: 70930.24993464859 }, ]; const waveLayer = new PointLayer({ zIndex: 2, blend: 'additive' }) .source(pointData, { parser: { type: 'json', x: 'lng', y: 'lat', }, }) .shape('circle') .color('rgb(22, 119, 255)') .size('size', (v) => v) .animate(true) .style({ unit: 'meter', }); const barLayer = new PointLayer({ zIndex: 2, depth: false }) .source(pointData, { parser: { type: 'json', x: 'lng', y: 'lat', }, }) .shape('cylinder') .color('rgb(22, 119, 255)') .size('size', (v) => [5, 5, v / 350]) .animate(true) .style({ opacityLinear: { enable: true, dir: 'up', }, lightEnable: false, }); scene.on('loaded', () => { scene.addLayer(waveLayer); scene.addLayer(barLayer); scene.addLayer(threeJSLayer); scene.addLayer(airPrtsLayer); scene.addLayer(airLineLayer); scene.addLayer(airPlaneLayer); }); ``` ### 都灵道路图 - zh page: https://l7.antv.antgroup.com/zh/examples/gallery/animate/turin/ - Source path: examples/gallery/animate/demo/turin.js ```js import { LineLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ center: [7.65, 45.053], zoom: 12, style: 'dark', }), }); scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/bmw-prod/98a5d9ec-be97-44bd-bff0-5742d929c003.json') .then((res) => res.json()) .then((data) => { const layer = new LineLayer({}) .source(data) .shape('line') .color('highway', (v) => { switch (v) { case 'motorway': return '#F9D371'; case 'motorway_link': return '#3DB2FF'; case 'trunk': return 'green'; case 'trunk_link': return '#6E85B2'; case 'primary': return '#F47340'; case 'primary_link': return '#F6A9A9'; case 'secondary': return '#EF2F88'; case 'secondary_link': return '#5F7A61'; case 'tertiary': return '#1ee3cf'; case 'tertiary_link': return '#C2F784'; case 'pedestrian': return '#FFF89A'; case 'residential': return 'rgba(22, 119, 255, .5)'; case 'road': return '#93FFD8'; case 'path': return '#BAFFB4'; case 'unclassified': return '#D3DEDC'; case 'service': return '#AEFEFF'; case 'living_street': return '#9B0000'; case 'track': return '#F5F5F5'; case 'highway': return 'red'; case 'rail': return '#08ffc8'; default: return '#FFE3E3'; } }) .animate({ interval: 1, // 间隔 duration: 1, // 持续时间，延时 trailLength: 2, // 流线长度 }); scene.addLayer(layer); }); }); ``` ### 弧线地图 - zh page: https://l7.antv.antgroup.com/zh/examples/gallery/basic/arc-circle/ - Source path: examples/gallery/basic/demo/arc-circle.js ```js import { LineLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'dark', center: [107.77791556935472, 35.443286920228644], zoom: 2.9142882493605033, }), }); scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') .then((res) => res.text()) .then((data) => { const layer = new LineLayer({ blend: 'additive', }) .source(data, { parser: { type: 'csv', x: 'lng1', y: 'lat1', x1: 'lng2', y1: 'lat2', }, }) .size(1) .shape('arc') .color('#8C1EB2') .style({ opacity: 0.8, blur: 0.99, }); scene.addLayer(layer); }); }); ``` ### 公交线路深色 - zh page: https://l7.antv.antgroup.com/zh/examples/gallery/basic/bus-dark/ - Source path: examples/gallery/basic/demo/bus-dark.js ```js import { LineLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'dark', center: [103.83735604457024, 1.360253881403068], pitch: 4.00000000000001, zoom: 10.210275860702593, rotation: 19.313180925794313, }), }); scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json') .then((res) => res.json()) .then((data) => { const layer = new LineLayer({}) .source(data, { parser: { coordinates: 'path', type: 'json', }, }) .size('level', (level) => { return [1.0, level * 1]; }) .shape('line') .color( 'level', [ '#312B60', '#4A457E', '#615C99', '#816CAD', '#A67FB5', '#C997C7', '#DEB8D4', '#F5D4E6', '#FAE4F1', '#FFF3FC', ].slice(0, 8), ); scene.addLayer(layer); }); }); ``` ### 3D柱图深色 - zh page: https://l7.antv.antgroup.com/zh/examples/gallery/basic/column-dark/ - Source path: examples/gallery/basic/demo/column-dark.js ```js import { PointLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 35.210526315789465, style: 'dark', center: [104.288144, 31.239692], zoom: 4.4, }), }); console.log('111'); scene.on('loaded', () => { 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('cylinder') .size('t', function (level) { return [2, 2, level * 2 + 20]; }) .animate(true) .active(true) .color('t', [ '#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#CEF8D6', ]); scene.addLayer(pointLayer); }); }); ``` ### 蜂窝图3D - zh page: https://l7.antv.antgroup.com/zh/examples/gallery/basic/light/ - Source path: examples/gallery/basic/demo/light.js ```js import { HeatmapLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'dark', pitch: 43, center: [120.13383079335335, 29.651873105004427], zoom: 7.068989519212174, }), }); scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv') .then((res) => res.text()) .then((data) => { const layer = new HeatmapLayer({}) .source(data, { parser: { type: 'csv', x: 'lng', y: 'lat', }, transforms: [ { type: 'hexagon', size: 2500, field: 'v', method: 'sum', }, ], }) .size('sum', (sum) => { return sum * 100; }) .shape('hexagonColumn') .style({ coverage: 0.8, angle: 0, }) .color('sum', [ '#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#C3F9CC', '#DEFAC0', '#ECFFB1', ]); scene.addLayer(layer); }); }); ``` ### 亮度图 - zh page: https://l7.antv.antgroup.com/zh/examples/gallery/basic/normal/ - Source path: examples/gallery/basic/demo/normal.js ```js import { PointLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ center: [121.417463, 31.215175], style: 'dark', zoom: 11, }), }); scene.on('loaded', () => { fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt') .then((res) => res.text()) .then((data) => { const pointLayer = new PointLayer({ blend: 'additive', }) .source(data, { parser: { type: 'csv', y: 'lat', x: 'lng', }, }) .size(0.5) .color('#080298'); scene.addLayer(pointLayer); }); }); ``` ### 福建省地图 - zh page: https://l7.antv.antgroup.com/zh/examples/gallery/basic/province-map/ - Source path: examples/gallery/basic/demo/province-map.ts ```ts import { PointLayer, PolygonLayer, Scene } from '@antv/l7'; import { Map } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new Map({ pitch: 0, style: 'light', center: [118, 24.8], zoom: 6, }), }); scene.on('loaded', async () => { scene.addImage( 'province', 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*hvqeQa9I6ccAAAAAAAAAAAAADmJ7AQ/original', ); scene.addImage( 'city', 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*sBlgRp8Ah7sAAAAAAAAAAAAADmJ7AQ/original', ); scene.addImage( 'county', 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ufrWTqCNCScAAAAAAAAAAAAADmJ7AQ/original', ); // 获取数据 const dataList = [ // 市级行政区 'https://mdn.alipayobjects.com/afts/file/A*jPjCTad_s24AAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA.json', // 市级行政区一级群列岛名 'https://mdn.alipayobjects.com/afts/file/A*HW8yQb2joA8AAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E4%B8%80%E7%BA%A7%E7%BE%A4%E5%88%97%E5%B2%9B%E5%90%8D.json', ///市级行政区一级河流名.json 'https://mdn.alipayobjects.com/afts/file/A*EjtNRrENGToAAAAAAAAAAAAADrd2AQ/市级行政区一级河流名.json', //市级行政区一级港湾名.json 'https://mdn.alipayobjects.com/afts/file/A*lqxATobbMLwAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E4%B8%80%E7%BA%A7%E6%B8%AF%E6%B9%BE%E5%90%8D.json', //市级行政区一级岛屿名.json 'https://mdn.alipayobjects.com/afts/file/A*xyeHRZCF8DsAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E4%B8%80%E7%BA%A7%E5%B2%9B%E5%B1%BF%E5%90%8D.json', //市级行政区县级行政中心.json 'https://mdn.alipayobjects.com/afts/file/A*vrDfSrB8J4sAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%8E%BF%E7%BA%A7%E8%A1%8C%E6%94%BF%E4%B8%AD%E5%BF%83.json', //市级行政区县级行政区.json 'https://mdn.alipayobjects.com/afts/file/A*lfffQ5ej7AEAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%8E%BF%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA.json', // 市级行政区省级行政中心.json 'https://mdn.alipayobjects.com/afts/file/A*jtlsTqxTJkoAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E7%9C%81%E7%BA%A7%E8%A1%8C%E6%94%BF%E4%B8%AD%E5%BF%83.json', //市级行政区山峰.json 'https://mdn.alipayobjects.com/afts/file/A*DRSfRqBs9qsAAAAAAAAAAAAADrd2AQ/市级行政区山峰.json', //市级行政区色带.json 'https://mdn.alipayobjects.com/afts/file/A*KRD4QbjkZCMAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E8%89%B2%E5%B8%A6.json', //市级行政区面状水域.json 'https://mdn.alipayobjects.com/afts/file/A*3e9nSJwXqu0AAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E9%9D%A2%E7%8A%B6%E6%B0%B4%E5%9F%9F.json', //市级行政区境界线.json 'https://mdn.alipayobjects.com/afts/file/A*tA8nSqhulQQAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%A2%83%E7%95%8C%E7%BA%BF.json', //市级行政区河流.json 'https://mdn.alipayobjects.com/afts/file/A*2vGmRrYpTjEAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E6%B2%B3%E6%B5%81.json', //市级行政区海岸线.json 'https://mdn.alipayobjects.com/afts/file/A*juI9TpBcQ74AAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E6%B5%B7%E5%B2%B8%E7%BA%BF.json', //市级行政区二级群列岛名.json 'https://mdn.alipayobjects.com/afts/file/A*E4ReSqdYq-cAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E4%BA%8C%E7%BA%A7%E7%BE%A4%E5%88%97%E5%B2%9B%E5%90%8D.json', //市级行政区地级市行政中心.json 'https://mdn.alipayobjects.com/afts/file/A*I3HSQaYyQ_UAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%9C%B0%E7%BA%A7%E5%B8%82%E8%A1%8C%E6%94%BF%E4%B8%AD%E5%BF%83.json', //市级行政区大型水库名.json 'https://mdn.alipayobjects.com/afts/file/A*xxXKTpte0VUAAAAAAAAAAAAADrd2AQ/%E5%B8%82%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%A4%A7%E5%9E%8B%E6%B0%B4%E5%BA%93%E5%90%8D.json', ]; const result = await Promise.all(dataList.map(async (url) => await (await fetch(url)).json())); const cityLayer = new PolygonLayer({ autoFit: true, }) .source(result[6]) .shape('fill') .scale('COLOR', { type: 'cat', domain: ['Y', 'P', 'G', 'R'], }) .color('COLOR', ['#f7f6c6', '#fceaea', '#e0e7d5', '#f3e4cf']); // 陆上轮廓 const layer2 = new PolygonLayer().source(result[9]).shape('fill').color('#b4cad7'); // 水域 const waterLayer = new PolygonLayer().source(result[10]).shape('fill').color('#bcebfe'); // 面状河流线 const waterLayerLine = new PolygonLayer() .source(result[10]) .shape('line') .size(0.5) .color('#50aac8'); // 线河流线 const river_Line = new PolygonLayer().source(result[12]).shape('line').size(0.5).color('#50aac8'); // 群岛标注图层 const island_name = new PointLayer({ minZoom: 8, }) .source(result[1]) .shape('NAME', 'text') .size(15) .color('#3b474e'); // 河流标注图层 const river_name = new PointLayer({ minZoom: 5 }) .source(result[2]) .shape('NAME', 'text') .size(15) .color('#4aa1bd') .style({ fontWeight: 800, }); // 港湾标注 const gangwan_name = new PointLayer({ minZoom: 6, }) .source(result[3]) .shape('NAME', 'text') .size(15) .color('#4eaed9') .style({ fontWeight: 800, }); // 群岛 const island_name1 = new PointLayer({ minZoom: 8, }) .source(result[4]) .shape('NAME', 'text') .size(15) .color('#3b474e') .style({ fontWeight: 600, }); // 县界 const county_Line = new PolygonLayer({ minZoom: 5, }) .source(result[11]) .shape('line') .size(0.3) .color('#a59f97'); // 城市界 const city_Line = new PolygonLayer().source(result[0]).shape('line').size(0.5).color('#787269'); // 海岸线 const sea_Line = new PolygonLayer().source(result[13]).shape('line').size(0.5).color('#50aac8'); // 城市标注 const cityName = new PointLayer({ maxZoom: 8, minZoom: 5, }) .source(result[15]) .shape('NAME', 'text') .size(14) .color('#000') .style({ fontWeight: 800, textAnchor: 'top', textAllowOverlap: true, textOffset: [0, 12], }); // 城市点位 const cityPoint = new PointLayer({ maxZoom: 7, minZoom: 5, }) .source(result[15]) .shape('city') .size(5); // 省级市标注 const provinceCityName = new PointLayer({ minZoom: 5, maxZoom: 7, }) .source(result[7]) .shape('NAME', 'text') .size(14) .color('#000') .style({ fontWeight: 800, textAnchor: 'top', textOffset: [0, 12], }); // 省级市点位 const provincePoint = new PointLayer({ minZoom: 5, maxZoom: 7, }) .source(result[7]) .shape('province') .size(5); // 县标注 const countyName = new PointLayer({ minZoom: 8, }) .source(result[5]) .shape('NAME', 'text') .size(14) .color('#333') .style({ fontWeight: 600, textAnchor: 'top', textOffset: [0, 12], }); 7; // 县点位 const countyPoint = new PointLayer({ minZoom: 8, }) .source(result[5]) .shape('county') .size(5); // 县标注 const mountainPoint = new PointLayer({ minZoom: 6, }) .source(result[8]) .shape('triangle') .size(6) .color('#326648'); // 山标注 const mountainPoint_name = new PointLayer({ minZoom: 6, }) .source(result[8]) .shape('NAME', 'text') .size(14) .color('#326648') .style({ fontWeight: 800, textAnchor: 'top', textOffset: [0, 12], }); scene.addLayer(cityLayer); scene.addLayer(layer2); scene.addLayer(waterLayer); scene.addLayer(waterLayerLine); scene.addLayer(river_Line); scene.addLayer(county_Line); scene.addLayer(city_Line); scene.addLayer(sea_Line); scene.addLayer(cityName); scene.addLayer(cityPoint); scene.addLayer(countyName); scene.addLayer(countyPoint); scene.addLayer(provinceCityName); scene.addLayer(provincePoint); scene.addLayer(island_name); scene.addLayer(island_name1); scene.addLayer(gangwan_name); scene.addLayer(river_name); scene.addLayer(mountainPoint); scene.addLayer(mountainPoint_name); console.log(result); }); ``` ### 卷帘对比-作物长势 - zh page: https://l7.antv.antgroup.com/zh/examples/gallery/basic/swipe/ - Source path: examples/gallery/basic/demo/swipe.ts ```ts import { Map, RasterLayer, Scene, Swipe } from '@antv/l7'; import * as GeoTIFF from 'geotiff'; const scene = new Scene({ id: 'map', map: new Map({ pitch: 0, center: [-96, 37.8], zoom: 14, }), }); async function getTiffData(url: string) { const response = await fetch(url); const arrayBuffer = await response.arrayBuffer(); const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer); const image = await tiff.getImage(); const width = image.getWidth(); const height = image.getHeight(); const values = await image.readRasters(); return { data: values[0], width, height, }; } scene.on('loaded', async () => { const colors = [ '#d73027', '#f46d43', '#fdae61', '#fee08b', '#d9ef8b', '#a6d96a', '#66bd63', '#1a9850', ]; const ndvi1 = await getTiffData( 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*sZpWQZK21NIAAAAAAAAAAAAADmJ7AQ/ndvi2022-03-01.glb', ); const ndvi2 = await getTiffData( 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*JeHQTIzN4_kAAAAAAAAAAAAADmJ7AQ/ndvi2022-10-01.NDVI.glb', ); // 影像地图图层 const baseLayer = new RasterLayer({ zIndex: -1 }).source( 'https://www.google.com/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', { parser: { type: 'rasterTile', tileSize: 256, zoomOffset: 0, }, }, ); const leftLayer = new RasterLayer({ autoFit: true, }) .source(ndvi1.data, { parser: { type: 'raster', width: ndvi1.width, height: ndvi1.height, extent: [-112.117293306503, 32.78212288135407, -111.77216057434428, 33.10568277278276], }, }) .style({ clampLow: false, clampHigh: false, domain: [-1, 1], nodataValue: 0, rampColors: { type: 'linear', positions: [-0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8, 1.0], // 数据需要换成 0-1 colors: colors, }, }); const rightLayer = new RasterLayer({}) .source(ndvi2.data, { parser: { type: 'raster', width: ndvi2.width, height: ndvi2.height, extent: [-112.117293306503, 32.78212288135407, -111.77216057434428, 33.10568277278276], }, }) .style({ clampLow: false, clampHigh: false, domain: [-1, 1], nodataValue: 0, rampColors: { type: 'linear', positions: [-0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8, 1.0], // 数据需要换成 0-1 colors: colors, }, }); scene.addLayer(baseLayer); scene.addLayer(leftLayer); scene.addLayer(rightLayer); const swipe = new Swipe({ orientation: 'vertical', ratio: 0.5, layers: [leftLayer], rightLayers: [rightLayer], }); scene.addControl(swipe); }); ``` ### 加沙 - zh page: https://l7.antv.antgroup.com/zh/examples/gallery/story/gaza/ - Source path: examples/gallery/story/demo/gaza.js ```js import { PointLayer, PolygonLayer, RasterLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', center: [121.268, 30.3628], zoom: 10, }), }); scene.on('loaded', async () => { const googleurl = 'https://www.google.com/maps/vt?lyrs=s@820&gl=cn&x={x}&y={y}&z={z}'; const gazafill = await ( await fetch( 'https://mdn.alipayobjects.com/afts/file/A*7h8hS5hqXkcAAAAAAAAAAAAADrd2AQ/gaza.geo.json', ) ).json(); const gazacity = await ( await fetch( 'https://mdn.alipayobjects.com/afts/file/A*3xTGQ6ZeTIcAAAAAAAAAAAAADrd2AQ/gazacity.json', ) ).json(); const fillLayer = new PolygonLayer({ visible: false, }) .source(gazafill) .shape('fill') .color('red'); const googleMap = new RasterLayer({ zIndex: -1, maskLayers: [fillLayer], zoomOffset: 1, updateStrategy: 'overlap', }).source(googleurl, { parser: { type: 'rasterTile', tileSize: 256, }, }); const fillLine = new PolygonLayer({ autoFit: true, }) .source(gazafill) .shape('line') .color('red') .size(1); const cityLayer = new PointLayer() .source(gazacity) .shape('circle') .size(5) .color('#027aff') .style({ opacity: 1, stroke: '#fff', strokeWidth: 2 }); const cityLayerName = new PointLayer() .source(gazacity) .shape('city', 'text') .size(12) .color('#027aff') .style({ textAnchor: 'top', // 文本相对锚点的位置 center|left|right|top|bottom|top-left spacing: 2, // 字符间距 fontWeight: '800', textOffset: [0, 30], padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 stroke: '#ffffff', // 描边颜色 strokeWidth: 2, // 描边宽度 textAllowOverlap: true, }); scene.addLayer(googleMap); scene.addLayer(fillLine); scene.addLayer(fillLayer); scene.addLayer(cityLayer); scene.addLayer(cityLayerName); }); ``` ### 一带一路 - zh page: https://l7.antv.antgroup.com/zh/examples/gallery/story/yidaiyilu/ - Source path: examples/gallery/story/demo/yidaiyilu.js ```js import { LineLayer, PointLayer, PolygonLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', center: [60.268, 30.3628], zoom: 1.5, }), }); scene.on('loaded', async () => { scene.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png'); const belt = await ( await fetch('https://gw.alipayobjects.com/os/rmsportal/UpapMomPYUeiBjbHNAma.json') ).json(); const line = await ( await fetch('https://gw.alipayobjects.com/os/rmsportal/kwUdcXnxQtexeGRvTGtA.json') ).json(); const line2 = await ( await fetch('https://gw.alipayobjects.com/os/rmsportal/dzpMOiLYBKxpdmsgBLoE.json') ).json(); const point = await ( await fetch('https://gw.alipayobjects.com/os/rmsportal/opYqFyDGyGUAUXkLUhBV.json') ).json(); const fillLayer = new PolygonLayer({ autoFit: false, }) .source(belt) .color('cname', function (value) { return value == '中国' ? 'rgba(46,149,169,0.45)' : 'rgba(227,244,244,1)'; }) .shape('fill'); const linelayer = new LineLayer().source(line).color('rgb(79,147,234)').size(1.5).shape('line'); const linelayer2 = new LineLayer() .source(line2) .color('rgb(11,94,69)') .size(1.5) .shape('line') .style({ // 'lineType':'solid' }); const pointlayer = new PointLayer({}).source(point).size(12.0).shape('local'); const textlayer = new PointLayer({}) .source(point) .size(12.0) .shape('name', 'text') .color('#027aff') .style({ textOffset: [0, -42], stroke: '#fff', strokeWidth: 2, textAnchor: 'bottom', }); scene.addLayer(fillLayer); scene.addLayer(linelayer); scene.addLayer(linelayer2); scene.addLayer(pointlayer); scene.addLayer(textlayer); }); ``` ### 一带一路GDP - zh page: https://l7.antv.antgroup.com/zh/examples/gallery/story/yidaiyilu2/ - Source path: examples/gallery/story/demo/yidaiyilu2.js ```js import { Control, DOM, LayerPopup, LineLayer, PolygonLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; const styleElement = document.createElement('style'); // 在

LarkMap

数据下载

完备

方便