mirror of https://gitee.com/antv-l7/antv-l7
@thinkinggis
GitHub
commit
6718157a48
|
|
@ -145,42 +145,42 @@ layer.source(data, {
|
|||
- targetField 关联的地理数据字段名称
|
||||
|
||||
```javascript
|
||||
const data = {
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
const data = {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {
|
||||
"city":'北京'
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
city: '北京',
|
||||
},
|
||||
"geometry": {
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
geometry: {},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const data2 = [
|
||||
{
|
||||
name:'北京',
|
||||
value: 13
|
||||
name: '北京',
|
||||
value: 13,
|
||||
},
|
||||
{
|
||||
name:'天津',
|
||||
value: 20
|
||||
}
|
||||
]
|
||||
name: '天津',
|
||||
value: 20,
|
||||
},
|
||||
];
|
||||
// data 是地理数据
|
||||
// data2 属性数据或者业务数据
|
||||
|
||||
// 通过join方法我们就可以将两个数据连接到一起
|
||||
|
||||
layer.source(data,{
|
||||
transforms:[
|
||||
type: 'join'
|
||||
sourceField: 'name' //data1 对应字段名
|
||||
targetField: 'city' // data 对应字段名
|
||||
data: data2,
|
||||
]
|
||||
})
|
||||
.color('value') // 可以采用data1的value字段进行数据到颜色的映射
|
||||
layer
|
||||
.source(data, {
|
||||
transforms: [
|
||||
(type: 'join'),
|
||||
(sourceField: 'name'), //data1 对应字段名
|
||||
(targetField: 'city'), // data 对应字段名
|
||||
(data: data2),
|
||||
],
|
||||
})
|
||||
.color('value'); // 可以采用data1的value字段进行数据到颜色的映射
|
||||
```
|
||||
|
|
|
|||
|
|
@ -147,42 +147,42 @@ layer.source(data, {
|
|||
- targetField 关联的地理数据字段名称
|
||||
|
||||
```javascript
|
||||
const data = {
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
const data = {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {
|
||||
"city":'北京'
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
city: '北京',
|
||||
},
|
||||
"geometry": {
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
geometry: {},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const data2 = [
|
||||
{
|
||||
name:'北京',
|
||||
value: 13
|
||||
name: '北京',
|
||||
value: 13,
|
||||
},
|
||||
{
|
||||
name:'天津',
|
||||
value: 20
|
||||
}
|
||||
]
|
||||
name: '天津',
|
||||
value: 20,
|
||||
},
|
||||
];
|
||||
// data 是地理数据
|
||||
// data2 属性数据或者业务数据
|
||||
|
||||
// 通过join方法我们就可以将两个数据连接到一起
|
||||
|
||||
layer.source(data,{
|
||||
transforms:[
|
||||
type: 'join'
|
||||
sourceField: 'name' //data1 对应字段名
|
||||
targetField: 'city' // data 对应字段名
|
||||
data: data2,
|
||||
]
|
||||
})
|
||||
.color('value') // 可以采用data1的value字段进行数据到颜色的映射
|
||||
layer
|
||||
.source(data, {
|
||||
transforms: [
|
||||
(type: 'join'),
|
||||
(sourceField: 'name'), //data1 对应字段名
|
||||
(targetField: 'city'), // data 对应字段名
|
||||
(data: data2),
|
||||
],
|
||||
})
|
||||
.color('value'); // 可以采用data1的value字段进行数据到颜色的映射
|
||||
```
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
"message": "chore: publish"
|
||||
}
|
||||
},
|
||||
"version": "2.0.15",
|
||||
"version": "2.0.16",
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"publishConfig": {
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
"eslint": "^6.6.0",
|
||||
"eslint-config-egg": "^7.5.1",
|
||||
"eslint-plugin-html": "^6.0.0",
|
||||
"gatsby": "^2.17.7",
|
||||
"gatsby": "2.19.5",
|
||||
"gatsby-plugin-google-analytics": "^2.1.27",
|
||||
"gatsby-remark-prettier": "^1.0.0",
|
||||
"geotiff": "^1.0.0-beta.6",
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
"scripts": {
|
||||
"start": "yarn run site:clean && yarn run site:develop",
|
||||
"site:develop": "cross-env BABEL_ENV=site gatsby develop --open -H 0.0.0.0",
|
||||
"site:build": "yarn run site:clean && cross-env BABEL_ENV=site gatsby build --prefix-paths",
|
||||
"site:build": "yarn run site:clean && cross-env BABEL_ENV=site gatsby build --prefix-paths --no-uglify",
|
||||
"site:clean": "gatsby clean",
|
||||
"site:deploy": "yarn run site:build && gh-pages -d public",
|
||||
"site:publish": "gh-pages -d public",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-component",
|
||||
"version": "2.0.15",
|
||||
"version": "2.0.16",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -24,14 +24,14 @@
|
|||
"author": "lzxue",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.15",
|
||||
"@antv/l7-utils": "^2.0.15",
|
||||
"@antv/l7-core": "^2.0.16",
|
||||
"@antv/l7-utils": "^2.0.16",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"eventemitter3": "^4.0.0",
|
||||
"inversify": "^5.0.1",
|
||||
"load-styles": "^2.0.0"
|
||||
},
|
||||
"gitHead": "9fabb78790428d2025b89fb6146fc555cb1d987d",
|
||||
"gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-core",
|
||||
"version": "2.0.15",
|
||||
"version": "2.0.16",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-utils": "^2.0.15",
|
||||
"@antv/l7-utils": "^2.0.16",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/tiny-sdf": "^1.1.1",
|
||||
"ajv": "^6.10.2",
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
"@types/lodash": "^4.14.138",
|
||||
"@types/viewport-mercator-project": "^6.1.0"
|
||||
},
|
||||
"gitHead": "9fabb78790428d2025b89fb6146fc555cb1d987d",
|
||||
"gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,6 +72,7 @@ export default class LayerService implements ILayerService {
|
|||
//
|
||||
this.alreadyInRendering = true;
|
||||
this.clear();
|
||||
this.updateRenderOrder();
|
||||
this.layers
|
||||
.filter((layer) => layer.inited)
|
||||
.filter((layer) => layer.isVisible())
|
||||
|
|
|
|||
|
|
@ -209,18 +209,18 @@ export default class PixelPickingPass<
|
|||
this.triggerHoverOnLayer(target);
|
||||
this.layer.setCurrentPickId(null);
|
||||
}
|
||||
});
|
||||
|
||||
if (enableHighlight) {
|
||||
this.highlightPickedFeature(pickedColors);
|
||||
}
|
||||
if (
|
||||
enableSelect &&
|
||||
type === 'click' &&
|
||||
pickedColors?.toString() !== [0, 0, 0, 0].toString()
|
||||
) {
|
||||
this.selectFeature(pickedColors);
|
||||
}
|
||||
if (enableHighlight) {
|
||||
this.highlightPickedFeature(pickedColors);
|
||||
}
|
||||
if (
|
||||
enableSelect &&
|
||||
type === 'click' &&
|
||||
pickedColors?.toString() !== [0, 0, 0, 0].toString()
|
||||
) {
|
||||
this.selectFeature(pickedColors);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
private triggerHoverOnLayer(target: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7",
|
||||
"version": "2.0.15",
|
||||
"version": "2.0.16",
|
||||
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -24,14 +24,14 @@
|
|||
"author": "antv",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@antv/l7-component": "^2.0.15",
|
||||
"@antv/l7-core": "^2.0.15",
|
||||
"@antv/l7-layers": "^2.0.15",
|
||||
"@antv/l7-maps": "^2.0.15",
|
||||
"@antv/l7-scene": "^2.0.15",
|
||||
"@antv/l7-component": "^2.0.16",
|
||||
"@antv/l7-core": "^2.0.16",
|
||||
"@antv/l7-layers": "^2.0.16",
|
||||
"@antv/l7-maps": "^2.0.16",
|
||||
"@antv/l7-scene": "^2.0.16",
|
||||
"@babel/runtime": "^7.7.7"
|
||||
},
|
||||
"gitHead": "9fabb78790428d2025b89fb6146fc555cb1d987d",
|
||||
"gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-layers",
|
||||
"version": "2.0.15",
|
||||
"version": "2.0.16",
|
||||
"description": "L7's collection of built-in layers",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -22,9 +22,9 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.15",
|
||||
"@antv/l7-source": "^2.0.15",
|
||||
"@antv/l7-utils": "^2.0.15",
|
||||
"@antv/l7-core": "^2.0.16",
|
||||
"@antv/l7-source": "^2.0.16",
|
||||
"@antv/l7-utils": "^2.0.16",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/martini": "^0.1.0",
|
||||
"@turf/meta": "^6.0.2",
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
"@types/gl-matrix": "^2.4.5",
|
||||
"@types/lodash": "^4.14.138"
|
||||
},
|
||||
"gitHead": "9fabb78790428d2025b89fb6146fc555cb1d987d",
|
||||
"gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -173,6 +173,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
constructor(config: Partial<ILayerConfig & ChildLayerStyleOptions> = {}) {
|
||||
super();
|
||||
this.name = config.name || this.id;
|
||||
this.zIndex = config.zIndex || 0;
|
||||
this.rawConfig = config;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,17 +24,17 @@ uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
|
|||
void main() {
|
||||
gl_FragColor = v_color;
|
||||
// anti-alias
|
||||
float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy)) * u_opacity;
|
||||
// gl_FragColor.a *= blur;
|
||||
float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy));
|
||||
gl_FragColor.a *= blur * u_opacity;
|
||||
|
||||
if(u_aimate.x == Animate) {
|
||||
float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
|
||||
alpha = (alpha + u_aimate.w -1.0) / u_aimate.w;
|
||||
gl_FragColor.a *= alpha * blur;
|
||||
gl_FragColor.a *= alpha;
|
||||
}
|
||||
// dash line
|
||||
if(u_line_type == LineTypeDash) {
|
||||
gl_FragColor.a *= blur * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
|
||||
gl_FragColor.a *=(1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
|
||||
}
|
||||
|
||||
gl_FragColor = filterColor(gl_FragColor);
|
||||
|
|
|
|||
|
|
@ -49,9 +49,7 @@ export default class PixelPickingPlugin implements ILayerPlugin {
|
|||
update: (feature: IEncodeFeature, featureIdx: number) => {
|
||||
// 只有开启拾取才需要 encode
|
||||
const { id } = feature;
|
||||
return enablePicking && layer.isVisible()
|
||||
? encodePickingColor(id as number)
|
||||
: [0, 0, 0];
|
||||
return enablePicking ? encodePickingColor(id as number) : [0, 0, 0];
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -89,13 +89,16 @@ export default class TextModel extends BaseModel {
|
|||
const {
|
||||
fontWeight = 800,
|
||||
fontFamily = 'sans-serif',
|
||||
opacity = 1.0,
|
||||
stroke = '#fff',
|
||||
strokeWidth = 0,
|
||||
strokeOpacity = 1,
|
||||
} = this.layer.getLayerConfig() as IPointTextLayerStyleOptions;
|
||||
this.updateTexture();
|
||||
const { canvas } = this.fontService;
|
||||
return {
|
||||
u_opacity: 1.0,
|
||||
u_opacity: opacity,
|
||||
u_stroke_opacity: strokeOpacity,
|
||||
u_sdf_map: this.texture,
|
||||
u_stroke: rgb2arr(stroke),
|
||||
u_halo_blur: 0.5,
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ uniform sampler2D u_sdf_map;
|
|||
uniform float u_gamma_scale : 0.5;
|
||||
uniform float u_font_size : 24;
|
||||
uniform float u_opacity : 1.0;
|
||||
uniform float u_stroke_opacity: 1.0;
|
||||
uniform vec4 u_stroke : [0, 0, 0, 1];
|
||||
uniform float u_strokeWidth : 2.0;
|
||||
uniform float u_halo_blur : 0.5;
|
||||
|
|
@ -27,6 +28,6 @@ void main() {
|
|||
|
||||
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;
|
||||
gl_FragColor = mix(v_color * u_opacity, u_stroke * u_stroke_opacity, smoothstep(0., 0.5, 1. - dist)) * alpha;
|
||||
gl_FragColor = filterColor(gl_FragColor);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-maps",
|
||||
"version": "2.0.15",
|
||||
"version": "2.0.16",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -23,8 +23,8 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.15",
|
||||
"@antv/l7-utils": "^2.0.15",
|
||||
"@antv/l7-core": "^2.0.16",
|
||||
"@antv/l7-utils": "^2.0.16",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"gl-matrix": "^3.1.0",
|
||||
"inversify": "^5.0.1",
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
"@types/mapbox-gl": "^0.54.3",
|
||||
"@types/viewport-mercator-project": "^6.1.0"
|
||||
},
|
||||
"gitHead": "9fabb78790428d2025b89fb6146fc555cb1d987d",
|
||||
"gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-renderer",
|
||||
"version": "2.0.15",
|
||||
"version": "2.0.16",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -25,14 +25,14 @@
|
|||
"gl": "^4.4.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.15",
|
||||
"@antv/l7-core": "^2.0.16",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"lodash": "^4.17.15",
|
||||
"reflect-metadata": "^0.1.13",
|
||||
"regl": "^1.3.11"
|
||||
},
|
||||
"gitHead": "9fabb78790428d2025b89fb6146fc555cb1d987d",
|
||||
"gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-scene",
|
||||
"version": "2.0.15",
|
||||
"version": "2.0.16",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -22,17 +22,17 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-component": "^2.0.15",
|
||||
"@antv/l7-core": "^2.0.15",
|
||||
"@antv/l7-maps": "^2.0.15",
|
||||
"@antv/l7-renderer": "^2.0.15",
|
||||
"@antv/l7-utils": "^2.0.15",
|
||||
"@antv/l7-component": "^2.0.16",
|
||||
"@antv/l7-core": "^2.0.16",
|
||||
"@antv/l7-maps": "^2.0.16",
|
||||
"@antv/l7-renderer": "^2.0.16",
|
||||
"@antv/l7-utils": "^2.0.16",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"mapbox-gl": "^1.2.1",
|
||||
"reflect-metadata": "^0.1.13"
|
||||
},
|
||||
"gitHead": "9fabb78790428d2025b89fb6146fc555cb1d987d",
|
||||
"gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-source",
|
||||
"version": "2.0.15",
|
||||
"version": "2.0.16",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -24,8 +24,8 @@
|
|||
"author": "lzxue",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.15",
|
||||
"@antv/l7-utils": "^2.0.15",
|
||||
"@antv/l7-core": "^2.0.16",
|
||||
"@antv/l7-utils": "^2.0.16",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/geojson-rewind": "^0.4.0",
|
||||
"@turf/helpers": "^6.1.4",
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
"@types/d3-hexbin": "^0.2.3",
|
||||
"@types/lodash": "^4.14.138"
|
||||
},
|
||||
"gitHead": "9fabb78790428d2025b89fb6146fc555cb1d987d",
|
||||
"gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-utils",
|
||||
"version": "2.0.15",
|
||||
"version": "2.0.16",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
"devDependencies": {
|
||||
"@types/d3-color": "^1.2.2"
|
||||
},
|
||||
"gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26",
|
||||
"gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export default class Arc2DLineDemo extends React.Component {
|
|||
trailLength: 0.4,
|
||||
})
|
||||
.style({
|
||||
opacity: 0.6,
|
||||
opacity: 0.1,
|
||||
});
|
||||
scene.addLayer(lineLayer);
|
||||
scene.render();
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ export default class ArcLineDemo extends React.Component {
|
|||
})
|
||||
.style({
|
||||
lineType: 'dash',
|
||||
opacity: 0.5,
|
||||
});
|
||||
scene.addLayer(lineLayer);
|
||||
scene.render();
|
||||
|
|
|
|||
|
|
@ -36,15 +36,21 @@ export default class LineDemo extends React.Component {
|
|||
.shape('line')
|
||||
.active(true)
|
||||
.color('color', (v) => {
|
||||
return `rgb(${v[0]})`;
|
||||
return `rgb(${v})`;
|
||||
})
|
||||
.animate({
|
||||
enable: true,
|
||||
interval: 0.5,
|
||||
trailLength: 0.4,
|
||||
duration: 4,
|
||||
})
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
});
|
||||
|
||||
lineLayer.on('click',(e)=> {
|
||||
console.log(e);
|
||||
})
|
||||
scene.addLayer(lineLayer);
|
||||
this.scene = scene;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,8 +65,9 @@ export default class TextLayerDemo extends React.Component {
|
|||
const styleOptions = {
|
||||
textAnchor: 'center',
|
||||
strokeWidth: 1,
|
||||
opacity: 1,
|
||||
};
|
||||
const rasterFolder = gui.addFolder('栅格可视化');
|
||||
const rasterFolder = gui.addFolder('文本可视化');
|
||||
rasterFolder
|
||||
.add(styleOptions, 'textAnchor', [
|
||||
'center',
|
||||
|
|
@ -85,6 +86,23 @@ export default class TextLayerDemo extends React.Component {
|
|||
});
|
||||
scene.render();
|
||||
});
|
||||
|
||||
rasterFolder
|
||||
.add(styleOptions, 'strokeWidth', 0, 10)
|
||||
.onChange((strokeWidth: number) => {
|
||||
pointLayer.style({
|
||||
strokeWidth,
|
||||
});
|
||||
scene.render();
|
||||
});
|
||||
rasterFolder
|
||||
.add(styleOptions, 'opacity', 0, 1)
|
||||
.onChange((opacity: number) => {
|
||||
pointLayer.style({
|
||||
opacity,
|
||||
});
|
||||
scene.render();
|
||||
});
|
||||
// });
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,8 @@ export default class DashLineDemo extends React.Component {
|
|||
].reverse(),
|
||||
)
|
||||
.style({
|
||||
lineType: 'dash',
|
||||
// lineType: 'dash',
|
||||
opacity: 0.5,
|
||||
});
|
||||
|
||||
scene.addLayer(lineLayer);
|
||||
|
|
|
|||
Loading…
Reference in New Issue