feat(add l7 site): add websites

This commit is contained in:
thinkinggis 2019-11-06 11:57:42 +08:00
parent d49ba3ee42
commit a32dc230a0
74 changed files with 12777 additions and 115 deletions

5
.eslintrc Executable file
View File

@ -0,0 +1,5 @@
{
"globals": {
"AMap": true
}
}

1
.gitignore vendored
View File

@ -67,3 +67,4 @@ jspm_packages/
lib/
.DS_Store
public

4
.npmrc Normal file
View File

@ -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

View File

@ -23,6 +23,13 @@ yarn storybook
yarn commit
```
## view doc example
```bash
npm start
```
visit http://localhost:8000/
## Add Package
创建一个新的 package

View File

@ -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: [
[

View File

@ -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:

6
docs/API/L7.md Normal file
View File

@ -0,0 +1,6 @@
---
title: 简介
order: 0
redirect_from:
- /zh/docs/API
---

321
docs/API/Scene.md Normal file
View File

@ -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',()=>{}) // 地图容器大小改变事件
```

View File

@ -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

View File

@ -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);
```

View File

@ -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

View File

@ -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数据

View File

@ -0,0 +1,8 @@
---
title: 快速上手
order: 0
redirect_from:
- /zh/docs/tutorial
---
内容

View File

@ -0,0 +1,7 @@
---
title: 简介
order: 1
redirect_from:
- /zh/docs/specification
---
L7 地理空间可视化设计语言

View File

@ -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
}]

View File

@ -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();
});

View File

@ -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"
}
]
}

View File

@ -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();
});

View File

@ -0,0 +1,11 @@
---
title: 气泡图
order: 0
redirect_from:
- /zh/examples
---
图表的基本描述。
### 何时使用

View File

@ -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);

View File

@ -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();

View File

@ -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"
}
]
}

View File

@ -0,0 +1,8 @@
---
title: Scene
order: 0
---
初始 L7 地图实例
### 何时使用

2
gatsby-browser.js Normal file
View File

@ -0,0 +1,2 @@
window.scene = require('@l7/scene');
window.layers= require('@l7/layers')

99
gatsby-config.js Normal file
View File

@ -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"/>'
},
};

11189
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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",

View File

@ -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);

View File

@ -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);
}
}
}

View File

@ -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:

View File

@ -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() {

View File

@ -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);
}

View File

@ -121,3 +121,13 @@ vec4 project_common_position_to_clipspace(vec4 position) {
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;
}

View File

@ -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,
});
}

View File

@ -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,

View File

@ -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,

View File

@ -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;
}

View File

@ -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));
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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,
},
}),

View File

@ -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,
},
}),

View File

@ -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,
},
}),
);

View File

@ -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;
}

View File

@ -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,
},
}),
);

View File

@ -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,

View File

@ -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,
},
},
}),
];
}

View File

@ -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,
},
}),
);

View File

@ -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,
},
}),
);

View File

@ -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,
},
}),
);

View File

@ -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);
}

View File

@ -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);
}

View File

@ -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,
},
}),

View File

@ -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,

View File

@ -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;
}

View File

@ -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;
}
}

View File

@ -0,0 +1,6 @@
export const MapTheme: {
[key: string]: any;
} = {
dark: 'amap://styles/ba3e9759545cd618392ef073c0dfda8c?isPublic=true',
light: 'amap://styles/a80c558f91b29cf56fa47f895fb1773c?isPublic=true',
};

View File

@ -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;
}
}

View File

@ -0,0 +1,6 @@
export const MapTheme: {
[key: string]: any;
} = {
light: 'mapbox://styles/mapbox/light-v10',
dark: 'mapbox://styles/mapbox/dark-v10',
};

View File

@ -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);
}

View File

@ -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);
}

0
site/locale.json Normal file
View File

2
site/pages/index.en.ts Normal file
View File

@ -0,0 +1,2 @@
import Index from './index.zh';
export default Index;

5
site/pages/index.zh.ts Normal file
View File

@ -0,0 +1,5 @@
const IndexPage = () => {
return 'test';
};
export default IndexPage;

View File

@ -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();

View File

@ -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();

View File

@ -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);

View File

@ -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;

View File

@ -17,5 +17,8 @@
"no-bitwise": false,
"object-literal-sort-keys": false,
"no-implicit-dependencies": false
},
"globals": {
"AMap": true
}
}