antv-l7/page-data/en/docs/api/layer/polygon_layer/polygonlayer/page-data.json

{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/en/docs/api/layer/polygon_layer/polygonlayer","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"api/l7stable","title":{"zh":"1.x 稳定版","en":"1.x Stable"},"order":1},{"slug":"tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"tutorial/map","title":{"zh":"地图","en":"Map"},"order":3},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":3},{"slug":"api/layer/point_layer","title":{"zh":"点图层","en":"PointLayer"},"order":1},{"slug":"api/layer/line_layer","title":{"zh":"线图层","en":"LineLayer"},"order":2},{"slug":"api/layer/polygon_layer","title":{"zh":"面图层","en":"PolygonLayer"},"order":3},{"slug":"api/layer/heatmap_layer","title":{"zh":"热力图","en":"HeatmapLayer"},"order":4},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":2},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"html":"<h1 id=\"填充图\"><a href=\"#%E5%A1%AB%E5%85%85%E5%9B%BE\" aria-label=\"填充图 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>填充图</h1>\n<p>绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。</p>\n<h3 id=\"shape\"><a href=\"#shape\" aria-label=\"shape permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>shape</h3>\n<p>填充图支持 3 种 shape</p>\n<ul>\n<li>fill 绘制填充面 不支持数据映射</li>\n<li>line 绘制填充图描边 不支持数据映射</li>\n<li>extrude 对填充图 3D 拉伸 不支持数据映射</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">PolyonLayer<span class=\"token punctuation\">.</span><span class=\"token function\">shape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'fill'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nPolyonLayer<span class=\"token punctuation\">.</span><span class=\"token function\">shape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'line'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">size</span><span class=\"token punctuation\">(</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// size 表示线宽度</span>\nPolyonLayer<span class=\"token punctuation\">.</span><span class=\"token function\">shape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'extrude'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// size 表示高度</span>\n</code></pre></div>\n<p>其他方法，事件，同基类 <a href=\"/zh/docs/api/layer/layer\">Layer</a></p>","tableOfContents":"<ul>\n<li>\n<p><a href=\"/en/docs/api/layer/polygon_layer/polygonlayer/#%E5%A1%AB%E5%85%85%E5%9B%BE\">填充图</a></p>\n<ul>\n<li>\n<ul>\n<li><a href=\"/en/docs/api/layer/polygon_layer/polygonlayer/#shape\">shape</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>","fields":{"slug":"/en/docs/api/layer/polygon_layer/polygonlayer","readingTime":{"text":"1 min read","time":12600}},"frontmatter":{"title":"PolygonLayer"},"parent":{"relativePath":"api/layer/polygon_layer/polygonlayer.en.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/map/amap"},"frontmatter":{"title":"GaodeMap BaseMap","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/map/amap"},"frontmatter":{"title":"高德地图","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/map/mapbox"},"frontmatter":{"title":"MapBox BaseMap","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/map/mapbox"},"frontmatter":{"title":"MapBox地图","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygon_layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygon_layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/point_layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/point_layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/line_layer/linelayer"},"frontmatter":{"title":"LineLayer","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap_layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap_layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":0}}},{"node":{"fields":{"slug":"/en/examples/tutorial/map"},"frontmatter":{"title":"map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/tutorial/map"},"frontmatter":{"title":"地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/demo"},"frontmatter":{"title":"How to start the demo locally","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/demo"},"frontmatter":{"title":"如何在本地运行demo","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/l7stable"},"frontmatter":{"title":"1.x stable","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/l7stable"},"frontmatter":{"title":"1.x 稳定版","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"GeoJSON","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"GeoJSON","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygon_layer/extrude"},"frontmatter":{"title":"3D填充图","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygon_layer/fill"},"frontmatter":{"title":"填充图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/point_layer/bubble"},"frontmatter":{"title":"bubble","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/point_layer/bubble"},"frontmatter":{"title":"气泡图","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/line_layer/arc"},"frontmatter":{"title":"弧线图","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/line_layer/path"},"frontmatter":{"title":"路径图","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap_layer/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap_layer/normal"},"frontmatter":{"title":"经典热力图","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap_layer/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/zh/examples/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/examples/tutorial/data"},"frontmatter":{"title":"Data","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/dot"},"frontmatter":{"title":"Dot Intensity","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/dot"},"frontmatter":{"title":"亮度图","order":1}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"Data","order":2}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/map"},"frontmatter":{"title":"地图 Map","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/map"},"frontmatter":{"title":"地图 Map","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":2}}},{"node":{"fields":{"slug":"/en/docs/tutorial/map/blankmap"},"frontmatter":{"title":"Blank BaseMap With Mapbox","order":2}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/map/blankmap"},"frontmatter":{"title":"使用无地图模式","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/source/json"},"frontmatter":{"title":"JSON","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/source/json"},"frontmatter":{"title":"JSON","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/point_layer/scatter"},"frontmatter":{"title":"散点图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/line_layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/tutorial/marker"},"frontmatter":{"title":"control","order":2}}},{"node":{"fields":{"slug":"/zh/examples/tutorial/marker"},"frontmatter":{"title":"Marker","order":2}}},{"node":{"fields":{"slug":"/en/examples/tutorial/control"},"frontmatter":{"title":"control","order":2}}},{"node":{"fields":{"slug":"/zh/examples/tutorial/control"},"frontmatter":{"title":"组件","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/source/csv"},"frontmatter":{"title":"CSV","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/source/csv"},"frontmatter":{"title":"CSV","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/layer/point_layer/dot"},"frontmatter":{"title":"亮度图","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/point_layer/dot"},"frontmatter":{"title":"亮度图","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/source/image"},"frontmatter":{"title":"Image","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/source/image"},"frontmatter":{"title":"Image","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/point_layer/symbol"},"frontmatter":{"title":"符号图","order":4}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/point_layer/symbol"},"frontmatter":{"title":"符号图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/point_layer/cluster"},"frontmatter":{"title":"聚合图","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/point_layer/cluster"},"frontmatter":{"title":"聚合图","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/point_layer/column"},"frontmatter":{"title":"3D 柱图","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/image_layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/image_layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/point_layer/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/point_layer/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/docs/api/layer/point_layer/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/point_layer/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"prev":{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap_layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":0},"html":"<h1 id=\"heatmaplayer\"><a href=\"#heatmaplayer\" aria-label=\"heatmaplayer permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>heatmapLayer</h1>\n<h3 id=\"简介\"><a href=\"#%E7%AE%80%E4%BB%8B\" aria-label=\"简介 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>简介</h3>\n<p>热力图图层，包含三种类型的，</p>\n<ul>\n<li>方格热力图</li>\n</ul>\n<p>将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。</p>\n<ul>\n<li>六边形热力图</li>\n</ul>\n<p>将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局</p>\n<ul>\n<li>经典热力图</li>\n</ul>\n<p>⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在 source 方法设置数据聚合方法</p>\n<h3 id=\"source\"><a href=\"#source\" aria-label=\"source permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>source</h3>\n<p>热力图只支持点数据作为数据源</p>\n<p>布局方法 通过 source 的 tansforms 属性配置</p>\n<ul>\n<li>type  数据聚合类型 grid、hexagon</li>\n<li>size  网格半径 单位 米</li>\n<li>field  聚合字段</li>\n<li>method 聚合方法   count,max,min,sum,mean5 个统计维度</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">layer<span class=\"token punctuation\">.</span><span class=\"token function\">source</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n      parser<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n        type<span class=\"token punctuation\">:</span> <span class=\"token string\">'csv'</span><span class=\"token punctuation\">,</span>\n        x<span class=\"token punctuation\">:</span> <span class=\"token string\">'lng'</span><span class=\"token punctuation\">,</span>\n        y<span class=\"token punctuation\">:</span> <span class=\"token string\">'lat'</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      transforms<span class=\"token punctuation\">:</span><span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">{</span>\n        type<span class=\"token punctuation\">:</span> <span class=\"token string\">'grid'</span><span class=\"token punctuation\">,</span>\n        size<span class=\"token punctuation\">:</span> <span class=\"token number\">15000</span><span class=\"token punctuation\">,</span>\n        field<span class=\"token punctuation\">:</span><span class=\"token string\">'v'</span><span class=\"token punctuation\">,</span>\n        method<span class=\"token punctuation\">:</span><span class=\"token string\">'sum'</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span></code></pre></div>\n<h3 id=\"shape\"><a href=\"#shape\" aria-label=\"shape permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>shape</h3>\n<p>不同类型热力图 shape 支持</p>\n<table>\n<thead>\n<tr>\n<th></th>\n<th>2D</th>\n<th>3d</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>网格格热力图</td>\n<td>circle,triangle,square,heaxgon</td>\n<td>cylinder,triangleColumn,hexagonColum,squareColumn</td>\n</tr>\n<tr>\n<td>蜂窝热力图</td>\n<td>circle,triangle,square,heaxgon</td>\n<td>circle,triangle,square,heaxgon</td>\n</tr>\n<tr>\n<td>普通热力图</td>\n<td>heatmap</td>\n<td>heatmap</td>\n</tr>\n</tbody>\n</table>\n<p>热力图布局下只 shape 方法只支持常量的可视化。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">HeatmapLayer<span class=\"token punctuation\">.</span><span class=\"token function\">shape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'square'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nHeatmapLayer<span class=\"token punctuation\">.</span><span class=\"token function\">shape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hexagon'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// 默认类型可以不设置</span>\n</code></pre></div>\n<h3 id=\"size\"><a href=\"#size\" aria-label=\"size permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>size</h3>\n<p>当前版本 shape 为 grid，hexagon 不需要设置 size 映射</p>\n<p>default 类型需要设置 size 映射 详细参数见<a href=\"https://www.yuque.com/antv/l7/layer#size\" target=\"_self\" rel=\"nofollow\">Size</a></p>\n<p>**size(field,values) **</p>\n<ul>\n<li>field: 热力图权重字段</li>\n<li>values: 数据映射区间 热力图显示 [0, 1] 效果最佳</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">HeatmapLayer<span class=\"token punctuation\">.</span><span class=\"token function\">size</span><span class=\"token punctuation\">(</span><span class=\"token string\">'field'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"color\"><a href=\"#color\" aria-label=\"color permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>color</h3>\n<p>default heatMap 类型不需设置 color 映射</p>\n<p>color 配置项同 <a href=\"https://www.yuque.com/antv/l7/layer#color\" target=\"_self\" rel=\"nofollow\"><strong>color</strong></a></p>\n<h3 id=\"style\"><a href=\"#style\" aria-label=\"style permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>style</h3>\n<p>grid hexagon 可以通过 style 设置透明度</p>\n<p>default 热力图需要通过 style 配置参数热力图参数</p>\n<ul>\n<li>intensity    全局热力权重     推荐权重范围 1-5</li>\n<li>radius   热力半径，单位像素</li>\n<li>\n<p>rampColors 色带参数</p>\n<ul>\n<li>colors  颜色数组</li>\n<li>positions 数据区间</li>\n</ul>\n</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">HeatmapLayer<span class=\"token punctuation\">.</span><span class=\"token function\">style</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  intensity<span class=\"token punctuation\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n  radius<span class=\"token punctuation\">:</span> <span class=\"token number\">20</span><span class=\"token punctuation\">,</span>\n  rampColors<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n    colors<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token string\">'rgba(33,102,172,0.0)'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'rgb(103,169,207)'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'rgb(209,229,240)'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'rgb(253,219,199)'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'rgb(239,138,98)'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'rgb(178,24,43,1.0)'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n    positions<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.4</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.6</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.8</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1.0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"完整代码示例\"><a href=\"#%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B\" aria-label=\"完整代码示例 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>完整代码示例</h3>\n<h4 id=\"普通热力图\"><a href=\"#%E6%99%AE%E9%80%9A%E7%83%AD%E5%8A%9B%E5%9B%BE\" aria-label=\"普通热力图 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>普通热力图</h4>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json</span>\n\n<span class=\"token function\">HeatmapLayer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  zIndex<span class=\"token punctuation\">:</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">source</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">size</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mag'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// weight映射通道</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">style</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    intensity<span class=\"token punctuation\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n    radius<span class=\"token punctuation\">:</span> <span class=\"token number\">20</span><span class=\"token punctuation\">,</span>\n    rampColors<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n      colors<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token string\">'rgba(33,102,172,0.0)'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'rgb(103,169,207)'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'rgb(209,229,240)'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'rgb(253,219,199)'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'rgb(239,138,98)'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'rgb(178,24,43,1.0)'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      positions<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.4</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.6</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.8</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1.0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"网格热力图\"><a href=\"#%E7%BD%91%E6%A0%BC%E7%83%AD%E5%8A%9B%E5%9B%BE\" aria-label=\"网格热力图 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>网格热力图</h4>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> layer <span class=\"token operator\">=</span> scene\n  <span class=\"token punctuation\">.</span><span class=\"token function\">HeatmapLayer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    zIndex<span class=\"token punctuation\">:</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">source</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n    parser<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n      type<span class=\"token punctuation\">:</span> <span class=\"token string\">'csv'</span><span class=\"token punctuation\">,</span>\n      x<span class=\"token punctuation\">:</span> <span class=\"token string\">'lng'</span><span class=\"token punctuation\">,</span>\n      y<span class=\"token punctuation\">:</span> <span class=\"token string\">'lat'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    transforms<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">{</span>\n        type<span class=\"token punctuation\">:</span> <span class=\"token string\">'grid'</span><span class=\"token punctuation\">,</span>\n        size<span class=\"token punctuation\">:</span> <span class=\"token number\">15000</span><span class=\"token punctuation\">,</span>\n        field<span class=\"token punctuation\">:</span> <span class=\"token string\">'v'</span><span class=\"token punctuation\">,</span>\n        method<span class=\"token punctuation\">:</span> <span class=\"token string\">'sum'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">shape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'grid'</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">style</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    coverage<span class=\"token punctuation\">:</span> <span class=\"token number\">0.8</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'count'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token string\">'#002466'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">'#105CB3'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">'#2894E0'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">'#CFF6FF'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">'#FFF5B8'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">'#FFAB5C'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">'#F27049'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">'#730D1C'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"六边形热力图\"><a href=\"#%E5%85%AD%E8%BE%B9%E5%BD%A2%E7%83%AD%E5%8A%9B%E5%9B%BE\" aria-label=\"六边形热力图 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>六边形热力图</h4>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> layer <span class=\"token operator\">=</span> scene\n  <span class=\"token punctuation\">.</span><span class=\"token function\">HeatmapLayer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    zIndex<span class=\"token punctuation\">:</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">souce</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n    parser<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n      type<span class=\"token punctuation\">:</span> <span class=\"token string\">'csv'</span><span class=\"token punctuation\">,</span>\n      x<span class=\"token punctuation\">:</span> lng<span class=\"token punctuation\">,</span>\n      y<span class=\"token punctuation\">:</span> lat<span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    transforms<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">{</span>\n        type<span class=\"token punctuation\">:</span> <span class=\"token string\">'hexgon'</span><span class=\"token punctuation\">,</span>\n        size<span class=\"token punctuation\">:</span> <span class=\"token number\">1500</span><span class=\"token punctuation\">,</span>\n        field<span class=\"token punctuation\">:</span> <span class=\"token string\">'count'</span><span class=\"token punctuation\">,</span>\n        operation<span class=\"token punctuation\">:</span> <span class=\"token string\">'sum'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">shape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hexgon'</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">size</span><span class=\"token punctuation\">(</span><span class=\"token number\">1000</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'sum'</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">style</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    coverage<span class=\"token punctuation\">:</span> <span class=\"token number\">0.8</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>"}},"next":{"node":{"fields":{"slug":"/en/docs/api/layer/point_layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":0},"html":"<h1 id=\"pointlayer\"><a href=\"#pointlayer\" aria-label=\"pointlayer permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>PointLayer</h1>\n<h2 id=\"简介\"><a href=\"#%E7%AE%80%E4%BB%8B\" aria-label=\"简介 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>简介</h2>\n<p>点数据的展示，数据源支持 JSON,GeoJSON,CSV 三种数据格式。</p>\n<p>shape 支持</p>\n<p><strong>3D 类型 柱图</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">&#39;cylinder&#39;, &#39;triangleColumn&#39;, &#39;hexagonColumn&#39;, &#39;squareColumn&#39;</code></pre></div>\n<p><strong>2D 符号图</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">&#39;circle&#39;, &#39;square&#39;, &#39;hexagon&#39;, &#39;triangle&#39;，  &#39;pentagon&#39;,  &#39;octogon&#39;, &#39;hexagram&#39;,&#39;rhombus&#39;,  &#39;vesica&#39;,</code></pre></div>\n<p><strong>图片标注</strong></p>\n<p>通过 <code class=\"language-text\">Scene.addImage()</code> 可以添加图片资源，</p>\n<h3 id=\"代码示例\"><a href=\"#%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B\" aria-label=\"代码示例 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>代码示例</h3>\n<h4 id=\"基本图形显示示例\"><a href=\"#%E5%9F%BA%E6%9C%AC%E5%9B%BE%E5%BD%A2%E6%98%BE%E7%A4%BA%E7%A4%BA%E4%BE%8B\" aria-label=\"基本图形显示示例 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>基本图形显示示例</h4>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> PointLayer <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'@antv/l7'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> layer <span class=\"token operator\">=</span> <span class=\"token function\">PointLayer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  zIndex<span class=\"token punctuation\">:</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">source</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">.</span>list<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n    type<span class=\"token punctuation\">:</span> <span class=\"token string\">'array'</span><span class=\"token punctuation\">,</span>\n    x<span class=\"token punctuation\">:</span> <span class=\"token string\">'j'</span><span class=\"token punctuation\">,</span>\n    y<span class=\"token punctuation\">:</span> <span class=\"token string\">'w'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">shape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'cylinder'</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">size</span><span class=\"token punctuation\">(</span><span class=\"token string\">'t'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">level</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span><span class=\"token number\">4</span><span class=\"token punctuation\">,</span> <span class=\"token number\">4</span><span class=\"token punctuation\">,</span> level <span class=\"token operator\">+</span> <span class=\"token number\">40</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'t'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token string\">'#002466'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">'#105CB3'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">'#2894E0'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">'#CFF6FF'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">'#FFF5B8'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">'#FFAB5C'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">'#F27049'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">'#730D1C'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"符号图\"><a href=\"#%E7%AC%A6%E5%8F%B7%E5%9B%BE\" aria-label=\"符号图 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>符号图</h4>\n<p>使用图片添加地图标注</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">scene<span class=\"token punctuation\">.</span><span class=\"token function\">addImage</span><span class=\"token punctuation\">(</span>\n  <span class=\"token string\">'local'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token string\">'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> layer <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">PointLayer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  zIndex<span class=\"token punctuation\">:</span> <span class=\"token number\">4</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">source</span><span class=\"token punctuation\">(</span>city<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">size</span><span class=\"token punctuation\">(</span><span class=\"token number\">20.0</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">shape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'local'</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#0D408C'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>"}}}}}