feat(add l7 site): add websites

2019-11-06 11:57:42 +08:00 · 2019-11-06 11:57:42 +08:00 · a32dc230a0
parent d49ba3ee42
commit a32dc230a0
74 changed files with 12777 additions and 115 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -0,0 +1,5 @@
+{
+  "globals": {
+    "AMap": true
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@ -67,3 +67,4 @@ jspm_packages/
 lib/

 .DS_Store
+public
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1,4 @@
+sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
+phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
+electron_mirror=https://npm.taobao.org/mirrors/electron/
+registry=https://registry.npm.taobao.org
--- a/README.md
+++ b/README.md
@ -23,6 +23,13 @@ yarn storybook
 yarn commit
 ```

+## view doc example
+
+```bash
+  npm  start
+```
+visit http://localhost:8000/
+
 ## Add Package

 创建一个新的 package：
@ -43,4 +50,4 @@ yarn workspaces run add lodash
 将 typescript 设置为 root 的开发依赖
 ```bash
 yarn add -W -D typescript jest
-```
+```
--- a/babel.config.js
+++ b/babel.config.js
@ -1,7 +1,21 @@
 // @see https://babeljs.io/docs/en/next/config-files#project-wide-configuration
 module.exports = (api) => {
-  api.cache(true);
-
+  api.cache(() => process.env.NODE_ENV);
+  if(api.env("site")) { //
+    return {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "loose": true,
+            "modules": false
+          }
+        ],
+        '@babel/preset-react',
+        "babel-preset-gatsby"
+      ]
+    };
+  }
  return {
    presets: [
      [
--- a/dev-docs/TAA.md
+++ b/dev-docs/TAA.md
@ -71,7 +71,7 @@ this.cameraService.jitterProjectionMatrix(
 useFramebuffer(this.outputRenderTarget, () => {
  this.blendModel.draw({
    uniforms: {
-      u_Opacity: layerStyleOptions.opacity || 1,
+      u_opacity: layerStyleOptions.opacity || 1,
      u_MixRatio: this.frame === 0 ? 1 : 0.9,
      u_Diffuse1: this.sampleRenderTarget,
      u_Diffuse2:
@ -115,4 +115,4 @@ layer.multiPassRenderer.getPostProcessor().render(layer);
 * 「Three.js - TAA example」[🔗](https://threejs.org/examples/#webgl_postprocessing_taa)
 * 「Paper - Amortized Supersampling」[🔗](http://hhoppe.com/supersample.pdf)
 * 「GDC - Temporal Reprojection Anti-Aliasing in INSIDE」[🔗](http://twvideo01.ubm-us.net/o1/vault/gdc2016/Presentations/Pedersen_LasseJonFuglsang_TemporalReprojectionAntiAliasing.pdf)
-* 「知乎 - 低差异序列（一）- 常见序列的定义及性质」[🔗](https://zhuanlan.zhihu.com/p/20197323)
+* 「知乎 - 低差异序列（一）- 常见序列的定义及性质」[🔗](https://zhuanlan.zhihu.com/p/20197323)
--- a/docs/API/L7.md
+++ b/docs/API/L7.md
@ -0,0 +1,6 @@
+---
+title: 简介
+order: 0
+redirect_from:
+  - /zh/docs/API
+---
--- a/docs/API/Scene.md
+++ b/docs/API/Scene.md
@ -0,0 +1,321 @@
+---
+title: Scene
+order: 1
+---
+
+## 简介
+`Scene `基础的地图类,提供地图创建，图层创建，管理等功能
+
+示例代码
+
+```javascript
+import {Scene} from '@l7/scene';
+const scene =new L7.Scene({
+    id:'map'
+    mapStyle:'dark',
+    center:[ 110.770672, 34.159869 ],
+    pitch:45
+})
+```
+
+
+### 构造函数
+
+**Scene**<br />支持两种实例化方式
+
+- 独立实例化 内部根据id自动穿件地图实例
+- 传入地图实例
+
+
+
+
+
+#### 独立实例化 Scene
+
+```javascript
+const scene = new L7.Scene({
+  id: 'map',
+  mapStyle: 'dark', 
+  center: [ 120.19382669582967, 30.258134 ],
+  pitch: 0,
+  zoom: 12,
+  maxZoom:20,
+  minZoom:0,
+});
+```
+
+
+#### 根据map 实例创建Sence
+
+_L7 基于高德地图3D模式开发的，因此传入Map实例 __viewModes需要设置成3d_<br />_
+```javascript
+var mapinstance = new AMap.Map('map',{
+    center: [ 120.19382669582967, 30.258134 ],
+    viewMode: '3D',
+    pitch: 0,
+    zoom: 12,
+    maxZoom:20,
+    minZoom:0,
+ });
+
+const scene = new L7.Scene({
+  mapStyle: 'dark',
+  map:mapinstance
+});
+```
+
+
+## map
+L7 在scene 下保留了高德地图实例，可以通过scene.map 调用高德地图的map方法。<br />map 实例方法见[高德地图文档](https://lbs.amap.com/api/javascript-api/reference/map)
+
+```javascript
+scene.map
+```
+
+
+## 构造类
+
+### PointLayer
+新建点图层
+
+### PolylineLayer
+新建线图层
+
+### PolygonLayer
+新建面图层
+
+### ImageLayer
+新建图片图层
+
+
+## 配置项
+
+### id
+需传入 dom 容器或者容器 id  {domObject || string} [必选]
+
+
+### zoom
+地图初始显示级别 {number}  （0-22）
+
+### center
+地图初始中心经纬度 {Lnglat}
+
+### pitch
+地图初始俯仰角度 {number}  default 0
+
+### mapSyle
+地图样式 {style} 目前仅支持高德地图。 default 'dark'<br />L7 内置三种种默认地图样式 dark | light|blank 空地图
+
+设置地图的显示样式，目前支持两种地图样式：<br />第一种：自定义地图样式，如`"amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"`<br />可前往[地图自定义平台](https://lbs.amap.com/dev/mapstyle/index)定制自己的个性地图样式；<br />第二种：官方样式模版,如`"amap://styles/grey"`。<br />其他模版样式及自定义地图的使用说明见[开发指南](https://lbs.amap.com/api/javascript-api/guide/create-map/mapstye/)
+
+
+### minZoom
+地图最小缩放等级 {number}  default 0  (0-22)
+
+### maxZoom
+地图最大缩放等级 {number}  default 22  (0-22)
+
+### rotateEnable
+地图是否可旋转 {Boolean} default true
+
+
+
+
+## 方法
+
+### getZoom
+获取当前缩放等级
+
+```javascript
+scene.getZoom();
+```
+
+return  {float}  当前缩放等级
+
+### getLayers()
+获取所有的地图图层
+```javascript
+scene.getLayers();
+```
+
+return 图层数组  {Array}
+
+
+### getCenter()
+获取地图中心点
+```javascript
+scene.getCenter()
+```
+
+return {Lnglat} :地图中心点
+
+### getSize()
+获取地图容器大小
+```javascript
+scene.getSize()
+```
+return { Object } 地图容器的 width,height
+
+### getPitch()
+获取地图俯仰角
+```javascript
+scene.getPitch();
+```
+
+return {number} pitch
+
+### setCenter()
+设置地图中心点坐标
+
+```javascript
+scene.setCenter([lng,lat])
+```
+
+参数：`center`  {LngLat} 地图中心点
+
+
+### setZoomAndCenter
+设置地图等级和中心
+```javascript
+scene.setZoomAndCenter(zoom,center)
+```
+
+参数：zoom {number}<br />center {LngLat}
+
+
+### setRotation
+设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]
+```javascript
+scene.setRotation(rotation)
+```
+
+参数： `rotation`   {number}
+
+### zoomIn
+地图放大一级
+```javascript
+scene.zoomIn()
+```
+
+### zoomOut
+地图缩小一级
+```javascript
+scene.ZoomOUt()
+```
+
+### panTo
+地图平移到指定的位置
+```javascript
+scene.panTo(LngLat)
+```
+
+参数：`center`  LngLat 中心位置坐标
+
+### panBy
+以像素为单位沿X方向和Y方向移动地图
+```javascript
+scene.panBy(x,y)
+```
+参数：<br />`x` {number} 水平方向移动像素 向右为正方向<br />      `y`  {number} 垂直方向移动像素 向下为正方向
+
+
+### setPitch
+设置地图仰俯角度
+```javascript
+scene.setPitch(pitch)
+```
+
+参数 :<br />   `pitch`  {number}
+
+### 
+
+### setStatus
+设置当前地图显示状态，包括是否可鼠标拖拽移动地图、地图是否可缩放、地图是否可旋转（rotateEnable）、是否可双击放大地图、是否可以通过键盘控制地图旋转（keyboardEnable）等   
+
+```javascript
+    scene.setStatus({
+      dragEnable: true,
+      keyboardEnable: true,
+      doubleClickZoom: true,
+      zoomEnable: true,
+      rotateEnable: true
+    });
+```
+
+
+### fitBounds
+地图缩放到某个范围内<br />参数 :<br />  `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
+
+```javascript
+scene.fitBounds([112,32,114,35]);
+```
+
+
+
+### removeLayer
+移除layer
+
+```javascript
+scene.removeLayer(layer)
+```
+
+参数<br />`layer`  {Layer}
+
+### getLayers
+ 获取所有的layer
+
+```javascript
+scene.getLayers()
+```
+
+return  layers  {array}
+
+## 事件
+
+
+### on
+事件监听
+
+#### 参数
+`eventName`  {string} 事件名<br />`hander`  {function } 事件回调函数
+
+
+### off
+移除事件监听<br />`eventName`  {string} 事件名<br />`hander`  {function } 事件回调函数
+
+
+### 地图事件
+```javascript
+scene.on('loaded',()=>{})  //地图加载完成触发
+scene.on('mapmove',()=>{}) // 地图平移时触发事件
+scene.on('movestart',()=>{}) // 地图平移开始时触发
+scene.on('moveend',()=>{}) // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发
+scene.on('zoomchange',()=>{}) // 地图缩放级别更改后触发
+scene.on('zoomstart',()=>{}) // 缩放开始时触发
+scene.on('zoomend',()=>{}) // 缩放停止时触发
+```
+
+
+### 鼠标事件
+
+```javascript
+scene.on('click', (ev)=>{});             // 鼠标左键点击事件
+scene.on('dblclick', (ev)=>{});          // 鼠标左键双击事件
+scene.on('mousemove', (ev)=>{});        // 鼠标在地图上移动时触发
+scene.on('mousewheel', (ev)=>{});        // 鼠标滚轮开始缩放地图时触发
+scene.on('mouseover', (ev)=>{});         // 鼠标移入地图容器内时触发
+scene.on('mouseout', (ev)=>{});           // 鼠标移出地图容器时触发
+scene.on('mouseup', (ev)=>{});         // 鼠标在地图上单击抬起时触发
+scene.on('mousedown', (ev)=>{});         // 鼠标在地图上单击按下时触发
+scene.on('rightclick', (ev)=>{});              // 鼠标右键单击事件
+scene.on('dragstart', (ev)=>{});           //开始拖拽地图时触发
+scene.on('dragging', (ev)=>{});         // 拖拽地图过程中触发
+scene.on('dragend', (ev)=>{});         //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
+```
+
+### 其它事件
+```javascript
+scene.on('resize',()=>{}) // 地图容器大小改变事件
+```
+
+
--- a/docs/API/component/control.md
+++ b/docs/API/component/control.md
@ -0,0 +1,137 @@
+---
+title: 地图组件
+order: 1
+---
+# control
+
+地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺
+
+
+## 构造函数
+
+```javascript
+const baseControl = new L7.Control.Base(option);
+```
+
+
+#### option
+ position: `string` 控件位置支持是个方位 `bottomright, topright, bottomleft, topleft`
+
+
+#### scene 内置地图组件
+zoom 地图放大缩小  默认添加<br />Scale 地图比例尺   默认添加<br />attribution 地图数据属性  默认添加<br />layer 图层列表
+
+**scene配置项设置控件添加状态**
+
+```javascript
+scene = new L7.scene({
+   zoomControl: true,
+   scaleControl: true,
+   attributionControl: true
+})
+```
+
+#### 
+
+#### Zoom
+放大缩小组件 默认 左上角
+
+```javascript
+ new L7.Control.Zoom({
+      position: 'topleft'
+    }).addTo(scene);
+```
+
+
+#### Scale
+比例尺组件默认左下角
+
+```javascript
+ new L7.Control.Scale({
+      position: 'bottomleft'
+    }).addTo(scene);
+```
+
+
+#### attribution
+默认右下角
+
+```javascript
+new L7.Control.Attribution({
+      position: 'bottomleft'
+    }).addTo(scene);
+```
+
+
+#### layer
+图层列表目前只支持可视化overlayers 图层控制
+
+```javascript
+ var overlayers = {
+        "围栏填充": layer,
+        "围栏边界": layer2
+      };
+new L7.Control.Layers({
+  overlayers: overlayers
+}).addTo(scene);
+```
+
+
+## 方法
+
+#### onAdd
+组件添加到地图Scene时调用，自定义组件时需要实现此方法
+
+
+#### addTo
+添加到地图scene
+
+```javascript
+control.addTo(scene);
+```
+
+
+#### setPosition
+设置组件位置
+
+```javascript
+control.setPosition('bottomright');
+```
+
+
+#### remove
+移除地图组件
+
+```javascript
+control.remove();
+```
+
+
+
+## 示例代码
+
+
+#### 自定义图例控件
+[源码](https://antv.alipay.com/zh-cn/l7/1.x/demo/component/extendControl.html)
+
+```javascript
+var legend = new L7.Control.Base({
+        position: 'bottomright'
+      });
+      legend.onAdd = function() {
+        var el = document.createElement('div');
+        el.className = 'infolegend legend';
+        var grades = [0, 8, 15, 30, 65, 120];
+        for (var i = 0; i < grades.length; i++) {
+          el.innerHTML += '<i style="background:' + colors[i] + '"></i> ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
+        }
+        return el;
+      };
+      legend.addTo(scene);
+
+```
+
+## 
+
+## FAQ
+
--- a/docs/API/component/marker.md
+++ b/docs/API/component/marker.md
@ -0,0 +1,83 @@
+---
+title: 地图标注
+order: 0
+---
+
+Marker 地图标注 目前只支持2D dom标注
+
+
+## 构造函数
+Marker<br />`const Marker = new L7.Marker(option)`
+
+
+#### option
+
+- color        `string `   ![map-marker.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32) 设置默认marker的颜色
+- element    `Dom|string`    自定义marker Dom节点，可以是dom实例，也可以是dom id
+- anchor     `string`  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
+- offset    `Array`  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
+
+
+## 方法
+
+#### setLnglat
+设置marker经纬度位置
+
+#### addTo
+将marker添加到地图Scene
+
+#### remove
+移除marker
+
+#### getElement
+获取marker dom Element
+
+#### getLngLat
+获取marker经纬度坐标
+
+#### togglePopup
+开启或者关闭marker弹出框
+
+#### setPopup
+为marker设置popup
+
+#### getPopup
+获取marker弹出框
+
+
+## 示例代码
+
+#### 默认Marker
+**<br />` const marker = new L7.Marker({color:'blue'})`
+
+
+#### 自定义Marker
+
+```javascript
+var el = document.createElement('label');
+       el.className = 'lableclass';
+       el.textContent = data[i].v;
+       el.style.background = getColor(data[i].v);
+       new L7.Marker({
+         element: el
+       })
+       .setLnglat([data[i].x * 1, data[i].y])
+        .addTo(scene);
+```
+
+
+#### 设置 popup
+
+```javascript
+  var popup = new L7.Popup({
+          anchor: 'left'
+        }).setText(item.name);
+
+new L7.Marker({
+  element: el
+}).setLnglat(item.coordinates)
+  .setPopup(popup)
+  .addTo(scene);
+```
+
+
--- a/docs/API/component/popup.md
+++ b/docs/API/component/popup.md
@ -0,0 +1,92 @@
+---
+title: 地图信息框
+order: 0
+---
+# popup
+
+地图标注信息窗口，用于展示地图要素的属性信息
+
+
+## 构造函数
+Popup
+
+```javascript
+const popup = new L7.Popup(option)
+```
+
+
+#### option
+
+- closeButton
+- closeOnClick
+- maxWidth
+- anchor
+
+
+## 方法
+
+#### setLnglat
+设置popup的经纬度位置<br />**参数**：lnglat 经纬度数组 [112,32]
+
+```javascript
+popup.setLnglat([112, 32]);
+```
+
+
+#### addTo
+**参数**：scene 地图scene实例
+
+将popup添加到地图scene显示
+
+```javascript
+popup.addTo(scene);
+```
+
+
+#### setHtml
+**参数**：html 字符串
+
+设置popup html 内容
+
+```javascript
+var html = '<p>\u7701\u4EFD\uFF1A' + feature.s + '</p>\n        <p>\u5730\u533A\uFF1A' + feature.m + '</p>\n        <p>\u6E29\u5EA6\uFF1A' + feature.t + '</p>\n        ';
+popup.setHtml(html);
+
+```
+
+
+#### setText
+设置 popup 显示文本内容
+
+```javascript
+popup.setText('hello world');
+```
+
+
+#### remove
+移除popup
+
+```javascript
+popup.remove()
+```
+
+
+## 事件
+
+#### close
+
+```javascript
+popup.on('close',()=>{})
+```
+
+
+## 示例代码
+
+#### 添加popup
+
+```
+  var html = '<p>'+feature.m+'</p>';
+  const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
+```
+
+### FAQ
--- a/docs/manual/tutorial/data.md
+++ b/docs/manual/tutorial/data.md
@ -0,0 +1,65 @@
+---
+title: 数据
+order: 1
+---
+
+## 数据
+
+目前L7支持的数据格式有GeoJson,CSV,JSon Image
+
+GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支持，点，线段，弧线的支持。<br />JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。
+
+
+## GeoJSON
+
+> GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
+
+
+
+```json
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              110.478515625,
+              32.76880048488168
+            ],
+            [
+              117.68554687499999,
+              32.76880048488168
+            ],
+            [
+              117.68554687499999,
+              37.64903402157866
+            ],
+            [
+              110.478515625,
+              37.64903402157866
+            ],
+            [
+              110.478515625,
+              32.76880048488168
+            ]
+          ]
+        ]
+      }
+    }
+  ]
+}
+```
+
+## 地理统计分析工具
+[turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库
+
+## 在线工具
+
+[http://geojson.io/](http://geojson.io/)    可以在线查看，绘制，修改GeoJSON数据
+
+[https://mapshaper.org/](https://mapshaper.org/)  可以查看较大的geojson，还能够简化GeoJSON数据
--- a/docs/manual/tutorial/quickStart.md
+++ b/docs/manual/tutorial/quickStart.md
@ -0,0 +1,8 @@
+---
+title: 快速上手
+order: 0
+redirect_from:
+  - /zh/docs/tutorial
+---
+
+内容
--- a/docs/specification/introduction.md
+++ b/docs/specification/introduction.md
@ -0,0 +1,7 @@
+---
+title: 简介
+order: 1
+redirect_from:
+  - /zh/docs/specification
+---
+L7 地理空间可视化设计语言
--- a/examples/point/basic/data.json
+++ b/examples/point/basic/data.json
@ -0,0 +1,351 @@
+[{
+  "id": "5011000000404",
+  "name": "铁路新村(华池路)",
+  "longitude": 121.4316962,
+  "latitude": 31.26082325,
+  "unit_price": 71469.4,
+  "count": 2
+}, {
+  "id": "5011000002716",
+  "name": "金元坊",
+  "longitude": 121.3810096,
+  "latitude": 31.25302026,
+  "unit_price": 47480.5,
+  "count": 2
+}, {
+  "id": "5011000003403",
+  "name": "兰溪路231弄",
+  "longitude": 121.4086229,
+  "latitude": 31.25291206,
+  "unit_price": 55218.4,
+  "count": 2
+}, {
+  "id": "5011000003652",
+  "name": "兰溪公寓",
+  "longitude": 121.409227,
+  "latitude": 31.251014,
+  "unit_price": 55577.8,
+  "count": 2
+}, {
+  "id": "5011000004139",
+  "name": "梅岭新村",
+  "longitude": 121.400946,
+  "latitude": 31.24946565,
+  "unit_price": 63028.1,
+  "count": 2
+}, {
+  "id": "5011000005647",
+  "name": "石泉路140弄",
+  "longitude": 121.4318415,
+  "latitude": 31.25682515,
+  "unit_price": 52256.3,
+  "count": 2
+}, {
+  "id": "5011000006479",
+  "name": "中山北路2165弄",
+  "longitude": 121.4350523,
+  "latitude": 31.25364239,
+  "unit_price": 55129.4,
+  "count": 2
+}, {
+  "id": "5011000008328",
+  "name": "光新路430弄",
+  "longitude": 121.4374976,
+  "latitude": 31.26298493,
+  "unit_price": 49397.2,
+  "count": 2
+}, {
+  "id": "5011000004973",
+  "name": "旬阳新村",
+  "longitude": 121.431054,
+  "latitude": 31.259485,
+  "unit_price": 58836.4,
+  "count": 3
+}, {
+  "id": "5011000005863",
+  "name": "岚皋路300弄",
+  "longitude": 121.4290778,
+  "latitude": 31.2587194,
+  "unit_price": 56944.2,
+  "count": 3
+}, {
+  "id": "5011000006645",
+  "name": "光复西路145弄",
+  "longitude": 121.4375783,
+  "latitude": 31.25329386,
+  "unit_price": 63652.3,
+  "count": 3
+}, {
+  "id": "5011000011530",
+  "name": "祥和大厦",
+  "longitude": 121.3839187,
+  "latitude": 31.25161362,
+  "unit_price": 41029.4,
+  "count": 3
+}, {
+  "id": "5011000013673",
+  "name": "真光十小区",
+  "longitude": 121.395288,
+  "latitude": 31.256758,
+  "unit_price": 41900.9,
+  "count": 3
+}, {
+  "id": "5011000013938",
+  "name": "真光新秀",
+  "longitude": 121.396422,
+  "latitude": 31.260857,
+  "unit_price": 49490.7,
+  "count": 3
+}, {
+  "id": "5011000017097",
+  "name": "陆三小区",
+  "longitude": 121.4259304,
+  "latitude": 31.24930686,
+  "unit_price": 56632.3,
+  "count": 3
+}, {
+  "id": "5011000017118",
+  "name": "樱花苑",
+  "longitude": 121.4002071,
+  "latitude": 31.25485805,
+  "unit_price": 49650.2,
+  "count": 3
+}, {
+  "id": "5011000017635",
+  "name": "宁馨家园",
+  "longitude": 121.3988072,
+  "latitude": 31.25289796,
+  "unit_price": 61407.7,
+  "count": 3
+}, {
+  "id": "5011000020263",
+  "name": "南大街22弄",
+  "longitude": 121.4090896,
+  "latitude": 31.25320726,
+  "unit_price": 52482.1,
+  "count": 3
+}, {
+  "id": "5011000000988",
+  "name": "芝川新苑",
+  "longitude": 121.409025,
+  "latitude": 31.263945,
+  "unit_price": 59417.8,
+  "count": 4
+}, {
+  "id": "5011000007885",
+  "name": "南大街34弄",
+  "longitude": 121.4080409,
+  "latitude": 31.2535179,
+  "unit_price": 49739.4,
+  "count": 4
+}, {
+  "id": "5011000016119",
+  "name": "万千公寓",
+  "longitude": 121.4379659,
+  "latitude": 31.26270913,
+  "unit_price": 61846.7,
+  "count": 4
+}, {
+  "id": "5011000017255",
+  "name": "上海星港",
+  "longitude": 121.419023,
+  "latitude": 31.249904,
+  "unit_price": 81443.3,
+  "count": 4
+}, {
+  "id": "5011000018021",
+  "name": "中岚大楼",
+  "longitude": 121.432984,
+  "latitude": 31.251381,
+  "unit_price": 52858.6,
+  "count": 4
+}, {
+  "id": "5011000018102",
+  "name": "武宁苑",
+  "longitude": 121.424577,
+  "latitude": 31.249765,
+  "unit_price": 53966.7,
+  "count": 4
+}, {
+  "id": "5011000019020",
+  "name": "天汇国际",
+  "longitude": 121.4115686,
+  "latitude": 31.26126002,
+  "unit_price": 45380,
+  "count": 4
+}, {
+  "id": "5011102208410",
+  "name": "三元及地苑",
+  "longitude": 121.3760233,
+  "latitude": 31.26220092,
+  "unit_price": 47857.5,
+  "count": 4
+}, {
+  "id": "5011000001095",
+  "name": "长征家苑",
+  "longitude": 121.3949788,
+  "latitude": 31.25376373,
+  "unit_price": 58117.4,
+  "count": 5
+}, {
+  "id": "5011000009828",
+  "name": "中环财富杰座",
+  "longitude": 121.378574,
+  "latitude": 31.25527816,
+  "unit_price": 26802.3,
+  "count": 5
+}, {
+  "id": "5011000013807",
+  "name": "华轩大厦",
+  "longitude": 121.375539,
+  "latitude": 31.258582,
+  "unit_price": 23147.8,
+  "count": 5
+}, {
+  "id": "5011000014493",
+  "name": "金莲坊",
+  "longitude": 121.3802448,
+  "latitude": 31.24989653,
+  "unit_price": 48458.5,
+  "count": 5
+}, {
+  "id": "5011000017050",
+  "name": "曹杨家园",
+  "longitude": 121.4101947,
+  "latitude": 31.26469667,
+  "unit_price": 56991.5,
+  "count": 5
+}, {
+  "id": "5011000018096",
+  "name": "颐宁苑",
+  "longitude": 121.415998,
+  "latitude": 31.252321,
+  "unit_price": 62755.7,
+  "count": 5
+}, {
+  "id": "5011000018172",
+  "name": "城公大厦",
+  "longitude": 121.4383528,
+  "latitude": 31.26001489,
+  "unit_price": 56813.7,
+  "count": 5
+}, {
+  "id": "509977363956217",
+  "name": "中骏天悦",
+  "longitude": 121.409065,
+  "latitude": 31.260569,
+  "unit_price": 109279,
+  "count": 5
+}, {
+  "id": "5011000015683",
+  "name": "市政馨苑",
+  "longitude": 121.420237,
+  "latitude": 31.259543,
+  "unit_price": 60397.9,
+  "count": 6
+}, {
+  "id": "5011000003824",
+  "name": "星光域",
+  "longitude": 121.413902,
+  "latitude": 31.264414,
+  "unit_price": 91223.7,
+  "count": 7
+}, {
+  "id": "5011000014462",
+  "name": "大隆花苑",
+  "longitude": 121.4388425,
+  "latitude": 31.26340479,
+  "unit_price": 52720.9,
+  "count": 7
+}, {
+  "id": "5011000015186",
+  "name": "光新三村",
+  "longitude": 121.43749,
+  "latitude": 31.263028,
+  "unit_price": 50524.7,
+  "count": 7
+}, {
+  "id": "5011000015629",
+  "name": "平民后村",
+  "longitude": 121.43489,
+  "latitude": 31.256305,
+  "unit_price": 59470,
+  "count": 7
+}, {
+  "id": "5011000015825",
+  "name": "真光新村",
+  "longitude": 121.397285,
+  "latitude": 31.260535,
+  "unit_price": 48991.6,
+  "count": 7
+}, {
+  "id": "5011000018225",
+  "name": "半岛花园",
+  "longitude": 121.441891,
+  "latitude": 31.253607,
+  "unit_price": 73694.6,
+  "count": 7
+}, {
+  "id": "5011000008852",
+  "name": "真西新村第二小区",
+  "longitude": 121.402254,
+  "latitude": 31.251552,
+  "unit_price": 55383.5,
+  "count": 8
+}, {
+  "id": "5011000017348",
+  "name": "嘉秀坊",
+  "longitude": 121.3750242,
+  "latitude": 31.26059388,
+  "unit_price": 47246.6,
+  "count": 10
+}, {
+  "id": "5011000018056",
+  "name": "真情公寓",
+  "longitude": 121.3909318,
+  "latitude": 31.26018159,
+  "unit_price": 56255.2,
+  "count": 10
+}, {
+  "id": "5011000011380",
+  "name": "清涧七街坊",
+  "longitude": 121.3922347,
+  "latitude": 31.2646608,
+  "unit_price": 46948.6,
+  "count": 11
+}, {
+  "id": "5011000015943",
+  "name": "新体育广场",
+  "longitude": 121.432549,
+  "latitude": 31.26324211,
+  "unit_price": 30852.9,
+  "count": 11
+}, {
+  "id": "5011000014039",
+  "name": "清涧六街坊",
+  "longitude": 121.395639,
+  "latitude": 31.263124,
+  "unit_price": 45790.7,
+  "count": 12
+}, {
+  "id": "5011000015761",
+  "name": "曹杨八村",
+  "longitude": 121.4120603,
+  "latitude": 31.25113592,
+  "unit_price": 50921.7,
+  "count": 18
+}, {
+  "id": "5011000017518",
+  "name": "海棠苑",
+  "longitude": 121.398276,
+  "latitude": 31.254232,
+  "unit_price": 49380.8,
+  "count": 18
+}, {
+  "id": "5011000012360",
+  "name": "嘉善坊",
+  "longitude": 121.3811297,
+  "latitude": 31.25881044,
+  "unit_price": 41048.3,
+  "count": 20
+}]
--- a/examples/point/basic/demo/color.js
+++ b/examples/point/basic/demo/color.js
@ -0,0 +1,58 @@
+import { Scene } from '@l7/scene';
+import { PointLayer, PointImageLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [121.40, 31.258134],
+  zoom: 15,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const pointLayer =
+      new PointLayer()
+        .source(data, {
+          parser: {
+            type: 'json',
+            x: 'longitude',
+            y: 'latitude'
+          }
+        }).shape('circle')
+        .size(8)
+        .color('count',['#d73027','#fc8d59','#fee08b','#d9ef8b','#91cf60','#1a9850'])
+        .style({
+          opacity: 1.0,
+          strokeWidth: 2,
+          strokeColor: "#fff",
+
+        })
+        scene.addImage(
+          '00',
+          'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ',
+        );
+   const imageLayer = new PointImageLayer()
+      .source(data, {
+        parser: {
+          type: 'json',
+          x: 'longitude',
+          y: 'latitude'
+        }
+      })
+      .shape('00')
+      .size(30);
+      scene.addLayer(imageLayer);
+    // scene.on('loaded',()=>{
+    //   console.log('----------loaded')
+      scene.addLayer(pointLayer);
+    // })
+    console.log(scene);
+   scene.on('loaded',()=>{
+      console.log(scene.map);
+   })
+    scene.render();
+  });
+
+
--- a/examples/point/basic/demo/meta.json
+++ b/examples/point/basic/demo/meta.json
@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "point.js",
+      "title": "气泡图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
--- a/examples/point/basic/demo/point.js
+++ b/examples/point/basic/demo/point.js
@ -0,0 +1,40 @@
+import { Scene } from '@l7/scene';
+import { PointLayer } from '@l7/layers'
+console.log(scene);
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'dark',
+  center: [121.40, 31.258134],
+  zoom: 15,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const pointLayer =
+      new PointLayer()
+        .source(data, {
+          parser: {
+            type: 'json',
+            x: 'longitude',
+            y: 'latitude'
+          }
+        }).shape('circle')
+        .size('unit_price', [5, 25])
+        .color('#2F54EB')
+        .style({
+          opacity: 1.0,
+          strokeWidth: 2,
+          strokeColor: "#fff",
+
+        })
+        // scene.on('loaded',()=>{
+        //   console.log('----------loaded')
+          scene.addLayer(pointLayer);
+        // })
+        scene.render();
+  });
+
+
--- a/examples/point/basic/index.zh.md
+++ b/examples/point/basic/index.zh.md
@ -0,0 +1,11 @@
+---
+title: 气泡图
+order: 0
+redirect_from:
+  - /zh/examples
+---
+
+图表的基本描述。
+
+### 何时使用
+
--- a/examples/scene/demo/amap.js
+++ b/examples/scene/demo/amap.js
@ -0,0 +1,12 @@
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'dark',
+  center: [121.40, 31.258134],
+  zoom: 5,
+});
+scene.render();
+
+console.log(scene);
--- a/examples/scene/demo/mapbox.js
+++ b/examples/scene/demo/mapbox.js
@ -0,0 +1,11 @@
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  pitch: 0,
+  type: 'amap',
+  style: 'light',
+  center: [ -97.119140625, 38.75408327579141],
+  zoom: 2,
+});
+scene.render();
+
--- a/examples/scene/demo/meta.json
+++ b/examples/scene/demo/meta.json
@ -0,0 +1,18 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "scene.js",
+      "title": "高德底图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "scene.js",
+      "title": "MapBox底图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
--- a/examples/scene/index.zh.md
+++ b/examples/scene/index.zh.md
@ -0,0 +1,8 @@
+---
+title: Scene
+order: 0
+---
+初始 L7 地图实例
+
+### 何时使用
+
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@ -0,0 +1,2 @@
+window.scene = require('@l7/scene');
+window.layers= require('@l7/layers')
--- a/gatsby-config.js
+++ b/gatsby-config.js
@ -0,0 +1,99 @@
+module.exports = {
+  plugins: [
+    {
+      resolve: '@antv/gatsby-theme-antv',
+      options: {
+        pathPrefix: '/gatsby-theme-antv',
+      },
+    },
+  ],
+  siteMetadata: {
+    title: 'L7',
+    description: 'Large-scale WebGL-powered  Geospatial data visualization analysis framework',
+    githubUrl: 'https://github.com/antvis/antvis.github.io',
+    navs: [
+      {
+        slug: 'docs/specification',
+        title: {
+          zh: '设计语言',
+          en: 'Specification',
+        },
+      },
+      {
+        slug: 'docs/API',
+        title: {
+          zh: '文档',
+          en: 'document',
+        },
+      },
+      {
+        slug: 'docs/tutorial',
+        title: {
+          zh: '教程',
+          en: 'tutorial',
+        },
+      },
+      {
+        slug: 'examples',
+        title: {
+          zh: '图表演示',
+          en: 'Examples',
+        },
+        redirect: 'point/basic',
+      },
+        // target: '_blank',
+    ],
+    docs: [
+      {
+        slug: 'specification',
+        title: {
+          zh: '简介',
+          en: 'introduction',
+        },
+      },
+      {
+        slug: 'manual/tutorial',
+        title: {
+          zh: '教程',
+          en: 'tutorial',
+        },
+      },
+      {
+        slug: 'API/L7.md',
+        title: {
+          zh: '简介',
+          en: 'intro',
+        },
+        order:1,
+      },
+      {
+        slug: 'API/component',
+        title: {
+          zh: '组件',
+          en: 'Component',
+        },
+        order:1,
+      },
+    ],
+    examples: [
+      {
+        slug: 'scene',
+        icon: 'map',
+        title: {
+          zh: '场景',
+          en: 'Scene',
+        },
+      },
+      {
+        slug: 'point',
+        icon: 'point',
+        title: {
+          zh: '点图层',
+          en: 'PointLayer',
+        },
+      }
+    ],
+    exampleContainer: '<div style="min-height: 590px; justify-content: center;position: relative" id="map"/>'
+  },
+
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,11 @@
 {
  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/antvis/L7"
+  },
  "devDependencies": {
+    "@antv/gatsby-theme-antv": "^0.9.7",
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/plugin-proposal-decorators": "^7.6.0",
@ -33,6 +38,7 @@
    "babel-plugin-css-modules-transform": "^1.6.2",
    "babel-plugin-inline-import": "^3.0.0",
    "babel-plugin-transform-postcss": "^0.3.0",
+    "babel-preset-gatsby": "^0.2.20",
    "clean-webpack-plugin": "^0.1.19",
    "commitizen": "^4.0.3",
    "copy-webpack-plugin": "^4.5.2",
@ -43,6 +49,8 @@
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.5.0",
    "enzyme-to-json": "^3.0.0-beta6",
+    "gatsby": "^2.17.7",
+    "gh-pages": "^2.1.1",
    "gl": "^4.4.0",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^3.0.9",
@ -59,6 +67,7 @@
    "react": "^16.8.6",
    "react-docgen-typescript-loader": "^3.1.0",
    "react-dom": "^16.8.6",
+    "react-i18next": "^11.0.1",
    "rimraf": "^2.6.2",
    "sass-loader": "^7.1.0",
    "style-loader": "^1.0.0",
@ -81,6 +90,11 @@
    "worker-loader": "^2.0.0"
  },
  "scripts": {
+    "start": "export NODE_ENV=site && npm run site:develop",
+    "site:develop": "gatsby develop --open -H 0.0.0.0",
+    "site:build": "npm run site:clean && export NODE_ENV=site &&  gatsby build --prefix-paths",
+    "site:clean": "gatsby clean",
+    "site:deploy": "npm run site:build && gh-pages -d public",
    "prebuild": "run-p tsc lint",
    "build": "lerna exec --parallel 'BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments'",
    "postbuild": "yarn build:declarations",
--- a/packages/core/src/inversify.config.ts
+++ b/packages/core/src/inversify.config.ts
@ -53,7 +53,7 @@ const container = new Container();
 container
  .bind<ISceneService>(TYPES.ISceneService)
  .to(SceneService)
-  .inSingletonScope();
+  .inTransientScope();
 container
  .bind<IGlobalConfigService>(TYPES.IGlobalConfigService)
  .to(GlobalConfigService)
@ -61,7 +61,7 @@ container
 container
  .bind<ILayerService>(TYPES.ILayerService)
  .to(LayerService)
-  .inSingletonScope();
+  .inTransientScope();
 container
  .bind<IStyleAttributeService>(TYPES.IStyleAttributeService)
  .to(StyleAttributeService);
--- a/packages/core/src/services/layer/LayerService.ts
+++ b/packages/core/src/services/layer/LayerService.ts
@ -16,6 +16,8 @@ export default class LayerService implements ILayerService {
  private readonly configService: IGlobalConfigService;

  public add(layer: ILayer) {
+    // this.initPlugin(layer);
+    // layer.init();
    this.layers.push(layer);
  }

@ -45,4 +47,9 @@ export default class LayerService implements ILayerService {
    this.layers.forEach((layer) => layer.destroy());
    this.layers = [];
  }
+  private initPlugin(layer: ILayer) {
+    for (const plugin of layer.plugins) {
+      plugin.apply(layer);
+    }
+  }
 }
--- a/packages/core/src/services/renderer/passes/TAAPass.ts
+++ b/packages/core/src/services/renderer/passes/TAAPass.ts
@ -232,7 +232,7 @@ export default class TAAPass<InitializationOptions = {}>
      this.blendModel.draw({
        uniforms: {
          // @ts-ignore
-          u_Opacity: layerStyleOptions.opacity || 1,
+          u_opacity: layerStyleOptions.opacity || 1,
          u_MixRatio: this.frame === 0 ? 1 : 0.9,
          u_Diffuse1: this.sampleRenderTarget,
          u_Diffuse2:
--- a/packages/core/src/services/scene/SceneService.ts
+++ b/packages/core/src/services/scene/SceneService.ts
@ -72,7 +72,6 @@ export default class Scene extends EventEmitter implements ISceneService {

  public constructor() {
    super();
-
    // @see https://github.com/webpack/tapable#usage
    this.hooks = {
      /**
@ -148,23 +147,25 @@ export default class Scene extends EventEmitter implements ISceneService {

  public addLayer(layer: ILayer) {
    this.logger.info(`add layer ${layer.name}`);
+
    this.layerService.add(layer);
  }

  public async render() {
+    // 首次初始化，或者地图的容器被强制销毁的需要重新初始化
    if (!this.inited) {
      // 首次渲染需要等待底图、相机初始化
      await this.hooks.init.promise(this.configService.getConfig());
      // 初始化marker 容器
      this.map.addMarkerContainer();
-      this.emit('loaded');
      this.inited = true;

      this.layerService.initLayers();
+      this.emit('loaded');
    }

    this.layerService.renderLayers();
-    this.logger.info('render');
+    // this.logger.info('render');
  }

  public destroy() {
--- a/packages/core/src/shaders/post-processing/blend.glsl
+++ b/packages/core/src/shaders/post-processing/blend.glsl
@ -1,4 +1,4 @@
-uniform float u_Opacity : 1.0;
+uniform float u_opacity : 1.0;
 uniform float u_MixRatio : 0.5;

 uniform sampler2D u_Diffuse1;
@ -9,5 +9,5 @@ varying vec2 v_UV;
 void main() {
  vec4 texel1 = texture2D(u_Diffuse1, v_UV);
  vec4 texel2 = texture2D(u_Diffuse2, v_UV);
-  gl_FragColor = u_Opacity * mix(texel1, texel2, u_MixRatio);
-}
+  gl_FragColor = u_opacity * mix(texel1, texel2, u_MixRatio);
+}
--- a/packages/core/src/shaders/projection.glsl
+++ b/packages/core/src/shaders/projection.glsl
@ -120,4 +120,14 @@ vec4 project_common_position_to_clipspace(vec4 position) {
    u_ViewProjectionMatrix,
    u_ViewportCenterProjection
  );
-}
+}
+
+vec4 unproject_clipspace_to_position(vec4 clipspacePos, mat4 u_InverseViewProjectionMatrix) {
+  vec4 pos = u_InverseViewProjectionMatrix * (clipspacePos - u_ViewportCenterProjection);
+  if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET ||
+    u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+    // Needs to be divided with project_uCommonUnitsPerMeter
+    pos.w /= u_PixelsPerMeter.z;
+  }
+  return pos;
+}
--- a/packages/layers/src/core/BaseLayer.ts
+++ b/packages/layers/src/core/BaseLayer.ts
@ -1,4 +1,5 @@
 import {
+  gl,
  ICameraService,
  IEncodeFeature,
  IFontService,
@ -358,6 +359,15 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> implements ILayer {
      fs,
      vs,
      elements,
+      blend: {
+        enable: true,
+        func: {
+          srcRGB: gl.SRC_ALPHA,
+          srcAlpha: 1,
+          dstRGB: gl.ONE_MINUS_SRC_ALPHA,
+          dstAlpha: 1,
+        },
+      },
      ...rest,
    });
  }
--- a/packages/layers/src/heatmap/grid.ts
+++ b/packages/layers/src/heatmap/grid.ts
@ -27,7 +27,7 @@ export default class HeatMapGrid extends BaseLayer<IHeatMapLayerStyleOptions> {
    this.models.forEach((model) =>
      model.draw({
        uniforms: {
-          u_Opacity: opacity || 1.0,
+          u_opacity: opacity || 1.0,
          u_coverage: coverage || 1.0,
          u_radius: [
            this.getSource().data.xOffset,
--- a/packages/layers/src/heatmap/heatmap.ts
+++ b/packages/layers/src/heatmap/heatmap.ts
@ -106,8 +106,8 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
      height: imageData.height,
      wrapS: gl.CLAMP_TO_EDGE,
      wrapT: gl.CLAMP_TO_EDGE,
-      min: gl.NEAREST,
-      mag: gl.NEAREST,
+      min: gl.LINEAR,
+      mag: gl.LINEAR,
      flipY: true,
    });
  }
@ -235,7 +235,7 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
    const { opacity, intensity = 10, radius = 5 } = this.getStyleOptions();
    this.intensityModel.draw({
      uniforms: {
-        u_Opacity: opacity || 1.0,
+        u_opacity: opacity || 1.0,
        u_radius: radius,
        u_intensity: intensity,
      },
@ -246,7 +246,7 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
    const { opacity } = this.getStyleOptions();
    this.colorModel.draw({
      uniforms: {
-        u_Opacity: opacity || 1.0,
+        u_opacity: opacity || 1.0,
        u_colorTexture: this.colorTexture,
        u_texture: this.heatmapFramerBuffer,
      },
@ -262,7 +262,7 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
    ) as mat4;
    this.colorModel.draw({
      uniforms: {
-        u_Opacity: opacity || 1.0,
+        u_opacity: opacity || 1.0,
        u_colorTexture: this.colorTexture,
        u_texture: this.heatmapFramerBuffer,
        u_extent: [-179.9476, -60.0959, 179.9778, 79.5651],
@ -273,7 +273,7 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
  private build3dHeatMap() {
    const { getViewportSize } = this.rendererService;
    const { width, height } = getViewportSize();
-    const triangulation = heatMap3DTriangulation(256, 128);
+    const triangulation = heatMap3DTriangulation(width / 2.0, height / 2.0);
    this.shaderModuleService.registerModule('heatmap3dColor', {
      vs: heatmap3DVert,
      fs: heatmap3DFrag,
@ -314,6 +314,15 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
      depth: {
        enable: false,
      },
+      blend: {
+        enable: true,
+        func: {
+          srcRGB: gl.SRC_ALPHA,
+          srcAlpha: 1,
+          dstRGB: gl.ONE_MINUS_SRC_ALPHA,
+          dstAlpha: 1,
+        },
+      },
      elements: createElements({
        data: triangulation.indices,
        type: gl.UNSIGNED_INT,
--- a/packages/layers/src/heatmap/shaders/heatmap_3d_frag.glsl
+++ b/packages/layers/src/heatmap/shaders/heatmap_3d_frag.glsl
@ -1,6 +1,6 @@
 uniform sampler2D u_texture;
 uniform sampler2D u_colorTexture;
-uniform float u_Opacity;
+uniform float u_opacity;
 varying vec2 v_texCoord;

 void main(){
@ -11,6 +11,7 @@ void main(){
    // vec4 color = texture2D(u_colorTexture,vec2(0.5,1.0-intensity));
    vec4 color = texture2D(u_colorTexture,ramp_pos);
    gl_FragColor = color;
-    // gl_FragColor.a = color.a * smoothstep(0.0,0.12,intensity) * u_Opacity;
+    gl_FragColor.a = color.a * smoothstep(0.0, 0.05,intensity) * u_opacity;
+    // gl_FragColor.a = 0.2;

 }
--- a/packages/layers/src/heatmap/shaders/heatmap_3d_vert.glsl
+++ b/packages/layers/src/heatmap/shaders/heatmap_3d_vert.glsl
@ -6,37 +6,39 @@ uniform vec4 u_extent;
 varying vec2 v_texCoord;
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_InverseViewProjectionMatrix;
+
+vec2 toBezier(float t, vec2 P0, vec2 P1, vec2 P2, vec2 P3) {
+    float t2 = t * t;
+    float one_minus_t = 1.0 - t;
+    float one_minus_t2 = one_minus_t * one_minus_t;
+    return (P0 * one_minus_t2 * one_minus_t + P1 * 3.0 * t * one_minus_t2 + P2 * 3.0 * t2 * one_minus_t + P3 * t2 * t);
+}
+vec2 toBezier(float t, vec4 p){
+    return toBezier(t, vec2(0.0, 0.0), vec2(p.x, p.y), vec2(p.z, p.w), vec2(1.0, 1.0));
+}
 #pragma include "projection"
 void main() {
  v_texCoord = a_Uv;

  vec2 pos = a_Uv * vec2(2.0) - vec2(1.0);

-  vec4 n_0 = vec4(pos, 0.0, 1.0) - u_ViewportCenterProjection;
-	vec4 n_1 = vec4(pos, 1.0, 1.0) - u_ViewportCenterProjection;
+  vec4 p1 = vec4(pos, 0.0, 1.0);
+	vec4 p2 = vec4(pos, 1.0, 1.0);

-	vec4 m_0 = u_InverseViewProjectionMatrix * n_0 ;
-	vec4 m_1 = u_InverseViewProjectionMatrix * n_1;
-	m_0 = m_0 / m_0.w;
-	m_1 = m_1 / m_1.w;
+	vec4 inverseP1 = unproject_clipspace_to_position(p1, u_InverseViewProjectionMatrix);
+	vec4 inverseP2 = unproject_clipspace_to_position(p2, u_InverseViewProjectionMatrix) ;

-	float zPos = (0.0 - m_0.z) / (m_1.z - m_0.z);
-	vec4 mapCoord = m_0 + zPos * (m_1 - m_0);
+  inverseP1 = inverseP1 / inverseP1.w;
+	inverseP2 = inverseP2 / inverseP2.w;

-  // vec4 p = u_InverseViewProjectionMatrix * (vec4(pos,0,1) - u_ViewportCenterProjection);
-  // p = p /p.w;
-  // pos.y = 1.0 -pos.y;
-  // vec2 minxy =  project_position(vec4(u_extent.xy, 0, 1.0)).xy;
-  // vec2 maxxy =  project_position(vec4(u_extent.zw, 0, 1.0)).xy;
+	float zPos = (0.0 - inverseP1.z) / (inverseP2.z - inverseP1.z);
+	vec4 position = inverseP1 + zPos * (inverseP2 - inverseP1);

-  // vec2 step = (maxxy - minxy);
-
-  // vec2 pos = minxy + (vec2(a_Position.x, a_Position.y ) + vec2(1.0)) / vec2(2.0)  * step;
+  vec4 b= vec4(0.5000, 0, 1, 0.5000);
+  float fh;

  float intensity = texture2D(u_texture, v_texCoord).r;
-  gl_Position = project_common_position_to_clipspace(vec4(mapCoord.xy, intensity * 100., 1.0));
-  // gl_Position = vec4(pos,0.,1.0);
-  // v_texCoord =  (gl_Position.xy + vec2(1.0)) / vec2(2.0) / gl_Position.w;
-  // v_texCoord.y = 1.0 - v_texCoord.y;
+  fh = toBezier(intensity, b).y;
+  gl_Position = project_common_position_to_clipspace(vec4(position.xy, fh * 100., 1.0));

 }
--- a/packages/layers/src/heatmap/shaders/heatmap_frag.glsl
+++ b/packages/layers/src/heatmap/shaders/heatmap_frag.glsl
@ -1,6 +1,6 @@
 uniform sampler2D u_texture;
 uniform sampler2D u_colorTexture;
-uniform float u_Opacity;
+uniform float u_opacity;
 varying vec2 v_texCoord;

 void main(){
@ -11,6 +11,6 @@ void main(){
    // vec4 color = texture2D(u_colorTexture,vec2(0.5,1.0-intensity));
    vec4 color = texture2D(u_colorTexture,ramp_pos);
    gl_FragColor = color;
-    gl_FragColor.a = color.a * smoothstep(0.1,0.5,intensity) * u_Opacity;
+    gl_FragColor.a = color.a * smoothstep(0.1,0.5,intensity) * u_opacity;

 }
--- a/packages/layers/src/heatmap/shaders/hexagon_frag.glsl
+++ b/packages/layers/src/heatmap/shaders/hexagon_frag.glsl
@ -1,7 +1,7 @@
 precision highp float;
 varying vec4 v_color;
-uniform float u_Opacity: 0.1;
+uniform float u_opacity: 0.1;
 void main() {
  gl_FragColor = v_color;
-  gl_FragColor.a *= u_Opacity;
+  gl_FragColor.a *= u_opacity;
 }
--- a/packages/layers/src/line/arc.ts
+++ b/packages/layers/src/line/arc.ts
@ -27,7 +27,7 @@ export default class ArcLineLayer extends BaseLayer<IArcLayerStyleOptions> {
    this.models.forEach((model) =>
      model.draw({
        uniforms: {
-          u_Opacity: opacity || 1,
+          u_opacity: opacity || 1,
          segmentNumber: 30,
        },
      }),
--- a/packages/layers/src/line/arc2d.ts
+++ b/packages/layers/src/line/arc2d.ts
@ -27,7 +27,7 @@ export default class Arc2DLineLayer extends BaseLayer<IArcLayerStyleOptions> {
    this.models.forEach((model) =>
      model.draw({
        uniforms: {
-          u_Opacity: opacity || 1,
+          u_opacity: opacity || 1,
          segmentNumber: 30,
        },
      }),
--- a/packages/layers/src/line/index.ts
+++ b/packages/layers/src/line/index.ts
@ -26,7 +26,7 @@ export default class LineLayer extends BaseLayer<IPointLayerStyleOptions> {
    this.models.forEach((model) =>
      model.draw({
        uniforms: {
-          u_Opacity: opacity || 1.0,
+          u_opacity: opacity || 1.0,
        },
      }),
    );
--- a/packages/layers/src/line/shaders/line_arc_frag.glsl
+++ b/packages/layers/src/line/shaders/line_arc_frag.glsl
@ -1,10 +1,10 @@
  precision mediump float;
-  uniform float u_Opacity;
+  uniform float u_opacity;
  varying vec4 v_color;

  void main() {

      gl_FragColor = v_color;
-      gl_FragColor.a = v_color.a * u_Opacity;
+      gl_FragColor.a = v_color.a * u_opacity;

  }
--- a/packages/layers/src/point/extrude.ts
+++ b/packages/layers/src/point/extrude.ts
@ -26,7 +26,7 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
    this.models.forEach((model) =>
      model.draw({
        uniforms: {
-          u_Opacity: opacity || 1.0,
+          u_opacity: opacity || 1.0,
        },
      }),
    );
--- a/packages/layers/src/point/image.ts
+++ b/packages/layers/src/point/image.ts
@ -46,7 +46,7 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
    this.models.forEach((model) =>
      model.draw({
        uniforms: {
-          u_Opacity: opacity || 1.0,
+          u_opacity: opacity || 1.0,
          u_texture: createTexture2D({
            data: this.iconService.getCanvas(),
            width: 1024,
--- a/packages/layers/src/point/index.ts
+++ b/packages/layers/src/point/index.ts
@ -10,10 +10,13 @@ import {
  TYPES,
 } from '@l7/core';
 import BaseLayer from '../core/BaseLayer';
+import { rgb2arr } from '../utils/color';
 import pointFillFrag from './shaders/fill_frag.glsl';
 import pointFillVert from './shaders/fill_vert.glsl';
 interface IPointLayerStyleOptions {
  opacity: number;
+  strokeWidth: number;
+  strokeColor: string;
 }
 export function PointTriangulation(feature: IEncodeFeature) {
  const coordinates = feature.coordinates as number[];
@ -40,11 +43,17 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
  }

  protected renderModels() {
-    const { opacity } = this.getStyleOptions();
+    const {
+      opacity = 1,
+      strokeColor = '#fff',
+      strokeWidth = 1,
+    } = this.getStyleOptions();
    this.models.forEach((model) =>
      model.draw({
        uniforms: {
-          u_Opacity: opacity || 1.0,
+          u_opacity: opacity,
+          u_stroke_width: strokeWidth,
+          u_stroke_color: rgb2arr(strokeColor),
        },
      }),
    );
@ -60,15 +69,6 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
        fragmentShader: pointFillFrag,
        triangulation: PointTriangulation,
        depth: { enable: false },
-        blend: {
-          enable: true,
-          func: {
-            srcRGB: gl.SRC_ALPHA,
-            srcAlpha: 1,
-            dstRGB: gl.ONE_MINUS_SRC_ALPHA,
-            dstAlpha: 1,
-          },
-        },
      }),
    ];
  }
--- a/packages/layers/src/point/shaders/circle_frag.glsl
+++ b/packages/layers/src/point/shaders/circle_frag.glsl
@ -58,4 +58,4 @@ void main() {
  );

  gl_FragColor = opacity_t * mix(v_color * u_opacity, u_stroke_color * u_stroke_opacity, color_t);
-}
+}
--- a/packages/layers/src/point/shaders/circle_vert.glsl
+++ b/packages/layers/src/point/shaders/circle_vert.glsl
@ -49,4 +49,4 @@ void main() {

  // construct point coords
  v_data = vec4(extrude, antialiasblur, shape_type);
-}
+}
--- a/packages/layers/src/point/shaders/extrude_frag.glsl
+++ b/packages/layers/src/point/shaders/extrude_frag.glsl
@ -3,4 +3,4 @@ uniform float u_opacity: 1.0;
 void main() {
  gl_FragColor = v_color;
  gl_FragColor.a *= u_opacity;
-}
+}
--- a/packages/layers/src/point/shaders/text_frag.glsl
+++ b/packages/layers/src/point/shaders/text_frag.glsl
@ -18,10 +18,10 @@ void main() {

  lowp float buff = (6.0 - u_strokeWidth / fontScale) / SDF_PX;
  highp float gamma = (u_halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / (fontScale * u_gamma_scale);
-  
+
  highp float gamma_scaled = gamma * v_gamma_scale;

  highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);

  gl_FragColor = mix(v_color * u_opacity, u_stroke, smoothstep(0., 0.5, 1. - dist)) * alpha;
-}
+}
--- a/packages/layers/src/point/text.ts
+++ b/packages/layers/src/point/text.ts
@ -56,7 +56,7 @@ export default class TextLayer extends BaseLayer<IPointTextLayerStyleOptions> {
    this.models.forEach((model) =>
      model.draw({
        uniforms: {
-          u_Opacity: opacity || 1.0,
+          u_opacity: opacity || 1.0,
        },
      }),
    );
--- a/packages/layers/src/polygon/index.ts
+++ b/packages/layers/src/polygon/index.ts
@ -40,7 +40,7 @@ export default class PolygonLayer extends BaseLayer<IPolygonLayerStyleOptions> {
    this.models.forEach((model) =>
      model.draw({
        uniforms: {
-          u_Opacity: opacity || 1.0,
+          u_opacity: opacity || 1.0,
        },
      }),
    );
--- a/packages/layers/src/polygon/polygon3D.ts
+++ b/packages/layers/src/polygon/polygon3D.ts
@ -26,7 +26,7 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
    this.models.forEach((model) =>
      model.draw({
        uniforms: {
-          u_Opacity: opacity || 1.0,
+          u_opacity: opacity || 1.0,
        },
      }),
    );
--- a/packages/layers/src/polygon/shaders/polygon_extrude_frag.glsl
+++ b/packages/layers/src/polygon/shaders/polygon_extrude_frag.glsl
@ -1,10 +1,10 @@
-uniform float u_Opacity: 1.0;
+uniform float u_opacity: 1.0;
 varying vec4 v_Color;

 #pragma include "picking"

 void main() {
  gl_FragColor = v_Color;
-  gl_FragColor.a *= u_Opacity;
+  gl_FragColor.a *= u_opacity;
  gl_FragColor = filterColor(gl_FragColor);
 }
--- a/packages/layers/src/polygon/shaders/polygon_frag.glsl
+++ b/packages/layers/src/polygon/shaders/polygon_frag.glsl
@ -1,10 +1,10 @@
-uniform float u_Opacity: 1.0;
+uniform float u_opacity: 1.0;
 varying vec4 v_Color;

 #pragma include "picking"

 void main() {
  gl_FragColor = v_Color;
-  gl_FragColor.a *= u_Opacity;
+  gl_FragColor.a *= u_opacity;
  gl_FragColor = filterColor(gl_FragColor);
-}
+}
--- a/packages/layers/src/raster/image.ts
+++ b/packages/layers/src/raster/image.ts
@ -40,7 +40,7 @@ export default class ImageLayer extends BaseLayer<IPointLayerStyleOptions> {
      this.models.forEach((model) =>
        model.draw({
          uniforms: {
-            u_Opacity: opacity || 1,
+            u_opacity: opacity || 1,
            u_texture: this.texture,
          },
        }),
--- a/packages/layers/src/raster/raster.ts
+++ b/packages/layers/src/raster/raster.ts
@ -48,7 +48,7 @@ export default class RasterLayer extends BaseLayer<IRasterLayerStyleOptions> {
    this.models.forEach((model) =>
      model.draw({
        uniforms: {
-          u_Opacity: opacity || 1,
+          u_opacity: opacity || 1,
          u_texture: this.texture,
          u_min: min,
          u_width: width,
--- a/packages/layers/src/raster/shaders/raster_frag.glsl
+++ b/packages/layers/src/raster/shaders/raster_frag.glsl
@ -1,9 +1,9 @@
 varying vec4 v_color;
-uniform float u_Opacity: 1.0;
+uniform float u_opacity: 1.0;
 #define PI 3.141592653589793

 void main() {
   gl_FragColor = v_color;
-   gl_FragColor.a *= u_Opacity;
+   gl_FragColor.a *= u_opacity;

 }
--- a/packages/maps/src/amap/index.ts
+++ b/packages/maps/src/amap/index.ts
@ -16,6 +16,7 @@ import {
 import { DOM } from '@l7/utils';
 import { inject, injectable } from 'inversify';
 import { IAMapEvent, IAMapInstance } from '../../typings/index';
+import { MapTheme } from './theme';
 import Viewport from './Viewport';

 const AMAP_API_KEY: string = '15cd8a57710d40c9b7c0e3cc120f1200';
@ -137,7 +138,7 @@ export default class AMapService implements IMapService {
    this.map.setZoomAndCenter(zoom, center);
  }
  public setMapStyle(style: string): void {
-    this.setMapStyle(style);
+    this.map.setMapStyle(this.getMapStyle(style));
  }
  public pixelToLngLat(pixel: [number, number]): ILngLat {
    const lngLat = this.map.pixelToLngLat(new AMap.Pixel(pixel[0], pixel[1]));
@ -168,7 +169,13 @@ export default class AMapService implements IMapService {
  }

  public async init(mapConfig: IMapConfig): Promise<void> {
-    const { id, style, ...rest } = mapConfig;
+    const {
+      id,
+      style = 'light',
+      minZoom = 0,
+      maxZoom = 18,
+      ...rest
+    } = mapConfig;

    this.$mapContainer = document.getElementById(id);

@ -179,7 +186,8 @@ export default class AMapService implements IMapService {
      window.onload = (): void => {
        // @ts-ignore
        this.map = new AMap.Map(id, {
-          mapStyle: style,
+          mapStyle: this.getMapStyle(style),
+          zooms: [minZoom, maxZoom],
          viewMode: '3D',
          ...rest,
        });
@ -255,4 +263,8 @@ export default class AMapService implements IMapService {
      this.cameraChangedCallback(this.viewport);
    }
  };
+
+  private getMapStyle(name: string) {
+    return MapTheme[name] ? MapTheme[name] : name;
+  }
 }
--- a/packages/maps/src/amap/theme.ts
+++ b/packages/maps/src/amap/theme.ts
@ -0,0 +1,6 @@
+export const MapTheme: {
+  [key: string]: any;
+} = {
+  dark: 'amap://styles/ba3e9759545cd618392ef073c0dfda8c?isPublic=true',
+  light: 'amap://styles/a80c558f91b29cf56fa47f895fb1773c?isPublic=true',
+};
--- a/packages/maps/src/mapbox/index.ts
+++ b/packages/maps/src/mapbox/index.ts
@ -24,7 +24,7 @@ const EventMap: {
  mapmove: 'move',
  camerachange: 'move',
 };
-
+import { MapTheme } from './theme';
 mapboxgl.accessToken =
  'pk.eyJ1IjoieGlhb2l2ZXIiLCJhIjoiY2pxcmc5OGNkMDY3cjQzbG42cXk5NTl3YiJ9.hUC5Chlqzzh0FFd_aEc-uQ';
 const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12;
@ -142,7 +142,7 @@ export default class MapboxService implements IMapService {
  }

  public setMapStyle(style: string): void {
-    this.map.setStyle(style);
+    this.map.setStyle(this.getMapStyle(style));
  }
  // TODO: 计算像素坐标
  public pixelToLngLat(pixel: [number, number]): ILngLat {
@ -162,7 +162,12 @@ export default class MapboxService implements IMapService {
  }

  public async init(mapConfig: IMapConfig): Promise<void> {
-    const { id, attributionControl = false, ...rest } = mapConfig;
+    const {
+      id,
+      attributionControl = false,
+      style = 'light',
+      ...rest
+    } = mapConfig;
    this.$mapContainer = document.getElementById(id);

    this.viewport = new Viewport();
@ -174,6 +179,7 @@ export default class MapboxService implements IMapService {
    // @ts-ignore
    this.map = new mapboxgl.Map({
      container: id,
+      style: this.getMapStyle(style),
      attributionControl,
      ...rest,
    });
@ -246,4 +252,8 @@ export default class MapboxService implements IMapService {
      this.map.removeControl(logoCtr);
    }
  }
+
+  private getMapStyle(name: string) {
+    return MapTheme[name] ? MapTheme[name] : name;
+  }
 }
--- a/packages/maps/src/mapbox/theme.ts
+++ b/packages/maps/src/mapbox/theme.ts
@ -0,0 +1,6 @@
+export const MapTheme: {
+  [key: string]: any;
+} = {
+  light: 'mapbox://styles/mapbox/light-v10',
+  dark: 'mapbox://styles/mapbox/dark-v10',
+};
--- a/packages/renderer/src/regl/ReglModel.ts
+++ b/packages/renderer/src/regl/ReglModel.ts
@ -85,7 +85,6 @@ export default class ReglModel implements IModel {
    this.initBlendDrawParams({ blend }, drawParams);
    this.initStencilDrawParams({ stencil }, drawParams);
    this.initCullDrawParams({ cull }, drawParams);
-
    this.drawCommand = reGl(drawParams);
  }

@ -132,7 +131,6 @@ export default class ReglModel implements IModel {
          | ReglTexture2D).get();
      }
    });
-
    this.drawCommand(reglDrawProps);
  }

--- a/packages/scene/src/index.ts
+++ b/packages/scene/src/index.ts
@ -64,7 +64,7 @@ let mapType: MapType;
 * scene.render();
 */
 class Scene {
-  public map: AMap.Map | Map;
+  // public map: AMap.Map | Map;
  private sceneService: ISceneService;
  private mapService: IMapService;
  private controlService: IControlService;
@ -73,7 +73,6 @@ class Scene {

  public constructor(config: IMapConfig & IRenderConfig) {
    const { type = MapType.amap } = config;
-
    // 根据用户传入参数绑定地图服务
    let mapServiceImpl: new (...args: any[]) => IMapService;
    if (type === MapType.mapbox) {
@ -104,7 +103,7 @@ class Scene {
    this.mapService = container.get<IMapService>(TYPES.IMapService);
    this.iconService = container.get<IIconService>(TYPES.IIconService);
    this.controlService = container.get<IControlService>(TYPES.IControlService);
-    this.map = this.mapService.map; // 暴露原生map方法
+    // this.map = this.mapService.map; // 暴露原生map方法
    mapType = this.mapService.getType();
  }

@ -113,6 +112,10 @@ class Scene {
    //
  }

+  public get map() {
+    return this.mapService.map;
+  }
+
  public addLayer(layer: ILayer): void {
    this.sceneService.addLayer(layer);
  }
--- a/site/locale.json
+++ b/site/locale.json
--- a/site/pages/index.en.ts
+++ b/site/pages/index.en.ts
@ -0,0 +1,2 @@
+import Index from './index.zh';
+export default Index;
--- a/site/pages/index.zh.ts
+++ b/site/pages/index.zh.ts
@ -0,0 +1,5 @@
+const IndexPage = () => {
+  return 'test';
+};
+
+export default IndexPage;
--- a/stories/Animation/components/Polygon.tsx
+++ b/stories/Animation/components/Polygon.tsx
@ -56,7 +56,7 @@ export default class Mapbox extends React.Component {
      ])
      .shape('fill')
      .style({
-        opacity: 0.8,
+        opacity: 0.3,
      });
    scene.addLayer(layer);
    scene.render();
--- a/stories/Layers/components/Point.tsx
+++ b/stories/Layers/components/Point.tsx
@ -53,7 +53,11 @@ export default class Point3D extends React.Component {
        'rhombus',
        'vesica',
      ])
-      .size('scalerank', [2, 4, 6, 8, 10]);
+      .size('scalerank', [5,10])
+      .style({
+        opacity: 1.0
+      })
+      ;
    scene.addLayer(pointLayer);
    console.log(pointLayer);
    scene.render();
--- a/stories/Layers/components/heatMap.tsx
+++ b/stories/Layers/components/heatMap.tsx
@ -23,7 +23,7 @@ export default class HeatMapLayerDemo extends React.Component {
      zoom: 2,
    });
    const layer = new HeatMapLayer({
-      enableTAA: true,
+      enableTAA: false,
    });
    layer
      .source(await response.json())
@ -31,10 +31,9 @@ export default class HeatMapLayerDemo extends React.Component {
      .style({
        intensity: 2,
        radius: 20,
-        opacity: 0.5,
+        opacity: 0.6,
        rampColors: {
          colors: [
-            'rgba(0,0,0,0)',
            '#2E8AE6',
            '#69D1AB',
            '#DAF291',
@ -42,7 +41,7 @@ export default class HeatMapLayerDemo extends React.Component {
            '#FF7A45',
            '#CF1D49',
          ],
-          positions: [0, 0.1, 0.2, 0.4, 0.6, 0.8, 1.0],
+          positions: [0,0.2, 0.4, 0.6, 0.8, 1.0],
        },
      });
    scene.addLayer(layer);
--- a/stories/Layers/components/pointImage.tsx
+++ b/stories/Layers/components/pointImage.tsx
@ -1,4 +1,4 @@
-import { PointImageLayer } from '@l7/layers';
+import { PointImageLayer, PointLayer } from '@l7/layers';
 import { Scene } from '@l7/scene';
 import * as React from 'react';
 import data from '../data/data.json';
@ -19,19 +19,6 @@ export default class PointImage extends React.Component {
      zoom: 1,
    });
    const pointLayer = new PointImageLayer({});
-    const p1 = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          properties: {},
-          geometry: {
-            type: 'Point',
-            coordinates: [83.671875, 44.84029065139799],
-          },
-        },
-      ],
-    };
    scene.addImage(
      '00',
      'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ',
@ -40,6 +27,17 @@ export default class PointImage extends React.Component {
      .source(data)
      .shape('00')
      .size(30);
+    const pointLayer2 = new PointLayer({})
+      .source(data)
+      .shape('circle')
+      .size(8)
+      .color('red')
+      .style({
+        opacity: 1.0,
+        strokeWidth: 2,
+        strokeColor: '#fff',
+      });
+    scene.addLayer(pointLayer2);
    scene.addLayer(pointLayer);
    scene.render();
    this.scene = scene;
--- a/tslint.json
+++ b/tslint.json
@ -17,5 +17,8 @@
    "no-bitwise": false,
    "object-literal-sort-keys": false,
    "no-implicit-dependencies": false
+  },
+  "globals": {
+    "AMap": true
  }
 }
--- a/tslint.prod.json
+++ b/tslint.prod.json
@ -6,4 +6,4 @@
  "linterOptions": {
    "exclude": ["**/*.d.ts", "**/*.{test,story}.ts{,x}"]
  }
-}
+}