antv-l7/public/page-data/en/examples/point/column/page-data.json

{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/en/examples/point/column","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","examples":[{"slug":"gallery","icon":"gallery","title":{"zh":"Gallery","en":"Gallery"}},{"slug":"point","icon":"point","title":{"zh":"点图层","en":"Point Layer"}},{"slug":"line","icon":"line","title":{"zh":"线图层","en":"Line Layer"}},{"slug":"polygon","icon":"polygon","title":{"zh":"面图层","en":"Polygon Layer"}},{"slug":"heatmap","icon":"heatmap","title":{"zh":"热力图","en":"HeatMap Layer"}},{"slug":"raster","icon":"raster","title":{"zh":"栅格图层","en":"Raster Layer"}},{"slug":"tutorial","icon":"map","title":{"zh":"教程示例","en":"Tutorial demo"}}],"playground":{"container":"<div style=\"min-height: 500px; justify-content: center;position: relative\" id=\"map\"/>","playgroundDidMount":null,"playgroundWillUnmount":null}},"pathPrefix":""},"allMarkdownRemark":{"edges":[{"node":{"html":"<h1 id=\"使用方法\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95\" 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>L7 提供三种使用方式：CDN、Submodule。</p>\n<h2 id=\"通过-cdn-使用\"><a href=\"#%E9%80%9A%E8%BF%87-cdn-%E4%BD%BF%E7%94%A8\" aria-label=\"通过 cdn 使用 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>通过 CDN 使用</h2>\n<p>首先在 <code class=\"language-text\">&lt;head&gt;</code> 中引入 L7 CDN 版本的 JS 和 CSS 文件：</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>head</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">'</span>https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js<span class=\"token punctuation\">'</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>head</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<p>如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 <a href=\"https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart\" target=\"_self\" rel=\"nofollow\">Mapbox 文档</a>：</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>head</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">'</span>https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js<span class=\"token punctuation\">'</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>link</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">'</span>https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css<span class=\"token punctuation\">'</span></span> <span class=\"token attr-name\">rel</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">'</span>stylesheet<span class=\"token punctuation\">'</span></span> <span class=\"token punctuation\">/></span></span>\n  <span class=\"token comment\">&lt;!-- 上一步引入的 L7 JS 和 CSS --></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>head</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<p>⚠️高德采用异步加载，因此不需要引入任何额外静态文件。</p>\n<p>然后在 <code class=\"language-text\">&lt;body&gt;</code> 中定义一个容器并设置一个 <code class=\"language-text\">id</code>。通过全局 <code class=\"language-text\">L7</code> 这个命名空间可以获取场景 <code class=\"language-text\">L7.Scene</code> 和图层 <code class=\"language-text\">L7.PolygonLayer</code>：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 <code class=\"language-text\">L7.Scene</code> 的构造函数，获取方式如下：</p>\n<ul>\n<li>高德地图开发者 Key <a href=\"https://lbs.amap.com/dev/key/\" target=\"_self\" rel=\"nofollow\">申请方法</a></li>\n<li><a href=\"https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens\" target=\"_self\" rel=\"nofollow\">Mapbox Access Tokens</a></li>\n</ul>\n<h2 id=\"通过-submodule-使用\"><a href=\"#%E9%80%9A%E8%BF%87-submodule-%E4%BD%BF%E7%94%A8\" aria-label=\"通过 submodule 使用 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>通过 Submodule 使用</h2>\n<p>首先通过 <code class=\"language-text\">npm/yarn</code></p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> --save @antv/l7\n\n<span class=\"token function\">yarn</span> <span class=\"token function\">add</span> <span class=\"token function\">npm</span> <span class=\"token function\">install</span> --save @antv/l7</code></pre></div>\n<p>然后就可以使用其中包含的场景和各类图层：</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> Scene<span class=\"token punctuation\">,</span> PolygonLayer <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 punctuation\">(</span><span class=\"token keyword\">async</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// 获取数据</span>\n  <span class=\"token keyword\">const</span> response <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span>\n    <span class=\"token string\">'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> response<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token comment\">// 创建场景</span>\n  <span class=\"token keyword\">const</span> scene <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Scene</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    center<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">110.19382669582967</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50.258134</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n    id<span class=\"token punctuation\">:</span> <span class=\"token string\">'map'</span><span class=\"token punctuation\">,</span>\n    pitch<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n    style<span class=\"token punctuation\">:</span> <span class=\"token string\">'dark'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token keyword\">type</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'amap'</span><span class=\"token punctuation\">,</span>\n    zoom<span class=\"token punctuation\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n    token<span class=\"token punctuation\">:</span> <span class=\"token string\">'pg.xxx'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 高德或者 Mapbox 的 token</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token comment\">// 创建图层</span>\n  <span class=\"token keyword\">const</span> layer <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">PolygonLayer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  layer\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\">'name'</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\">10000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">100000</span><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\">'name'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token string\">'#2E8AE6'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#69D1AB'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#DAF291'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#FFD591'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#FF7A45'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#CF1D49'</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\">'fill'</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      opacity<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\n  <span class=\"token comment\">// 添加图层到场景中</span>\n  scene<span class=\"token punctuation\">.</span><span class=\"token function\">addLayer</span><span class=\"token punctuation\">(</span>layer<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token comment\">// 渲染场景</span>\n  scene<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><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><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：</p>\n<ul>\n<li><a href=\"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx\" target=\"_self\" rel=\"nofollow\">高德地图</a></li>\n<li><a href=\"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx\" target=\"_self\" rel=\"nofollow\">Mapbox</a></li>\n</ul>\n<h2 id=\"wip-react\"><a href=\"#wip-react\" aria-label=\"wip react 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>[WIP] React</h2>\n<p>React 组件待开发，目前可以暂时以 Submodule 方式使用：</p>\n<div class=\"gatsby-highlight\" data-language=\"tsx\"><pre class=\"language-tsx\"><code class=\"language-tsx\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> Scene<span class=\"token punctuation\">,</span> PolygonLayer<span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'@antv/l7'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> <span class=\"token operator\">*</span> <span class=\"token keyword\">as</span> React <span class=\"token keyword\">from</span> <span class=\"token string\">'react'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">AMap</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">private</span> scene<span class=\"token punctuation\">:</span> Scene<span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token function\">componentWillUnmount</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>scene<span class=\"token punctuation\">.</span><span class=\"token function\">destroy</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">async</span> <span class=\"token function\">componentDidMount</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> response <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span>\n      <span class=\"token string\">'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">const</span> scene <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Scene</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n      center<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">110.19382669582967</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50.258134</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      id<span class=\"token punctuation\">:</span> <span class=\"token string\">'map'</span><span class=\"token punctuation\">,</span>\n      pitch<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n      style<span class=\"token punctuation\">:</span> <span class=\"token string\">'dark'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token keyword\">type</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'amap'</span><span class=\"token punctuation\">,</span>\n      zoom<span class=\"token punctuation\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n      token<span class=\"token punctuation\">:</span> <span class=\"token string\">'pg.xxx'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 高德或者 Mapbox 的 token</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">const</span> layer <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">PolygonLayer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    layer\n      <span class=\"token punctuation\">.</span><span class=\"token function\">source</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">await</span> response<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</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\">'name'</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\">10000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">100000</span><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\">'name'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token string\">'#2E8AE6'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#69D1AB'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#DAF291'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#FFD591'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#FF7A45'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#CF1D49'</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\">'fill'</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        opacity<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    scene<span class=\"token punctuation\">.</span><span class=\"token function\">addLayer</span><span class=\"token punctuation\">(</span>layer<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    scene<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>scene <span class=\"token operator\">=</span> scene<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span>\n        <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>map<span class=\"token punctuation\">\"</span></span>\n        <span class=\"token attr-name\">style</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span>\n          position<span class=\"token punctuation\">:</span> <span class=\"token string\">'absolute'</span><span class=\"token punctuation\">,</span>\n          top<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n          left<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n          right<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n          bottom<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span></span>\n      <span class=\"token punctuation\">/></span></span>\n    <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>⚠️组件 Unmount 时需要通过 <code class=\"language-text\">scene.destroy()</code> 手动销毁场景。</p>","fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.en.md"}}},{"node":{"html":"<h1 id=\"使用方法\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95\" 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>L7 提供三种使用方式：CDN、Submodule。</p>\n<h2 id=\"通过-cdn-使用\"><a href=\"#%E9%80%9A%E8%BF%87-cdn-%E4%BD%BF%E7%94%A8\" aria-label=\"通过 cdn 使用 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>通过 CDN 使用</h2>\n<p>首先在 <code class=\"language-text\">&lt;head&gt;</code> 中引入 L7 CDN 版本的 JS 和 CSS 文件：</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>head</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">'</span>https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js<span class=\"token punctuation\">'</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>head</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<p>如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 <a href=\"https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart\" target=\"_self\" rel=\"nofollow\">Mapbox 文档</a>：</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>head</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">'</span>https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js<span class=\"token punctuation\">'</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>link</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">'</span>https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css<span class=\"token punctuation\">'</span></span> <span class=\"token attr-name\">rel</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">'</span>stylesheet<span class=\"token punctuation\">'</span></span> <span class=\"token punctuation\">/></span></span>\n  <span class=\"token comment\">&lt;!-- 上一步引入的 L7 JS 和 CSS --></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>head</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<p>⚠️高德采用异步加载，因此不需要引入任何额外静态文件。</p>\n<p>然后在 <code class=\"language-text\">&lt;body&gt;</code> 中定义一个容器并设置一个 <code class=\"language-text\">id</code>。通过全局 <code class=\"language-text\">L7</code> 这个命名空间可以获取场景 <code class=\"language-text\">L7.Scene</code> 和图层 <code class=\"language-text\">L7.PolygonLayer</code>：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 <code class=\"language-text\">L7.Scene</code> 的构造函数，获取方式如下：</p>\n<ul>\n<li>高德地图开发者 Key <a href=\"https://lbs.amap.com/dev/key/\" target=\"_self\" rel=\"nofollow\">申请方法</a></li>\n<li><a href=\"https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens\" target=\"_self\" rel=\"nofollow\">Mapbox Access Tokens</a></li>\n</ul>\n<h2 id=\"通过-submodule-使用\"><a href=\"#%E9%80%9A%E8%BF%87-submodule-%E4%BD%BF%E7%94%A8\" aria-label=\"通过 submodule 使用 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>通过 Submodule 使用</h2>\n<p>首先通过 <code class=\"language-text\">npm/yarn</code></p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> --save @antv/l7\n\n<span class=\"token function\">yarn</span> <span class=\"token function\">add</span> <span class=\"token function\">npm</span> <span class=\"token function\">install</span> --save @antv/l7</code></pre></div>\n<p>然后就可以使用其中包含的场景和各类图层：</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> Scene<span class=\"token punctuation\">,</span> PolygonLayer <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 punctuation\">(</span><span class=\"token keyword\">async</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// 获取数据</span>\n  <span class=\"token keyword\">const</span> response <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span>\n    <span class=\"token string\">'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> response<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token comment\">// 创建场景</span>\n  <span class=\"token keyword\">const</span> scene <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Scene</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    center<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">110.19382669582967</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50.258134</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n    id<span class=\"token punctuation\">:</span> <span class=\"token string\">'map'</span><span class=\"token punctuation\">,</span>\n    pitch<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n    style<span class=\"token punctuation\">:</span> <span class=\"token string\">'dark'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token keyword\">type</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'amap'</span><span class=\"token punctuation\">,</span>\n    zoom<span class=\"token punctuation\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n    token<span class=\"token punctuation\">:</span> <span class=\"token string\">'pg.xxx'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 高德或者 Mapbox 的 token</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token comment\">// 创建图层</span>\n  <span class=\"token keyword\">const</span> layer <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">PolygonLayer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  layer\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\">'name'</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\">10000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">100000</span><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\">'name'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token string\">'#2E8AE6'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#69D1AB'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#DAF291'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#FFD591'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#FF7A45'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#CF1D49'</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\">'fill'</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      opacity<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\n  <span class=\"token comment\">// 添加图层到场景中</span>\n  scene<span class=\"token punctuation\">.</span><span class=\"token function\">addLayer</span><span class=\"token punctuation\">(</span>layer<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token comment\">// 渲染场景</span>\n  scene<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><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><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：</p>\n<ul>\n<li><a href=\"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx\" target=\"_self\" rel=\"nofollow\">高德地图</a></li>\n<li><a href=\"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx\" target=\"_self\" rel=\"nofollow\">Mapbox</a></li>\n</ul>\n<h2 id=\"wip-react\"><a href=\"#wip-react\" aria-label=\"wip react 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>[WIP] React</h2>\n<p>React 组件待开发，目前可以暂时以 Submodule 方式使用：</p>\n<div class=\"gatsby-highlight\" data-language=\"tsx\"><pre class=\"language-tsx\"><code class=\"language-tsx\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> Scene<span class=\"token punctuation\">,</span> PolygonLayer<span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'@antv/l7'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> <span class=\"token operator\">*</span> <span class=\"token keyword\">as</span> React <span class=\"token keyword\">from</span> <span class=\"token string\">'react'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">AMap</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">private</span> scene<span class=\"token punctuation\">:</span> Scene<span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token function\">componentWillUnmount</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>scene<span class=\"token punctuation\">.</span><span class=\"token function\">destroy</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">async</span> <span class=\"token function\">componentDidMount</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> response <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span>\n      <span class=\"token string\">'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">const</span> scene <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Scene</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n      center<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">110.19382669582967</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50.258134</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      id<span class=\"token punctuation\">:</span> <span class=\"token string\">'map'</span><span class=\"token punctuation\">,</span>\n      pitch<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n      style<span class=\"token punctuation\">:</span> <span class=\"token string\">'dark'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token keyword\">type</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'amap'</span><span class=\"token punctuation\">,</span>\n      zoom<span class=\"token punctuation\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n      token<span class=\"token punctuation\">:</span> <span class=\"token string\">'pg.xxx'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 高德或者 Mapbox 的 token</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">const</span> layer <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">PolygonLayer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    layer\n      <span class=\"token punctuation\">.</span><span class=\"token function\">source</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">await</span> response<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</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\">'name'</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\">10000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">100000</span><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\">'name'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token string\">'#2E8AE6'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#69D1AB'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#DAF291'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#FFD591'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#FF7A45'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#CF1D49'</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\">'fill'</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        opacity<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    scene<span class=\"token punctuation\">.</span><span class=\"token function\">addLayer</span><span class=\"token punctuation\">(</span>layer<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    scene<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>scene <span class=\"token operator\">=</span> scene<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span>\n        <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>map<span class=\"token punctuation\">\"</span></span>\n        <span class=\"token attr-name\">style</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span>\n          position<span class=\"token punctuation\">:</span> <span class=\"token string\">'absolute'</span><span class=\"token punctuation\">,</span>\n          top<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n          left<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n          right<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n          bottom<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span></span>\n      <span class=\"token punctuation\">/></span></span>\n    <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>⚠️组件 Unmount 时需要通过 <code class=\"language-text\">scene.destroy()</code> 手动销毁场景。</p>","fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/quickstart.zh.md"}}},{"node":{"html":"<p>An open source large-scale geospatial data visualization analysis development framework powered by WebGL.</p>\n<p>L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。</p>\n<video id=\"video\" controls=\"\" preload=\"none\" poster=\"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rjkiQLCoZxUAAAAAAAAAAABkARQnAQ\">\n<source id=\"mp4\" src=\"https://gw.alipayobjects.com/mdn/antv_site/afts/file/A*viKwSJl2OGIAAAAAAAAAAABkARQnAQ\"; type=\"video/map4\">\n      <source id=\"webm\" src=\"https://gw.alipayobjects.com/os/basement_prod/65d5dbe8-d78d-4c6b-9318-fa06b1456784.webm\" type=\"video/webm\">\n      <source id=\"ogv\" src=\"http://media.w3.org/2010/05/sintel/trailer.ogv\" type=\"video/ogg\">\n<p>Your user agent does not support the HTML5 Video element.</p>\n</video>\n<p>2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，</p>\n<p>1.x 版本的用户需求我们持续跟进 <a href=\"https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html\" target=\"_self\" rel=\"nofollow\">旧版官网地址</a></p>\n<h2 id=\"核心特性\"><a href=\"#%E6%A0%B8%E5%BF%83%E7%89%B9%E6%80%A7\" 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>🌏 数据驱动可视化展示</p>\n<p>数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。</p>\n<p>🌏 2D，3D 一体化的海量数据高性能渲染</p>\n<p>百万级空间数据实时，动态渲染。</p>\n<p>🌏 简单灵活的数据接入</p>\n<p>支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。</p>\n<p> 🌏 多地图底图支持，支持离线内网部署</p>\n<p>高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。</p>\n<h2 id=\"支持丰富的图表类型\"><a href=\"#%E6%94%AF%E6%8C%81%E4%B8%B0%E5%AF%8C%E7%9A%84%E5%9B%BE%E8%A1%A8%E7%B1%BB%E5%9E%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<h3 id=\"点图层\"><a href=\"#%E7%82%B9%E5%9B%BE%E5%B1%82\" 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<ul>\n<li>气泡图</li>\n<li>散点图</li>\n<li>符号地图</li>\n<li>3D柱状地图</li>\n<li>聚合地图</li>\n<li>复合图表地图</li>\n<li>自定义Marker</li>\n</ul>\n<h3 id=\"线图层\"><a href=\"#%E7%BA%BF%E5%9B%BE%E5%B1%82\" 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<ul>\n<li>路径地图</li>\n<li>弧线，支持2D弧线、3D弧线以及大圆航线</li>\n<li>等值线</li>\n</ul>\n<h3 id=\"面图层\"><a href=\"#%E9%9D%A2%E5%9B%BE%E5%B1%82\" 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<ul>\n<li>填充图</li>\n<li>3D填充图</li>\n</ul>\n<h3 id=\"热力图\"><a href=\"#%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>热力图</h3>\n<ul>\n<li>经典热力图</li>\n<li>蜂窝热力图</li>\n<li>网格热力图</li>\n</ul>\n<h3 id=\"栅格地图\"><a href=\"#%E6%A0%85%E6%A0%BC%E5%9C%B0%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>栅格地图</h3>\n<ul>\n<li>图片</li>\n<li>Raster</li>\n</ul>\n<h2 id=\"l7-20-roadmap\"><a href=\"#l7-20-roadmap\" aria-label=\"l7 20 roadmap 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>L7 2.0 Roadmap</h2>\n<p><img src=\"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ\" alt=\"L7 Road Map\"></p>\n<p>更多技术细节，详细进展，请关注 <a href=\"https://github.com/antvis/L7\" target=\"_self\" rel=\"nofollow\">GitHub</a>，欢迎大家来给点点 Star，让更多人看到这个开源的项目。</p>","fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.en.md"}}},{"node":{"html":"<h1 id=\"l7-地理空间数据可视分析引擎\"><a href=\"#l7-%E5%9C%B0%E7%90%86%E7%A9%BA%E9%97%B4%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%88%86%E6%9E%90%E5%BC%95%E6%93%8E\" aria-label=\"l7 地理空间数据可视分析引擎 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>L7 地理空间数据可视分析引擎</h1>\n<p>2.0.beta 版本目前有些功能还未完善，</p>\n<p>⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，</p>\n<p>⚠️ 1.x 版本的用户需求我们持续跟进 <a href=\"https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html\" target=\"_self\" rel=\"nofollow\">旧版官网地址</a></p>\n<p>L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。</p>\n<video id=\"video\" controls=\"\" preload=\"none\" poster=\"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rjkiQLCoZxUAAAAAAAAAAABkARQnAQ\">\n<source id=\"mp4\" src=\"https://gw.alipayobjects.com/mdn/antv_site/afts/file/A*viKwSJl2OGIAAAAAAAAAAABkARQnAQ\"; type=\"video/map4\">\n      <source id=\"webm\" src=\"https://gw.alipayobjects.com/os/basement_prod/65d5dbe8-d78d-4c6b-9318-fa06b1456784.webm\" type=\"video/webm\">\n      <source id=\"ogv\" src=\"http://media.w3.org/2010/05/sintel/trailer.ogv\" type=\"video/ogg\">\n<p>Your user agent does not support the HTML5 Video element.</p>\n</video>\n<h2 id=\"核心特性\"><a href=\"#%E6%A0%B8%E5%BF%83%E7%89%B9%E6%80%A7\" 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>🌏 数据驱动可视化展示</p>\n<p>数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。</p>\n<p>🌏 2D，3D 一体化的海量数据高性能渲染</p>\n<p>百万级空间数据实时，动态渲染。</p>\n<p>🌏 简单灵活的数据接入</p>\n<p>支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。</p>\n<p> 🌏 多地图底图支持，支持离线内网部署</p>\n<p>高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。</p>\n<h2 id=\"支持丰富的图表类型\"><a href=\"#%E6%94%AF%E6%8C%81%E4%B8%B0%E5%AF%8C%E7%9A%84%E5%9B%BE%E8%A1%A8%E7%B1%BB%E5%9E%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<h3 id=\"点图层\"><a href=\"#%E7%82%B9%E5%9B%BE%E5%B1%82\" 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<ul>\n<li>气泡图</li>\n<li>散点图</li>\n<li>符号地图</li>\n<li>3D柱状地图</li>\n<li>聚合地图</li>\n<li>复合图表地图</li>\n<li>自定义Marker</li>\n</ul>\n<h3 id=\"线图层\"><a href=\"#%E7%BA%BF%E5%9B%BE%E5%B1%82\" 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<ul>\n<li>路径地图</li>\n<li>弧线，支持2D弧线、3D弧线以及大圆航线</li>\n<li>等值线</li>\n</ul>\n<h3 id=\"面图层\"><a href=\"#%E9%9D%A2%E5%9B%BE%E5%B1%82\" 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<ul>\n<li>填充图</li>\n<li>3D填充图</li>\n</ul>\n<h3 id=\"热力图\"><a href=\"#%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>热力图</h3>\n<ul>\n<li>经典热力图</li>\n<li>蜂窝热力图</li>\n<li>网格热力图</li>\n</ul>\n<h3 id=\"栅格地图\"><a href=\"#%E6%A0%85%E6%A0%BC%E5%9C%B0%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>栅格地图</h3>\n<ul>\n<li>图片</li>\n<li>Raster</li>\n</ul>\n<h2 id=\"l7-20-roadmap\"><a href=\"#l7-20-roadmap\" aria-label=\"l7 20 roadmap 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>L7 2.0 Roadmap</h2>\n<p><img src=\"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ\" alt=\"L7 Road Map\"></p>\n<p>更多技术细节，详细进展，请关注 <a href=\"https://github.com/antvis/L7\" target=\"_self\" rel=\"nofollow\">GitHub</a>，欢迎大家来给点点 Star，让更多人看到这个开源的项目。</p>\n<h3 id=\"技术支持服务群\"><a href=\"#%E6%8A%80%E6%9C%AF%E6%94%AF%E6%8C%81%E6%9C%8D%E5%8A%A1%E7%BE%A4\" 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>L7 相关技术问题，需求反馈，我们会及时响应\n<img src=\"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ePmsRbK4lZgAAAAAAAAAAABkARQnAQ\" alt=\"地理空间可视化L7支持群\"></p>","fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/l7.zh.md"}}},{"node":{"html":"<h1 id=\"使用方法\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95\" 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>L7 提供三种使用方式：CDN、Submodule。</p>\n<h2 id=\"通过-cdn-使用\"><a href=\"#%E9%80%9A%E8%BF%87-cdn-%E4%BD%BF%E7%94%A8\" aria-label=\"通过 cdn 使用 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>通过 CDN 使用</h2>\n<p>首先在 <code class=\"language-text\">&lt;head&gt;</code> 中引入 L7 CDN 版本的 JS 和 CSS 文件：</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>head</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">'</span>https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js<span class=\"token punctuation\">'</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>head</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<p>如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 <a href=\"https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart\" target=\"_self\" rel=\"nofollow\">Mapbox 文档</a>：</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>head</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">'</span>https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js<span class=\"token punctuation\">'</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>link</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">'</span>https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css<span class=\"token punctuation\">'</span></span> <span class=\"token attr-name\">rel</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">'</span>stylesheet<span class=\"token punctuation\">'</span></span> <span class=\"token punctuation\">/></span></span>\n  <span class=\"token comment\">&lt;!-- 上一步引入的 L7 JS 和 CSS --></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>head</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<p>⚠️高德采用异步加载，因此不需要引入任何额外静态文件。</p>\n<p>然后在 <code class=\"language-text\">&lt;body&gt;</code> 中定义一个容器并设置一个 <code class=\"language-text\">id</code>。通过全局 <code class=\"language-text\">L7</code> 这个命名空间可以获取场景 <code class=\"language-text\">L7.Scene</code> 和图层 <code class=\"language-text\">L7.PolygonLayer</code>：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 <code class=\"language-text\">L7.Scene</code> 的构造函数，获取方式如下：</p>\n<ul>\n<li>高德地图开发者 Key <a href=\"https://lbs.amap.com/dev/key/\" target=\"_self\" rel=\"nofollow\">申请方法</a></li>\n<li><a href=\"https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens\" target=\"_self\" rel=\"nofollow\">Mapbox Access Tokens</a></li>\n</ul>\n<h2 id=\"通过-submodule-使用\"><a href=\"#%E9%80%9A%E8%BF%87-submodule-%E4%BD%BF%E7%94%A8\" aria-label=\"通过 submodule 使用 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>通过 Submodule 使用</h2>\n<p>首先通过 <code class=\"language-text\">npm/yarn</code></p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> --save @antv/l7\n\n<span class=\"token function\">yarn</span> <span class=\"token function\">add</span> <span class=\"token function\">npm</span> <span class=\"token function\">install</span> --save @antv/l7</code></pre></div>\n<p>然后就可以使用其中包含的场景和各类图层：</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> Scene<span class=\"token punctuation\">,</span> PolygonLayer <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 punctuation\">(</span><span class=\"token keyword\">async</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// 获取数据</span>\n  <span class=\"token keyword\">const</span> response <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span>\n    <span class=\"token string\">'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> response<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token comment\">// 创建场景</span>\n  <span class=\"token keyword\">const</span> scene <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Scene</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    center<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">110.19382669582967</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50.258134</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n    id<span class=\"token punctuation\">:</span> <span class=\"token string\">'map'</span><span class=\"token punctuation\">,</span>\n    pitch<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n    style<span class=\"token punctuation\">:</span> <span class=\"token string\">'dark'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token keyword\">type</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'amap'</span><span class=\"token punctuation\">,</span>\n    zoom<span class=\"token punctuation\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n    token<span class=\"token punctuation\">:</span> <span class=\"token string\">'pg.xxx'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 高德或者 Mapbox 的 token</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token comment\">// 创建图层</span>\n  <span class=\"token keyword\">const</span> layer <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">PolygonLayer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  layer\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\">'name'</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\">10000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">100000</span><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\">'name'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token string\">'#2E8AE6'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#69D1AB'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#DAF291'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#FFD591'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#FF7A45'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#CF1D49'</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\">'fill'</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      opacity<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\n  <span class=\"token comment\">// 添加图层到场景中</span>\n  scene<span class=\"token punctuation\">.</span><span class=\"token function\">addLayer</span><span class=\"token punctuation\">(</span>layer<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token comment\">// 渲染场景</span>\n  scene<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><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><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：</p>\n<ul>\n<li><a href=\"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx\" target=\"_self\" rel=\"nofollow\">高德地图</a></li>\n<li><a href=\"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx\" target=\"_self\" rel=\"nofollow\">Mapbox</a></li>\n</ul>\n<h2 id=\"wip-react\"><a href=\"#wip-react\" aria-label=\"wip react 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>[WIP] React</h2>\n<p>React 组件待开发，目前可以暂时以 Submodule 方式使用：</p>\n<div class=\"gatsby-highlight\" data-language=\"tsx\"><pre class=\"language-tsx\"><code class=\"language-tsx\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> Scene<span class=\"token punctuation\">,</span> PolygonLayer<span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'@antv/l7'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> <span class=\"token operator\">*</span> <span class=\"token keyword\">as</span> React <span class=\"token keyword\">from</span> <span class=\"token string\">'react'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">AMap</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">private</span> scene<span class=\"token punctuation\">:</span> Scene<span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token function\">componentWillUnmount</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>scene<span class=\"token punctuation\">.</span><span class=\"token function\">destroy</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">async</span> <span class=\"token function\">componentDidMount</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> response <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span>\n      <span class=\"token string\">'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">const</span> scene <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Scene</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n      center<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">110.19382669582967</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50.258134</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      id<span class=\"token punctuation\">:</span> <span class=\"token string\">'map'</span><span class=\"token punctuation\">,</span>\n      pitch<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n      style<span class=\"token punctuation\">:</span> <span class=\"token string\">'dark'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token keyword\">type</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'amap'</span><span class=\"token punctuation\">,</span>\n      zoom<span class=\"token punctuation\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n      token<span class=\"token punctuation\">:</span> <span class=\"token string\">'pg.xxx'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 高德或者 Mapbox 的 token</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">const</span> layer <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">PolygonLayer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    layer\n      <span class=\"token punctuation\">.</span><span class=\"token function\">source</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">await</span> response<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</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\">'name'</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\">10000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">100000</span><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\">'name'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token string\">'#2E8AE6'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#69D1AB'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#DAF291'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#FFD591'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#FF7A45'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#CF1D49'</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\">'fill'</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        opacity<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    scene<span class=\"token punctuation\">.</span><span class=\"token function\">addLayer</span><span class=\"token punctuation\">(</span>layer<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    scene<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>scene <span class=\"token operator\">=</span> scene<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span>\n        <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>map<span class=\"token punctuation\">\"</span></span>\n        <span class=\"token attr-name\">style</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span>\n          position<span class=\"token punctuation\">:</span> <span class=\"token string\">'absolute'</span><span class=\"token punctuation\">,</span>\n          top<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n          left<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n          right<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n          bottom<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span></span>\n      <span class=\"token punctuation\">/></span></span>\n    <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>⚠️组件 Unmount 时需要通过 <code class=\"language-text\">scene.destroy()</code> 手动销毁场景。</p>","fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.zh.md"}}},{"node":{"html":"<h1 id=\"使用方法\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95\" 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>L7 提供三种使用方式：CDN、Submodule。</p>\n<h2 id=\"通过-cdn-使用\"><a href=\"#%E9%80%9A%E8%BF%87-cdn-%E4%BD%BF%E7%94%A8\" aria-label=\"通过 cdn 使用 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>通过 CDN 使用</h2>\n<p>首先在 <code class=\"language-text\">&lt;head&gt;</code> 中引入 L7 CDN 版本的 JS 和 CSS 文件：</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>head</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">'</span>https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js<span class=\"token punctuation\">'</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>head</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<p>如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 <a href=\"https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart\" target=\"_self\" rel=\"nofollow\">Mapbox 文档</a>：</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>head</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">'</span>https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js<span class=\"token punctuation\">'</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>link</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">'</span>https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css<span class=\"token punctuation\">'</span></span> <span class=\"token attr-name\">rel</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">'</span>stylesheet<span class=\"token punctuation\">'</span></span> <span class=\"token punctuation\">/></span></span>\n  <span class=\"token comment\">&lt;!-- 上一步引入的 L7 JS 和 CSS --></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>head</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<p>⚠️高德采用异步加载，因此不需要引入任何额外静态文件。</p>\n<p>然后在 <code class=\"language-text\">&lt;body&gt;</code> 中定义一个容器并设置一个 <code class=\"language-text\">id</code>。通过全局 <code class=\"language-text\">L7</code> 这个命名空间可以获取场景 <code class=\"language-text\">L7.Scene</code> 和图层 <code class=\"language-text\">L7.PolygonLayer</code>：\n⚠️需要获取高德或者 Mapbox 的使用 token 并传入 <code class=\"language-text\">L7.Scene</code> 的构造函数，获取方式如下：</p>\n<ul>\n<li>高德地图开发者 Key <a href=\"https://lbs.amap.com/dev/key/\" target=\"_self\" rel=\"nofollow\">申请方法</a></li>\n<li><a href=\"https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens\" target=\"_self\" rel=\"nofollow\">Mapbox Access Tokens</a></li>\n</ul>\n<h2 id=\"通过-submodule-使用\"><a href=\"#%E9%80%9A%E8%BF%87-submodule-%E4%BD%BF%E7%94%A8\" aria-label=\"通过 submodule 使用 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>通过 Submodule 使用</h2>\n<p>首先通过 <code class=\"language-text\">npm/yarn</code></p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> --save @antv/l7\n\n<span class=\"token function\">yarn</span> <span class=\"token function\">add</span> <span class=\"token function\">npm</span> <span class=\"token function\">install</span> --save @antv/l7</code></pre></div>\n<p>然后就可以使用其中包含的场景和各类图层：</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> Scene<span class=\"token punctuation\">,</span> PolygonLayer <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 punctuation\">(</span><span class=\"token keyword\">async</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// 获取数据</span>\n  <span class=\"token keyword\">const</span> response <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span>\n    <span class=\"token string\">'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> response<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token comment\">// 创建场景</span>\n  <span class=\"token keyword\">const</span> scene <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Scene</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    center<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">110.19382669582967</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50.258134</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n    id<span class=\"token punctuation\">:</span> <span class=\"token string\">'map'</span><span class=\"token punctuation\">,</span>\n    pitch<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n    style<span class=\"token punctuation\">:</span> <span class=\"token string\">'dark'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token keyword\">type</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'amap'</span><span class=\"token punctuation\">,</span>\n    zoom<span class=\"token punctuation\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n    token<span class=\"token punctuation\">:</span> <span class=\"token string\">'pg.xxx'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 高德或者 Mapbox 的 token</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token comment\">// 创建图层</span>\n  <span class=\"token keyword\">const</span> layer <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">PolygonLayer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  layer\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\">'name'</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\">10000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">100000</span><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\">'name'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token string\">'#2E8AE6'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#69D1AB'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#DAF291'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#FFD591'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#FF7A45'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string\">'#CF1D49'</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\">'fill'</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      opacity<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\n  <span class=\"token comment\">// 添加图层到场景中</span>\n  scene<span class=\"token punctuation\">.</span><span class=\"token function\">addLayer</span><span class=\"token punctuation\">(</span>layer<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token comment\">// 渲染场景</span>\n  scene<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><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><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：</p>\n<ul>\n<li><a href=\"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx\" target=\"_self\" rel=\"nofollow\">高德地图</a></li>\n<li><a href=\"https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx\" target=\"_self\" rel=\"nofollow\">Mapbox</a></li>\n</ul>\n<h2 id=\"wip-react\"><a href=\"#wip-react\" aria-label=\"wip react 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>[WIP] React</h2>\n<p>React 组件待开发，目前可以暂时以 Submodule 方式使用：</p>\n<div class=\"gatsby-highlight\" data-language=\"tsx\"><pre class=\"language-tsx\"><code class=\"language-tsx\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> Scene<span class=\"token punctuation\">,</span> PolygonLayer<span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'@antv/l7'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> <span class=\"token operator\">*</span> <span class=\"token keyword\">as</span> React <span class=\"token keyword\">from</span> <span class=\"token string\">'react'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">AMap</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">private</span> scene<span class=\"token punctuation\">:</span> Scene<span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token function\">componentWillUnmount</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>scene<span class=\"token punctuation\">.</span><span class=\"token function\">destroy</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token keyword\">async</span> <span class=\"token function\">componentDidMount</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> response <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span>\n      <span class=\"token string\">'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">const</span> scene <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Scene</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n      center<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">110.19382669582967</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50.258134</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      id<span class=\"token punctuation\">:</span> <span class=\"token string\">'map'</span><span class=\"token punctuation\">,</span>\n      pitch<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n      style<span class=\"token punctuation\">:</span> <span class=\"token string\">'dark'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token keyword\">type</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'amap'</span><span class=\"token punctuation\">,</span>\n      zoom<span class=\"token punctuation\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n      token<span class=\"token punctuation\">:</span> <span class=\"token string\">'pg.xxx'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 高德或者 Mapbox 的 token</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">const</span> layer <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">PolygonLayer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    layer\n      <span class=\"token punctuation\">.</span><span class=\"token function\">source</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">await</span> response<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</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\">'name'</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\">10000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30000</span><span class=\"token punctuation\">,</span> <span class=\"token number\">100000</span><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\">'name'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token string\">'#2E8AE6'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#69D1AB'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#DAF291'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#FFD591'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#FF7A45'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'#CF1D49'</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\">'fill'</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        opacity<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    scene<span class=\"token punctuation\">.</span><span class=\"token function\">addLayer</span><span class=\"token punctuation\">(</span>layer<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    scene<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>scene <span class=\"token operator\">=</span> scene<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span>\n        <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>map<span class=\"token punctuation\">\"</span></span>\n        <span class=\"token attr-name\">style</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span>\n          position<span class=\"token punctuation\">:</span> <span class=\"token string\">'absolute'</span><span class=\"token punctuation\">,</span>\n          top<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n          left<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n          right<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n          bottom<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span></span>\n      <span class=\"token punctuation\">/></span></span>\n    <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>⚠️组件 Unmount 时需要通过 <code class=\"language-text\">scene.destroy()</code> 手动销毁场景。</p>","fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/quickstart.en.md"}}},{"node":{"html":"<h1 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</h1>\n<h3 id=\"概述\"><a href=\"#%E6%A6%82%E8%BF%B0\" 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>source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);</p>\n<p><strong>parser:</strong></p>\n<p>不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。</p>\n<p><strong>transform</strong></p>\n<p>数据转换，数据统计，网格布局，数据聚合等数据操作。</p>\n<h2 id=\"api\"><a href=\"#api\" aria-label=\"api 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>API</h2>\n<h3 id=\"parser\"><a href=\"#parser\" aria-label=\"parser 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>parser</h3>\n<p>空间数据分矢量数据和栅格数据两大类</p>\n<ul>\n<li>矢量数据 支持 csv，geojson，json 三种数据类型</li>\n<li>栅格数据  支持 image，Raster</li>\n</ul>\n<h4 id=\"geojson\"><a href=\"#geojson\" aria-label=\"geojson 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>geojson</h4>\n<p><a href=\"https://www.yuque.com/antv/l7/dm2zll\" target=\"_self\" rel=\"nofollow\">geojson</a> 数据为默认数据格式，可以</p>\n<p>不需要设置parser 参数</p>\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</code></pre></div>\n<h4 id=\"json\"><a href=\"#json\" aria-label=\"json 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>json</h4>\n<p>json  不是标准的地理数据结构，因此需要设置对应的经纬度字段</p>\n<p><strong>点数据</strong></p>\n<p>x: 经度字段 </p>\n<p>y: 纬度字段</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n  <span class=\"token punctuation\">{</span>\n    lng<span class=\"token punctuation\">:</span> <span class=\"token number\">112.345</span><span class=\"token punctuation\">,</span>\n    lat<span class=\"token punctuation\">:</span> <span class=\"token number\">30.455</span><span class=\"token punctuation\">,</span>\n    value<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">{</span>\n    lng<span class=\"token punctuation\">:</span> <span class=\"token number\">114.345</span><span class=\"token punctuation\">,</span>\n    lat<span class=\"token punctuation\">:</span> <span class=\"token number\">31.455</span><span class=\"token punctuation\">,</span>\n    value<span class=\"token punctuation\">:</span> <span class=\"token number\">10</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\nlayer<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\">'json'</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<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p><strong>线段数据</strong></p>\n<p> type: json</p>\n<p>这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标</p>\n<p> x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段  终点经度\ny1:纬度字段   终点纬度</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">{</span>\n   lng1<span class=\"token punctuation\">:</span><span class=\"token number\">112.345</span><span class=\"token punctuation\">,</span>\n   lat1<span class=\"token punctuation\">:</span><span class=\"token number\">30.455</span><span class=\"token punctuation\">,</span>\n   lng2<span class=\"token punctuation\">:</span><span class=\"token number\">112.345</span><span class=\"token punctuation\">,</span>\n   lat2<span class=\"token punctuation\">:</span><span class=\"token number\">30.455</span><span class=\"token punctuation\">,</span>\n   value<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span><span class=\"token punctuation\">{</span>\n   lng1<span class=\"token punctuation\">:</span><span class=\"token number\">114.345</span><span class=\"token punctuation\">,</span>\n   lat1<span class=\"token punctuation\">:</span><span class=\"token number\">31.455</span><span class=\"token punctuation\">,</span>\n   lng2<span class=\"token punctuation\">:</span><span class=\"token number\">112.345</span><span class=\"token punctuation\">,</span>\n   lat2<span class=\"token punctuation\">:</span><span class=\"token number\">30.455</span><span class=\"token punctuation\">,</span>\n   value<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span>\n  <span class=\"token punctuation\">}</span>    \n<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">source</span><span class=\"token punctuation\">(</span>\n  data<span class=\"token punctuation\">,</span>\n   <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\">'json'</span><span class=\"token punctuation\">,</span>\n        x<span class=\"token punctuation\">:</span><span class=\"token string\">'lng1'</span><span class=\"token punctuation\">,</span>\n        y<span class=\"token punctuation\">:</span><span class=\"token string\">'lat1'</span> <span class=\"token punctuation\">,</span> \n        x1<span class=\"token punctuation\">:</span><span class=\"token string\">'lng1'</span><span class=\"token punctuation\">,</span>\n        y1<span class=\"token punctuation\">:</span><span class=\"token string\">'lat2'</span> <span class=\"token punctuation\">,</span> \n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span></code></pre></div>\n<p><strong>面数据</strong></p>\n<p>需要指定coordinates 字段, coordinates据格式</p>\n<p><strong>注意面数据 coord  是三层数据结构</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token punctuation\">[</span>\n  <span class=\"token punctuation\">{</span>\n    type<span class=\"token punctuation\">:</span> <span class=\"token string\">'Polygon'</span><span class=\"token punctuation\">,</span>\n    geometryCoord<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">[</span><span class=\"token number\">115.1806640625</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30.637912028341123</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">[</span><span class=\"token number\">114.9609375</span><span class=\"token punctuation\">,</span> <span class=\"token number\">29.152161283318915</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">[</span><span class=\"token number\">117.79541015625001</span><span class=\"token punctuation\">,</span> <span class=\"token number\">27.430289738862594</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">[</span><span class=\"token number\">118.740234375</span><span class=\"token punctuation\">,</span> <span class=\"token number\">29.420460341013133</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">[</span><span class=\"token number\">117.46582031249999</span><span class=\"token punctuation\">,</span> <span class=\"token number\">31.50362930577303</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">[</span><span class=\"token number\">115.1806640625</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30.637912028341123</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>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\nlayer<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\">'json'</span><span class=\"token punctuation\">,</span>\n    coordinates<span class=\"token punctuation\">:</span> <span class=\"token string\">'geometryCoord'</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=\"csv\"><a href=\"#csv\" aria-label=\"csv 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>csv</h4>\n<p>点，线数据配置项同json数据类型</p>\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\">'lng1'</span><span class=\"token punctuation\">,</span>\n    y<span class=\"token punctuation\">:</span> <span class=\"token string\">'lat1'</span><span class=\"token punctuation\">,</span>\n    x1<span class=\"token punctuation\">:</span> <span class=\"token string\">'lng1'</span><span class=\"token punctuation\">,</span>\n    y1<span class=\"token punctuation\">:</span> <span class=\"token string\">'lat2'</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<p><strong>栅格数据类型**</strong></p>\n<h4 id=\"image\"><a href=\"#image\" aria-label=\"image 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>image</h4>\n<p> 根据图片的经纬度范围，将图片添加到地图上。 配置项</p>\n<ul>\n<li> type: image</li>\n<li> extent: 图像的经纬度范围 []</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>\n  <span class=\"token string\">'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg'</span><span class=\"token punctuation\">,</span>\n  <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\">'image'</span><span class=\"token punctuation\">,</span>\n      extent<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">121.168</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30.2828</span><span class=\"token punctuation\">,</span> <span class=\"token number\">121.384</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30.4219</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>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"raster\"><a href=\"#raster\" aria-label=\"raster 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>raster</h4>\n<p>栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项</p>\n<ul>\n<li>type  raster</li>\n<li>width  数据宽度二维矩阵 columns </li>\n<li>height 数据高度</li>\n<li>min 数据最大值</li>\n<li>max 数据最小值</li>\n<li>extent 经纬度范围</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token function\">source</span><span class=\"token punctuation\">(</span>values<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\">'raster'</span><span class=\"token punctuation\">,</span>\n    width<span class=\"token punctuation\">:</span> n<span class=\"token punctuation\">,</span>\n    height<span class=\"token punctuation\">:</span> m<span class=\"token punctuation\">,</span>\n    min<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n    max<span class=\"token punctuation\">:</span> <span class=\"token number\">8000</span><span class=\"token punctuation\">,</span>\n    extent<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">73.482190241</span><span class=\"token punctuation\">,</span> <span class=\"token number\">3.82501784112</span><span class=\"token punctuation\">,</span> <span class=\"token number\">135.106618732</span><span class=\"token punctuation\">,</span> <span class=\"token number\">57.6300459963</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=\"transforms\"><a href=\"#transforms\" aria-label=\"transforms 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>transforms</h3>\n<p>目前支持三种数据处理方法 map，grid，hexagon transform配置项</p>\n<ul>\n<li>type 数据处理类型</li>\n<li> tansform cfg  数据处理配置项</li>\n</ul>\n<h4 id=\"map\"><a href=\"#map\" aria-label=\"map 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>map</h4>\n<p>数据处理，支持自定义callback函数</p>\n<ul>\n<li>callback:function 回调函数</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      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\">'map'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token function-variable function\">callback</span><span class=\"token punctuation\">:</span><span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">item</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">const</span> <span class=\"token punctuation\">[</span>x<span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span>coordinates<span class=\"token punctuation\">;</span>\n            item<span class=\"token punctuation\">.</span>lat <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span>lat<span class=\"token operator\">*</span><span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n            item<span class=\"token punctuation\">.</span>lng <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span>lng<span class=\"token operator\">*</span><span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n            item<span class=\"token punctuation\">.</span>v <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span>v <span class=\"token operator\">*</span><span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n            item<span class=\"token punctuation\">.</span>coordinates <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>x<span class=\"token operator\">*</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span>y<span class=\"token operator\">*</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n            <span class=\"token keyword\">return</span> item<span class=\"token punctuation\">;</span>\n          <span class=\"token punctuation\">}</span>\n\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span></code></pre></div>\n<h4 id=\"grid\"><a href=\"#grid\" aria-label=\"grid 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>grid</h4>\n<p>生成方格网布局，根据数据字段统计，主要在网格热力图中使用</p>\n<ul>\n<li> type: 'grid',</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      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>\n    <span class=\"token punctuation\">}</span></code></pre></div>\n<h4 id=\"hexagon\"><a href=\"#hexagon\" aria-label=\"hexagon 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>hexagon</h4>\n<p>生成六边形网格布局，根据数据字段统计</p>\n<ul>\n<li> type: '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=\"text\"><pre class=\"language-text\"><code class=\"language-text\"></code></pre></div>","fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.en.md"}}},{"node":{"html":"<h1 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</h1>\n<h3 id=\"概述\"><a href=\"#%E6%A6%82%E8%BF%B0\" 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>source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);</p>\n<p><strong>parser:</strong></p>\n<p>不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。</p>\n<p><strong>transform:</strong></p>\n<p>数据转换，数据统计，网格布局，数据聚合等数据操作。</p>\n<h2 id=\"api\"><a href=\"#api\" aria-label=\"api 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>API</h2>\n<h3 id=\"parser\"><a href=\"#parser\" aria-label=\"parser 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>parser</h3>\n<p>空间数据分矢量数据和栅格数据两大类</p>\n<ul>\n<li>矢量数据 支持 csv，geojson，json 三种数据类型</li>\n<li>栅格数据  支持 image，Raster</li>\n</ul>\n<h4 id=\"geojson\"><a href=\"#geojson\" aria-label=\"geojson 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>geojson</h4>\n<p><a href=\"https://www.yuque.com/antv/l7/dm2zll\" target=\"_self\" rel=\"nofollow\">geojson</a> 数据为默认数据格式，可以</p>\n<p>不需要设置parser 参数</p>\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</code></pre></div>\n<h4 id=\"json\"><a href=\"#json\" aria-label=\"json 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>json</h4>\n<p>json  不是标准的地理数据结构，因此需要设置对应的经纬度字段</p>\n<p><strong>点数据</strong></p>\n<p>x: 经度字段 </p>\n<p>y: 纬度字段</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n  <span class=\"token punctuation\">{</span>\n    lng<span class=\"token punctuation\">:</span> <span class=\"token number\">112.345</span><span class=\"token punctuation\">,</span>\n    lat<span class=\"token punctuation\">:</span> <span class=\"token number\">30.455</span><span class=\"token punctuation\">,</span>\n    value<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">{</span>\n    lng<span class=\"token punctuation\">:</span> <span class=\"token number\">114.345</span><span class=\"token punctuation\">,</span>\n    lat<span class=\"token punctuation\">:</span> <span class=\"token number\">31.455</span><span class=\"token punctuation\">,</span>\n    value<span class=\"token punctuation\">:</span> <span class=\"token number\">10</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\nlayer<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\">'json'</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<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p><strong>线段数据</strong></p>\n<p> type: json</p>\n<p>这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标</p>\n<p> x:经度字段 起点经度\ny:纬度字段 起点纬度\nx1:经度字段  终点经度\ny1:纬度字段   终点纬度</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">{</span>\n   lng1<span class=\"token punctuation\">:</span><span class=\"token number\">112.345</span><span class=\"token punctuation\">,</span>\n   lat1<span class=\"token punctuation\">:</span><span class=\"token number\">30.455</span><span class=\"token punctuation\">,</span>\n   lng2<span class=\"token punctuation\">:</span><span class=\"token number\">112.345</span><span class=\"token punctuation\">,</span>\n   lat2<span class=\"token punctuation\">:</span><span class=\"token number\">30.455</span><span class=\"token punctuation\">,</span>\n   value<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">{</span>\n   lng1<span class=\"token punctuation\">:</span><span class=\"token number\">114.345</span><span class=\"token punctuation\">,</span>\n   lat1<span class=\"token punctuation\">:</span><span class=\"token number\">31.455</span><span class=\"token punctuation\">,</span>\n   lng2<span class=\"token punctuation\">:</span><span class=\"token number\">112.345</span><span class=\"token punctuation\">,</span>\n   lat2<span class=\"token punctuation\">:</span><span class=\"token number\">30.455</span><span class=\"token punctuation\">,</span>\n   value<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span>\n  <span class=\"token punctuation\">}</span>    \n<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">source</span><span class=\"token punctuation\">(</span>\n  data<span class=\"token punctuation\">,</span>\n   <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\">'json'</span><span class=\"token punctuation\">,</span>\n        x<span class=\"token punctuation\">:</span><span class=\"token string\">'lng1'</span><span class=\"token punctuation\">,</span>\n        y<span class=\"token punctuation\">:</span><span class=\"token string\">'lat1'</span> <span class=\"token punctuation\">,</span> \n        x1<span class=\"token punctuation\">:</span><span class=\"token string\">'lng1'</span><span class=\"token punctuation\">,</span>\n        y1<span class=\"token punctuation\">:</span><span class=\"token string\">'lat2'</span> <span class=\"token punctuation\">,</span> \n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span></code></pre></div>\n<p><strong>面数据</strong></p>\n<p>需要指定coordinates 字段, coordinates据格式</p>\n<p><strong>注意面数据 coord  是三层数据结构</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token punctuation\">[</span>\n  <span class=\"token punctuation\">{</span>\n    type<span class=\"token punctuation\">:</span> <span class=\"token string\">'Polygon'</span><span class=\"token punctuation\">,</span>\n    geometryCoord<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">[</span><span class=\"token number\">115.1806640625</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30.637912028341123</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">[</span><span class=\"token number\">114.9609375</span><span class=\"token punctuation\">,</span> <span class=\"token number\">29.152161283318915</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">[</span><span class=\"token number\">117.79541015625001</span><span class=\"token punctuation\">,</span> <span class=\"token number\">27.430289738862594</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">[</span><span class=\"token number\">118.740234375</span><span class=\"token punctuation\">,</span> <span class=\"token number\">29.420460341013133</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">[</span><span class=\"token number\">117.46582031249999</span><span class=\"token punctuation\">,</span> <span class=\"token number\">31.50362930577303</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">[</span><span class=\"token number\">115.1806640625</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30.637912028341123</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>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\nlayer<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\">'json'</span><span class=\"token punctuation\">,</span>\n    coordinates<span class=\"token punctuation\">:</span> <span class=\"token string\">'geometryCoord'</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=\"csv\"><a href=\"#csv\" aria-label=\"csv 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>csv</h4>\n<p>点，线数据配置项同json数据类型</p>\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\">'lng1'</span><span class=\"token punctuation\">,</span>\n    y<span class=\"token punctuation\">:</span> <span class=\"token string\">'lat1'</span><span class=\"token punctuation\">,</span>\n    x1<span class=\"token punctuation\">:</span> <span class=\"token string\">'lng1'</span><span class=\"token punctuation\">,</span>\n    y1<span class=\"token punctuation\">:</span> <span class=\"token string\">'lat2'</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<p><strong>栅格数据类型**</strong></p>\n<h4 id=\"image\"><a href=\"#image\" aria-label=\"image 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>image</h4>\n<p> 根据图片的经纬度范围，将图片添加到地图上。 配置项</p>\n<ul>\n<li> type: image</li>\n<li> extent: 图像的经纬度范围 []</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>\n  <span class=\"token string\">'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg'</span><span class=\"token punctuation\">,</span>\n  <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\">'image'</span><span class=\"token punctuation\">,</span>\n      extent<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">121.168</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30.2828</span><span class=\"token punctuation\">,</span> <span class=\"token number\">121.384</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30.4219</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>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"raster\"><a href=\"#raster\" aria-label=\"raster 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>raster</h4>\n<p>栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项</p>\n<ul>\n<li>type  raster</li>\n<li>width  数据宽度二维矩阵 columns </li>\n<li>height 数据高度</li>\n<li>min 数据最大值</li>\n<li>max 数据最小值</li>\n<li>extent 经纬度范围</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token function\">source</span><span class=\"token punctuation\">(</span>values<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\">'raster'</span><span class=\"token punctuation\">,</span>\n    width<span class=\"token punctuation\">:</span> n<span class=\"token punctuation\">,</span>\n    height<span class=\"token punctuation\">:</span> m<span class=\"token punctuation\">,</span>\n    min<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n    max<span class=\"token punctuation\">:</span> <span class=\"token number\">8000</span><span class=\"token punctuation\">,</span>\n    extent<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">73.482190241</span><span class=\"token punctuation\">,</span> <span class=\"token number\">3.82501784112</span><span class=\"token punctuation\">,</span> <span class=\"token number\">135.106618732</span><span class=\"token punctuation\">,</span> <span class=\"token number\">57.6300459963</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=\"transforms\"><a href=\"#transforms\" aria-label=\"transforms 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>transforms</h3>\n<p>目前支持三种数据处理方法 map，grid，hexagon transform配置项</p>\n<ul>\n<li>type 数据处理类型</li>\n<li> tansform cfg  数据处理配置项</li>\n</ul>\n<h4 id=\"map\"><a href=\"#map\" aria-label=\"map 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>map</h4>\n<p>数据处理，支持自定义callback函数</p>\n<ul>\n<li>callback:function 回调函数</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  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\">'map'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token function-variable function\">callback</span><span class=\"token punctuation\">:</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">item</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">const</span> <span class=\"token punctuation\">[</span>x<span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span>coordinates<span class=\"token punctuation\">;</span>\n        item<span class=\"token punctuation\">.</span>lat <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span>lat <span class=\"token operator\">*</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n        item<span class=\"token punctuation\">.</span>lng <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span>lng <span class=\"token operator\">*</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n        item<span class=\"token punctuation\">.</span>v <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span>v <span class=\"token operator\">*</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n        item<span class=\"token punctuation\">.</span>coordinates <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>x <span class=\"token operator\">*</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> y <span class=\"token operator\">*</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">return</span> item<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 punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"grid\"><a href=\"#grid\" aria-label=\"grid 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>grid</h4>\n<p>生成方格网布局，根据数据字段统计，主要在网格热力图中使用</p>\n<ul>\n<li> type: 'grid',</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  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><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"hexagon\"><a href=\"#hexagon\" aria-label=\"hexagon 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>hexagon</h4>\n<p>生成六边形网格布局，根据数据字段统计</p>\n<ul>\n<li> type: '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=\"text\"><pre class=\"language-text\"><code class=\"language-text\"></code></pre></div>","fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/source.zh.md"}}},{"node":{"html":"<h1 id=\"layer\"><a href=\"#layer\" aria-label=\"layer 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>Layer</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>L7 Layer 接口设计遵循图形语法，在可视表达上</p>\n<p>语法示例</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">new</span> <span class=\"token class-name\">Layer</span><span class=\"token punctuation\">(</span>option<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">source</span><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 punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">size</span><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 punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">style</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"构造函数\"><a href=\"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0\" 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<h2 id=\"配置项\"><a href=\"#%E9%85%8D%E7%BD%AE%E9%A1%B9\" 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<h3 id=\"visable\"><a href=\"#visable\" aria-label=\"visable 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>visable</h3>\n<p>图层是否可见   {bool }  default true</p>\n<h3 id=\"zindex\"><a href=\"#zindex\" aria-label=\"zindex 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>zIndex</h3>\n<p> 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级  {int}   default 0</p>\n<h3 id=\"minzoom\"><a href=\"#minzoom\" aria-label=\"minzoom 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>minZoom</h3>\n<p>图层显示最小缩放等级，（0-18）   {number}  default 0</p>\n<h3 id=\"maxzoom\"><a href=\"#maxzoom\" aria-label=\"maxzoom 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>maxZoom</h3>\n<p> 图层显示最大缩放等级 （0-18）   {number}  default 18</p>\n<h2 id=\"鼠标事件\"><a href=\"#%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6\" 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>beta版当前不支持，正式版会支持</p>\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\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'click'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标左键点击图层事件</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'dblclick'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标左键双击图层事件</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mousemove'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标在图层上移动时触发</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mouseover'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标移入图层要素内时触发</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mouseout'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标移出图层要素时触发</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mouseup'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标在图层上单击抬起时触发</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mousedown'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标在图层上单击按下时触发</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mouseleave'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标离开图层要素</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'rightclick'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标右键图层要素</span>\n</code></pre></div>\n<h2 id=\"方法\"><a href=\"#%E6%96%B9%E6%B3%95\" 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<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>数据源为layer设置数据  source(data,config)</p>\n<ul>\n<li>data {geojson|json|csv}</li>\n</ul>\n<p>       源数据</p>\n<ul>\n<li>\n<p>config  可选 数据源配置项</p>\n<ul>\n<li>parser 数据解析，默认是解析层geojson</li>\n<li>transforms [transform，transform ]  数据处理转换 可设置多个</li>\n</ul>\n</li>\n</ul>\n<p> parser和 transforms <a href=\"https://www.yuque.com/antv/l7/source\" target=\"_self\" rel=\"nofollow\">见source文档</a></p>\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><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\">'map'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token function-variable function\">callback</span><span class=\"token punctuation\">:</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">item</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">const</span> <span class=\"token punctuation\">[</span>x<span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span>coordinates<span class=\"token punctuation\">;</span>\n        item<span class=\"token punctuation\">.</span>lat <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span>lat <span class=\"token operator\">*</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n        item<span class=\"token punctuation\">.</span>lng <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span>lng <span class=\"token operator\">*</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n        item<span class=\"token punctuation\">.</span>v <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span>v <span class=\"token operator\">*</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n        item<span class=\"token punctuation\">.</span>coordinates <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>x <span class=\"token operator\">*</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> y <span class=\"token operator\">*</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">return</span> item<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>\n      type<span class=\"token punctuation\">:</span> <span class=\"token string\">'hexagon'</span><span class=\"token punctuation\">,</span>\n      size<span class=\"token punctuation\">:</span> <span class=\"token number\">6000</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><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"\"><a href=\"#\" 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<h3 id=\"scale\"><a href=\"#scale\" aria-label=\"scale 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>scale</h3>\n<p>cscle('field', scaleConfig)</p>\n<p>(field: string, scaleConfig: object)</p>\n<p>为指定的数据字段进行列定义，返回 layer 实例。</p>\n<ul>\n<li><code class=\"language-text\">field</code> 字段名。</li>\n<li><code class=\"language-text\">scaleConfig</code> 列定义配置，对象类型，可配置的属性如下：</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token punctuation\">{</span>\n  type<span class=\"token punctuation\">:</span> <span class=\"token string\">'linear'</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize</span>\n<span class=\"token punctuation\">}</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>将数据值映射到图形的大小上的方法。</p>\n<p><strong>注意：</strong> </p>\n<p>不同图层的 size 的含义有所差别：</p>\n<ul>\n<li>point 图形的 size 影响点的半径大小和高度；</li>\n<li>line, arc, path 中的 size 影响线的粗细,和高度；</li>\n<li>polygon size 影响的是高度</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">pointLayer<span class=\"token punctuation\">.</span><span class=\"token function\">size</span><span class=\"token punctuation\">(</span><span class=\"token number\">10</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 常量</span>\npointLayer<span class=\"token punctuation\">.</span><span class=\"token function\">size</span><span class=\"token punctuation\">(</span><span class=\"token string\">'type'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 使用字段映射到大小</span>\npointLayer<span class=\"token punctuation\">.</span><span class=\"token function\">size</span><span class=\"token punctuation\">(</span><span class=\"token string\">'type'</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\">10</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 使用字段映射到大小，并指定最大值和最小值</span>\npointLayer<span class=\"token punctuation\">.</span><span class=\"token function\">size</span><span class=\"token punctuation\">(</span><span class=\"token string\">'type'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">type</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// 回调函数</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>type <span class=\"token operator\">===</span> <span class=\"token string\">'a'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token number\">10</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> <span class=\"token number\">5</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=\"sizevalue）\"><a href=\"#sizevalue%EF%BC%89\" aria-label=\"sizevalue） 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(value）</h4>\n<p>传入数字常量，如 <code class=\"language-text\">pointLayer.size(20)</code></p>\n<h4 id=\"sizefield\"><a href=\"#sizefield\" aria-label=\"sizefield 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(field)</h4>\n<p>根据 field 字段的值映射大小，使用默认的<code class=\"language-text\">最大值 max:10</code> 和<code class=\"language-text\">最小值 min: 1</code>。</p>\n<h4 id=\"sizefield-callback\"><a href=\"#sizefield-callback\" aria-label=\"sizefield callback 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(field, callback)</h4>\n<p>使用回调函数控制图形大小。</p>\n<ul>\n<li><code class=\"language-text\">callback</code>: function 回调函数。</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">pointLayer<span class=\"token punctuation\">.</span><span class=\"token function\">size</span><span class=\"token punctuation\">(</span><span class=\"token string\">'age'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">value</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>value <span class=\"token operator\">===</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token number\">5</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> <span class=\"token number\">10</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=\"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>将数据值映射到图形的颜色上的方法。</p>\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\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'red'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 常量颜色</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'type'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 对 type 字段进行映射，使用内置的颜色</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'type'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'red'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'blue'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 指定颜色</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'type'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">type</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// 通过回调函数</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>type <span class=\"token operator\">===</span> <span class=\"token string\">'a'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token string\">'red'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> <span class=\"token string\">'blue'</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'type*value'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">type<span class=\"token punctuation\">,</span> value</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">//多个参数，通过回调函数</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>type <span class=\"token operator\">===</span> <span class=\"token string\">'a'</span> <span class=\"token operator\">&amp;&amp;</span> value <span class=\"token operator\">></span> <span class=\"token number\">100</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token string\">'red'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> <span class=\"token string\">'blue'</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=\"colorvalue\"><a href=\"#colorvalue\" aria-label=\"colorvalue 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(value)</h4>\n<p>参数：<code class=\"language-text\">value</code> ：string\n只支持接收一个参数，value 可以是：</p>\n<ul>\n<li>映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。</li>\n<li>也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。</li>\n</ul>\n<p>示例</p>\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\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'name'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 映射数据字段</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'white'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 指定颜色</span>\n</code></pre></div>\n<h4 id=\"colorfield-colors\"><a href=\"#colorfield-colors\" aria-label=\"colorfield colors 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(field, colors)</h4>\n<p>参数：</p>\n<ul>\n<li><code class=\"language-text\">field</code>: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。</li>\n<li> <code class=\"language-text\">colors</code>: string | array | function</li>\n</ul>\n<p>colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。</p>\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\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'name'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 使用默认的颜色</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'name'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'red'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'blue'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 使用传入的指定颜色</span>\n</code></pre></div>\n<ul>\n<li>colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：</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\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'gender'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">value</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>value <span class=\"token operator\">===</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token string\">'red'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> <span class=\"token string\">'blue'</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'gender*age'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">gender<span class=\"token punctuation\">,</span> age</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>age <span class=\"token operator\">===</span> <span class=\"token number\">20</span> <span class=\"token operator\">&amp;&amp;</span> gender <span class=\"token operator\">==</span> <span class=\"token string\">' 男'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token string\">'red'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> <span class=\"token string\">'blue'</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=\"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>将数据值映射到图形的形状上的方法。</p>\n<p><strong>shape(shape)</strong></p>\n<p>参数<code class=\"language-text\">shape</code> string</p>\n<p>只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状</p>\n<table>\n<thead>\n<tr>\n<th>layer类型</th>\n<th>shape类型</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>point</td>\n<td>2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square</td>\n<td></td>\n</tr>\n<tr>\n<td>line</td>\n<td>line,arc, arc3d, greatcircle</td>\n<td></td>\n</tr>\n<tr>\n<td>polygon</td>\n<td>fill,line, extrude</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<p><strong>shape(field, shapes)</strong></p>\n<p><strong>shape(field, callback)</strong></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>用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放</p>\n<ul>\n<li>fill</li>\n<li>opacity  设置透明度</li>\n<li>stroke  线填充颜色</li>\n<li>strokeWidth 线的宽度</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\">style</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'red'</span><span class=\"token punctuation\">,</span>\n  opacity<span class=\"token punctuation\">:</span> <span class=\"token number\">0.8</span><span class=\"token punctuation\">,</span>\n  stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'white'</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=\"show\"><a href=\"#show\" aria-label=\"show 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>show</h3>\n<p>图层显示</p>\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\">show</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"hide\"><a href=\"#hide\" aria-label=\"hide 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>hide</h3>\n<p>图层隐藏</p>\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\">hide</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"fitbounds\"><a href=\"#fitbounds\" aria-label=\"fitbounds 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>fitBounds</h3>\n<p>缩放到图层范围</p>\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\">fitBounds</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.en.md"}}},{"node":{"html":"<h1 id=\"layer\"><a href=\"#layer\" aria-label=\"layer 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>Layer</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>L7 Layer 接口设计遵循图形语法，在可视表达上</p>\n<p>语法示例</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">new</span> <span class=\"token class-name\">Layer</span><span class=\"token punctuation\">(</span>option<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">source</span><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 punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">size</span><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 punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">style</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"构造函数\"><a href=\"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0\" 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<h2 id=\"配置项\"><a href=\"#%E9%85%8D%E7%BD%AE%E9%A1%B9\" 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<h3 id=\"visable\"><a href=\"#visable\" aria-label=\"visable 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>visable</h3>\n<p>图层是否可见   {bool }  default true</p>\n<h3 id=\"zindex\"><a href=\"#zindex\" aria-label=\"zindex 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>zIndex</h3>\n<p> 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级  {int}   default 0</p>\n<h3 id=\"minzoom\"><a href=\"#minzoom\" aria-label=\"minzoom 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>minZoom</h3>\n<p>图层显示最小缩放等级，（0-18）   {number}  default 0</p>\n<h3 id=\"maxzoom\"><a href=\"#maxzoom\" aria-label=\"maxzoom 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>maxZoom</h3>\n<p> 图层显示最大缩放等级 （0-18）   {number}  default 18</p>\n<h2 id=\"鼠标事件\"><a href=\"#%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6\" 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>beta版当前不支持，正式版会支持</p>\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\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'click'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标左键点击图层事件</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'dblclick'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标左键双击图层事件</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mousemove'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标在图层上移动时触发</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mouseover'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标移入图层要素内时触发</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mouseout'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标移出图层要素时触发</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mouseup'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标在图层上单击抬起时触发</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mousedown'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标在图层上单击按下时触发</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mouseleave'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标离开图层要素</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'rightclick'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标右键图层要素</span>\n</code></pre></div>\n<h2 id=\"方法\"><a href=\"#%E6%96%B9%E6%B3%95\" 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<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>数据源为layer设置数据  source(data,config)</p>\n<ul>\n<li>data {geojson|json|csv}</li>\n</ul>\n<p>       源数据</p>\n<ul>\n<li>\n<p>config  可选 数据源配置项</p>\n<ul>\n<li>parser 数据解析，默认是解析层geojson</li>\n<li>transforms [transform，transform ]  数据处理转换 可设置多个</li>\n</ul>\n</li>\n</ul>\n<p> parser和 transforms <a href=\"https://www.yuque.com/antv/l7/source\" target=\"_self\" rel=\"nofollow\">见source文档</a></p>\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><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\">'map'</span><span class=\"token punctuation\">,</span>\n      <span class=\"token function-variable function\">callback</span><span class=\"token punctuation\">:</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">item</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">const</span> <span class=\"token punctuation\">[</span>x<span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span>coordinates<span class=\"token punctuation\">;</span>\n        item<span class=\"token punctuation\">.</span>lat <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span>lat <span class=\"token operator\">*</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n        item<span class=\"token punctuation\">.</span>lng <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span>lng <span class=\"token operator\">*</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n        item<span class=\"token punctuation\">.</span>v <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span>v <span class=\"token operator\">*</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n        item<span class=\"token punctuation\">.</span>coordinates <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>x <span class=\"token operator\">*</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> y <span class=\"token operator\">*</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">return</span> item<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>\n      type<span class=\"token punctuation\">:</span> <span class=\"token string\">'hexagon'</span><span class=\"token punctuation\">,</span>\n      size<span class=\"token punctuation\">:</span> <span class=\"token number\">6000</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><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"\"><a href=\"#\" 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<h3 id=\"scale\"><a href=\"#scale\" aria-label=\"scale 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>scale</h3>\n<p>cscle('field', scaleConfig)</p>\n<p>(field: string, scaleConfig: object)</p>\n<p>为指定的数据字段进行列定义，返回 layer 实例。</p>\n<ul>\n<li><code class=\"language-text\">field</code> 字段名。</li>\n<li><code class=\"language-text\">scaleConfig</code> 列定义配置，对象类型，可配置的属性如下：</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token punctuation\">{</span>\n  type<span class=\"token punctuation\">:</span> <span class=\"token string\">'linear'</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize</span>\n<span class=\"token punctuation\">}</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>将数据值映射到图形的大小上的方法。</p>\n<p><strong>注意：</strong> </p>\n<p>不同图层的 size 的含义有所差别：</p>\n<ul>\n<li>point 图形的 size 影响点的半径大小和高度；</li>\n<li>line, arc, path 中的 size 影响线的粗细,和高度；</li>\n<li>polygon size 影响的是高度</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">pointLayer<span class=\"token punctuation\">.</span><span class=\"token function\">size</span><span class=\"token punctuation\">(</span><span class=\"token number\">10</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 常量</span>\npointLayer<span class=\"token punctuation\">.</span><span class=\"token function\">size</span><span class=\"token punctuation\">(</span><span class=\"token string\">'type'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 使用字段映射到大小</span>\npointLayer<span class=\"token punctuation\">.</span><span class=\"token function\">size</span><span class=\"token punctuation\">(</span><span class=\"token string\">'type'</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\">10</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 使用字段映射到大小，并指定最大值和最小值</span>\npointLayer<span class=\"token punctuation\">.</span><span class=\"token function\">size</span><span class=\"token punctuation\">(</span><span class=\"token string\">'type'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">type</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// 回调函数</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>type <span class=\"token operator\">===</span> <span class=\"token string\">'a'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token number\">10</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> <span class=\"token number\">5</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=\"sizevalue）\"><a href=\"#sizevalue%EF%BC%89\" aria-label=\"sizevalue） 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(value）</h4>\n<p>传入数字常量，如 <code class=\"language-text\">pointLayer.size(20)</code></p>\n<h4 id=\"sizefield\"><a href=\"#sizefield\" aria-label=\"sizefield 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(field)</h4>\n<p>根据 field 字段的值映射大小，使用默认的<code class=\"language-text\">最大值 max:10</code> 和<code class=\"language-text\">最小值 min: 1</code>。</p>\n<h4 id=\"sizefield-callback\"><a href=\"#sizefield-callback\" aria-label=\"sizefield callback 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(field, callback)</h4>\n<p>使用回调函数控制图形大小。</p>\n<ul>\n<li><code class=\"language-text\">callback</code>: function 回调函数。</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">pointLayer<span class=\"token punctuation\">.</span><span class=\"token function\">size</span><span class=\"token punctuation\">(</span><span class=\"token string\">'age'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">value</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>value <span class=\"token operator\">===</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token number\">5</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> <span class=\"token number\">10</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=\"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>将数据值映射到图形的颜色上的方法。</p>\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\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'red'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 常量颜色</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'type'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 对 type 字段进行映射，使用内置的颜色</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'type'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'red'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'blue'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 指定颜色</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'type'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">type</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// 通过回调函数</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>type <span class=\"token operator\">===</span> <span class=\"token string\">'a'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token string\">'red'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> <span class=\"token string\">'blue'</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'type*value'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">type<span class=\"token punctuation\">,</span> value</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">//多个参数，通过回调函数</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>type <span class=\"token operator\">===</span> <span class=\"token string\">'a'</span> <span class=\"token operator\">&amp;&amp;</span> value <span class=\"token operator\">></span> <span class=\"token number\">100</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token string\">'red'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> <span class=\"token string\">'blue'</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=\"colorvalue\"><a href=\"#colorvalue\" aria-label=\"colorvalue 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(value)</h4>\n<p>参数：<code class=\"language-text\">value</code> ：string\n只支持接收一个参数，value 可以是：</p>\n<ul>\n<li>映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。</li>\n<li>也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。</li>\n</ul>\n<p>示例</p>\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\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'name'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 映射数据字段</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'white'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 指定颜色</span>\n</code></pre></div>\n<h4 id=\"colorfield-colors\"><a href=\"#colorfield-colors\" aria-label=\"colorfield colors 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(field, colors)</h4>\n<p>参数：</p>\n<ul>\n<li><code class=\"language-text\">field</code>: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。</li>\n<li> <code class=\"language-text\">colors</code>: string | array | function</li>\n</ul>\n<p>colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。</p>\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\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'name'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 使用默认的颜色</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'name'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'red'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'blue'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 使用传入的指定颜色</span>\n</code></pre></div>\n<ul>\n<li>colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：</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\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'gender'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">value</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>value <span class=\"token operator\">===</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token string\">'red'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> <span class=\"token string\">'blue'</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">color</span><span class=\"token punctuation\">(</span><span class=\"token string\">'gender*age'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">gender<span class=\"token punctuation\">,</span> age</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>age <span class=\"token operator\">===</span> <span class=\"token number\">20</span> <span class=\"token operator\">&amp;&amp;</span> gender <span class=\"token operator\">==</span> <span class=\"token string\">' 男'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token string\">'red'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> <span class=\"token string\">'blue'</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=\"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>将数据值映射到图形的形状上的方法。</p>\n<p><strong>shape(shape)</strong></p>\n<p>参数<code class=\"language-text\">shape</code> string</p>\n<p>只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状</p>\n<table>\n<thead>\n<tr>\n<th>layer类型</th>\n<th>shape类型</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>point</td>\n<td>2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square</td>\n<td></td>\n</tr>\n<tr>\n<td>line</td>\n<td>line,arc, arc3d, greatcircle</td>\n<td></td>\n</tr>\n<tr>\n<td>polygon</td>\n<td>fill,line, extrude</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<p><strong>shape(field, shapes)</strong></p>\n<p><strong>shape(field, callback)</strong></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>用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放</p>\n<ul>\n<li>fill</li>\n<li>opacity  设置透明度</li>\n<li>stroke  线填充颜色</li>\n<li>strokeWidth 线的宽度</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\">style</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'red'</span><span class=\"token punctuation\">,</span>\n  opacity<span class=\"token punctuation\">:</span> <span class=\"token number\">0.8</span><span class=\"token punctuation\">,</span>\n  stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'white'</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=\"show\"><a href=\"#show\" aria-label=\"show 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>show</h3>\n<p>图层显示</p>\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\">show</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"hide\"><a href=\"#hide\" aria-label=\"hide 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>hide</h3>\n<p>图层隐藏</p>\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\">hide</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"fitbounds\"><a href=\"#fitbounds\" aria-label=\"fitbounds 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>fitBounds</h3>\n<p>缩放到图层范围</p>\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\">fitBounds</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/layer.zh.md"}}},{"node":{"html":"<h1 id=\"popup\"><a href=\"#popup\" aria-label=\"popup 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>popup</h1>\n<p>地图标注信息窗口，用于展示地图要素的属性信息</p>\n<h2 id=\"构造函数\"><a href=\"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0\" 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>Popup</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> popup <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Popup</span><span class=\"token punctuation\">(</span>option<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"option\"><a href=\"#option\" aria-label=\"option 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>option</h4>\n<ul>\n<li>closeButton</li>\n<li>closeOnClick</li>\n<li>maxWidth</li>\n<li>anchor</li>\n</ul>\n<h2 id=\"方法\"><a href=\"#%E6%96%B9%E6%B3%95\" 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<h4 id=\"setlnglat\"><a href=\"#setlnglat\" aria-label=\"setlnglat 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>setLnglat</h4>\n<p>设置popup的经纬度位置<br /><strong>参数</strong>：lnglat 经纬度数组 [112,32]</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">popup<span class=\"token punctuation\">.</span><span class=\"token function\">setLnglat</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token number\">112</span><span class=\"token punctuation\">,</span> <span class=\"token number\">32</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"addto\"><a href=\"#addto\" aria-label=\"addto 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>addTo</h4>\n<p><strong>参数</strong>：scene 地图scene实例</p>\n<p>将popup添加到地图scene显示</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">popup<span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"sethtml\"><a href=\"#sethtml\" aria-label=\"sethtml 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>setHtml</h4>\n<p><strong>参数</strong>：html 字符串</p>\n<p>设置popup html 内容</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> html <span class=\"token operator\">=</span>\n  <span class=\"token string\">'&lt;p>\\u7701\\u4EFD\\uFF1A'</span> <span class=\"token operator\">+</span>\n  feature<span class=\"token punctuation\">.</span>s <span class=\"token operator\">+</span>\n  <span class=\"token string\">'&lt;/p>\\n        &lt;p>\\u5730\\u533A\\uFF1A'</span> <span class=\"token operator\">+</span>\n  feature<span class=\"token punctuation\">.</span>m <span class=\"token operator\">+</span>\n  <span class=\"token string\">'&lt;/p>\\n        &lt;p>\\u6E29\\u5EA6\\uFF1A'</span> <span class=\"token operator\">+</span>\n  feature<span class=\"token punctuation\">.</span>t <span class=\"token operator\">+</span>\n  <span class=\"token string\">'&lt;/p>\\n        '</span><span class=\"token punctuation\">;</span>\npopup<span class=\"token punctuation\">.</span><span class=\"token function\">setHtml</span><span class=\"token punctuation\">(</span>html<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"settext\"><a href=\"#settext\" aria-label=\"settext 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>setText</h4>\n<p>设置 popup 显示文本内容</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">popup<span class=\"token punctuation\">.</span><span class=\"token function\">setText</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hello world'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"remove\"><a href=\"#remove\" aria-label=\"remove 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>remove</h4>\n<p>移除popup</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">popup<span class=\"token punctuation\">.</span><span class=\"token function\">remove</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"事件\"><a href=\"#%E4%BA%8B%E4%BB%B6\" 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<h4 id=\"close\"><a href=\"#close\" aria-label=\"close 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>close</h4>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">popup<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'close'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"示例代码\"><a href=\"#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81\" 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<h4 id=\"添加popup\"><a href=\"#%E6%B7%BB%E5%8A%A0popup\" aria-label=\"添加popup 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>添加popup</h4>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">  var html = &#39;&lt;p&gt;&#39;+feature.m+&#39;&lt;/p&gt;&#39;;\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);</code></pre></div>\n<h3 id=\"faq\"><a href=\"#faq\" aria-label=\"faq 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>FAQ</h3>","fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.zh.md"}}},{"node":{"html":"<p>填充图，也叫分级统计图，指用一连串首尾闭合的点坐标对来表达的面图层，常用表达区域范围具有分类现象的面状分布。</p>","fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/fill/index.en.md"}}},{"node":{"html":"<p>填充地图的增强实现，通过三维视角中的高度体现数据差异。</p>","fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"polygon/3d/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"raster/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.en.md"}}},{"node":{"html":"<p>指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等</p>","fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"line/path/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.en.md"}}},{"node":{"html":"<p>区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。</p>","fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/heatmap/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.en.md"}}},{"node":{"html":"<p>指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。</p>","fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"point/bubble/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"gallery/basic/index.en.md"}}},{"node":{"html":"<h2 id=\"数据\"><a href=\"#%E6%95%B0%E6%8D%AE\" 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>目前L7支持的数据格式有GeoJson,CSV,JSon Image</p>\n<p>GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支持，点，线段，弧线的支持。<br />JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。</p>\n<h2 id=\"geojson\"><a href=\"#geojson\" aria-label=\"geojson 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>GeoJSON</h2>\n<blockquote>\n<p>GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。</p>\n</blockquote>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">\"type\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"FeatureCollection\"</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"features\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span>\n      <span class=\"token property\">\"type\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"Feature\"</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"properties\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"geometry\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token property\">\"type\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"Polygon\"</span><span class=\"token punctuation\">,</span>\n        <span class=\"token property\">\"coordinates\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n          <span class=\"token punctuation\">[</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">110.478515625</span><span class=\"token punctuation\">,</span> <span class=\"token number\">32.76880048488168</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">117.68554687499999</span><span class=\"token punctuation\">,</span> <span class=\"token number\">32.76880048488168</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">117.68554687499999</span><span class=\"token punctuation\">,</span> <span class=\"token number\">37.64903402157866</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">110.478515625</span><span class=\"token punctuation\">,</span> <span class=\"token number\">37.64903402157866</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">110.478515625</span><span class=\"token punctuation\">,</span> <span class=\"token number\">32.76880048488168</span><span class=\"token punctuation\">]</span>\n          <span class=\"token punctuation\">]</span>\n        <span class=\"token punctuation\">]</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div>\n<h2 id=\"地理统计分析工具\"><a href=\"#%E5%9C%B0%E7%90%86%E7%BB%9F%E8%AE%A1%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7\" 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><a href=\"http://turfjs.org/\" target=\"_self\" rel=\"nofollow\">turfjs</a>:  地理数据计算，处理，统计，分析的Javascript 库</p>\n<h2 id=\"在线工具\"><a href=\"#%E5%9C%A8%E7%BA%BF%E5%B7%A5%E5%85%B7\" 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><a href=\"http://geojson.io/\" target=\"_self\" rel=\"nofollow\">http://geojson.io/</a>    可以在线查看，绘制，修改GeoJSON数据</p>\n<p><a href=\"https://mapshaper.org/\" target=\"_self\" rel=\"nofollow\">https://mapshaper.org/</a>  可以查看较大的geojson，还能够简化GeoJSON数据</p>","fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.en.md"}}},{"node":{"html":"<h2 id=\"数据\"><a href=\"#%E6%95%B0%E6%8D%AE\" 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>目前L7支持的数据格式有GeoJson,CSV,JSon Image</p>\n<p>GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支持，点，线段，弧线的支持。<br />JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。</p>\n<h2 id=\"geojson\"><a href=\"#geojson\" aria-label=\"geojson 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>GeoJSON</h2>\n<blockquote>\n<p>GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。</p>\n</blockquote>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">\"type\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"FeatureCollection\"</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"features\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span>\n      <span class=\"token property\">\"type\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"Feature\"</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"properties\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"geometry\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token property\">\"type\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"Polygon\"</span><span class=\"token punctuation\">,</span>\n        <span class=\"token property\">\"coordinates\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n          <span class=\"token punctuation\">[</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">110.478515625</span><span class=\"token punctuation\">,</span> <span class=\"token number\">32.76880048488168</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">117.68554687499999</span><span class=\"token punctuation\">,</span> <span class=\"token number\">32.76880048488168</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">117.68554687499999</span><span class=\"token punctuation\">,</span> <span class=\"token number\">37.64903402157866</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">110.478515625</span><span class=\"token punctuation\">,</span> <span class=\"token number\">37.64903402157866</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">110.478515625</span><span class=\"token punctuation\">,</span> <span class=\"token number\">32.76880048488168</span><span class=\"token punctuation\">]</span>\n          <span class=\"token punctuation\">]</span>\n        <span class=\"token punctuation\">]</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div>\n<h2 id=\"地理统计分析工具\"><a href=\"#%E5%9C%B0%E7%90%86%E7%BB%9F%E8%AE%A1%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7\" 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><a href=\"http://turfjs.org/\" target=\"_self\" rel=\"nofollow\">turfjs</a>:  地理数据计算，处理，统计，分析的Javascript 库</p>\n<h2 id=\"在线工具\"><a href=\"#%E5%9C%A8%E7%BA%BF%E5%B7%A5%E5%85%B7\" 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><a href=\"http://geojson.io/\" target=\"_self\" rel=\"nofollow\">http://geojson.io/</a>    可以在线查看，绘制，修改GeoJSON数据</p>\n<p><a href=\"https://mapshaper.org/\" target=\"_self\" rel=\"nofollow\">https://mapshaper.org/</a>  可以查看较大的geojson，还能够简化GeoJSON数据</p>\n<h2 id=\"数据资源\"><a href=\"#%E6%95%B0%E6%8D%AE%E8%B5%84%E6%BA%90\" 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<h4 id=\"全国行政区划边界\"><a href=\"#%E5%85%A8%E5%9B%BD%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%88%92%E8%BE%B9%E7%95%8C\" 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><a href=\"http://datav.aliyun.com/tools/atlas/#&#x26;lat=33.50475906922609&#x26;lng=104.32617187499999&#x26;zoom=4\" target=\"_self\" rel=\"nofollow\">支持 geojson, svg下载</a></p>\n<h4 id=\"highcharts-全球行政区划数据集\"><a href=\"#highcharts-%E5%85%A8%E7%90%83%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%88%92%E6%95%B0%E6%8D%AE%E9%9B%86\" aria-label=\"highcharts 全球行政区划数据集 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>HighCharts 全球行政区划数据集</h4>\n<p><a href=\"https://img.hcharts.cn/mapdata/\" target=\"_self\" rel=\"nofollow\">https://img.hcharts.cn/mapdata/</a></p>","fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tutorial/data.zh.md"}}},{"node":{"html":"<h1 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>简介</h1>\n<h2 id=\"scene\"><a href=\"#scene\" aria-label=\"scene 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>Scene</h2>\n<p>L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理</p>\n<h2 id=\"map\"><a href=\"#map\" aria-label=\"map 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>Map</h2>\n<p> L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。</p>\n<p>目前L7 支持两种地图底图</p>\n<ul>\n<li>高德地图 国内业务场景 合规中国地图</li>\n<li>MapBox 国际业务，或者内网离线部署场景</li>\n</ul>\n<h3 id=\"map-1\"><a href=\"#map-1\" aria-label=\"map 1 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>map</h3>\n<p>可以通过scene map 属性获取 map实例</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> map <span class=\"token operator\">=</span> scene<span class=\"token punctuation\">.</span>map<span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。</p>\n<p>示例代码</p>\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> Scene <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'@antv/l7'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> scene <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Scene</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  id<span class=\"token punctuation\">:</span> <span class=\"token string\">'map'</span><span class=\"token punctuation\">,</span>\n  mapStyle<span class=\"token punctuation\">:</span> <span class=\"token string\">'dark'</span><span class=\"token punctuation\">,</span>\n  center<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">110.770672</span><span class=\"token punctuation\">,</span> <span class=\"token number\">34.159869</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  pitch<span class=\"token punctuation\">:</span> <span class=\"token number\">45</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=\"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0\" 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><strong>Scene</strong> </p>\n<h2 id=\"配置项\"><a href=\"#%E9%85%8D%E7%BD%AE%E9%A1%B9\" 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<h3 id=\"地图配置项\"><a href=\"#%E5%9C%B0%E5%9B%BE%E9%85%8D%E7%BD%AE%E9%A1%B9\" 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<h3 id=\"id\"><a href=\"#id\" aria-label=\"id 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>id</h3>\n<p>需传入 dom 容器或者容器 id  {domObject || string} [必选]</p>\n<h3 id=\"zoom\"><a href=\"#zoom\" aria-label=\"zoom 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>zoom</h3>\n<p>地图初始显示级别 {number}  （0-22）</p>\n<h3 id=\"center\"><a href=\"#center\" aria-label=\"center 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>center</h3>\n<p>地图初始中心经纬度 {Lnglat}</p>\n<h3 id=\"pitch\"><a href=\"#pitch\" aria-label=\"pitch 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>pitch</h3>\n<p>地图初始俯仰角度 {number}  default 0</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>简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用</p>\n<ul>\n<li>dark</li>\n<li>light</li>\n<li>normal</li>\n</ul>\n<p>除了内置的样式，你也可以传入自定义的其他属性。</p>\n<p>比如高德地图</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token punctuation\">{</span>\n  style<span class=\"token punctuation\">:</span> <span class=\"token string\">'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 设置方法和高德地图一致</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div>\n<h3 id=\"minzoom\"><a href=\"#minzoom\" aria-label=\"minzoom 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>minZoom</h3>\n<p>地图最小缩放等级 {number}  default 0  (0-22)</p>\n<h3 id=\"maxzoom\"><a href=\"#maxzoom\" aria-label=\"maxzoom 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>maxZoom</h3>\n<p>地图最大缩放等级 {number}  default 22  (0-22)</p>\n<h3 id=\"rotateenable\"><a href=\"#rotateenable\" aria-label=\"rotateenable 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>rotateEnable</h3>\n<p>地图是否可旋转 {Boolean} default true</p>\n<h2 id=\"方法\"><a href=\"#%E6%96%B9%E6%B3%95\" 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<h3 id=\"getzoom\"><a href=\"#getzoom\" aria-label=\"getzoom 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>getZoom</h3>\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\">getZoom</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>return  {float}  当前缩放等级</p>\n<h3 id=\"getlayers\"><a href=\"#getlayers\" aria-label=\"getlayers 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>getLayers()</h3>\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\">getLayers</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>return 图层数组  {Array}</p>\n<h3 id=\"getcenter\"><a href=\"#getcenter\" aria-label=\"getcenter 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>getCenter()</h3>\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\">getCenter</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>return {Lnglat} :地图中心点</p>\n<h3 id=\"getsize\"><a href=\"#getsize\" aria-label=\"getsize 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>getSize()</h3>\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\">getSize</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>return { Object } 地图容器的 width,height</p>\n<h3 id=\"getpitch\"><a href=\"#getpitch\" aria-label=\"getpitch 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>getPitch()</h3>\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\">getPitch</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>return {number} pitch</p>\n<h3 id=\"setcenter\"><a href=\"#setcenter\" aria-label=\"setcenter 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>setCenter()</h3>\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\">setCenter</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span>lng<span class=\"token punctuation\">,</span> lat<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>参数：<code class=\"language-text\">center</code>  {LngLat} 地图中心点</p>\n<h3 id=\"setzoomandcenter\"><a href=\"#setzoomandcenter\" aria-label=\"setzoomandcenter 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>setZoomAndCenter</h3>\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\">setZoomAndCenter</span><span class=\"token punctuation\">(</span>zoom<span class=\"token punctuation\">,</span> center<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>参数：zoom {number}<br />center {LngLat}</p>\n<h3 id=\"setrotation\"><a href=\"#setrotation\" aria-label=\"setrotation 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>setRotation</h3>\n<p>设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]</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\">setRotation</span><span class=\"token punctuation\">(</span>rotation<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>参数： <code class=\"language-text\">rotation</code>   {number}</p>\n<h3 id=\"zoomin\"><a href=\"#zoomin\" aria-label=\"zoomin 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>zoomIn</h3>\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\">zoomIn</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"zoomout\"><a href=\"#zoomout\" aria-label=\"zoomout 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>zoomOut</h3>\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\">ZoomOUt</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"panto\"><a href=\"#panto\" aria-label=\"panto 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>panTo</h3>\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\">panTo</span><span class=\"token punctuation\">(</span>LngLat<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>参数：<code class=\"language-text\">center</code>  LngLat 中心位置坐标</p>\n<h3 id=\"panby\"><a href=\"#panby\" aria-label=\"panby 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>panBy</h3>\n<p>以像素为单位沿X方向和Y方向移动地图</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\">panBy</span><span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>参数：<br /><code class=\"language-text\">x</code> {number} 水平方向移动像素 向右为正方向<br />      <code class=\"language-text\">y</code>  {number} 垂直方向移动像素 向下为正方向</p>\n<h3 id=\"setpitch\"><a href=\"#setpitch\" aria-label=\"setpitch 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>setPitch</h3>\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\">setPitch</span><span class=\"token punctuation\">(</span>pitch<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>参数 :<br />   <code class=\"language-text\">pitch</code>  {number}</p>\n<h3 id=\"fitbounds\"><a href=\"#fitbounds\" aria-label=\"fitbounds 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>fitBounds</h3>\n<p>地图缩放到某个范围内<br />参数 :<br />  <code class=\"language-text\">extent</code> { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]</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\">fitBounds</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token number\">112</span><span class=\"token punctuation\">,</span> <span class=\"token number\">32</span><span class=\"token punctuation\">,</span> <span class=\"token number\">114</span><span class=\"token punctuation\">,</span> <span class=\"token number\">35</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"removelayer\"><a href=\"#removelayer\" aria-label=\"removelayer 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>removeLayer</h3>\n<p>移除layer</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\">removeLayer</span><span class=\"token punctuation\">(</span>layer<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>参数 <code class=\"language-text\">layer</code>  {Layer}</p>\n<h3 id=\"getlayers-1\"><a href=\"#getlayers-1\" aria-label=\"getlayers 1 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>getLayers</h3>\n<p> 获取所有的layer</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\">getLayers</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>return  layers  {array}</p>\n<h2 id=\"事件\"><a href=\"#%E4%BA%8B%E4%BB%B6\" 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<h3 id=\"on\"><a href=\"#on\" aria-label=\"on 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>on</h3>\n<p>事件监听</p>\n<h4 id=\"参数\"><a href=\"#%E5%8F%82%E6%95%B0\" 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><code class=\"language-text\">eventName</code>  {string} 事件名<br /><code class=\"language-text\">hander</code>  {function } 事件回调函数</p>\n<h3 id=\"off\"><a href=\"#off\" aria-label=\"off 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>off</h3>\n<p>移除事件监听<br /><code class=\"language-text\">eventName</code>  {string} 事件名<br /><code class=\"language-text\">hander</code>  {function } 事件回调函数</p>\n<h3 id=\"地图事件\"><a href=\"#%E5%9C%B0%E5%9B%BE%E4%BA%8B%E4%BB%B6\" 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<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\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'loaded'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">//地图加载完成触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mapmove'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 地图平移时触发事件</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'movestart'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 地图平移开始时触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'moveend'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'zoomchange'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 地图缩放级别更改后触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'zoomstart'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 缩放开始时触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'zoomend'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 缩放停止时触发</span>\n</code></pre></div>\n<h3 id=\"鼠标事件\"><a href=\"#%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6\" 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<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\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'click'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标左键点击事件</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'dblclick'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标左键双击事件</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mousemove'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标在地图上移动时触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mousewheel'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标滚轮开始缩放地图时触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mouseover'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标移入地图容器内时触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mouseout'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标移出地图容器时触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mouseup'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标在地图上单击抬起时触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mousedown'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标在地图上单击按下时触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'rightclick'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标右键单击事件</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'dragstart'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">//开始拖拽地图时触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'dragging'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 拖拽地图过程中触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'dragend'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">//停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发</span>\n</code></pre></div>\n<h3 id=\"其它事件\"><a href=\"#%E5%85%B6%E5%AE%83%E4%BA%8B%E4%BB%B6\" 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<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\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'resize'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 地图容器大小改变事件</span>\n</code></pre></div>","fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.en.md"}}},{"node":{"html":"<h1 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>简介</h1>\n<h2 id=\"scene\"><a href=\"#scene\" aria-label=\"scene 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>Scene</h2>\n<p>L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理</p>\n<h2 id=\"map\"><a href=\"#map\" aria-label=\"map 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>Map</h2>\n<p> L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理\n只需要通过Scene传入地图配置项即可。</p>\n<p>目前L7 支持两种地图底图</p>\n<ul>\n<li>高德地图 国内业务场景 合规中国地图</li>\n<li>MapBox 国际业务，或者内网离线部署场景</li>\n</ul>\n<h3 id=\"map-1\"><a href=\"#map-1\" aria-label=\"map 1 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>map</h3>\n<p>可以通过scene map 属性获取 map实例</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> map <span class=\"token operator\">=</span> scene<span class=\"token punctuation\">.</span>map<span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。</p>\n<p>示例代码</p>\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> Scene <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'@antv/scene'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> scene <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Scene</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  id<span class=\"token punctuation\">:</span> <span class=\"token string\">'map'</span><span class=\"token punctuation\">,</span>\n  mapStyle<span class=\"token punctuation\">:</span> <span class=\"token string\">'dark'</span><span class=\"token punctuation\">,</span>\n  center<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">110.770672</span><span class=\"token punctuation\">,</span> <span class=\"token number\">34.159869</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  pitch<span class=\"token punctuation\">:</span> <span class=\"token number\">45</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=\"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0\" 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><strong>Scene</strong> </p>\n<h2 id=\"配置项\"><a href=\"#%E9%85%8D%E7%BD%AE%E9%A1%B9\" 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<h3 id=\"地图配置项\"><a href=\"#%E5%9C%B0%E5%9B%BE%E9%85%8D%E7%BD%AE%E9%A1%B9\" 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<h3 id=\"id\"><a href=\"#id\" aria-label=\"id 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>id</h3>\n<p>需传入 dom 容器或者容器 id  {domObject || string} [必选]</p>\n<h3 id=\"zoom\"><a href=\"#zoom\" aria-label=\"zoom 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>zoom</h3>\n<p>地图初始显示级别 {number}  （0-22）</p>\n<h3 id=\"center\"><a href=\"#center\" aria-label=\"center 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>center</h3>\n<p>地图初始中心经纬度 {Lnglat}</p>\n<h3 id=\"pitch\"><a href=\"#pitch\" aria-label=\"pitch 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>pitch</h3>\n<p>地图初始俯仰角度 {number}  default 0</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>简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用</p>\n<ul>\n<li>dark</li>\n<li>light</li>\n<li>normal</li>\n</ul>\n<p>除了内置的样式，你也可以传入自定义的其他属性。</p>\n<p>比如高德地图</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token punctuation\">{</span>\n  style<span class=\"token punctuation\">:</span> <span class=\"token string\">'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 设置方法和高德地图一致</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div>\n<h3 id=\"minzoom\"><a href=\"#minzoom\" aria-label=\"minzoom 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>minZoom</h3>\n<p>地图最小缩放等级 {number}  default 0  (0-22)</p>\n<h3 id=\"maxzoom\"><a href=\"#maxzoom\" aria-label=\"maxzoom 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>maxZoom</h3>\n<p>地图最大缩放等级 {number}  default 22  (0-22)</p>\n<h3 id=\"rotateenable\"><a href=\"#rotateenable\" aria-label=\"rotateenable 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>rotateEnable</h3>\n<p>地图是否可旋转 {Boolean} default true</p>\n<h2 id=\"方法\"><a href=\"#%E6%96%B9%E6%B3%95\" 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<h3 id=\"getzoom\"><a href=\"#getzoom\" aria-label=\"getzoom 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>getZoom</h3>\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\">getZoom</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>return  {float}  当前缩放等级</p>\n<h3 id=\"getlayers\"><a href=\"#getlayers\" aria-label=\"getlayers 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>getLayers()</h3>\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\">getLayers</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>return 图层数组  {Array}</p>\n<h3 id=\"getcenter\"><a href=\"#getcenter\" aria-label=\"getcenter 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>getCenter()</h3>\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\">getCenter</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>return {Lnglat} :地图中心点</p>\n<h3 id=\"getsize\"><a href=\"#getsize\" aria-label=\"getsize 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>getSize()</h3>\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\">getSize</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>return { Object } 地图容器的 width,height</p>\n<h3 id=\"getpitch\"><a href=\"#getpitch\" aria-label=\"getpitch 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>getPitch()</h3>\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\">getPitch</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>return {number} pitch</p>\n<h3 id=\"setcenter\"><a href=\"#setcenter\" aria-label=\"setcenter 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>setCenter()</h3>\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\">setCenter</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span>lng<span class=\"token punctuation\">,</span> lat<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>参数：<code class=\"language-text\">center</code>  {LngLat} 地图中心点</p>\n<h3 id=\"setzoomandcenter\"><a href=\"#setzoomandcenter\" aria-label=\"setzoomandcenter 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>setZoomAndCenter</h3>\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\">setZoomAndCenter</span><span class=\"token punctuation\">(</span>zoom<span class=\"token punctuation\">,</span> center<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>参数：zoom {number}<br />center {LngLat}</p>\n<h3 id=\"setrotation\"><a href=\"#setrotation\" aria-label=\"setrotation 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>setRotation</h3>\n<p>设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]</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\">setRotation</span><span class=\"token punctuation\">(</span>rotation<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>参数： <code class=\"language-text\">rotation</code>   {number}</p>\n<h3 id=\"zoomin\"><a href=\"#zoomin\" aria-label=\"zoomin 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>zoomIn</h3>\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\">zoomIn</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"zoomout\"><a href=\"#zoomout\" aria-label=\"zoomout 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>zoomOut</h3>\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\">ZoomOUt</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"panto\"><a href=\"#panto\" aria-label=\"panto 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>panTo</h3>\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\">panTo</span><span class=\"token punctuation\">(</span>LngLat<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>参数：<code class=\"language-text\">center</code>  LngLat 中心位置坐标</p>\n<h3 id=\"panby\"><a href=\"#panby\" aria-label=\"panby 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>panBy</h3>\n<p>以像素为单位沿X方向和Y方向移动地图</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\">panBy</span><span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>参数：<br /><code class=\"language-text\">x</code> {number} 水平方向移动像素 向右为正方向<br />      <code class=\"language-text\">y</code>  {number} 垂直方向移动像素 向下为正方向</p>\n<h3 id=\"setpitch\"><a href=\"#setpitch\" aria-label=\"setpitch 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>setPitch</h3>\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\">setPitch</span><span class=\"token punctuation\">(</span>pitch<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>参数 :<br />   <code class=\"language-text\">pitch</code>  {number}</p>\n<h3 id=\"fitbounds\"><a href=\"#fitbounds\" aria-label=\"fitbounds 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>fitBounds</h3>\n<p>地图缩放到某个范围内<br />参数 :<br />  <code class=\"language-text\">extent</code> { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]</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\">fitBounds</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token number\">112</span><span class=\"token punctuation\">,</span> <span class=\"token number\">32</span><span class=\"token punctuation\">,</span> <span class=\"token number\">114</span><span class=\"token punctuation\">,</span> <span class=\"token number\">35</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"removelayer\"><a href=\"#removelayer\" aria-label=\"removelayer 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>removeLayer</h3>\n<p>移除layer</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\">removeLayer</span><span class=\"token punctuation\">(</span>layer<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>参数 <code class=\"language-text\">layer</code>  {Layer}</p>\n<h3 id=\"getlayers-1\"><a href=\"#getlayers-1\" aria-label=\"getlayers 1 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>getLayers</h3>\n<p> 获取所有的layer</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\">getLayers</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>return  layers  {array}</p>\n<h2 id=\"事件\"><a href=\"#%E4%BA%8B%E4%BB%B6\" 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<h3 id=\"on\"><a href=\"#on\" aria-label=\"on 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>on</h3>\n<p>事件监听</p>\n<h4 id=\"参数\"><a href=\"#%E5%8F%82%E6%95%B0\" 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><code class=\"language-text\">eventName</code>  {string} 事件名<br /><code class=\"language-text\">hander</code>  {function } 事件回调函数</p>\n<h3 id=\"off\"><a href=\"#off\" aria-label=\"off 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>off</h3>\n<p>移除事件监听<br /><code class=\"language-text\">eventName</code>  {string} 事件名<br /><code class=\"language-text\">hander</code>  {function } 事件回调函数</p>\n<h3 id=\"地图事件\"><a href=\"#%E5%9C%B0%E5%9B%BE%E4%BA%8B%E4%BB%B6\" 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<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\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'loaded'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">//地图加载完成触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mapmove'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 地图平移时触发事件</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'movestart'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 地图平移开始时触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'moveend'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'zoomchange'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 地图缩放级别更改后触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'zoomstart'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 缩放开始时触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'zoomend'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 缩放停止时触发</span>\n</code></pre></div>\n<h3 id=\"鼠标事件\"><a href=\"#%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6\" 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<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\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'click'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标左键点击事件</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'dblclick'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标左键双击事件</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mousemove'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标在地图上移动时触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mousewheel'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标滚轮开始缩放地图时触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mouseover'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标移入地图容器内时触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mouseout'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标移出地图容器时触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mouseup'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标在地图上单击抬起时触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mousedown'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标在地图上单击按下时触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'rightclick'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 鼠标右键单击事件</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'dragstart'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">//开始拖拽地图时触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'dragging'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 拖拽地图过程中触发</span>\nscene<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'dragend'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">//停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发</span>\n</code></pre></div>\n<h3 id=\"其它事件\"><a href=\"#%E5%85%B6%E5%AE%83%E4%BA%8B%E4%BB%B6\" 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<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\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'resize'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 地图容器大小改变事件</span>\n</code></pre></div>","fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/scene.zh.md"}}},{"node":{"html":"<h2 id=\"数据\"><a href=\"#%E6%95%B0%E6%8D%AE\" 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>目前L7支持的数据格式有GeoJson,CSV,JSon Image</p>\n<p>GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支持，点，线段，弧线的支持。<br />JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。</p>\n<h2 id=\"geojson\"><a href=\"#geojson\" aria-label=\"geojson 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>GeoJSON</h2>\n<blockquote>\n<p>GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。</p>\n</blockquote>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">\"type\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"FeatureCollection\"</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"features\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span>\n      <span class=\"token property\">\"type\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"Feature\"</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"properties\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"geometry\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token property\">\"type\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"Polygon\"</span><span class=\"token punctuation\">,</span>\n        <span class=\"token property\">\"coordinates\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n          <span class=\"token punctuation\">[</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">110.478515625</span><span class=\"token punctuation\">,</span> <span class=\"token number\">32.76880048488168</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">117.68554687499999</span><span class=\"token punctuation\">,</span> <span class=\"token number\">32.76880048488168</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">117.68554687499999</span><span class=\"token punctuation\">,</span> <span class=\"token number\">37.64903402157866</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">110.478515625</span><span class=\"token punctuation\">,</span> <span class=\"token number\">37.64903402157866</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">110.478515625</span><span class=\"token punctuation\">,</span> <span class=\"token number\">32.76880048488168</span><span class=\"token punctuation\">]</span>\n          <span class=\"token punctuation\">]</span>\n        <span class=\"token punctuation\">]</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div>\n<h2 id=\"地理统计分析工具\"><a href=\"#%E5%9C%B0%E7%90%86%E7%BB%9F%E8%AE%A1%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7\" 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><a href=\"http://turfjs.org/\" target=\"_self\" rel=\"nofollow\">turfjs</a>:  地理数据计算，处理，统计，分析的Javascript 库</p>\n<h2 id=\"在线工具\"><a href=\"#%E5%9C%A8%E7%BA%BF%E5%B7%A5%E5%85%B7\" 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><a href=\"http://geojson.io/\" target=\"_self\" rel=\"nofollow\">http://geojson.io/</a>    可以在线查看，绘制，修改GeoJSON数据</p>\n<p><a href=\"https://mapshaper.org/\" target=\"_self\" rel=\"nofollow\">https://mapshaper.org/</a>  可以查看较大的geojson，还能够简化GeoJSON数据</p>\n<h2 id=\"数据资源\"><a href=\"#%E6%95%B0%E6%8D%AE%E8%B5%84%E6%BA%90\" 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<h4 id=\"全国行政区划边界\"><a href=\"#%E5%85%A8%E5%9B%BD%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%88%92%E8%BE%B9%E7%95%8C\" 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><a href=\"http://datav.aliyun.com/tools/atlas/#&#x26;lat=33.50475906922609&#x26;lng=104.32617187499999&#x26;zoom=4\" target=\"_self\" rel=\"nofollow\">支持 geojson, svg下载</a></p>\n<h4 id=\"highcharts-全球行政区划数据集\"><a href=\"#highcharts-%E5%85%A8%E7%90%83%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%88%92%E6%95%B0%E6%8D%AE%E9%9B%86\" aria-label=\"highcharts 全球行政区划数据集 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>HighCharts 全球行政区划数据集</h4>\n<p><a href=\"https://img.hcharts.cn/mapdata/\" target=\"_self\" rel=\"nofollow\">https://img.hcharts.cn/mapdata/</a></p>","fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}}},{"node":{"html":"<h2 id=\"数据\"><a href=\"#%E6%95%B0%E6%8D%AE\" 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>目前L7支持的数据格式有GeoJson,CSV,JSon Image</p>\n<p>GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支持，点，线段，弧线的支持。<br />JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。</p>\n<h2 id=\"geojson\"><a href=\"#geojson\" aria-label=\"geojson 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>GeoJSON</h2>\n<blockquote>\n<p>GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。</p>\n</blockquote>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">\"type\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"FeatureCollection\"</span><span class=\"token punctuation\">,</span>\n  <span class=\"token property\">\"features\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span>\n      <span class=\"token property\">\"type\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"Feature\"</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"properties\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token property\">\"geometry\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token property\">\"type\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"Polygon\"</span><span class=\"token punctuation\">,</span>\n        <span class=\"token property\">\"coordinates\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n          <span class=\"token punctuation\">[</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">110.478515625</span><span class=\"token punctuation\">,</span> <span class=\"token number\">32.76880048488168</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">117.68554687499999</span><span class=\"token punctuation\">,</span> <span class=\"token number\">32.76880048488168</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">117.68554687499999</span><span class=\"token punctuation\">,</span> <span class=\"token number\">37.64903402157866</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">110.478515625</span><span class=\"token punctuation\">,</span> <span class=\"token number\">37.64903402157866</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">[</span><span class=\"token number\">110.478515625</span><span class=\"token punctuation\">,</span> <span class=\"token number\">32.76880048488168</span><span class=\"token punctuation\">]</span>\n          <span class=\"token punctuation\">]</span>\n        <span class=\"token punctuation\">]</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div>\n<h2 id=\"地理统计分析工具\"><a href=\"#%E5%9C%B0%E7%90%86%E7%BB%9F%E8%AE%A1%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7\" 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><a href=\"http://turfjs.org/\" target=\"_self\" rel=\"nofollow\">turfjs</a>:  地理数据计算，处理，统计，分析的Javascript 库</p>\n<h2 id=\"在线工具\"><a href=\"#%E5%9C%A8%E7%BA%BF%E5%B7%A5%E5%85%B7\" 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><a href=\"http://geojson.io/\" target=\"_self\" rel=\"nofollow\">http://geojson.io/</a>    可以在线查看，绘制，修改GeoJSON数据</p>\n<p><a href=\"https://mapshaper.org/\" target=\"_self\" rel=\"nofollow\">https://mapshaper.org/</a>  可以查看较大的geojson，还能够简化GeoJSON数据</p>","fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.en.md"}}},{"node":{"html":"<h1 id=\"geojson-数据介绍\"><a href=\"#geojson-%E6%95%B0%E6%8D%AE%E4%BB%8B%E7%BB%8D\" aria-label=\"geojson 数据介绍 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>geojson 数据介绍</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>GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。</p>\n<p><a href=\"\">geojson详细文档</a></p>\n<h2 id=\"geojson相关的js库\"><a href=\"#geojson%E7%9B%B8%E5%85%B3%E7%9A%84js%E5%BA%93\" aria-label=\"geojson相关的js库 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>Geojson相关的JS库</h2>\n<h3 id=\"地理统计分析工具\"><a href=\"#%E5%9C%B0%E7%90%86%E7%BB%9F%E8%AE%A1%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7\" 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><a href=\"http://turfjs.org/\" target=\"_self\" rel=\"nofollow\">turfjs</a>:  地理数据计算，处理，统计，分析的Javascript 库</p>\n<h3 id=\"在线工具：\"><a href=\"#%E5%9C%A8%E7%BA%BF%E5%B7%A5%E5%85%B7%EF%BC%9A\" 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><a href=\"http://geojson.io/\" target=\"_self\" rel=\"nofollow\">http://geojson.io/</a>    可以在线查看，绘制，修改GeoJSON数据</p>\n<p><a href=\"https://mapshaper.org/\" target=\"_self\" rel=\"nofollow\">https://mapshaper.org/</a>  可以查看较大的geojson，还能够简化GeoJSON数据</p>","fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.en.md"}}},{"node":{"html":"<h1 id=\"geojson-数据介绍\"><a href=\"#geojson-%E6%95%B0%E6%8D%AE%E4%BB%8B%E7%BB%8D\" aria-label=\"geojson 数据介绍 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>geojson 数据介绍</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>GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。</p>\n<p><a href=\"\">geojson详细文档</a></p>\n<h2 id=\"geojson相关的js库\"><a href=\"#geojson%E7%9B%B8%E5%85%B3%E7%9A%84js%E5%BA%93\" aria-label=\"geojson相关的js库 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>Geojson相关的JS库</h2>\n<h3 id=\"地理统计分析工具\"><a href=\"#%E5%9C%B0%E7%90%86%E7%BB%9F%E8%AE%A1%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7\" 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><a href=\"http://turfjs.org/\" target=\"_self\" rel=\"nofollow\">turfjs</a>:  地理数据计算，处理，统计，分析的Javascript 库</p>\n<h3 id=\"在线工具：\"><a href=\"#%E5%9C%A8%E7%BA%BF%E5%B7%A5%E5%85%B7%EF%BC%9A\" 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><a href=\"http://geojson.io/\" target=\"_self\" rel=\"nofollow\">http://geojson.io/</a>    可以在线查看，绘制，修改GeoJSON数据</p>\n<p><a href=\"https://mapshaper.org/\" target=\"_self\" rel=\"nofollow\">https://mapshaper.org/</a>  可以查看较大的geojson，还能够简化GeoJSON数据</p>","fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/source/geojson.zh.md"}}},{"node":{"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>","fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.en.md"}}},{"node":{"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>","fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/pointlayer.zh.md"}}},{"node":{"html":"<h1 id=\"control\"><a href=\"#control\" aria-label=\"control 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>control</h1>\n<p>地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺</p>\n<h2 id=\"构造函数\"><a href=\"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0\" 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<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> baseControl <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Control<span class=\"token punctuation\">.</span>Base</span><span class=\"token punctuation\">(</span>option<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"option\"><a href=\"#option\" aria-label=\"option 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>option</h4>\n<p> position: <code class=\"language-text\">string</code> 控件位置支持是个方位 <code class=\"language-text\">bottomright, topright, bottomleft, topleft</code></p>\n<h4 id=\"scene-内置地图组件\"><a href=\"#scene-%E5%86%85%E7%BD%AE%E5%9C%B0%E5%9B%BE%E7%BB%84%E4%BB%B6\" aria-label=\"scene 内置地图组件 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>scene 内置地图组件</h4>\n<p>zoom 地图放大缩小  默认添加<br />Scale 地图比例尺   默认添加<br />attribution 地图数据属性  默认添加<br />layer 图层列表</p>\n<p><strong>scene配置项设置控件添加状态</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">scene <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>scene</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  zoomControl<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  scaleControl<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  attributionControl<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</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=\"#\" 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<h4 id=\"zoom\"><a href=\"#zoom\" aria-label=\"zoom 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>Zoom</h4>\n<p>放大缩小组件 默认 左上角</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Control<span class=\"token punctuation\">.</span>Zoom</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  position<span class=\"token punctuation\">:</span> <span class=\"token string\">'topleft'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"scale\"><a href=\"#scale\" aria-label=\"scale 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>Scale</h4>\n<p>比例尺组件默认左下角</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Control<span class=\"token punctuation\">.</span>Scale</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  position<span class=\"token punctuation\">:</span> <span class=\"token string\">'bottomleft'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"attribution\"><a href=\"#attribution\" aria-label=\"attribution 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>attribution</h4>\n<p>默认右下角</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Control<span class=\"token punctuation\">.</span>Attribution</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  position<span class=\"token punctuation\">:</span> <span class=\"token string\">'bottomleft'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"layer\"><a href=\"#layer\" aria-label=\"layer 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>layer</h4>\n<p>图层列表目前只支持可视化overlayers 图层控制</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> overlayers <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  围栏填充<span class=\"token punctuation\">:</span> layer<span class=\"token punctuation\">,</span>\n  围栏边界<span class=\"token punctuation\">:</span> layer2<span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Control<span class=\"token punctuation\">.</span>Layers</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  overlayers<span class=\"token punctuation\">:</span> overlayers<span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"方法\"><a href=\"#%E6%96%B9%E6%B3%95\" 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<h4 id=\"onadd\"><a href=\"#onadd\" aria-label=\"onadd 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>onAdd</h4>\n<p>组件添加到地图Scene时调用，自定义组件时需要实现此方法</p>\n<h4 id=\"addto\"><a href=\"#addto\" aria-label=\"addto 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>addTo</h4>\n<p>添加到地图scene</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">control<span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"setposition\"><a href=\"#setposition\" aria-label=\"setposition 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>setPosition</h4>\n<p>设置组件位置</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">control<span class=\"token punctuation\">.</span><span class=\"token function\">setPosition</span><span class=\"token punctuation\">(</span><span class=\"token string\">'bottomright'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"remove\"><a href=\"#remove\" aria-label=\"remove 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>remove</h4>\n<p>移除地图组件</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">control<span class=\"token punctuation\">.</span><span class=\"token function\">remove</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"示例代码\"><a href=\"#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81\" 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<h4 id=\"自定义图例控件\"><a href=\"#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9B%BE%E4%BE%8B%E6%8E%A7%E4%BB%B6\" 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><a href=\"https://antv.alipay.com/zh-cn/l7/1.x/demo/component/extendControl.html\" target=\"_self\" rel=\"nofollow\">源码</a></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> legend <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Control<span class=\"token punctuation\">.</span>Base</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  position<span class=\"token punctuation\">:</span> <span class=\"token string\">'bottomright'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nlegend<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">onAdd</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">var</span> el <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'div'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  el<span class=\"token punctuation\">.</span>className <span class=\"token operator\">=</span> <span class=\"token string\">'infolegend legend'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">var</span> grades <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">8</span><span class=\"token punctuation\">,</span> <span class=\"token number\">15</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30</span><span class=\"token punctuation\">,</span> <span class=\"token number\">65</span><span class=\"token punctuation\">,</span> <span class=\"token number\">120</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">var</span> i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\">&lt;</span> grades<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    el<span class=\"token punctuation\">.</span>innerHTML <span class=\"token operator\">+=</span>\n      <span class=\"token string\">'&lt;i style=\"background:'</span> <span class=\"token operator\">+</span>\n      colors<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span> <span class=\"token operator\">+</span>\n      <span class=\"token string\">'\">&lt;/i> '</span> <span class=\"token operator\">+</span>\n      grades<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span> <span class=\"token operator\">+</span>\n      <span class=\"token punctuation\">(</span>grades<span class=\"token punctuation\">[</span>i <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">?</span> <span class=\"token string\">'–'</span> <span class=\"token operator\">+</span> grades<span class=\"token punctuation\">[</span>i <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">+</span> <span class=\"token string\">'&lt;br>'</span> <span class=\"token punctuation\">:</span> <span class=\"token string\">'+'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> el<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\nlegend<span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"-1\"><a href=\"#-1\" aria-label=\" 1 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<h2 id=\"faq\"><a href=\"#faq\" aria-label=\"faq 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>FAQ</h2>","fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.en.md"}}},{"node":{"html":"<p>指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。</p>","fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"point/scatter/index.en.md"}}},{"node":{"html":"<p>将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。</p>","fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"line/arc/index.en.md"}}},{"node":{"html":"<p>热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。</p>","fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/hexagon/index.en.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.en.md"}}},{"node":{"html":"<p>热力图的变体，网格布局呈现数据分级分布的聚合现象。</p>","fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"heatmap/grid/index.zh.md"}}},{"node":{"html":"<h2 id=\"线图层\"><a href=\"#%E7%BA%BF%E5%9B%BE%E5%B1%82\" 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<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>线图层支持4种 shape</p>\n<ul>\n<li>line 绘制路径图，</li>\n<li>arc 绘制弧线 通过贝塞尔曲线算法技术弧线</li>\n<li>greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线</li>\n<li>arc3d  3d弧线地图 3D视角</li>\n</ul>\n<p>⚠️ 弧线只需要设置起始点坐标即可</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">        new LineLayer()\n        .source(data, {\n          parser: {\n            type: &#39;csv&#39;,\n            x: &#39;lng1&#39;,\n            y: &#39;lat1&#39;,\n            x1: &#39;lng2&#39;,\n            y1: &#39;lat2&#39;,\n          },\n        })</code></pre></div>\n<p>如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">{\n  &quot;type&quot;: &quot;FeatureCollection&quot;,\n  &quot;features&quot;: [\n    {\n      &quot;type&quot;: &quot;Feature&quot;,\n      &quot;properties&quot;: {},\n      &quot;geometry&quot;: {\n        &quot;type&quot;: &quot;LineString&quot;,\n        &quot;coordinates&quot;: [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\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>线图层 可以设置高度</p>\n<ul>\n<li>size 类型为number 则表示 line的宽度</li>\n<li>size 类型为 [number , number] 分别表示宽度和高度</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">lineLayer<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\">// 线的宽度为 1</span>\nlineLayer<span class=\"token punctuation\">.</span><span class=\"token function\">size</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 宽度为1，高度2</span>\n</code></pre></div>","fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.en.md"}}},{"node":{"html":"<h2 id=\"线图层\"><a href=\"#%E7%BA%BF%E5%9B%BE%E5%B1%82\" 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<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>线图层支持4种 shape</p>\n<ul>\n<li>line 绘制路径图，</li>\n<li>arc 绘制弧线 通过贝塞尔曲线算法技术弧线</li>\n<li>greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线</li>\n<li>arc3d  3d弧线地图 3D视角</li>\n</ul>\n<p>⚠️ 弧线只需要设置起始点坐标即可</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">        new LineLayer()\n        .source(data, {\n          parser: {\n            type: &#39;csv&#39;,\n            x: &#39;lng1&#39;,\n            y: &#39;lat1&#39;,\n            x1: &#39;lng2&#39;,\n            y1: &#39;lat2&#39;,\n          }\n        })</code></pre></div>\n<p>如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">{\n  &quot;type&quot;: &quot;FeatureCollection&quot;,\n  &quot;features&quot;: [\n    {\n      &quot;type&quot;: &quot;Feature&quot;,\n      &quot;properties&quot;: {},\n      &quot;geometry&quot;: {\n        &quot;type&quot;: &quot;LineString&quot;,\n        &quot;coordinates&quot;: [\n          [\n            106.5234375,\n            57.51582286553883\n          ],\n          [\n            136.40625,\n            61.77312286453146\n          ]\n        ]\n      }\n    }\n  ]\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>线图层 可以设置高度</p>\n<ul>\n<li>size 类型为number 则表示 line的宽度</li>\n<li>size 类型为 [number , number] 分别表示宽度和高度</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">lineLayer<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\">// 线的宽度为 1</span>\nlineLayer<span class=\"token punctuation\">.</span><span class=\"token function\">size</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 宽度为1，高度2</span>\n</code></pre></div>","fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/linelayer.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.en.md"}}},{"node":{"html":"<p>指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。</p>","fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"line/isoline/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.en.md"}}},{"node":{"html":"<p>以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。</p>","fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"point/image/index.zh.md"}}},{"node":{"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>","fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.en.md"}}},{"node":{"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>","fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/polygonlayer.zh.md"}}},{"node":{"html":"<h1 id=\"control\"><a href=\"#control\" aria-label=\"control 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>control</h1>\n<p>地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺</p>\n<h2 id=\"构造函数\"><a href=\"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0\" 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<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> baseControl <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Control<span class=\"token punctuation\">.</span>Base</span><span class=\"token punctuation\">(</span>option<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"option\"><a href=\"#option\" aria-label=\"option 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>option</h4>\n<p> position: <code class=\"language-text\">string</code> 控件位置支持是个方位 <code class=\"language-text\">bottomright, topright, bottomleft, topleft</code></p>\n<h4 id=\"scene-内置地图组件\"><a href=\"#scene-%E5%86%85%E7%BD%AE%E5%9C%B0%E5%9B%BE%E7%BB%84%E4%BB%B6\" aria-label=\"scene 内置地图组件 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>scene 内置地图组件</h4>\n<p>zoom 地图放大缩小  默认添加<br />Scale 地图比例尺   默认添加<br />attribution 地图数据属性  默认添加<br />layer 图层列表</p>\n<p><strong>scene配置项设置控件添加状态</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">scene <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>scene</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  zoomControl<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  scaleControl<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  attributionControl<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</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=\"#\" 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<h4 id=\"zoom\"><a href=\"#zoom\" aria-label=\"zoom 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>Zoom</h4>\n<p>放大缩小组件 默认 左上角</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Control<span class=\"token punctuation\">.</span>Zoom</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  position<span class=\"token punctuation\">:</span> <span class=\"token string\">'topleft'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"scale\"><a href=\"#scale\" aria-label=\"scale 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>Scale</h4>\n<p>比例尺组件默认左下角</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Control<span class=\"token punctuation\">.</span>Scale</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  position<span class=\"token punctuation\">:</span> <span class=\"token string\">'bottomleft'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"attribution\"><a href=\"#attribution\" aria-label=\"attribution 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>attribution</h4>\n<p>默认右下角</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Control<span class=\"token punctuation\">.</span>Attribution</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  position<span class=\"token punctuation\">:</span> <span class=\"token string\">'bottomleft'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"layer\"><a href=\"#layer\" aria-label=\"layer 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>layer</h4>\n<p>图层列表目前只支持可视化overlayers 图层控制</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> overlayers <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  围栏填充<span class=\"token punctuation\">:</span> layer<span class=\"token punctuation\">,</span>\n  围栏边界<span class=\"token punctuation\">:</span> layer2<span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Control<span class=\"token punctuation\">.</span>Layers</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  overlayers<span class=\"token punctuation\">:</span> overlayers<span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"方法\"><a href=\"#%E6%96%B9%E6%B3%95\" 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<h4 id=\"onadd\"><a href=\"#onadd\" aria-label=\"onadd 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>onAdd</h4>\n<p>组件添加到地图Scene时调用，自定义组件时需要实现此方法</p>\n<h4 id=\"addto\"><a href=\"#addto\" aria-label=\"addto 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>addTo</h4>\n<p>添加到地图scene</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">control<span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"setposition\"><a href=\"#setposition\" aria-label=\"setposition 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>setPosition</h4>\n<p>设置组件位置</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">control<span class=\"token punctuation\">.</span><span class=\"token function\">setPosition</span><span class=\"token punctuation\">(</span><span class=\"token string\">'bottomright'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"remove\"><a href=\"#remove\" aria-label=\"remove 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>remove</h4>\n<p>移除地图组件</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">control<span class=\"token punctuation\">.</span><span class=\"token function\">remove</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"示例代码\"><a href=\"#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81\" 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<h4 id=\"自定义图例控件\"><a href=\"#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9B%BE%E4%BE%8B%E6%8E%A7%E4%BB%B6\" 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><a href=\"https://antv.alipay.com/zh-cn/l7/1.x/demo/component/extendControl.html\" target=\"_self\" rel=\"nofollow\">源码</a></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> legend <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Control<span class=\"token punctuation\">.</span>Base</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  position<span class=\"token punctuation\">:</span> <span class=\"token string\">'bottomright'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nlegend<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">onAdd</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">var</span> el <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'div'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  el<span class=\"token punctuation\">.</span>className <span class=\"token operator\">=</span> <span class=\"token string\">'infolegend legend'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">var</span> grades <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">8</span><span class=\"token punctuation\">,</span> <span class=\"token number\">15</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30</span><span class=\"token punctuation\">,</span> <span class=\"token number\">65</span><span class=\"token punctuation\">,</span> <span class=\"token number\">120</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">var</span> i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\">&lt;</span> grades<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    el<span class=\"token punctuation\">.</span>innerHTML <span class=\"token operator\">+=</span>\n      <span class=\"token string\">'&lt;i style=\"background:'</span> <span class=\"token operator\">+</span>\n      colors<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span> <span class=\"token operator\">+</span>\n      <span class=\"token string\">'\">&lt;/i> '</span> <span class=\"token operator\">+</span>\n      grades<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span> <span class=\"token operator\">+</span>\n      <span class=\"token punctuation\">(</span>grades<span class=\"token punctuation\">[</span>i <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">?</span> <span class=\"token string\">'–'</span> <span class=\"token operator\">+</span> grades<span class=\"token punctuation\">[</span>i <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">+</span> <span class=\"token string\">'&lt;br>'</span> <span class=\"token punctuation\">:</span> <span class=\"token string\">'+'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> el<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\nlegend<span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"-1\"><a href=\"#-1\" aria-label=\" 1 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<h2 id=\"faq\"><a href=\"#faq\" aria-label=\"faq 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>FAQ</h2>","fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/control.zh.md"}}},{"node":{"html":"<p>Marker 地图标注 目前只支持2D dom标注</p>\n<h2 id=\"构造函数\"><a href=\"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0\" 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>Marker<br /><code class=\"language-text\">const Marker = new L7.Marker(option)</code></p>\n<h4 id=\"option\"><a href=\"#option\" aria-label=\"option 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>option</h4>\n<ul>\n<li>color        <code class=\"language-text\">string</code>   <img src=\"https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&#x26;display=inline&#x26;height=32&#x26;name=map-marker.png&#x26;originHeight=32&#x26;originWidth=32&#x26;size=635&#x26;status=done&#x26;width=32\" alt=\"map-marker.png\"> 设置默认marker的颜色</li>\n<li>element    <code class=\"language-text\">Dom|string</code>    自定义marker Dom节点，可以是dom实例，也可以是dom id</li>\n<li>anchor     <code class=\"language-text\">string</code>  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right</li>\n<li>offset    <code class=\"language-text\">Array</code>  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量</li>\n</ul>\n<h2 id=\"方法\"><a href=\"#%E6%96%B9%E6%B3%95\" 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<h4 id=\"setlnglat\"><a href=\"#setlnglat\" aria-label=\"setlnglat 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>setLnglat</h4>\n<p>设置marker经纬度位置</p>\n<h4 id=\"addto\"><a href=\"#addto\" aria-label=\"addto 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>addTo</h4>\n<p>将marker添加到地图Scene</p>\n<h4 id=\"remove\"><a href=\"#remove\" aria-label=\"remove 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>remove</h4>\n<p>移除marker</p>\n<h4 id=\"getelement\"><a href=\"#getelement\" aria-label=\"getelement 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>getElement</h4>\n<p>获取marker dom Element</p>\n<h4 id=\"getlnglat\"><a href=\"#getlnglat\" aria-label=\"getlnglat 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>getLngLat</h4>\n<p>获取marker经纬度坐标</p>\n<h4 id=\"togglepopup\"><a href=\"#togglepopup\" aria-label=\"togglepopup 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>togglePopup</h4>\n<p>开启或者关闭marker弹出框</p>\n<h4 id=\"setpopup\"><a href=\"#setpopup\" aria-label=\"setpopup 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>setPopup</h4>\n<p>为marker设置popup</p>\n<h4 id=\"getpopup\"><a href=\"#getpopup\" aria-label=\"getpopup 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>getPopup</h4>\n<p>获取marker弹出框</p>\n<h2 id=\"示例代码\"><a href=\"#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81\" 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<h4 id=\"默认marker\"><a href=\"#%E9%BB%98%E8%AE%A4marker\" aria-label=\"默认marker 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>默认Marker</h4>\n<p>**<br /><code class=\"language-text\">const marker = new L7.Marker({color:&#39;blue&#39;})</code></p>\n<h4 id=\"自定义marker\"><a href=\"#%E8%87%AA%E5%AE%9A%E4%B9%89marker\" aria-label=\"自定义marker 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>自定义Marker</h4>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> el <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'label'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nel<span class=\"token punctuation\">.</span>className <span class=\"token operator\">=</span> <span class=\"token string\">'lableclass'</span><span class=\"token punctuation\">;</span>\nel<span class=\"token punctuation\">.</span>textContent <span class=\"token operator\">=</span> data<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span>v<span class=\"token punctuation\">;</span>\nel<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>background <span class=\"token operator\">=</span> <span class=\"token function\">getColor</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span>v<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Marker</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  element<span class=\"token punctuation\">:</span> el<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\">setLnglat</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span>data<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span>x <span class=\"token operator\">*</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> data<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"设置-popup\"><a href=\"#%E8%AE%BE%E7%BD%AE-popup\" aria-label=\"设置 popup 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>设置 popup</h4>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> popup <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Popup</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  anchor<span class=\"token punctuation\">:</span> <span class=\"token string\">'left'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">setText</span><span class=\"token punctuation\">(</span>item<span class=\"token punctuation\">.</span>name<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Marker</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  element<span class=\"token punctuation\">:</span> el<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\">setLnglat</span><span class=\"token punctuation\">(</span>item<span class=\"token punctuation\">.</span>coordinates<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">setPopup</span><span class=\"token punctuation\">(</span>popup<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.en.md"}}},{"node":{"html":"<p>Marker 地图标注 目前只支持2D dom标注</p>\n<h2 id=\"构造函数\"><a href=\"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0\" 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>Marker<br /><code class=\"language-text\">const Marker = new L7.Marker(option)</code></p>\n<h4 id=\"option\"><a href=\"#option\" aria-label=\"option 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>option</h4>\n<ul>\n<li>color        <code class=\"language-text\">string</code>   <img src=\"https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&#x26;display=inline&#x26;height=32&#x26;name=map-marker.png&#x26;originHeight=32&#x26;originWidth=32&#x26;size=635&#x26;status=done&#x26;width=32\" alt=\"map-marker.png\"> 设置默认marker的颜色</li>\n<li>element    <code class=\"language-text\">Dom|string</code>    自定义marker Dom节点，可以是dom实例，也可以是dom id</li>\n<li>anchor     <code class=\"language-text\">string</code>  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right</li>\n<li>offset    <code class=\"language-text\">Array</code>  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量</li>\n</ul>\n<h2 id=\"方法\"><a href=\"#%E6%96%B9%E6%B3%95\" 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<h4 id=\"setlnglat\"><a href=\"#setlnglat\" aria-label=\"setlnglat 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>setLnglat</h4>\n<p>设置marker经纬度位置</p>\n<h4 id=\"addto\"><a href=\"#addto\" aria-label=\"addto 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>addTo</h4>\n<p>将marker添加到地图Scene</p>\n<h4 id=\"remove\"><a href=\"#remove\" aria-label=\"remove 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>remove</h4>\n<p>移除marker</p>\n<h4 id=\"getelement\"><a href=\"#getelement\" aria-label=\"getelement 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>getElement</h4>\n<p>获取marker dom Element</p>\n<h4 id=\"getlnglat\"><a href=\"#getlnglat\" aria-label=\"getlnglat 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>getLngLat</h4>\n<p>获取marker经纬度坐标</p>\n<h4 id=\"togglepopup\"><a href=\"#togglepopup\" aria-label=\"togglepopup 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>togglePopup</h4>\n<p>开启或者关闭marker弹出框</p>\n<h4 id=\"setpopup\"><a href=\"#setpopup\" aria-label=\"setpopup 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>setPopup</h4>\n<p>为marker设置popup</p>\n<h4 id=\"getpopup\"><a href=\"#getpopup\" aria-label=\"getpopup 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>getPopup</h4>\n<p>获取marker弹出框</p>\n<h2 id=\"示例代码\"><a href=\"#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81\" 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<h4 id=\"默认marker\"><a href=\"#%E9%BB%98%E8%AE%A4marker\" aria-label=\"默认marker 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>默认Marker</h4>\n<p>**<br /><code class=\"language-text\">const marker = new L7.Marker({color:&#39;blue&#39;})</code></p>\n<h4 id=\"自定义marker\"><a href=\"#%E8%87%AA%E5%AE%9A%E4%B9%89marker\" aria-label=\"自定义marker 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>自定义Marker</h4>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> el <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'label'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nel<span class=\"token punctuation\">.</span>className <span class=\"token operator\">=</span> <span class=\"token string\">'lableclass'</span><span class=\"token punctuation\">;</span>\nel<span class=\"token punctuation\">.</span>textContent <span class=\"token operator\">=</span> data<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span>v<span class=\"token punctuation\">;</span>\nel<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>background <span class=\"token operator\">=</span> <span class=\"token function\">getColor</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span>v<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Marker</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  element<span class=\"token punctuation\">:</span> el<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\">setLnglat</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span>data<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span>x <span class=\"token operator\">*</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> data<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"设置-popup\"><a href=\"#%E8%AE%BE%E7%BD%AE-popup\" aria-label=\"设置 popup 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>设置 popup</h4>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> popup <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Popup</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  anchor<span class=\"token punctuation\">:</span> <span class=\"token string\">'left'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">setText</span><span class=\"token punctuation\">(</span>item<span class=\"token punctuation\">.</span>name<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Marker</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  element<span class=\"token punctuation\">:</span> el<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\">setLnglat</span><span class=\"token punctuation\">(</span>item<span class=\"token punctuation\">.</span>coordinates<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">setPopup</span><span class=\"token punctuation\">(</span>popup<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/marker.zh.md"}}},{"node":{"html":"<h1 id=\"popup\"><a href=\"#popup\" aria-label=\"popup 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>popup</h1>\n<p>地图标注信息窗口，用于展示地图要素的属性信息</p>\n<h2 id=\"构造函数\"><a href=\"#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0\" 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>Popup</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> popup <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">L7<span class=\"token punctuation\">.</span>Popup</span><span class=\"token punctuation\">(</span>option<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"option\"><a href=\"#option\" aria-label=\"option 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>option</h4>\n<ul>\n<li>closeButton</li>\n<li>closeOnClick</li>\n<li>maxWidth</li>\n<li>anchor</li>\n</ul>\n<h2 id=\"方法\"><a href=\"#%E6%96%B9%E6%B3%95\" 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<h4 id=\"setlnglat\"><a href=\"#setlnglat\" aria-label=\"setlnglat 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>setLnglat</h4>\n<p>设置popup的经纬度位置<br /><strong>参数</strong>：lnglat 经纬度数组 [112,32]</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">popup<span class=\"token punctuation\">.</span><span class=\"token function\">setLnglat</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token number\">112</span><span class=\"token punctuation\">,</span> <span class=\"token number\">32</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"addto\"><a href=\"#addto\" aria-label=\"addto 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>addTo</h4>\n<p><strong>参数</strong>：scene 地图scene实例</p>\n<p>将popup添加到地图scene显示</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">popup<span class=\"token punctuation\">.</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>scene<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"sethtml\"><a href=\"#sethtml\" aria-label=\"sethtml 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>setHtml</h4>\n<p><strong>参数</strong>：html 字符串</p>\n<p>设置popup html 内容</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> html <span class=\"token operator\">=</span>\n  <span class=\"token string\">'&lt;p>\\u7701\\u4EFD\\uFF1A'</span> <span class=\"token operator\">+</span>\n  feature<span class=\"token punctuation\">.</span>s <span class=\"token operator\">+</span>\n  <span class=\"token string\">'&lt;/p>\\n        &lt;p>\\u5730\\u533A\\uFF1A'</span> <span class=\"token operator\">+</span>\n  feature<span class=\"token punctuation\">.</span>m <span class=\"token operator\">+</span>\n  <span class=\"token string\">'&lt;/p>\\n        &lt;p>\\u6E29\\u5EA6\\uFF1A'</span> <span class=\"token operator\">+</span>\n  feature<span class=\"token punctuation\">.</span>t <span class=\"token operator\">+</span>\n  <span class=\"token string\">'&lt;/p>\\n        '</span><span class=\"token punctuation\">;</span>\npopup<span class=\"token punctuation\">.</span><span class=\"token function\">setHtml</span><span class=\"token punctuation\">(</span>html<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"settext\"><a href=\"#settext\" aria-label=\"settext 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>setText</h4>\n<p>设置 popup 显示文本内容</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">popup<span class=\"token punctuation\">.</span><span class=\"token function\">setText</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hello world'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"remove\"><a href=\"#remove\" aria-label=\"remove 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>remove</h4>\n<p>移除popup</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">popup<span class=\"token punctuation\">.</span><span class=\"token function\">remove</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"事件\"><a href=\"#%E4%BA%8B%E4%BB%B6\" 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<h4 id=\"close\"><a href=\"#close\" aria-label=\"close 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>close</h4>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">popup<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'close'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"示例代码\"><a href=\"#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81\" 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<h4 id=\"添加popup\"><a href=\"#%E6%B7%BB%E5%8A%A0popup\" aria-label=\"添加popup 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>添加popup</h4>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">  var html = &#39;&lt;p&gt;&#39;+feature.m+&#39;&lt;/p&gt;&#39;;\n  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);</code></pre></div>\n<h3 id=\"faq\"><a href=\"#faq\" aria-label=\"faq 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>FAQ</h3>","fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"api/component/popup.en.md"}}},{"node":{"html":"<p>用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图</p>","fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"point/column/index.en.md"}}},{"node":{"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\"> \nlayer<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>","fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.en.md"}}},{"node":{"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\"> \nlayer<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>","fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/heatmap.zh.md"}}},{"node":{"html":"<h1 id=\"imagelayer\"><a href=\"#imagelayer\" aria-label=\"imagelayer 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>ImageLayer</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>将图片添加到地图上，需要指定图片的经纬度范围</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<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> layer <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">ImageLayer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">source</span><span class=\"token punctuation\">(</span>\n  <span class=\"token string\">'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg'</span><span class=\"token punctuation\">,</span>\n  <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\">'image'</span><span class=\"token punctuation\">,</span>\n      extent<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">121.168</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30.2828</span><span class=\"token punctuation\">,</span> <span class=\"token number\">121.384</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30.4219</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>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.en.md"}}},{"node":{"html":"<h1 id=\"imagelayer\"><a href=\"#imagelayer\" aria-label=\"imagelayer 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>ImageLayer</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>将图片添加到地图上，需要指定图片的经纬度范围</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<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> layer <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">ImageLayer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nlayer<span class=\"token punctuation\">.</span><span class=\"token function\">source</span><span class=\"token punctuation\">(</span>\n  <span class=\"token string\">'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg'</span><span class=\"token punctuation\">,</span>\n  <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\">'image'</span><span class=\"token punctuation\">,</span>\n      extent<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">121.168</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30.2828</span><span class=\"token punctuation\">,</span> <span class=\"token number\">121.384</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30.4219</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>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/layer/imagelayer.zh.md"}}},{"node":{"html":"<p>使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等</p>","fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"point/chart/index.en.md"}}},{"node":{"html":"<p>可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。</p>","fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"point/marker/index.en.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"point/column/demo/column_light.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/column/demo/column_light.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n  id: 'map',\n  pitch: 48.62562,\n  type: 'amap',\n  style: 'light',\n  center: [ 104.026043, 31.847 ],\n  rotation: -0.76,\n  zoom: 4.48\n});\nwindow.mapScene = scene;\nfetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')\n  .then(res => res.json())\n  .then(data => {\n    const pointLayer = new PointLayer({})\n      .source(data.list, {\n        parser: {\n          type: 'json',\n          x: 'j',\n          y: 'w'\n        }\n      })\n      .shape('cylinder')\n      .size('t', function(level) {\n        return [ 1, 2, level * 2 + 20 ];\n      })\n      .color('#006CFF')\n      .style({\n        opacity: 1.0\n      });\n    scene.addLayer(pointLayer);\n  });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n  if (typeof define === \"function\" && define.amd) {\n    define([\"@antv/l7\"], factory);\n  } else if (typeof exports !== \"undefined\") {\n    factory(require(\"@antv/l7\"));\n  } else {\n    var mod = {\n      exports: {}\n    };\n    factory(global.l7);\n    global.column_light = mod.exports;\n  }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n  \"use strict\";\n\n  var scene = new _l.Scene({\n    id: 'map',\n    pitch: 48.62562,\n    type: 'amap',\n    style: 'light',\n    center: [104.026043, 31.847],\n    rotation: -0.76,\n    zoom: 4.48\n  });\n  window.mapScene = scene;\n  fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json').then(function (res) {\n    return res.json();\n  }).then(function (data) {\n    var pointLayer = new _l.PointLayer({}).source(data.list, {\n      parser: {\n        type: 'json',\n        x: 'j',\n        y: 'w'\n      }\n    }).shape('cylinder').size('t', function (level) {\n      return [1, 2, level * 2 + 20];\n    }).color('#006CFF').style({\n      opacity: 1.0\n    });\n    scene.addLayer(pointLayer);\n  });\n});","order":0,"filename":"column_light.js","title":"3D柱图_浅色底图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kjvTRLNtckIAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/column/demo/clumn_shape_light.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/column/demo/clumn_shape_light.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n  id: 'map',\n  pitch: 60,\n  type: 'mapbox',\n  style: 'light',\n  center: [ 121.412224, 31.26192438 ],\n  zoom: 13.13438,\n  rotation: 35.97133\n});\nwindow.mapScene = scene;\n\nfetch(\n  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'\n)\n  .then(res => res.json())\n  .then(data => {\n    const pointLayer = new PointLayer({})\n      .source(data, {\n        parser: {\n          type: 'json',\n          x: 'longitude',\n          y: 'latitude'\n        }\n      })\n      .shape('name', [\n        'cylinder',\n        'triangleColumn',\n        'hexagonColumn',\n        'squareColumn'\n      ])\n      .size('unit_price', h => {\n        return [ 6, 6, h / 500 ];\n      })\n      .color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])\n      .style({\n        opacity: 1.0\n      });\n\n    scene.addLayer(pointLayer);\n  });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n  if (typeof define === \"function\" && define.amd) {\n    define([\"@antv/l7\"], factory);\n  } else if (typeof exports !== \"undefined\") {\n    factory(require(\"@antv/l7\"));\n  } else {\n    var mod = {\n      exports: {}\n    };\n    factory(global.l7);\n    global.clumn_shape_light = mod.exports;\n  }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n  \"use strict\";\n\n  var scene = new _l.Scene({\n    id: 'map',\n    pitch: 60,\n    type: 'mapbox',\n    style: 'light',\n    center: [121.412224, 31.26192438],\n    zoom: 13.13438,\n    rotation: 35.97133\n  });\n  window.mapScene = scene;\n  fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json').then(function (res) {\n    return res.json();\n  }).then(function (data) {\n    var pointLayer = new _l.PointLayer({}).source(data, {\n      parser: {\n        type: 'json',\n        x: 'longitude',\n        y: 'latitude'\n      }\n    }).shape('name', ['cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn']).size('unit_price', function (h) {\n      return [6, 6, h / 500];\n    }).color('name', ['#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A']).style({\n      opacity: 1.0\n    });\n    scene.addLayer(pointLayer);\n  });\n});","order":1,"filename":"clumn_shape_light.js","title":"3D 浅色柱图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RVw4QKTJe7kAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/column/demo/column_dark.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/column/demo/column_dark.js","source":"import { Scene, PointLayer } from '@antv/l7';\n\nconst scene = new Scene({\n  id: 'map',\n  pitch: 35.210526315789465,\n  type: 'amap',\n  style: 'dark',\n  center: [ 104.288144, 31.239692 ],\n  zoom: 4.4\n});\nwindow.mapScene = scene;\nfetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')\n  .then(res => res.json())\n  .then(data => {\n    const pointLayer = new PointLayer({})\n      .source(data.list, {\n        parser: {\n          type: 'json',\n          x: 'j',\n          y: 'w'\n        }\n      })\n      .shape('cylinder')\n      .size('t', function(level) {\n        return [ 1, 2, level * 2 + 20 ];\n      })\n      .color('t', [\n        '#094D4A',\n        '#146968',\n        '#1D7F7E',\n        '#289899',\n        '#34B6B7',\n        '#4AC5AF',\n        '#5FD3A6',\n        '#7BE39E',\n        '#A1EDB8',\n        '#CEF8D6'\n      ])\n      .style({\n        opacity: 1.0\n      });\n    scene.addLayer(pointLayer);\n  });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n  if (typeof define === \"function\" && define.amd) {\n    define([\"@antv/l7\"], factory);\n  } else if (typeof exports !== \"undefined\") {\n    factory(require(\"@antv/l7\"));\n  } else {\n    var mod = {\n      exports: {}\n    };\n    factory(global.l7);\n    global.column_dark = mod.exports;\n  }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n  \"use strict\";\n\n  var scene = new _l.Scene({\n    id: 'map',\n    pitch: 35.210526315789465,\n    type: 'amap',\n    style: 'dark',\n    center: [104.288144, 31.239692],\n    zoom: 4.4\n  });\n  window.mapScene = scene;\n  fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json').then(function (res) {\n    return res.json();\n  }).then(function (data) {\n    var pointLayer = new _l.PointLayer({}).source(data.list, {\n      parser: {\n        type: 'json',\n        x: 'j',\n        y: 'w'\n      }\n    }).shape('cylinder').size('t', function (level) {\n      return [1, 2, level * 2 + 20];\n    }).color('t', ['#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#CEF8D6']).style({\n      opacity: 1.0\n    });\n    scene.addLayer(pointLayer);\n  });\n});","order":2,"filename":"column_dark.js","title":"3D柱图_深色底图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7COqR4wCc6QAAAAAAAAAAABkARQnAQ"},{"relativePath":"point/column/demo/clumn_shape.js","absolutePath":"/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/examples/point/column/demo/clumn_shape.js","source":"import { Scene, PointLayer } from '@antv/l7';\nconst scene = new Scene({\n  id: 'map',\n  pitch: 66.02383,\n  type: 'amap',\n  style: 'dark',\n  center: [ 121.400257, 31.25287 ],\n  zoom: 14.55,\n  rotation: 134.9507\n});\nwindow.mapScene = scene;\n\nfetch(\n  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'\n)\n  .then(res => res.json())\n  .then(data => {\n    const pointLayer = new PointLayer({})\n      .source(data, {\n        parser: {\n          type: 'json',\n          x: 'longitude',\n          y: 'latitude'\n        }\n      })\n      .shape('name', [\n        'cylinder',\n        'triangleColumn',\n        'hexagonColumn',\n        'squareColumn'\n      ])\n      .size('unit_price', h => {\n        return [ 6, 6, h / 500 ];\n      })\n      .color('name', [ '#739DFF', '#61FCBF', '#FFDE74', '#FF896F' ])\n      .style({\n        opacity: 1.0\n      });\n\n    scene.addLayer(pointLayer);\n  });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n  if (typeof define === \"function\" && define.amd) {\n    define([\"@antv/l7\"], factory);\n  } else if (typeof exports !== \"undefined\") {\n    factory(require(\"@antv/l7\"));\n  } else {\n    var mod = {\n      exports: {}\n    };\n    factory(global.l7);\n    global.clumn_shape = mod.exports;\n  }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_l) {\n  \"use strict\";\n\n  var scene = new _l.Scene({\n    id: 'map',\n    pitch: 66.02383,\n    type: 'amap',\n    style: 'dark',\n    center: [121.400257, 31.25287],\n    zoom: 14.55,\n    rotation: 134.9507\n  });\n  window.mapScene = scene;\n  fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json').then(function (res) {\n    return res.json();\n  }).then(function (data) {\n    var pointLayer = new _l.PointLayer({}).source(data, {\n      parser: {\n        type: 'json',\n        x: 'longitude',\n        y: 'latitude'\n      }\n    }).shape('name', ['cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn']).size('unit_price', function (h) {\n      return [6, 6, h / 500];\n    }).color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F']).style({\n      opacity: 1.0\n    });\n    scene.addLayer(pointLayer);\n  });\n});","order":3,"filename":"clumn_shape.js","title":"3D 深色柱图","screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*tvpvQZLv_xYAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2},"html":""}},"next":{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6},"html":""}}}}}