antv-l7/public/page-data/zh/docs/manual/tutorial/data/page-data.json

{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx","path":"/zh/docs/manual/tutorial/data","result":{"data":{"site":{"siteMetadata":{"title":"L7","githubUrl":"https://github.com/antvis/L7","docs":[{"slug":"api/l7","title":{"zh":"简介 L7","en":"Introduction"},"order":0},{"slug":"/tutorial","title":{"zh":"快速入门","en":"QuickStart"},"order":0},{"slug":"/tutorial/map","title":{"zh":"地图","en":"MAP"},"order":0},{"slug":"api/scene","title":{"zh":"场景 Scene","en":"Scene"},"order":1},{"slug":"api/layer","title":{"zh":"图层 Layer","en":"Layer"},"order":2},{"slug":"api/source","title":{"zh":"数据 Source","en":"Source"},"order":3},{"slug":"api/component","title":{"zh":"组件 Component","en":"Component"},"order":4}]},"pathPrefix":""},"markdownRemark":{"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>","tableOfContents":"<ul>\n<li><a href=\"/zh/docs/manual/tutorial/data/#%E6%95%B0%E6%8D%AE\">数据</a></li>\n<li><a href=\"/zh/docs/manual/tutorial/data/#geojson\">GeoJSON</a></li>\n<li><a href=\"/zh/docs/manual/tutorial/data/#%E5%9C%B0%E7%90%86%E7%BB%9F%E8%AE%A1%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7\">地理统计分析工具</a></li>\n<li><a href=\"/zh/docs/manual/tutorial/data/#%E5%9C%A8%E7%BA%BF%E5%B7%A5%E5%85%B7\">在线工具</a></li>\n<li>\n<p><a href=\"/zh/docs/manual/tutorial/data/#%E6%95%B0%E6%8D%AE%E8%B5%84%E6%BA%90\">数据资源</a></p>\n<ul>\n<li>\n<ul>\n<li><a href=\"/zh/docs/manual/tutorial/data/#%E5%85%A8%E5%9B%BD%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%88%92%E8%BE%B9%E7%95%8C\">全国行政区划边界 </a></li>\n<li><a href=\"/zh/docs/manual/tutorial/data/#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\">HighCharts 全球行政区划数据集</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>","fields":{"slug":"/zh/docs/manual/tutorial/data","readingTime":{"text":"1 min read","time":24599.999999999996}},"frontmatter":{"title":"数据"},"parent":{"__typename":"File","relativePath":"manual/tutorial/data.zh.md"}},"allMarkdownRemark":{"edges":[{"node":{"fields":{"slug":"/en/docs/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/l7"},"frontmatter":{"title":"Introduction","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/l7"},"frontmatter":{"title":"简介","order":0}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"QuickStart","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/source/source"},"frontmatter":{"title":"Source","order":0}}},{"node":{"fields":{"slug":"/en/docs/api/layer/layer"},"frontmatter":{"title":"Map Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/layer"},"frontmatter":{"title":"Layer","order":0}}},{"node":{"fields":{"slug":"/zh/docs/api/component/popup"},"frontmatter":{"title":"popup","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/fill"},"frontmatter":{"title":"填充地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/fill"},"frontmatter":{"title":"Choropleth Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/polygon/3d"},"frontmatter":{"title":"3D填充图","order":0}}},{"node":{"fields":{"slug":"/en/examples/polygon/3d"},"frontmatter":{"title":"Extrude Map","order":0}}},{"node":{"fields":{"slug":"/en/examples/raster/basic"},"frontmatter":{"title":"Raster Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/raster/basic"},"frontmatter":{"title":"栅格图层","order":0}}},{"node":{"fields":{"slug":"/en/examples/line/path"},"frontmatter":{"title":"Path Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/line/path"},"frontmatter":{"title":"路径地图","order":0}}},{"node":{"fields":{"slug":"/en/examples/heatmap/heatmap"},"frontmatter":{"title":"HeatMap","order":0}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/heatmap"},"frontmatter":{"title":"经典热力图","order":0}}},{"node":{"fields":{"slug":"/en/examples/point/bubble"},"frontmatter":{"title":"Bubble Map","order":0}}},{"node":{"fields":{"slug":"/zh/examples/point/bubble"},"frontmatter":{"title":"气泡地图","order":0}}},{"node":{"fields":{"slug":"/zh/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/examples/gallery/basic"},"frontmatter":{"title":"Gallery","order":0}}},{"node":{"fields":{"slug":"/en/docs/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/zh/docs/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/scene"},"frontmatter":{"title":"Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/scene"},"frontmatter":{"title":"场景 Scene","order":1}}},{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/data"},"frontmatter":{"title":"数据","order":1}}},{"node":{"fields":{"slug":"/en/docs/manual/tutorial/data"},"frontmatter":{"title":"data","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/source/geojson"},"frontmatter":{"title":"geojson","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/pointlayer"},"frontmatter":{"title":"PointLayer","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/component/control"},"frontmatter":{"title":"Control","order":1}}},{"node":{"fields":{"slug":"/zh/examples/point/scatter"},"frontmatter":{"title":"散点地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/point/scatter"},"frontmatter":{"title":"Scatter Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/line/arc"},"frontmatter":{"title":"弧线地图","order":1}}},{"node":{"fields":{"slug":"/en/examples/line/arc"},"frontmatter":{"title":"Arc Line Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/hexagon"},"frontmatter":{"title":"蜂窝热力图","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/hexagon"},"frontmatter":{"title":"Hexagon Map","order":1}}},{"node":{"fields":{"slug":"/en/examples/heatmap/grid"},"frontmatter":{"title":"Grid Map","order":1}}},{"node":{"fields":{"slug":"/zh/examples/heatmap/grid"},"frontmatter":{"title":"网格热力图","order":1}}},{"node":{"fields":{"slug":"/en/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/linelayer"},"frontmatter":{"title":"LineLayer","order":2}}},{"node":{"fields":{"slug":"/en/examples/line/isoline"},"frontmatter":{"title":"Isoline Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/line/isoline"},"frontmatter":{"title":"等值线地图","order":2}}},{"node":{"fields":{"slug":"/en/examples/point/image"},"frontmatter":{"title":"Symbol Map","order":2}}},{"node":{"fields":{"slug":"/zh/examples/point/image"},"frontmatter":{"title":"符号地图","order":2}}},{"node":{"fields":{"slug":"/en/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/polygonlayer"},"frontmatter":{"title":"PolygonLayer","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/control"},"frontmatter":{"title":"Control","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/zh/docs/api/component/marker"},"frontmatter":{"title":"Marker","order":3}}},{"node":{"fields":{"slug":"/en/docs/api/component/popup"},"frontmatter":{"title":"Popup","order":4}}},{"node":{"fields":{"slug":"/zh/examples/point/column"},"frontmatter":{"title":"3D 柱状地图","order":4}}},{"node":{"fields":{"slug":"/en/examples/point/column"},"frontmatter":{"title":"Column Map","order":4}}},{"node":{"fields":{"slug":"/en/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/heatmap"},"frontmatter":{"title":"HeatmapLayer","order":5}}},{"node":{"fields":{"slug":"/en/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/docs/api/layer/imagelayer"},"frontmatter":{"title":"ImageLayer","order":5}}},{"node":{"fields":{"slug":"/zh/examples/point/chart"},"frontmatter":{"title":"复合图表地图","order":6}}},{"node":{"fields":{"slug":"/en/examples/point/chart"},"frontmatter":{"title":"Chart Map","order":6}}},{"node":{"fields":{"slug":"/zh/examples/point/marker"},"frontmatter":{"title":"自定义 Marker","order":7}}},{"node":{"fields":{"slug":"/en/examples/point/marker"},"frontmatter":{"title":"Custom Marker","order":7}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"next":{"node":{"fields":{"slug":"/zh/docs/manual/tutorial/quickstart"},"frontmatter":{"title":"快速上手","order":0},"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>"}}}}}