2019-11-22 18:21:59 +08:00
|
|
|
|
{"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\"><head></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\"><</span>head</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</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\"></</span>script</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</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\"><</span>head</span><span class=\"token
|
