p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(layer): heatmap layer grid无法渲染squareColumn 3D图形问题 

fix #472
This commit is contained in:
yy 2020-08-20 17:36:17 +08:00
parent 64145d3d7b
commit 0a657bd505
40 changed files with 1219 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/api/district/baselayer.en.md
View File

@ -23,7 +23,7 @@ order: 2
- visible 地图是否可见
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级
- showBorder `boolean` 是否显示国界线，默认显示，不建议不显示
- simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约 111km，数字越大精度越低。参考设置数据 0.01
- label 标注配置项 支持常量，不支持数据映射

2
docs/api/district/baselayer.zh.md
View File

@ -24,7 +24,7 @@ order: 2
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
- simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约 111km，数字越大精度越低。参考设置数据 0.01
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级
- label 标注配置项 支持常量，不支持数据映射
- enable `boolean` 是否显示标注

2
docs/api/district/start.en.md
View File

@ -83,7 +83,7 @@ District 支持下面几种图
- data `Array` 属性数据用于可视化渲染
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级
- label 标注配置项 支持常量，不支持数据映射
- enable `boolean` 是否显示标注
- color 标注字体颜色 常量

19
docs/api/scene.en.md
View File

@ -247,6 +247,25 @@ scene.setZoomAndCenter(zoom, center);
- zoom {number}
- center {LngLat}
### setMapStatus
参数 :
```javascript
IStatusOptions {
showIndoorMap: boolean;
resizeEnable: boolean;
dragEnable: boolean;
keyboardEnable: boolean;
doubleClickZoom: boolean;
zoomEnable: boolean;
rotateEnable: boolean;
```
```javascript
scene.setMapStatus({ dragEnable: false });
```
### setRotation
设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]

35
docs/api/scene.zh.md
View File

@ -275,22 +275,6 @@ scene.setRotation(rotation);
参数： `rotation` {number}
### setMapStatus
设置地图交互状态
参数 `IStatusOptions`
```ts
IStatusOptions {
dragEnable: boolean; //是否允许地图拖拽
keyboardEnable: boolean; // 是否允许形键盘事件
doubleClickZoom: boolean; // 双击放大
zoomEnable: boolean; // 滚动缩放
rotateEnable: boolean; // 旋转
}
```
### zoomIn
地图放大一级
@ -341,8 +325,25 @@ scene.panBy(x, y);
scene.setPitch(pitch);
```
### setMapStatus
参数 :
```javascript
IStatusOptions {
showIndoorMap: boolean;
resizeEnable: boolean;
dragEnable: boolean;
keyboardEnable: boolean;
doubleClickZoom: boolean;
zoomEnable: boolean;
rotateEnable: boolean;
```
```javascript
scene.setMapStatus({ dragEnable: false });
```
- `pitch` {number}
### fitBounds
@ -469,4 +470,4 @@ scene.on('dragend', (ev) => {}); //停止拖拽地图时触发。如地图有拖
- mapbox https://docs.mapbox.com/mapbox-gl-js/api/#map
2. 加载完成后设置
调用 scene 的 [setMapStatus](./scene/#setMapStatus) 方法
调用 scene 的 [setMapStatus](./scene/#setmapstatus) 方法

2
examples/district/basic/API.en.md
View File

@ -42,7 +42,7 @@ District 支持下面几种图
- visible 地图是否可见
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级
- showBorder `boolean` 是否显示国界线，默认显示，不建议不显示
- simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约111km，数字越大精度越低。参考设置数据 0.01
- label 标注配置项 支持常量，不支持数据映射

2
examples/district/basic/API.zh.md
View File

@ -42,7 +42,7 @@ District 支持下面几种图
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
- showBorder `boolean` 是否显示国界线，默认显示，不建议不显示
- simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约111km，数字越大精度越低。参考设置数据 0.01
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级
- label 标注配置项 支持常量，不支持数据映射
- enable `boolean` 是否显示标注
- color 标注字体颜色 常量

2
examples/district/bubble/API.en.md
View File

@ -41,7 +41,7 @@ District 支持下面几种图
- data `Array` 属性数据用于可视化渲染
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
对照表
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级
- label 标注配置项 支持常量，不支持数据映射
- enable `boolean` 是否显示标注
- color 标注字体颜色 常量

2
examples/district/bubble/API.zh.md
View File

@ -41,7 +41,7 @@ District 支持下面几种图
- data `Array` 属性数据用于可视化渲染
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
对照表
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：县级
- label 标注配置项 支持常量，不支持数据映射
- enable `boolean` 是否显示标注
- color 标注字体颜色 常量

2
lerna.json
View File

@ -14,7 +14,7 @@
"message": "chore: publish"
}
},
"version": "2.2.28",
"version": "2.2.32",
"npmClient": "yarn",
"useWorkspaces": true,
"publishConfig": {

4
packages/boundary/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-district",
"version": "2.2.28",
"version": "2.2.32",
"description": "L7 district moudules",
"keywords": [],
"author": "thinkinggis <lzx199065@gmail.com>",
@ -35,7 +35,7 @@
"sync": "tnpm sync"
},
"dependencies": {
"@antv/l7": "2.2.28",
"@antv/l7": "2.2.32",
"@babel/runtime": "^7.7.7",
"@turf/circle": "^6.0.1",
"@turf/distance": "^6.0.1",

2
packages/boundary/src/layer/baseLayer.ts
View File

@ -66,7 +66,7 @@ export default class BaseLayer extends EventEmitter {
}
public updateData(
newData: Array<{ [key: string]: any }>,
newData?: Array<{ [key: string]: any }>,
joinByField?: [string, string],
) {
this.setOption({

7
packages/boundary/src/layer/drillDown.ts
View File

@ -62,6 +62,7 @@ export default class DrillDownLayer {
}
public addCountryEvent() {
const { drillDownTriggerEvent } = this.options;
// 省级下钻到市
this.provinceLayer.fillLayer.on(
drillDownTriggerEvent as string,
(e: any) => {
@ -102,7 +103,7 @@ export default class DrillDownLayer {
public showProvinceView(
adcode: adcodeType,
newData: Array<{ [key: string]: any }> = [],
newData?: Array<{ [key: string]: any }>,
joinByField?: [string, string],
) {
this.cityLayer.show();
@ -113,7 +114,7 @@ export default class DrillDownLayer {
}
public showCityView(
code: adcodeType,
newData: Array<{ [key: string]: any }> = [],
newData?: Array<{ [key: string]: any }>,
joinByField?: [string, string],
) {
this.countyLayer.show();
@ -149,7 +150,7 @@ export default class DrillDownLayer {
}
public drillDown(
adcode: adcodeType,
newData: Array<{ [key: string]: any }> = [],
newData?: Array<{ [key: string]: any }>,
joinByField?: [string, string],
) {
const { drillDepth } = this.options;

2
packages/boundary/src/layer/province.ts
View File

@ -27,7 +27,7 @@ export default class ProvinceLayer extends BaseLayer {
// 通过adcode 更新
public updateDistrict(
adcode: adcodeType,
newData: Array<{ [key: string]: any }> = [],
newData?: Array<{ [key: string]: any }>,
joinByField?: [string, string],
) {
if (!adcode && Array.isArray(adcode) && adcode.length === 0) {

6
packages/component/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-component",
"version": "2.2.28",
"version": "2.2.32",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,8 +25,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "2.2.28",
"@antv/l7-utils": "2.2.28",
"@antv/l7-core": "2.2.32",
"@antv/l7-utils": "2.2.32",
"@babel/runtime": "^7.7.7",
"eventemitter3": "^4.0.0",
"inversify": "^5.0.1",

4
packages/core/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-core",
"version": "2.2.28",
"version": "2.2.32",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,7 +24,7 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-utils": "2.2.28",
"@antv/l7-utils": "2.2.32",
"@babel/runtime": "^7.7.7",
"@mapbox/tiny-sdf": "^1.1.1",
"ajv": "^6.10.2",

4
packages/draw/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-draw",
"version": "2.2.28",
"version": "2.2.32",
"description": "L7 Draw moudules",
"keywords": [],
"author": "thinkinggis <lzx199065@gmail.com>",
@ -36,7 +36,7 @@
"sync": "tnpm sync"
},
"dependencies": {
"@antv/l7": "2.2.28",
"@antv/l7": "2.2.32",
"@babel/runtime": "^7.7.7",
"@turf/circle": "^6.0.1",
"@turf/distance": "^6.0.1",

14
packages/l7/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "2.2.28",
"version": "2.2.32",
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,12 +25,12 @@
"author": "antv",
"license": "MIT",
"dependencies": {
"@antv/l7-component": "2.2.28",
"@antv/l7-core": "2.2.28",
"@antv/l7-layers": "2.2.28",
"@antv/l7-maps": "2.2.28",
"@antv/l7-scene": "2.2.28",
"@antv/l7-utils": "2.2.28",
"@antv/l7-component": "2.2.32",
"@antv/l7-core": "2.2.32",
"@antv/l7-layers": "2.2.32",
"@antv/l7-maps": "2.2.32",
"@antv/l7-scene": "2.2.32",
"@antv/l7-utils": "2.2.32",
"@babel/runtime": "^7.7.7"
},
"gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",

2
packages/l7/src/version.ts
View File

@ -1,2 +1,2 @@
const version = '2.2.28';
const version = '2.2.31';
export { version };

8
packages/layers/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-layers",
"version": "2.2.28",
"version": "2.2.32",
"description": "L7's collection of built-in layers",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,9 +24,9 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-core": "2.2.28",
"@antv/l7-source": "2.2.28",
"@antv/l7-utils": "2.2.28",
"@antv/l7-core": "2.2.32",
"@antv/l7-source": "2.2.32",
"@antv/l7-utils": "2.2.32",
"@babel/runtime": "^7.7.7",
"@mapbox/martini": "^0.2.0",
"@turf/meta": "^6.0.2",

11
packages/layers/src/core/triangulation.ts
View File

@ -71,15 +71,18 @@ export function PointImageTriangulation(feature: IEncodeFeature) {
export function LineTriangulation(feature: IEncodeFeature) {
const { coordinates } = feature;
let path = coordinates as number[][][] | number[][];
if (Array.isArray(path[0][0])) {
path = coordinates[0] as number[][];
if (!Array.isArray(path[0][0])) {
path = [coordinates] as number[][][];
}
const line = new ExtrudePolyline({
dash: true,
join: 'bevel', //
});
const linebuffer = line.extrude(path as number[][]);
path.forEach((item: any) => {
// 处理带洞的多边形
line.extrude(item as number[][]);
});
const linebuffer = line.complex;
return {
vertices: linebuffer.positions, // [ x,y,z, distance, miter,total ]
indices: linebuffer.indices,

23
packages/layers/src/utils/extrude_polyline.ts
View File

@ -41,6 +41,12 @@ export interface IExtrudeLineOption {
thickness: number;
}
export default class ExtrudePolyline {
public complex: {
positions: number[];
indices: number[];
normals: number[];
startIndex: number;
};
private join: string;
private cap: string;
private miterLimit: number;
@ -58,17 +64,15 @@ export default class ExtrudePolyline {
this.miterLimit = opts.miterLimit || 10;
this.thickness = opts.thickness || 1;
this.dash = opts.dash || false;
}
public extrude(points: number[][]) {
const complex: {
positions: number[];
indices: number[];
normals: number[];
} = {
this.complex = {
positions: [],
indices: [],
normals: [],
startIndex: 0,
};
}
public extrude(points: number[][]) {
const complex = this.complex;
if (points.length <= 1) {
return complex;
}
@ -77,7 +81,8 @@ export default class ExtrudePolyline {
this.normal = null;
this.totalDistance = 0;
const total = points.length;
for (let i = 1, count = 0; i < total; i++) {
let count = complex.startIndex;
for (let i = 1; i < total; i++) {
const last = points[i - 1] as vec2;
const cur = points[i] as vec2;
const next = i < points.length - 1 ? points[i + 1] : null;
@ -93,7 +98,7 @@ export default class ExtrudePolyline {
complex.positions[i * 6 + 5] = this.totalDistance;
}
}
complex.startIndex = complex.positions.length / 6;
return complex;
}
private segment(

4
packages/map/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-map",
"version": "2.2.28",
"version": "2.2.32",
"description": "l7 map",
"keywords": [],
"author": "thinkinggis <lzx199065@gmail.com>",
@ -37,7 +37,7 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7-utils": "2.2.28",
"@antv/l7-utils": "2.2.32",
"@mapbox/point-geometry": "^0.1.0",
"@mapbox/unitbezier": "^0.0.0",
"eventemitter3": "^4.0.4",

8
packages/maps/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-maps",
"version": "2.2.28",
"version": "2.2.32",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,9 +26,9 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "2.2.28",
"@antv/l7-utils": "2.2.28",
"@antv/l7-map": "2.2.28",
"@antv/l7-core": "2.2.32",
"@antv/l7-map": "2.2.32",
"@antv/l7-utils": "2.2.32",
"@babel/runtime": "^7.7.7",
"@types/amap-js-api": "^1.4.6",
"gl-matrix": "^3.1.0",

6
packages/react/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-react",
"version": "2.2.28",
"version": "2.2.32",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,8 +25,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7": "2.2.28",
"@antv/l7-maps": "2.2.28",
"@antv/l7": "2.2.32",
"@antv/l7-maps": "2.2.32",
"@babel/runtime": "^7.7.7",
"load-styles": "^2.0.0"
},

29
packages/react/src/component/AMapScene.tsx
View File

@ -32,13 +32,34 @@ const AMapScene = React.memo((props: IMapSceneConig) => {
sceneInstance.destroy();
};
}, []);
// 更新地图样式
useEffect(() => {
if (!scene) {
return;
if (scene && map.style) {
scene.setMapStyle(map.style);
}
scene.setMapStyle(map.style);
}, [map.style]);
}, [JSON.stringify(map.style)]);
useEffect(() => {
if (scene && map.zoom) {
scene.setZoom(map.zoom);
}
}, [map.zoom]);
useEffect(() => {
if (scene && map.center) {
scene.setCenter(map.center);
}
}, [JSON.stringify(map.center)]);
useEffect(() => {
if (scene && map.pitch) {
scene.setPitch(map.pitch);
}
}, [map.pitch]);
useEffect(() => {
if (scene && map.rotation) {
scene.setRotation(map.rotation);
}
}, [map.rotation]);
return (
<SceneContext.Provider value={scene}>
{createElement(

1
packages/react/src/index.ts
View File

@ -2,7 +2,6 @@ export * from './component/SceneContext';
export { default as AMapScene } from './component/AMapScene';
export { default as MapboxScene } from './component/MapboxScene';
export { default as Scene } from './component/Scene';
export * from './component/Layer';
export { default as Control } from './component/Control';
export { default as CustomControl } from './component/CustomControl';
export * from './component/Layer';

4
packages/renderer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-renderer",
"version": "2.2.28",
"version": "2.2.32",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,7 +26,7 @@
"gl": "^4.4.0"
},
"dependencies": {
"@antv/l7-core": "2.2.28",
"@antv/l7-core": "2.2.32",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"lodash": "^4.17.15",

12
packages/scene/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-scene",
"version": "2.2.28",
"version": "2.2.32",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -23,11 +23,11 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-component": "2.2.28",
"@antv/l7-core": "2.2.28",
"@antv/l7-maps": "2.2.28",
"@antv/l7-renderer": "2.2.28",
"@antv/l7-utils": "2.2.28",
"@antv/l7-component": "2.2.32",
"@antv/l7-core": "2.2.32",
"@antv/l7-maps": "2.2.32",
"@antv/l7-renderer": "2.2.32",
"@antv/l7-utils": "2.2.32",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"mapbox-gl": "^1.2.1",

6
packages/source/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-source",
"version": "2.2.28",
"version": "2.2.32",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,8 +26,8 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-core": "2.2.28",
"@antv/l7-utils": "2.2.28",
"@antv/l7-core": "2.2.32",
"@antv/l7-utils": "2.2.32",
"@babel/runtime": "^7.7.7",
"@mapbox/geojson-rewind": "^0.4.0",
"@turf/helpers": "^6.1.4",

24
packages/source/src/parser/geojson.ts
View File

@ -48,23 +48,13 @@ export default function geoJSON(
(currentFeature: Feature<Geometries, Properties>, featureIndex: number) => {
const coord = getCoords(currentFeature);
const id = featureIndex;
if (currentFeature.geometry.type === 'MultiPolygon') {
coord.forEach((coor) => {
const dataItem = {
...currentFeature.properties,
coordinates: [coor],
_id: id,
};
resultData.push(dataItem);
});
} else {
const dataItem: IParseDataItem = {
...currentFeature.properties,
coordinates: coord,
_id: id,
};
resultData.push(dataItem);
}
const dataItem: IParseDataItem = {
...currentFeature.properties,
coordinates: coord,
_id: id,
};
resultData.push(dataItem);
// }
},
);
return {

4
packages/three/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-three",
"version": "2.2.28",
"version": "2.2.32",
"description": "three for L7 ",
"keywords": [
"3D",
@ -44,7 +44,7 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7": "2.2.28",
"@antv/l7": "2.2.32",
"@babel/runtime": "^7.7.7",
"rollup": "^2.3.3",
"rollup-plugin-less": "^1.1.2"

2
packages/utils/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-utils",
"version": "2.2.28",
"version": "2.2.32",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",

22
stories/District/Layer/drillDown.tsx
View File

@ -32,6 +32,25 @@ export default class Country extends React.Component {
this.drillDown = new DrillDownLayer(scene, {
drillDepth: 2,
geoDataLevel: 2,
joinBy: ['NAME_CHN', 'name'],
provinceData: [
{
name: '青海省',
value: '1223',
},
],
cityData: [
{
name: '海东市',
value: '1223e',
},
],
countyData: [
{
name: '平安区',
value: '456',
},
],
fill: {
color: {
field: 'NAME_CHN',
@ -51,11 +70,10 @@ export default class Country extends React.Component {
popup: {
enable: true,
Html: (props) => {
return `<span>${props.NAME_CHN}</span>`;
return `<span>${props.NAME_CHN} ${props.value}</span>`;
},
},
});
console.log(this.drillDown);
});
}

3
stories/Layers/components/gridtest.tsx
View File

@ -19,8 +19,7 @@ export default class HexagonLayerDemo extends React.Component {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'amap://styles/5bc1b736cf9101299e65294181018ccc',
token: '86a00a9bbb3671370aefe8f1c9d22bf8',
token: '8e2254ff173dbf7ff5029e9c9df20bc3',
pitch: 56.499,
center: [114.07737552216226, 22.542656745583486],
rotation: 39.19,

2
stories/Source/Map.stories.tsx
View File

@ -1,5 +1,6 @@
import { storiesOf } from '@storybook/react';
import * as React from 'react';
import HolePolygon from './components/hole'
import Line from './components/line';
import MultiLine from './components/multiLine';
import MultiPolygon from './components/multiPolygon';
@ -11,4 +12,5 @@ storiesOf('数据', module)
.add('multiPolygon', () => <MultiPolygon />, {})
.add('updatePolygon', () => <UpdatePolygon />, {})
.add('MultiLine', () => <MultiLine />, {})
.add('HolePolygon', () => <HolePolygon />, {})
.add('折线', () => <Line />, {});

135
stories/Source/components/hole.tsx Normal file
View File

@ -0,0 +1,135 @@
import { LineLayer, PolygonLayer, Scene } from '@antv/l7';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
function convertRGB2Hex(rgb: number[]) {
return (
'#' + rgb.map((r) => ('0' + Math.floor(r).toString(16)).slice(-2)).join('')
);
}
export default class MultiPolygon extends React.Component {
private gui: dat.GUI;
private $stats: Node;
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const response = await fetch(
// 'https://gw.alipayobjects.com/os/basement_prod/f79485d8-d86f-4bb3-856d-537b586be06e.json',
'https://gw.alipayobjects.com/os/basement_prod/619a6f16-ecb0-4fca-9f9a-b06b67f6f02b.json',
);
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 0,
style: 'dark',
center: [-44.40673828125, -18.375379094031825],
zoom: 12,
}),
});
const data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'MultiPolygon',
coordinates: [
[
[
[110.5224609375, 32.731840896865684],
[113.0712890625, 32.731840896865684],
[113.0712890625, 34.56085936708384],
[110.5224609375, 34.56085936708384],
[110.5224609375, 32.731840896865684],
],
[
[111.26953125, 33.52307880890422],
[111.26953125, 34.03445260967645],
[112.03857421875, 34.03445260967645],
[112.03857421875, 33.52307880890422],
[111.26953125, 33.52307880890422],
],
],
[
[
[115.04882812499999, 34.379712580462204],
[114.9609375, 33.46810795527896],
[115.8837890625, 33.50475906922609],
[115.86181640625001, 34.379712580462204],
[115.04882812499999, 34.379712580462204],
],
],
],
},
},
{
type: 'Feature',
properties: {},
geometry: {
type: 'Polygon',
coordinates: [
[
[113.8623046875, 30.031055426540206],
[116.3232421875, 30.031055426540206],
[116.3232421875, 31.090574094954192],
[113.8623046875, 31.090574094954192],
[113.8623046875, 30.031055426540206],
],
[
[117.26806640625, 32.13840869677249],
[118.36669921875, 32.13840869677249],
[118.36669921875, 32.47269502206151],
[117.26806640625, 32.47269502206151],
[117.26806640625, 32.13840869677249],
],
],
},
},
],
};
// console.log(data.features[5]);
// data.features = data.features.slice(6);
const layer = new PolygonLayer({
autoFit: true,
})
.source(data)
.shape('fill')
.color('red')
.style({
opacity: 1.0,
});
const layer2 = new PolygonLayer({
autoFit: true,
})
.source(data)
.shape('line')
.color('#fff')
.style({
opacity: 1.0,
});
scene.addLayer(layer);
scene.addLayer(layer2);
console.log(layer);
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

24
stories/Source/components/multiLine.tsx
View File

@ -34,18 +34,20 @@ export default class MultiLine extends React.Component {
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
type: 'MultiLineString',
coordinates: [
[90.703125, 34.59704151614417],
[112.8515625, 39.095962936305476],
[117.42187500000001, 29.53522956294847],
[127.61718749999999, 34.016241889667015],
[129.0234375, 40.713955826286046],
[136.40625, 36.87962060502676],
[136.40625, 28.304380682962783],
[130.078125, 25.16517336866393],
[125.5078125, 20.96143961409684],
[130.078125, 17.644022027872726],
[
[142.03125, 65.36683689226321],
[187.03125, 50.28933925329178],
[187.734375, 21.94304553343818],
[155.390625, -4.214943141390639],
],
[
[217.96875, 70.61261423801925],
[257.34375, 51.6180165487737],
[257.34375, -39.90973623453718],
[223.59375, -45.08903556483102],
],
],
},
},

930
stories/Source/components/multiPolygon.tsx
View File

@ -34,55 +34,897 @@ export default class MultiPolygon extends React.Component {
const data = await response.json();
// console.log(data.features[5]);
// data.features = data.features.slice(6);
const layer = new PolygonLayer()
.source({
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'Polygon',
coordinates: [
[
[118.70796203613281, 31.84956532831343],
[118.67019653320312, 31.783049527817784],
[118.70384216308594, 31.757947795369688],
[118.7944793701172, 31.79647323968844],
[118.78829956054686, 31.85073184447357],
[118.70796203613281, 31.84956532831343],
],
],
},
},
{
type: 'Feature',
properties: {},
geometry: {
type: 'Polygon',
coordinates: [
[
[116.96044921875, 29.38217507514529],
[114.41162109375, 30.315987718557867],
[114.78515624999999, 28.43971381702788],
[114.93896484374999, 27.0982539061379],
[116.98242187499999, 27.01998400798257],
[119.20166015625, 28.091366281406945],
[119.17968749999999, 29.38217507514529],
[116.96044921875, 29.38217507514529],
],
],
},
},
],
})
.shape('extrude')
.size(10)
const layer = new PolygonLayer({
autoFit: true,
})
.source(data)
// .source({
// "type": "FeatureCollection",
// "features": [
// {
// "type": "Feature",
// "geometry": {
// "type": "Polygon",
// "coordinates": [
// [
// [
// 120.77635306891,
// 30.724101690221,
// 0
// ],
// [
// 120.7762750691,
// 30.723561703888,
// 0
// ],
// [
// 120.77232406917,
// 30.723597702916,
// 0
// ],
// [
// 120.77109506876,
// 30.7235147052,
// 0
// ],
// [
// 120.77108606943,
// 30.723752699288,
// 0
// ],
// [
// 120.77053906909,
// 30.72372769994,
// 0
// ],
// [
// 120.76927406959,
// 30.723672701042,
// 0
// ],
// [
// 120.76934906903,
// 30.723773698488,
// 0
// ],
// [
// 120.76930006953,
// 30.723889695569,
// 0
// ],
// [
// 120.76871506955,
// 30.723738699561,
// 0
// ],
// [
// 120.76694306899,
// 30.723900695172,
// 0
// ],
// [
// 120.76675406884,
// 30.724130689598,
// 0
// ],
// [
// 120.76683306938,
// 30.731139519176,
// 0
// ],
// [
// 120.76731206906,
// 30.740623287754,
// 0
// ],
// [
// 120.77071906901,
// 30.740450291653,
// 0
// ],
// [
// 120.77472406937,
// 30.740246297132,
// 0
// ],
// [
// 120.77522406896,
// 30.73904932611,
// 0
// ],
// [
// 120.77553406948,
// 30.737387366644,
// 0
// ],
// [
// 120.775429069,
// 30.734489437681,
// 0
// ],
// [
// 120.77559706923,
// 30.732567483938,
// 0
// ],
// [
// 120.7756120693,
// 30.732077496173,
// 0
// ],
// [
// 120.77564206943,
// 30.731053521125,
// 0
// ],
// [
// 120.77558106933,
// 30.729099568997,
// 0
// ],
// [
// 120.77573906952,
// 30.728197590445,
// 0
// ],
// [
// 120.77594006936,
// 30.727771600943,
// 0
// ],
// [
// 120.77571006921,
// 30.727633604778,
// 0
// ],
// [
// 120.77633306882,
// 30.725467657006,
// 0
// ],
// [
// 120.77635706911,
// 30.724694676455,
// 0
// ],
// [
// 120.7762630694,
// 30.724677676787,
// 0
// ],
// [
// 120.77636606933,
// 30.724431682439,
// 0
// ],
// [
// 120.77635306891,
// 30.724101690221,
// 0
// ]
// ],
// [
// [
// 120.78582906896,
// 30.73962431227,
// 0
// ],
// [
// 120.78075606875,
// 30.740043302046,
// 0
// ],
// [
// 120.77649206883,
// 30.740156299253,
// 0
// ],
// [
// 120.77655806895,
// 30.746082154606,
// 0
// ],
// [
// 120.77659106946,
// 30.749030082542,
// 0
// ],
// [
// 120.77668906937,
// 30.755218931839,
// 0
// ],
// [
// 120.7766900692,
// 30.755294929765,
// 0
// ],
// [
// 120.77677806906,
// 30.760002815113,
// 0
// ],
// [
// 120.77684706956,
// 30.763676725444,
// 0
// ],
// [
// 120.77693106922,
// 30.764071715491,
// 0
// ],
// [
// 120.77850006939,
// 30.763877720881,
// 0
// ],
// [
// 120.78000106889,
// 30.763923719559,
// 0
// ],
// [
// 120.78126706911,
// 30.767494632229,
// 0
// ],
// [
// 120.78106206907,
// 30.767561630413,
// 0
// ],
// [
// 120.7771500695,
// 30.76884759917,
// 0
// ],
// [
// 120.77726406931,
// 30.772810502392,
// 0
// ],
// [
// 120.77719506881,
// 30.774495461324,
// 0
// ],
// [
// 120.77506906915,
// 30.777083397968,
// 0
// ],
// [
// 120.77807606907,
// 30.778478364399,
// 0
// ],
// [
// 120.77837906902,
// 30.778518363155,
// 0
// ],
// [
// 120.78929006934,
// 30.783340245421,
// 0
// ],
// [
// 120.79258006912,
// 30.784790210168,
// 0
// ],
// [
// 120.80403806889,
// 30.789838086536,
// 0
// ],
// [
// 120.80657006933,
// 30.785639189419,
// 0
// ],
// [
// 120.80679106927,
// 30.784983205662,
// 0
// ],
// [
// 120.80726206944,
// 30.782574264547,
// 0
// ],
// [
// 120.80872606913,
// 30.779160347623,
// 0
// ],
// [
// 120.80891006926,
// 30.778613361097,
// 0
// ],
// [
// 120.80907106892,
// 30.778645360213,
// 0
// ],
// [
// 120.81142606891,
// 30.779116348975,
// 0
// ],
// [
// 120.81145306957,
// 30.778889354564,
// 0
// ],
// [
// 120.81242706881,
// 30.77915934739,
// 0
// ],
// [
// 120.81266706902,
// 30.778689359075,
// 0
// ],
// [
// 120.81422306877,
// 30.779359342674,
// 0
// ],
// [
// 120.81454406916,
// 30.778939353179,
// 0
// ],
// [
// 120.81465406876,
// 30.77889535443,
// 0
// ],
// [
// 120.81680006941,
// 30.780012327073,
// 0
// ],
// [
// 120.81631606882,
// 30.780578312863,
// 0
// ],
// [
// 120.81904406908,
// 30.782179274046,
// 0
// ],
// [
// 120.81921006876,
// 30.782099275703,
// 0
// ],
// [
// 120.82012306881,
// 30.780940304439,
// 0
// ],
// [
// 120.8222420688,
// 30.779044350724,
// 0
// ],
// [
// 120.82267706899,
// 30.778673359141,
// 0
// ],
// [
// 120.8250490696,
// 30.775960425999,
// 0
// ],
// [
// 120.82709006887,
// 30.773821478205,
// 0
// ],
// [
// 120.82853006917,
// 30.772139519191,
// 0
// ],
// [
// 120.82859706912,
// 30.77195152339,
// 0
// ],
// [
// 120.8260130688,
// 30.770295564052,
// 0
// ],
// [
// 120.82687006877,
// 30.769355587288,
// 0
// ],
// [
// 120.82775306957,
// 30.768551606328,
// 0
// ],
// [
// 120.82840006948,
// 30.767794625092,
// 0
// ],
// [
// 120.82924806922,
// 30.767183639911,
// 0
// ],
// [
// 120.82956306887,
// 30.767025643638,
// 0
// ],
// [
// 120.8300850691,
// 30.766907646828,
// 0
// ],
// [
// 120.83112206899,
// 30.767073642299,
// 0
// ],
// [
// 120.83186506916,
// 30.767103642221,
// 0
// ],
// [
// 120.83211206903,
// 30.766588654343,
// 0
// ],
// [
// 120.83212506945,
// 30.76642065885,
// 0
// ],
// [
// 120.83096706918,
// 30.766113666077,
// 0
// ],
// [
// 120.830691069,
// 30.765966669795,
// 0
// ],
// [
// 120.8318870689,
// 30.764626702071,
// 0
// ],
// [
// 120.83182506897,
// 30.764508705408,
// 0
// ],
// [
// 120.83101306921,
// 30.764081715521,
// 0
// ],
// [
// 120.83121306923,
// 30.76358172742,
// 0
// ],
// [
// 120.83109206885,
// 30.763485730451,
// 0
// ],
// [
// 120.83162406913,
// 30.76276574743,
// 0
// ],
// [
// 120.83128806957,
// 30.762583751955,
// 0
// ],
// [
// 120.83173806893,
// 30.761936768301,
// 0
// ],
// [
// 120.83159806919,
// 30.761865769958,
// 0
// ],
// [
// 120.83158806915,
// 30.76176977205,
// 0
// ],
// [
// 120.83195806904,
// 30.761185786185,
// 0
// ],
// [
// 120.83188806872,
// 30.760991791162,
// 0
// ],
// [
// 120.83238006882,
// 30.759888817599,
// 0
// ],
// [
// 120.83255406889,
// 30.759835819366,
// 0
// ],
// [
// 120.83485306881,
// 30.760244809563,
// 0
// ],
// [
// 120.83522506925,
// 30.760230809735,
// 0
// ],
// [
// 120.83541906942,
// 30.760145811837,
// 0
// ],
// [
// 120.83580606904,
// 30.759772820627,
// 0
// ],
// [
// 120.83672306928,
// 30.75859084962,
// 0
// ],
// [
// 120.8370330689,
// 30.75795286482,
// 0
// ],
// [
// 120.83712906916,
// 30.757575874094,
// 0
// ],
// [
// 120.83731706948,
// 30.757475877026,
// 0
// ],
// [
// 120.83784206919,
// 30.75752287536,
// 0
// ],
// [
// 120.83800606922,
// 30.757456877594,
// 0
// ],
// [
// 120.83843806904,
// 30.755851916172,
// 0
// ],
// [
// 120.83828506888,
// 30.755732919085,
// 0
// ],
// [
// 120.83816606905,
// 30.755780917973,
// 0
// ],
// [
// 120.83806606949,
// 30.755974913461,
// 0
// ],
// [
// 120.83687606944,
// 30.755997912761,
// 0
// ],
// [
// 120.83656306945,
// 30.754973937972,
// 0
// ],
// [
// 120.83672906913,
// 30.754009961081,
// 0
// ],
// [
// 120.83664706911,
// 30.753562972564,
// 0
// ],
// [
// 120.83587106933,
// 30.752338002178,
// 0
// ],
// [
// 120.83373706928,
// 30.74996805985,
// 0
// ],
// [
// 120.83359406916,
// 30.749953060308,
// 0
// ],
// [
// 120.83324306953,
// 30.750084057055,
// 0
// ],
// [
// 120.83158306912,
// 30.750821038877,
// 0
// ],
// [
// 120.83163306935,
// 30.751102032064,
// 0
// ],
// [
// 120.83138306911,
// 30.751146031168,
// 0
// ],
// [
// 120.83073506938,
// 30.749989059514,
// 0
// ],
// [
// 120.83072506933,
// 30.749820063853,
// 0
// ],
// [
// 120.83233206914,
// 30.74894908466,
// 0
// ],
// [
// 120.83250906959,
// 30.749030082542,
// 0
// ],
// [
// 120.83267106907,
// 30.748864086839,
// 0
// ],
// [
// 120.83239006886,
// 30.748490096151,
// 0
// ],
// [
// 120.83134006945,
// 30.74767411564,
// 0
// ],
// [
// 120.83089006919,
// 30.747915109638,
// 0
// ],
// [
// 120.82928206956,
// 30.748447097158,
// 0
// ],
// [
// 120.82681206904,
// 30.749072081502,
// 0
// ],
// [
// 120.82493606872,
// 30.749914061024,
// 0
// ],
// [
// 120.82305806876,
// 30.750518046341,
// 0
// ],
// [
// 120.82194506959,
// 30.750846038145,
// 0
// ],
// [
// 120.82183906929,
// 30.75081403905,
// 0
// ],
// [
// 120.81857006943,
// 30.751646019006,
// 0
// ],
// [
// 120.81729506898,
// 30.752173006514,
// 0
// ],
// [
// 120.81635906937,
// 30.752413000324,
// 0
// ],
// [
// 120.81493806934,
// 30.752386001215,
// 0
// ],
// [
// 120.8143710689,
// 30.750924036714,
// 0
// ],
// [
// 120.80927506913,
// 30.752456998829,
// 0
// ],
// [
// 120.80860206929,
// 30.752373001526,
// 0
// ],
// [
// 120.80814106915,
// 30.751777015766,
// 0
// ],
// [
// 120.8080980695,
// 30.742568240055,
// 0
// ],
// [
// 120.80808006905,
// 30.738753333537,
// 0
// ],
// [
// 120.80803706939,
// 30.734523436641,
// 0
// ],
// [
// 120.80777306891,
// 30.728363587009,
// 0
// ],
// [
// 120.80781406891,
// 30.727287612728,
// 0
// ],
// [
// 120.80764106956,
// 30.726292637257,
// 0
// ],
// [
// 120.80756106919,
// 30.724460681717,
// 0
// ],
// [
// 120.80576006922,
// 30.723453706722,
// 0
// ],
// [
// 120.805084069,
// 30.723696700368,
// 0
// ],
// [
// 120.80054706927,
// 30.723970693668,
// 0
// ],
// [
// 120.80055206929,
// 30.728390585902,
// 0
// ],
// [
// 120.80135606956,
// 30.734556435666,
// 0
// ],
// [
// 120.80156006887,
// 30.736018399964,
// 0
// ],
// [
// 120.80184706893,
// 30.738810332081,
// 0
// ],
// [
// 120.80186006935,
// 30.738939328783,
// 0
// ],
// [
// 120.79892806887,
// 30.738954328496,
// 0
// ],
// [
// 120.79595506929,
// 30.738970328085,
// 0
// ],
// [
// 120.79431506897,
// 30.738979327756,
// 0
// ],
// [
// 120.79089806897,
// 30.739133324223,
// 0
// ],
// [
// 120.78582906896,
// 30.73962431227,
// 0
// ]
// ]
// ]
// },
// "properties": {
// "name": "东栅街道"
// }
// }
// ]
// })
.shape('fill')
.color('red')
.style({
opacity: 1.0,
});
scene.addLayer(layer);
console.log(layer);
}
public render() {

14
yarn.lock
View File

@ -6330,6 +6330,11 @@ arrify@^2.0.1:
resolved "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
as-number@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/as-number/-/as-number-1.0.0.tgz#acb27e34f8f9d8ab0da9e376f3b8959860f80a66"
integrity sha1-rLJ+NPj52KsNqeN287iVmGD4CmY=
asap@^2.0.0, asap@~2.0.3, asap@~2.0.6:
version "2.0.6"
resolved "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
@ -11575,6 +11580,15 @@ extract-zip@^1.0.3:
mkdirp "^0.5.4"
yauzl "^2.10.0"
extrude-polyline@^1.0.6:
version "1.0.6"
resolved "https://registry.npmjs.org/extrude-polyline/-/extrude-polyline-1.0.6.tgz#7e6afe1f349a4182fa3f61a00d93979b95f18b20"
integrity sha1-fmr+HzSaQYL6P2GgDZOXm5XxiyA=
dependencies:
as-number "^1.0.0"
gl-vec2 "^1.0.0"
polyline-miter-util "^1.0.1"
extsprintf@1.3.0:
version "1.3.0"
resolved "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"