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

feat: 样式数据映射 1.0

This commit is contained in:
2912401452 2021-06-21 11:13:18 +08:00
parent ca33c7e268
commit cb626e6f59
21 changed files with 1332 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/settings.json vendored
View File

@ -1,3 +1,4 @@
{ {
"liveServer.settings.port": 5501
} }

1
packages/core/src/services/layer/ILayerService.ts
View File

@ -141,7 +141,6 @@ export interface ILayer {
scale(field: string | number | IScaleOptions, cfg?: IScale): ILayer; scale(field: string | number | IScaleOptions, cfg?: IScale): ILayer;
size(field: StyleAttrField, value?: StyleAttributeOption): ILayer; size(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
color(field: StyleAttrField, value?: StyleAttributeOption): ILayer; color(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
// opacity(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
texture(field: StyleAttrField, value?: StyleAttributeOption): ILayer; texture(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
shape(field: StyleAttrField, value?: StyleAttributeOption): ILayer; shape(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
label(field: StyleAttrField, value?: StyleAttributeOption): ILayer; label(field: StyleAttrField, value?: StyleAttributeOption): ILayer;

2
packages/core/src/services/shader/ShaderModuleService.ts
View File

@ -12,6 +12,7 @@ import pickingVert from '../../shaders/picking.vert.glsl';
import project from '../../shaders/project.glsl'; import project from '../../shaders/project.glsl';
import projection from '../../shaders/projection.glsl'; import projection from '../../shaders/projection.glsl';
import sdf2d from '../../shaders/sdf_2d.glsl'; import sdf2d from '../../shaders/sdf_2d.glsl';
// import styleTextureMapping_frag from '../../shaders/styleTextureMapping_frag.glsl'
const precisionRegExp = /precision\s+(high|low|medium)p\s+float/; const precisionRegExp = /precision\s+(high|low|medium)p\s+float/;
const globalDefaultprecision = const globalDefaultprecision =
@ -33,6 +34,7 @@ export default class ShaderModuleService implements IShaderModuleService {
this.registerModule('lighting', { vs: lighting, fs: '' }); this.registerModule('lighting', { vs: lighting, fs: '' });
this.registerModule('light', { vs: light, fs: '' }); this.registerModule('light', { vs: light, fs: '' });
this.registerModule('picking', { vs: pickingVert, fs: pickingFrag }); this.registerModule('picking', { vs: pickingVert, fs: pickingFrag });
// this.registerModule('styleTextureMapping_frag', { vs: '', fs: styleTextureMapping_frag });
} }
public registerModule(moduleName: string, moduleParams: IModuleParams) { public registerModule(moduleName: string, moduleParams: IModuleParams) {

0
packages/core/src/shaders/styleTextureMapping_frag.glsl Normal file
View File

74
packages/l7/demo/circle.html
View File

@ -30,10 +30,16 @@
<script src="../dist/l7-dev.js"></script> <script src="../dist/l7-dev.js"></script>
<script> <script>
console.log(L7); console.log('L7', L7);
const scene = new L7.Scene({ var scene = new L7.Scene({
id: "map", id: "map",
map: new L7.Mapbox({ // map: new L7.Mapbox({
// style: "dark", // 样式URL
// center: [108.6167, 19.1000],
// pitch: 0,
// zoom: 6
// })
map: new L7.GaodeMap({
style: "dark", // 样式URL style: "dark", // 样式URL
center: [108.6167, 19.1000], center: [108.6167, 19.1000],
pitch: 0, pitch: 0,
@ -41,40 +47,40 @@
}) })
}); });
const data = {"list":[{"w":19.1000,"t":24.6000,"s":"海南","l":11,"m":"东方","j":108.6167,"h":"59838"},{"w":20.0000,"t":23.8000,"s":"海南","l":11,"m":"海口","j":110.2500,"h":"59758"},{"w":22.2750,"t":23.6000,"s":"广东","l":12,"m":"珠海","j":113.5669,"h":"59488"},{"w":20.3372,"t":23.4000,"s":"广东","l":12,"m":"徐闻","j":110.1794,"h":"59754"},{"w":19.2089,"t":23.2000,"s":"海南","l":12,"m":"琼海","j":110.4819,"h":"59855"},{"w":21.7358,"t":23.2000,"s":"广东","l":11,"m":"上川岛","j":112.7731,"h":"59673"},{"w":23.3853,"t":23.0000,"s":"广东","l":11,"m":"汕头","j":116.6792,"h":"59316"},{"w":22.5417,"t":23.0000,"s":"广东","l":12,"m":"深圳","j":114.0033,"h":"59493"},{"w":19.5167,"t":22.9000,"s":"海南","l":12,"m":"儋州","j":109.5833,"h":"59845"},{"w":21.1547,"t":22.7000,"s":"广东","l":12,"m":"湛江","j":110.3022,"h":"59658"},{"w":21.4500,"t":22.7000,"s":"广西","l":12,"m":"北海","j":109.1333,"h":"59644"},{"w":22.5000,"t":22.6000,"s":"广东","l":12,"m":"中山","j":113.4000,"h":"59485"},{"w":21.8453,"t":22.6000,"s":"广东","l":12,"m":"阳江","j":111.9783,"h":"59663"},{"w":22.3469,"t":22.6000,"s":"广东","l":12,"m":"信宜","j":110.9250,"h":"59456"},{"w":22.8000,"t":22.5000,"s":"广东","l":12,"m":"汕尾","j":115.3667,"h":"59501"},{"w":23.4275,"t":22.3000,"s":"广东","l":12,"m":"南澳","j":117.0292,"h":"59324"},{"w":22.7100,"t":22.3000,"s":"广东","l":12,"m":"罗定","j":111.6000,"h":"59462"},{"w":19.0333,"t":22.3000,"s":"海南","l":12,"m":"琼中","j":109.8333,"h":"59849"},{"w":21.5458,"t":22.2000,"s":"广东","l":11,"m":"电白","j":110.9886,"h":"59664"},{"w":22.9661,"t":21.9000,"s":"广东","l":12,"m":"东莞","j":113.7389,"h":"59289"},{"w":22.2472,"t":21.8000,"s":"广东","l":12,"m":"台山","j":112.7858,"h":"59478"},{"w":22.9836,"t":21.6000,"s":"广东","l":12,"m":"惠来","j":116.3014,"h":"59317"},{"w":22.9906,"t":21.0000,"s":"广东","l":12,"m":"高要","j":112.4786,"h":"59278"},{"w":23.9000,"t":20.8000,"s":"广西","l":12,"m":"百色","j":106.6000,"h":"59211"},{"w":23.0711,"t":20.4000,"s":"广东","l":12,"m":"惠阳","j":114.3744,"h":"59298"},{"w":23.4497,"t":20.4000,"s":"广东","l":12,"m":"揭西","j":115.8492,"h":"59306"},{"w":23.3353,"t":20.4000,"s":"广东","l":11,"m":"增城","j":113.8275,"h":"59294"},{"w":23.4167,"t":19.9000,"s":"广西","l":12,"m":"那坡","j":105.8333,"h":"59209"},{"w":24.9000,"t":19.7000,"s":"福建","l":11,"m":"崇武","j":118.9167,"h":"59133"},{"w":24.4833,"t":19.7000,"s":"福建","l":12,"m":"厦门","j":118.0667,"h":"59134"},{"w":23.7936,"t":19.6000,"s":"广东","l":12,"m":"河源","j":114.7297,"h":"59293"},{"w":23.7106,"t":19.4000,"s":"广东","l":12,"m":"清远","j":113.0850,"h":"59280"},{"w":23.1000,"t":19.4000,"s":"广西","l":12,"m":"靖西","j":106.4500,"h":"59218"},{"w":23.6000,"t":19.4000,"s":"广西","l":13,"m":"田东","j":107.1167,"h":"59224"},{"w":25.5167,"t":19.2000,"s":"福建","l":12,"m":"平潭","j":119.7833,"h":"58944"},{"w":25.0500,"t":19.2000,"s":"福建","l":12,"m":"龙岩","j":117.0167,"h":"58927"},{"w":23.2100,"t":19.0000,"s":"广东","l":12,"m":"广州","j":113.4822,"h":"59287"},{"w":21.9833,"t":18.9000,"s":"广西","l":12,"m":"钦州","j":108.6000,"h":"59632"}]} var data = {"list":[{"w":19.1000,"t":24.6000,"s":"海南","l":11,"m":"东方","j":108.6167,"h":"59838"},{"w":20.0000,"t":23.8000,"s":"海南","l":11,"m":"海口","j":110.2500,"h":"59758"},{"w":22.2750,"t":23.6000,"s":"广东","l":12,"m":"珠海","j":113.5669,"h":"59488"},{"w":20.3372,"t":23.4000,"s":"广东","l":12,"m":"徐闻","j":110.1794,"h":"59754"},{"w":19.2089,"t":23.2000,"s":"海南","l":12,"m":"琼海","j":110.4819,"h":"59855"},{"w":21.7358,"t":23.2000,"s":"广东","l":11,"m":"上川岛","j":112.7731,"h":"59673"},{"w":23.3853,"t":23.0000,"s":"广东","l":11,"m":"汕头","j":116.6792,"h":"59316"},{"w":22.5417,"t":23.0000,"s":"广东","l":12,"m":"深圳","j":114.0033,"h":"59493"},{"w":19.5167,"t":22.9000,"s":"海南","l":12,"m":"儋州","j":109.5833,"h":"59845"},{"w":21.1547,"t":22.7000,"s":"广东","l":12,"m":"湛江","j":110.3022,"h":"59658"},{"w":21.4500,"t":22.7000,"s":"广西","l":12,"m":"北海","j":109.1333,"h":"59644"},{"w":22.5000,"t":22.6000,"s":"广东","l":12,"m":"中山","j":113.4000,"h":"59485"},{"w":21.8453,"t":22.6000,"s":"广东","l":12,"m":"阳江","j":111.9783,"h":"59663"},{"w":22.3469,"t":22.6000,"s":"广东","l":12,"m":"信宜","j":110.9250,"h":"59456"},{"w":22.8000,"t":22.5000,"s":"广东","l":12,"m":"汕尾","j":115.3667,"h":"59501"},{"w":23.4275,"t":22.3000,"s":"广东","l":12,"m":"南澳","j":117.0292,"h":"59324"},{"w":22.7100,"t":22.3000,"s":"广东","l":12,"m":"罗定","j":111.6000,"h":"59462"},{"w":19.0333,"t":22.3000,"s":"海南","l":12,"m":"琼中","j":109.8333,"h":"59849"},{"w":21.5458,"t":22.2000,"s":"广东","l":11,"m":"电白","j":110.9886,"h":"59664"},{"w":22.9661,"t":21.9000,"s":"广东","l":12,"m":"东莞","j":113.7389,"h":"59289"},{"w":22.2472,"t":21.8000,"s":"广东","l":12,"m":"台山","j":112.7858,"h":"59478"},{"w":22.9836,"t":21.6000,"s":"广东","l":12,"m":"惠来","j":116.3014,"h":"59317"},{"w":22.9906,"t":21.0000,"s":"广东","l":12,"m":"高要","j":112.4786,"h":"59278"},{"w":23.9000,"t":20.8000,"s":"广西","l":12,"m":"百色","j":106.6000,"h":"59211"},{"w":23.0711,"t":20.4000,"s":"广东","l":12,"m":"惠阳","j":114.3744,"h":"59298"},{"w":23.4497,"t":20.4000,"s":"广东","l":12,"m":"揭西","j":115.8492,"h":"59306"},{"w":23.3353,"t":20.4000,"s":"广东","l":11,"m":"增城","j":113.8275,"h":"59294"},{"w":23.4167,"t":19.9000,"s":"广西","l":12,"m":"那坡","j":105.8333,"h":"59209"},{"w":24.9000,"t":19.7000,"s":"福建","l":11,"m":"崇武","j":118.9167,"h":"59133"},{"w":24.4833,"t":19.7000,"s":"福建","l":12,"m":"厦门","j":118.0667,"h":"59134"},{"w":23.7936,"t":19.6000,"s":"广东","l":12,"m":"河源","j":114.7297,"h":"59293"},{"w":23.7106,"t":19.4000,"s":"广东","l":12,"m":"清远","j":113.0850,"h":"59280"},{"w":23.1000,"t":19.4000,"s":"广西","l":12,"m":"靖西","j":106.4500,"h":"59218"},{"w":23.6000,"t":19.4000,"s":"广西","l":13,"m":"田东","j":107.1167,"h":"59224"},{"w":25.5167,"t":19.2000,"s":"福建","l":12,"m":"平潭","j":119.7833,"h":"58944"},{"w":25.0500,"t":19.2000,"s":"福建","l":12,"m":"龙岩","j":117.0167,"h":"58927"},{"w":23.2100,"t":19.0000,"s":"广东","l":12,"m":"广州","j":113.4822,"h":"59287"},{"w":21.9833,"t":18.9000,"s":"广西","l":12,"m":"钦州","j":108.6000,"h":"59632"}]}
scene.on('loaded',function(){ scene.on('loaded',function(){
const pointLayer = new L7.PointLayer({}) // const pointLayer = new L7.PointLayer({})
.source(data.list, { // .source(data.list, {
parser: { // parser: {
type: "json", // type: "json",
x: "j", // x: "j",
y: "w" // y: "w"
} // }
}) // })
.shape("circle") // .shape("circle")
.size(15) // .size(15)
.color("t", [ // .color("t", [
"#094D4A", // "#094D4A",
"#146968", // "#146968",
"#1D7F7E", // "#1D7F7E",
"#289899", // "#289899",
"#34B6B7", // "#34B6B7",
"#4AC5AF", // "#4AC5AF",
"#5FD3A6", // "#5FD3A6",
"#7BE39E", // "#7BE39E",
"#A1EDB8", // "#A1EDB8",
"#CEF8D6" // "#CEF8D6"
]) // ])
.active(true) // .active(true)
.style({ // .style({
opacity: 1.0 // opacity: 1.0
}); // });
scene.addLayer(pointLayer); // scene.addLayer(pointLayer);
pointLayer.on('inited',function(){ // pointLayer.on('inited',function(){
console.log('加载完成'); // console.log('加载完成');
}) // })
scene.render(); scene.render();
}) })

2
packages/l7/demo/dot.html
View File

@ -32,7 +32,7 @@
console.log(L7); console.log(L7);
const scene = new L7.Scene({ const scene = new L7.Scene({
id: "map", id: "map",
map: new L7.Mapbox({ map: new L7.GaodeMap({
style: "dark", // 样式URL style: "dark", // 样式URL
center: [108.6167, 19.1000], center: [108.6167, 19.1000],
pitch: 0, pitch: 0,

261
packages/l7/demo/heatmap.html Normal file
View File

@ -0,0 +1,261 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>L7 IE</title>
<style>
html,
body {
overflow: hidden;
margin: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
cursor:pointer;
}
</style>
<link
href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
rel="stylesheet"
/>
</head>
<body>
<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.3/polyfill.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"></script>
<script src="../dist/l7-dev.js"></script>
<script>
console.log('L7', L7);
const scene = new L7.Scene({
id: "map",
// map: new L7.Mapbox({
// style: "dark", // 样式URL
// center: [108.6167, 19.1000],
// pitch: 0,
// zoom: 6
// })
map: new L7.GaodeMap({
style: "dark", // 样式URL
center: [108.6167, 19.1000],
pitch: 0,
zoom: 6
})
});
const data = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": "ak16994521", "mag": 2.3, "time": 1507425650893, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.5129, 63.1016, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16994519", "mag": 1.7, "time": 1507425289659, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -150.4048, 63.1224, 105.5 ] } },
{ "type": "Feature", "properties": { "id": "ak16994517", "mag": 1.6, "time": 1507424832518, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.3597, 63.0781, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "ci38021336", "mag": 1.42, "time": 1507423898710, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -118.497, 34.299667, 7.64 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2nn", "mag": 4.2, "time": 1507422626990, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -87.6901, 12.0623, 46.41 ] } },
{ "type": "Feature", "properties": { "id": "ak16994510", "mag": 1.6, "time": 1507422449194, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.5053, 63.0719, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2nb", "mag": 4.6, "time": 1507420784440, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -178.4576, -20.2873, 614.26 ] } },
{ "type": "Feature", "properties": { "id": "ak16994298", "mag": 2.4, "time": 1507419370097, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -148.789, 63.1725, 7.5 ] } },
{ "type": "Feature", "properties": { "id": "nc72905861", "mag": 1.39, "time": 1507418785100, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -120.993164, 36.421833, 6.37 ] } },
{ "type": "Feature", "properties": { "id": "ci38021304", "mag": 1.11, "time": 1507418426010, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -117.0155, 33.656333, 12.37 ] } },
{ "type": "Feature", "properties": { "id": "ak16994293", "mag": 1.5, "time": 1507417256497, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.512, 63.0879, 10.8 ] } },
{ "type": "Feature", "properties": { "id": "ak16994287", "mag": 2.0, "time": 1507413903714, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.4378, 63.0933, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16994285", "mag": 1.5, "time": 1507413670029, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -149.6538, 63.2272, 96.8 ] } },
{ "type": "Feature", "properties": { "id": "ak16994283", "mag": 1.4, "time": 1507413587442, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.5325, 63.0844, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16994280", "mag": 1.3, "time": 1507413266231, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -149.4752, 61.8518, 54.3 ] } },
{ "type": "Feature", "properties": { "id": "ak16994278", "mag": 1.8, "time": 1507413195076, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -150.8597, 61.6214, 50.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16994274", "mag": 1.9, "time": 1507412827617, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -149.7142, 62.9656, 93.6 ] } },
{ "type": "Feature", "properties": { "id": "ak16994273", "mag": 1.2, "time": 1507411925999, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.2484, 61.2705, 69.1 ] } },
{ "type": "Feature", "properties": { "id": "ak16994270", "mag": 2.0, "time": 1507411814209, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -152.0732, 65.5942, 14.8 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2ly", "mag": 4.1, "time": 1507411448780, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -90.5445, 13.5146, 54.36 ] } },
{ "type": "Feature", "properties": { "id": "nc72905841", "mag": 1.38, "time": 1507411214450, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -118.819504, 37.605499, 4.14 ] } },
{ "type": "Feature", "properties": { "id": "nc72905836", "mag": 1.4, "time": 1507410206440, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -118.930168, 37.636833, -0.71 ] } },
{ "type": "Feature", "properties": { "id": "ci38021272", "mag": 1.34, "time": 1507408122250, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -117.509167, 34.1555, 16.34 ] } },
{ "type": "Feature", "properties": { "id": "ci38021264", "mag": 1.0, "time": 1507407938100, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -116.792167, 33.5115, 5.16 ] } },
{ "type": "Feature", "properties": { "id": "ak16993963", "mag": 1.4, "time": 1507407100665, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -150.9126, 63.1812, 150.4 ] } },
{ "type": "Feature", "properties": { "id": "hv61936851", "mag": 2.55, "time": 1507406278360, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -155.078659, 19.374167, 2.15 ] } },
{ "type": "Feature", "properties": { "id": "ak16993960", "mag": 1.4, "time": 1507405129739, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -147.3106, 61.5726, 26.9 ] } },
{ "type": "Feature", "properties": { "id": "ak16993952", "mag": 1.7, "time": 1507403679922, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -150.5846, 60.2607, 34.2 ] } },
{ "type": "Feature", "properties": { "id": "ci38021224", "mag": 1.04, "time": 1507401391710, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -116.929, 34.254833, 18.27 ] } },
{ "type": "Feature", "properties": { "id": "ak16993752", "mag": 1.3, "time": 1507401212982, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.5065, 63.0847, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16993746", "mag": 1.3, "time": 1507399350671, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -147.8929, 63.5257, 3.3 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2jk", "mag": 4.6, "time": 1507398878400, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -175.7258, -18.9821, 195.22 ] } },
{ "type": "Feature", "properties": { "id": "ak16993741", "mag": 1.6, "time": 1507398797233, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.3473, 63.0775, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "nc72905766", "mag": 2.64, "time": 1507397278960, "felt": 4, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -121.137497, 36.579834, 7.72 ] } },
{ "type": "Feature", "properties": { "id": "ak16993738", "mag": 1.4, "time": 1507396778206, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.1075, 61.8312, 71.7 ] } },
{ "type": "Feature", "properties": { "id": "ak16993736", "mag": 1.2, "time": 1507396542471, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.3769, 63.0621, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2ii", "mag": 4.3, "time": 1507395765330, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -94.8319, 16.7195, 58.84 ] } },
{ "type": "Feature", "properties": { "id": "uw61339006", "mag": 1.91, "time": 1507395622730, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -120.689833, 47.049167, 5.38 ] } },
{ "type": "Feature", "properties": { "id": "ak16993732", "mag": 1.7, "time": 1507395602456, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.5283, 63.0785, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16993720", "mag": 2.5, "time": 1507394741482, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.6683, 60.7696, 67.1 ] } },
{ "type": "Feature", "properties": { "id": "ak16993714", "mag": 1.6, "time": 1507394402896, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -149.7591, 61.6478, 30.6 ] } },
{ "type": "Feature", "properties": { "id": "ak16993710", "mag": 1.5, "time": 1507393418705, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.3458, 63.0633, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16993699", "mag": 1.6, "time": 1507392875390, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.4669, 63.0675, 3.4 ] } },
{ "type": "Feature", "properties": { "id": "ak16993695", "mag": 1.3, "time": 1507392837463, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.5169, 63.083, 1.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16993692", "mag": 2.3, "time": 1507392657193, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.4771, 63.0742, 4.3 ] } },
{ "type": "Feature", "properties": { "id": "ak16993486", "mag": 4.2, "time": 1507392435159, "felt": 2, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.458, 63.1276, 14.9 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2hz", "mag": 4.3, "time": 1507392287310, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -94.9686, 16.6087, 69.65 ] } },
{ "type": "Feature", "properties": { "id": "nc72905751", "mag": 1.21, "time": 1507391530870, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -119.023666, 37.605335, 1.97 ] } },
{ "type": "Feature", "properties": { "id": "ci38021056", "mag": 1.95, "time": 1507390783500, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -116.793833, 33.493, 3.65 ] } },
{ "type": "Feature", "properties": { "id": "ci38021048", "mag": 1.02, "time": 1507388708760, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -117.225, 34.0335, 0.39 ] } },
{ "type": "Feature", "properties": { "id": "ak16993303", "mag": 1.9, "time": 1507385638408, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -151.0033, 63.2623, 0.9 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2hc", "mag": 4.9, "time": 1507385606770, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -177.3179, -30.4302, 10.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16993301", "mag": 2.1, "time": 1507383291943, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -154.1913, 58.5727, 85.2 ] } },
{ "type": "Feature", "properties": { "id": "uu60251607", "mag": 3.09, "time": 1507383200950, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -113.140503, 38.030666, 7.29 ] } },
{ "type": "Feature", "properties": { "id": "nc72905716", "mag": 1.07, "time": 1507382878240, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -122.765663, 38.789166, 2.09 ] } },
{ "type": "Feature", "properties": { "id": "nc72905711", "mag": 1.17, "time": 1507382428800, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -121.678001, 37.621498, 4.39 ] } },
{ "type": "Feature", "properties": { "id": "ak16993140", "mag": 1.9, "time": 1507381096302, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -148.8813, 63.1738, 75.2 ] } },
{ "type": "Feature", "properties": { "id": "ak16993128", "mag": 1.6, "time": 1507378828395, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -149.531, 61.7978, 14.8 ] } },
{ "type": "Feature", "properties": { "id": "hv61936621", "mag": 1.98, "time": 1507378497820, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -155.423492, 19.223499, 34.62 ] } },
{ "type": "Feature", "properties": { "id": "ak16993119", "mag": 1.5, "time": 1507378014192, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -138.8317, 59.7754, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "nc72905681", "mag": 1.39, "time": 1507377675100, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -122.793999, 38.8255, 2.24 ] } },
{ "type": "Feature", "properties": { "id": "hv61936531", "mag": 2.66, "time": 1507377140600, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -155.32016, 19.338667, 4.3 ] } },
{ "type": "Feature", "properties": { "id": "ak16992960", "mag": 1.9, "time": 1507376759252, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -158.4264, 67.7636, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16992953", "mag": 2.1, "time": 1507376626801, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -136.5725, 59.8372, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2fz", "mag": 4.1, "time": 1507372645200, "felt": 103, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -71.7814, -32.4981, 23.29 ] } },
{ "type": "Feature", "properties": { "id": "nn00608370", "mag": 1.3, "time": 1507370926907, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -115.9711, 36.3094, 7.8 ] } },
{ "type": "Feature", "properties": { "id": "ak16992628", "mag": 1.5, "time": 1507369548317, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -163.8046, 65.9499, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16992625", "mag": 1.4, "time": 1507369466929, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -147.8309, 63.376, 82.0 ] } },
{ "type": "Feature", "properties": { "id": "nc72905641", "mag": 1.22, "time": 1507368529650, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -122.724167, 38.760334, 1.16 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2fc", "mag": 5.1, "time": 1507368374110, "felt": 13, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -77.9778, -1.6647, 147.34 ] } },
{ "type": "Feature", "properties": { "id": "ak16992611", "mag": 2.1, "time": 1507366872675, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -150.3324, 62.9966, 88.4 ] } },
{ "type": "Feature", "properties": { "id": "ak16992607", "mag": 1.8, "time": 1507366536698, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -146.4858, 64.7593, 11.3 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2et", "mag": 4.9, "time": 1507365487800, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -177.7469, -33.0092, 10.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16992603", "mag": 2.2, "time": 1507364931625, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -136.8133, 59.8473, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "ci38020960", "mag": 1.0, "time": 1507363084310, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -116.673833, 33.904333, 35.76 ] } },
{ "type": "Feature", "properties": { "id": "hv61936261", "mag": 1.72, "time": 1507362853030, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -155.382172, 19.23, 34.41 ] } },
{ "type": "Feature", "properties": { "id": "ak16992451", "mag": 1.8, "time": 1507362228460, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -153.427, 66.3947, 5.8 ] } },
{ "type": "Feature", "properties": { "id": "ci38020944", "mag": 1.0, "time": 1507362158010, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -116.457667, 34.326, 2.73 ] } },
{ "type": "Feature", "properties": { "id": "mb80259564", "mag": 1.03, "time": 1507361004730, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -112.529833, 46.865833, 9.91 ] } },
{ "type": "Feature", "properties": { "id": "nc72905606", "mag": 1.19, "time": 1507358854330, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -122.791832, 38.834835, 1.65 ] } },
{ "type": "Feature", "properties": { "id": "nn00608387", "mag": 1.0, "time": 1507358249243, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -118.9071, 38.405, 11.4 ] } },
{ "type": "Feature", "properties": { "id": "ci38020896", "mag": 1.89, "time": 1507358144340, "felt": 2, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -116.793833, 33.486833, 4.21 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2dx", "mag": 4.5, "time": 1507357181260, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ 130.1291, -6.3628, 156.49 ] } },
{ "type": "Feature", "properties": { "id": "se60208171", "mag": 2.4, "time": 1507353902490, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -83.749833, 36.150333, 14.1 ] } },
{ "type": "Feature", "properties": { "id": "nc72905576", "mag": 1.77, "time": 1507352706600, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -120.900833, 36.327168, 6.31 ] } },
{ "type": "Feature", "properties": { "id": "ak16992147", "mag": 1.4, "time": 1507351430424, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -153.0276, 62.5667, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16992146", "mag": 1.8, "time": 1507351047849, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -138.5063, 59.957, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "nc72905556", "mag": 1.77, "time": 1507350586140, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -122.792, 38.834835, 1.77 ] } },
{ "type": "Feature", "properties": { "id": "mb80259559", "mag": 1.46, "time": 1507350177430, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -112.530833, 46.869333, 10.71 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2d1", "mag": 4.7, "time": 1507347862040, "felt": 1, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -69.504, -16.7961, 178.13 ] } },
{ "type": "Feature", "properties": { "id": "nc72905531", "mag": 1.48, "time": 1507346675870, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -118.831169, 37.4585, 2.53 ] } },
{ "type": "Feature", "properties": { "id": "mb80259549", "mag": 1.08, "time": 1507345321240, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -112.516333, 46.8755, 11.43 ] } },
{ "type": "Feature", "properties": { "id": "nc72905521", "mag": 1.46, "time": 1507345267910, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -118.816666, 37.603832, 4.04 ] } },
{ "type": "Feature", "properties": { "id": "ci38020824", "mag": 2.12, "time": 1507344823940, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -116.655333, 34.632, 5.34 ] } },
{ "type": "Feature", "properties": { "id": "ak16991857", "mag": 2.3, "time": 1507344587124, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -177.8808, 51.3254, 31.7 ] } },
{ "type": "Feature", "properties": { "id": "nn00608359", "mag": 1.1, "time": 1507344387447, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -115.1285, 37.4041, 0.5 ] } },
{ "type": "Feature", "properties": { "id": "nc72905511", "mag": 1.27, "time": 1507344302520, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -118.817169, 37.604168, 4.02 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2cx", "mag": 4.9, "time": 1507343887900, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ 69.1471, -23.7671, 10.0 ] } },
{ "type": "Feature", "properties": { "id": "nc72905496", "mag": 1.94, "time": 1507341324260, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -121.101166, 40.842499, 6.01 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2cc", "mag": 5.0, "time": 1507340745260, "felt": null, "tsunami": 1 }, "geometry": { "type": "Point", "coordinates": [ 132.668, 1.1151, 7.01 ] } },
{ "type": "Feature", "properties": { "id": "ci38020800", "mag": 1.46, "time": 1507340726000, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -116.462667, 33.466333, 5.78 ] } },
{ "type": "Feature", "properties": { "id": "ak16991706", "mag": 1.7, "time": 1507339655320, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -141.2596, 60.2328, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16991711", "mag": 1.6, "time": 1507339653625, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -141.2013, 60.2021, 10.5 ] } },
{ "type": "Feature", "properties": { "id": "ak16991704", "mag": 1.7, "time": 1507338343941, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -149.7575, 62.4396, 50.8 ] } },
{ "type": "Feature", "properties": { "id": "ak16991697", "mag": 2.1, "time": 1507336466527, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -152.3178, 60.5797, 88.2 ] } },
{ "type": "Feature", "properties": { "id": "ci38020768", "mag": 1.56, "time": 1507336119080, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -116.460167, 34.3335, 2.89 ] } },
{ "type": "Feature", "properties": { "id": "ci38020760", "mag": 1.22, "time": 1507335982510, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -116.468167, 34.333167, 2.87 ] } },
{ "type": "Feature", "properties": { "id": "ci38020752", "mag": 1.81, "time": 1507335765850, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -116.793, 33.490333, 4.58 ] } },
{ "type": "Feature", "properties": { "id": "ci38020744", "mag": 1.76, "time": 1507335646140, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -118.566333, 35.339667, 7.86 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2c0", "mag": 5.3, "time": 1507335391250, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -178.3171, -33.0297, 10.0 ] } },
{ "type": "Feature", "properties": { "id": "nc72905461", "mag": 1.16, "time": 1507333007350, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -122.795998, 38.826, 2.32 ] } },
{ "type": "Feature", "properties": { "id": "nn00608334", "mag": 1.1, "time": 1507331333919, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -117.1247, 37.3789, 8.2 ] } },
{ "type": "Feature", "properties": { "id": "ak16991557", "mag": 1.4, "time": 1507331263084, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -147.2293, 64.9749, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2ba", "mag": 4.4, "time": 1507331102840, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ 152.3636, -10.0109, 10.0 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2b9", "mag": 4.2, "time": 1507331091160, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ 73.3529, 39.6124, 10.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16991437", "mag": 2.0, "time": 1507330383962, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -152.4583, 60.3395, 72.9 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2av", "mag": 4.3, "time": 1507329021540, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ 138.9649, 43.0121, 217.94 ] } },
{ "type": "Feature", "properties": { "id": "nn00608329", "mag": 1.3, "time": 1507328136999, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -117.1198, 37.3861, 8.7 ] } },
{ "type": "Feature", "properties": { "id": "ci38020720", "mag": 1.45, "time": 1507327306610, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -116.955667, 34.34, -0.29 ] } },
{ "type": "Feature", "properties": { "id": "uw61338531", "mag": 1.37, "time": 1507326914640, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -122.991667, 46.572333, -0.3 ] } },
{ "type": "Feature", "properties": { "id": "nn00608354", "mag": 1.0, "time": 1507326343697, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -120.747, 39.8477, 10.0 ] } },
{ "type": "Feature", "properties": { "id": "nc72905451", "mag": 1.47, "time": 1507326329600, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -120.753833, 39.8485, 6.72 ] } },
{ "type": "Feature", "properties": { "id": "nc72905441", "mag": 1.23, "time": 1507325408690, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -121.127, 36.566667, 9.16 ] } },
{ "type": "Feature", "properties": { "id": "us2000b29t", "mag": 4.5, "time": 1507325144410, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ 145.6471, 17.7456, 196.33 ] } },
{ "type": "Feature", "properties": { "id": "us2000b2ab", "mag": 2.6, "time": 1507324395860, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -108.8949, 32.7663, 5.0 ] } },
{ "type": "Feature", "properties": { "id": "nc72905436", "mag": 1.41, "time": 1507323505830, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -121.155667, 36.5565, 6.94 ] } },
{ "type": "Feature", "properties": { "id": "ci38020712", "mag": 1.19, "time": 1507323492150, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -116.991, 32.578667, 2.62 ] } },
{ "type": "Feature", "properties": { "id": "us2000b289", "mag": 2.4, "time": 1507321230800, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -98.7321, 36.481, 5.37 ] } },
{ "type": "Feature", "properties": { "id": "nc72905431", "mag": 1.0, "time": 1507321021480, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -122.178833, 38.107, -0.02 ] } },
{ "type": "Feature", "properties": { "id": "ak16991182", "mag": 1.0, "time": 1507320721326, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -148.1644, 62.2007, 15.5 ] } },
{ "type": "Feature", "properties": { "id": "ak16991178", "mag": 1.8, "time": 1507320357991, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -150.5804, 63.1717, 121.4 ] } },
{ "type": "Feature", "properties": { "id": "nc72905426", "mag": 1.24, "time": 1507320241050, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -121.688667, 37.5335, 6.91 ] } },
{ "type": "Feature", "properties": { "id": "ci38020680", "mag": 1.5, "time": 1507320090270, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -117.516, 33.860833, 0.62 ] } },
{ "type": "Feature", "properties": { "id": "ak16991069", "mag": 1.8, "time": 1507318145350, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -136.6965, 59.7754, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "us2000b27a", "mag": 2.4, "time": 1507317641850, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -98.2269, 36.6265, 5.07 ] } },
{ "type": "Feature", "properties": { "id": "ak16991058", "mag": 2.6, "time": 1507317554328, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -146.3172, 63.6837, 3.7 ] } },
{ "type": "Feature", "properties": { "id": "ci38020656", "mag": 1.03, "time": 1507317548410, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -117.646667, 36.148333, 0.93 ] } },
{ "type": "Feature", "properties": { "id": "ci38020648", "mag": 1.08, "time": 1507317476900, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -118.1915, 35.0025, -0.87 ] } },
{ "type": "Feature", "properties": { "id": "nc72905416", "mag": 1.19, "time": 1507317386760, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -118.803333, 37.457667, -0.31 ] } },
{ "type": "Feature", "properties": { "id": "uw61338426", "mag": 1.65, "time": 1507316609360, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -121.7105, 43.553333, 7.02 ] } },
{ "type": "Feature", "properties": { "id": "mb80259489", "mag": 1.66, "time": 1507316359200, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -112.477167, 45.9945, -2.0 ] } },
{ "type": "Feature", "properties": { "id": "ci38020624", "mag": 1.22, "time": 1507316271630, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -116.362, 32.941333, 10.15 ] } },
{ "type": "Feature", "properties": { "id": "ak16991011", "mag": 2.0, "time": 1507315584886, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -148.9279, 62.7834, 4.5 ] } },
{ "type": "Feature", "properties": { "id": "us2000b26p", "mag": 4.7, "time": 1507315424010, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ 68.9568, -49.2119, 13.54 ] } },
{ "type": "Feature", "properties": { "id": "uu60251447", "mag": 2.18, "time": 1507314096180, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -111.457, 42.633167, 4.91 ] } },
{ "type": "Feature", "properties": { "id": "nc72905411", "mag": 1.24, "time": 1507313481610, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -121.962333, 37.920333, -0.33 ] } },
{ "type": "Feature", "properties": { "id": "us2000b260", "mag": 4.4, "time": 1507311862190, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ 86.7487, 30.0165, 10.0 ] } },
{ "type": "Feature", "properties": { "id": "ci38020552", "mag": 1.28, "time": 1507311788210, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -118.351667, 35.052833, -1.01 ] } },
{ "type": "Feature", "properties": { "id": "us2000b25h", "mag": 5.5, "time": 1507311683180, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -15.5503, -35.3171, 10.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16990870", "mag": 1.8, "time": 1507310931075, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -149.9372, 62.1214, 48.9 ] } },
{ "type": "Feature", "properties": { "id": "nn00608306", "mag": 1.9, "time": 1507310059424, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -118.6177, 38.5802, 5.9 ] } },
{ "type": "Feature", "properties": { "id": "us2000b24c", "mag": 4.6, "time": 1507309684550, "felt": 2, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ 143.7841, 37.4191, 31.5 ] } },
{ "type": "Feature", "properties": { "id": "mb80259479", "mag": 1.25, "time": 1507309316470, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -112.5305, 46.867167, 12.62 ] } },
{ "type": "Feature", "properties": { "id": "uu60251412", "mag": 2.1, "time": 1507308318150, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -111.460333, 42.602667, 6.75 ] } },
{ "type": "Feature", "properties": { "id": "nc72905346", "mag": 2.33, "time": 1507308237260, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -118.803333, 37.457333, 0.99 ] } },
{ "type": "Feature", "properties": { "id": "ci38020512", "mag": 1.61, "time": 1507308155060, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -116.2815, 35.633833, 6.15 ] } },
{ "type": "Feature", "properties": { "id": "ci38020480", "mag": 1.04, "time": 1507307612510, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -116.314167, 34.0145, 2.75 ] } },
{ "type": "Feature", "properties": { "id": "ak16990671", "mag": 1.6, "time": 1507307067130, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -150.0099, 66.2332, 1.8 ] } },
{ "type": "Feature", "properties": { "id": "nc72905326", "mag": 1.17, "time": 1507305678060, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -122.706, 38.783667, 2.5 ] } },
{ "type": "Feature", "properties": { "id": "mb80259459", "mag": 0.95, "time": 1507305300890, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -112.5315, 46.8575, 12.4 ] } },
{ "type": "Feature", "properties": { "id": "ci38020408", "mag": 1.2, "time": 1507302977930, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -117.019833, 33.876, -0.6 ] } },
{ "type": "Feature", "properties": { "id": "ak16990501", "mag": 2.8, "time": 1507302735109, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -153.2441, 60.1679, 148.9 ] } },
{ "type": "Feature", "properties": { "id": "us2000b20f", "mag": 5.4, "time": 1507301800580, "felt": 169, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ 141.1969, 37.0997, 47.42 ] } },
{ "type": "Feature", "properties": { "id": "ak16990465", "mag": 1.7, "time": 1507301707708, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -156.519, 67.5663, 0.0 ] } },
{ "type": "Feature", "properties": { "id": "ci38020392", "mag": 2.6, "time": 1507301676460, "felt": 1, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -115.894167, 31.614, 5.89 ] } },
{ "type": "Feature", "properties": { "id": "ak16990463", "mag": 1.6, "time": 1507300956103, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -152.1925, 59.8037, 20.0 ] } },
{ "type": "Feature", "properties": { "id": "uu60251397", "mag": 1.18, "time": 1507300478100, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -111.436333, 42.554833, 9.68 ] } },
{ "type": "Feature", "properties": { "id": "nn00608296", "mag": 1.1, "time": 1507299948387, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -119.9267, 39.4223, 8.7 ] } },
{ "type": "Feature", "properties": { "id": "ci38020376", "mag": 1.4, "time": 1507299919340, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -118.476667, 35.752167, 2.24 ] } },
{ "type": "Feature", "properties": { "id": "nn00608295", "mag": 2.0, "time": 1507298898804, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -118.9217, 38.4131, 8.7 ] } },
{ "type": "Feature", "properties": { "id": "us2000b1zv", "mag": 5.1, "time": 1507298433140, "felt": 1, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ 95.0977, 12.0039, 21.82 ] } },
{ "type": "Feature", "properties": { "id": "ak16990379", "mag": 2.0, "time": 1507296668722, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -150.4456, 63.3167, 112.0 ] } },
{ "type": "Feature", "properties": { "id": "ak16990317", "mag": 2.4, "time": 1507295355033, "felt": 2, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -149.6485, 60.9026, 21.1 ] } },
{ "type": "Feature", "properties": { "id": "nc72905256", "mag": 1.69, "time": 1507295344860, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -122.7755, 38.805167, 0.72 ] } },
{ "type": "Feature", "properties": { "id": "ci38020296", "mag": 0.98, "time": 1507294899000, "felt": null, "tsunami": 0 }, "geometry": { "type": "Point", "coordinates": [ -117.445, 34.226167, 12.35 ] } }
]}
scene.on('loaded',function(){
const layer = new L7.HeatmapLayer({})
.source(data)
.shape('heatmap')
.size('mag', [0, 1.0]) // weight映射通道
.style({
intensity: 2,
radius: 20,
opacity: 1.0,
rampColors: {
colors: [
'#FF4818',
'#F7B74A',
'#FFF598',
'#91EABC',
'#2EA9A1',
'#206C7C',
].reverse(),
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
scene.addLayer(layer);
scene.render();
})
</script>
</body>
</html>

87
packages/l7/demo/heatmap3d.html Normal file
View File

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>L7 IE</title>
<style>
html,
body {
overflow: hidden;
margin: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
cursor:pointer;
}
</style>
<link
href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
rel="stylesheet"
/>
</head>
<body>
<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.3/polyfill.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"></script>
<script src="../dist/l7-dev.js"></script>
<script>
console.log('L7', L7);
const scene = new L7.Scene({
id: "map",
// map: new L7.Mapbox({
// style: "dark", // 样式URL
// center: [108.6167, 19.1000],
// pitch: 0,
// zoom: 6
// })
map: new L7.GaodeMap({
style: "dark", // 样式URL
center: [108.6167, 19.1000],
pitch: 0,
zoom: 6
})
});
const data = {"list":[{"w":19.1000,"t":24.6000,"s":"海南","l":11,"m":"东方","j":108.6167,"h":"59838"},{"w":20.0000,"t":23.8000,"s":"海南","l":11,"m":"海口","j":110.2500,"h":"59758"},{"w":22.2750,"t":23.6000,"s":"广东","l":12,"m":"珠海","j":113.5669,"h":"59488"},{"w":20.3372,"t":23.4000,"s":"广东","l":12,"m":"徐闻","j":110.1794,"h":"59754"},{"w":19.2089,"t":23.2000,"s":"海南","l":12,"m":"琼海","j":110.4819,"h":"59855"},{"w":21.7358,"t":23.2000,"s":"广东","l":11,"m":"上川岛","j":112.7731,"h":"59673"},{"w":23.3853,"t":23.0000,"s":"广东","l":11,"m":"汕头","j":116.6792,"h":"59316"},{"w":22.5417,"t":23.0000,"s":"广东","l":12,"m":"深圳","j":114.0033,"h":"59493"},{"w":19.5167,"t":22.9000,"s":"海南","l":12,"m":"儋州","j":109.5833,"h":"59845"},{"w":21.1547,"t":22.7000,"s":"广东","l":12,"m":"湛江","j":110.3022,"h":"59658"},{"w":21.4500,"t":22.7000,"s":"广西","l":12,"m":"北海","j":109.1333,"h":"59644"},{"w":22.5000,"t":22.6000,"s":"广东","l":12,"m":"中山","j":113.4000,"h":"59485"},{"w":21.8453,"t":22.6000,"s":"广东","l":12,"m":"阳江","j":111.9783,"h":"59663"},{"w":22.3469,"t":22.6000,"s":"广东","l":12,"m":"信宜","j":110.9250,"h":"59456"},{"w":22.8000,"t":22.5000,"s":"广东","l":12,"m":"汕尾","j":115.3667,"h":"59501"},{"w":23.4275,"t":22.3000,"s":"广东","l":12,"m":"南澳","j":117.0292,"h":"59324"},{"w":22.7100,"t":22.3000,"s":"广东","l":12,"m":"罗定","j":111.6000,"h":"59462"},{"w":19.0333,"t":22.3000,"s":"海南","l":12,"m":"琼中","j":109.8333,"h":"59849"},{"w":21.5458,"t":22.2000,"s":"广东","l":11,"m":"电白","j":110.9886,"h":"59664"},{"w":22.9661,"t":21.9000,"s":"广东","l":12,"m":"东莞","j":113.7389,"h":"59289"},{"w":22.2472,"t":21.8000,"s":"广东","l":12,"m":"台山","j":112.7858,"h":"59478"},{"w":22.9836,"t":21.6000,"s":"广东","l":12,"m":"惠来","j":116.3014,"h":"59317"},{"w":22.9906,"t":21.0000,"s":"广东","l":12,"m":"高要","j":112.4786,"h":"59278"},{"w":23.9000,"t":20.8000,"s":"广西","l":12,"m":"百色","j":106.6000,"h":"59211"},{"w":23.0711,"t":20.4000,"s":"广东","l":12,"m":"惠阳","j":114.3744,"h":"59298"},{"w":23.4497,"t":20.4000,"s":"广东","l":12,"m":"揭西","j":115.8492,"h":"59306"},{"w":23.3353,"t":20.4000,"s":"广东","l":11,"m":"增城","j":113.8275,"h":"59294"},{"w":23.4167,"t":19.9000,"s":"广西","l":12,"m":"那坡","j":105.8333,"h":"59209"},{"w":24.9000,"t":19.7000,"s":"福建","l":11,"m":"崇武","j":118.9167,"h":"59133"},{"w":24.4833,"t":19.7000,"s":"福建","l":12,"m":"厦门","j":118.0667,"h":"59134"},{"w":23.7936,"t":19.6000,"s":"广东","l":12,"m":"河源","j":114.7297,"h":"59293"},{"w":23.7106,"t":19.4000,"s":"广东","l":12,"m":"清远","j":113.0850,"h":"59280"},{"w":23.1000,"t":19.4000,"s":"广西","l":12,"m":"靖西","j":106.4500,"h":"59218"},{"w":23.6000,"t":19.4000,"s":"广西","l":13,"m":"田东","j":107.1167,"h":"59224"},{"w":25.5167,"t":19.2000,"s":"福建","l":12,"m":"平潭","j":119.7833,"h":"58944"},{"w":25.0500,"t":19.2000,"s":"福建","l":12,"m":"龙岩","j":117.0167,"h":"58927"},{"w":23.2100,"t":19.0000,"s":"广东","l":12,"m":"广州","j":113.4822,"h":"59287"},{"w":21.9833,"t":18.9000,"s":"广西","l":12,"m":"钦州","j":108.6000,"h":"59632"}]}
scene.on('loaded',function(){
fetch(
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
)
.then((res) => res.json())
.then((data) => {
const layer = new L7.HeatmapLayer({})
.source(data)
.size('capacity', [0, 1])
.shape('heatmap3D')
// weight映射通道
.style({
intensity: 10,
radius: 5,
opacity: 1.0,
rampColors: {
colors: [
'#2E8AE6',
'#69D1AB',
'#DAF291',
'#FFD591',
'#FF7A45',
'#CF1D49',
],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
scene.addLayer(layer);
});
scene.render();
})
</script>
</body>
</html>

4
packages/l7/demo/image.html
View File

@ -33,8 +33,8 @@
console.log(L7); console.log(L7);
const scene = new L7.Scene({ const scene = new L7.Scene({
id: "map", id: "map",
map: new L7.Mapbox({ map: new L7.GaodeMap({
style: "blank", // 样式URL style: "dark", // 样式URL
center: [108.6167, 19.1000], center: [108.6167, 19.1000],
pitch: 0, pitch: 0,
zoom: 6 zoom: 6

4
packages/l7/demo/text.html
View File

@ -27,12 +27,12 @@
<!-- <script src="https://cdn.jsdelivr.net/npm/symbol-es6@0.1.2/symbol-es6.min.js"></script> --> <!-- <script src="https://cdn.jsdelivr.net/npm/symbol-es6@0.1.2/symbol-es6.min.js"></script> -->
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"></script> <script src="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"></script>
<script src="../dist/l7.js"></script> <script src="../dist/l7-dev.js"></script>
<script> <script>
console.log(L7); console.log(L7);
const scene = new L7.Scene({ const scene = new L7.Scene({
id: "map", id: "map",
map: new L7.Mapbox({ map: new L7.GaodeMap({
style: "dark", // 样式URL style: "dark", // 样式URL
center: [108.6167, 19.1000], center: [108.6167, 19.1000],
pitch: 0, pitch: 0,

80
packages/l7/demo/text2.html Normal file
View File

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>L7 IE</title>
<style>
html,
body {
overflow: hidden;
margin: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
cursor:pointer;
}
</style>
<link
href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
rel="stylesheet"
/>
</head>
<body>
<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.3/polyfill.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"></script>
<script src="../dist/l7-dev.js"></script>
<script>
console.log(L7);
const scene = new L7.Scene({
id: "map",
map: new L7.GaodeMap({
style: "blank", // 样式URL
center: [108.6167, 19.1000],
pitch: 0,
zoom: 6
})
});
const data = {"list":[{"w":19.1000,"t":24.6000,"s":"海南","l":11,"m":"东方","j":108.6167,"h":"59838"},{"w":20.0000,"t":23.8000,"s":"海南","l":11,"m":"海口","j":110.2500,"h":"59758"},{"w":22.2750,"t":23.6000,"s":"广东","l":12,"m":"珠海","j":113.5669,"h":"59488"},{"w":20.3372,"t":23.4000,"s":"广东","l":12,"m":"徐闻","j":110.1794,"h":"59754"},{"w":19.2089,"t":23.2000,"s":"海南","l":12,"m":"琼海","j":110.4819,"h":"59855"},{"w":21.7358,"t":23.2000,"s":"广东","l":11,"m":"上川岛","j":112.7731,"h":"59673"},{"w":23.3853,"t":23.0000,"s":"广东","l":11,"m":"汕头","j":116.6792,"h":"59316"},{"w":22.5417,"t":23.0000,"s":"广东","l":12,"m":"深圳","j":114.0033,"h":"59493"},{"w":19.5167,"t":22.9000,"s":"海南","l":12,"m":"儋州","j":109.5833,"h":"59845"},{"w":21.1547,"t":22.7000,"s":"广东","l":12,"m":"湛江","j":110.3022,"h":"59658"},{"w":21.4500,"t":22.7000,"s":"广西","l":12,"m":"北海","j":109.1333,"h":"59644"},{"w":22.5000,"t":22.6000,"s":"广东","l":12,"m":"中山","j":113.4000,"h":"59485"},{"w":21.8453,"t":22.6000,"s":"广东","l":12,"m":"阳江","j":111.9783,"h":"59663"},{"w":22.3469,"t":22.6000,"s":"广东","l":12,"m":"信宜","j":110.9250,"h":"59456"},{"w":22.8000,"t":22.5000,"s":"广东","l":12,"m":"汕尾","j":115.3667,"h":"59501"},{"w":23.4275,"t":22.3000,"s":"广东","l":12,"m":"南澳","j":117.0292,"h":"59324"},{"w":22.7100,"t":22.3000,"s":"广东","l":12,"m":"罗定","j":111.6000,"h":"59462"},{"w":19.0333,"t":22.3000,"s":"海南","l":12,"m":"琼中","j":109.8333,"h":"59849"},{"w":21.5458,"t":22.2000,"s":"广东","l":11,"m":"电白","j":110.9886,"h":"59664"},{"w":22.9661,"t":21.9000,"s":"广东","l":12,"m":"东莞","j":113.7389,"h":"59289"},{"w":22.2472,"t":21.8000,"s":"广东","l":12,"m":"台山","j":112.7858,"h":"59478"},{"w":22.9836,"t":21.6000,"s":"广东","l":12,"m":"惠来","j":116.3014,"h":"59317"},{"w":22.9906,"t":21.0000,"s":"广东","l":12,"m":"高要","j":112.4786,"h":"59278"},{"w":23.9000,"t":20.8000,"s":"广西","l":12,"m":"百色","j":106.6000,"h":"59211"},{"w":23.0711,"t":20.4000,"s":"广东","l":12,"m":"惠阳","j":114.3744,"h":"59298"},{"w":23.4497,"t":20.4000,"s":"广东","l":12,"m":"揭西","j":115.8492,"h":"59306"},{"w":23.3353,"t":20.4000,"s":"广东","l":11,"m":"增城","j":113.8275,"h":"59294"},{"w":23.4167,"t":19.9000,"s":"广西","l":12,"m":"那坡","j":105.8333,"h":"59209"},{"w":24.9000,"t":19.7000,"s":"福建","l":11,"m":"崇武","j":118.9167,"h":"59133"},{"w":24.4833,"t":19.7000,"s":"福建","l":12,"m":"厦门","j":118.0667,"h":"59134"},{"w":23.7936,"t":19.6000,"s":"广东","l":12,"m":"河源","j":114.7297,"h":"59293"},{"w":23.7106,"t":19.4000,"s":"广东","l":12,"m":"清远","j":113.0850,"h":"59280"},{"w":23.1000,"t":19.4000,"s":"广西","l":12,"m":"靖西","j":106.4500,"h":"59218"},{"w":23.6000,"t":19.4000,"s":"广西","l":13,"m":"田东","j":107.1167,"h":"59224"},{"w":25.5167,"t":19.2000,"s":"福建","l":12,"m":"平潭","j":119.7833,"h":"58944"},{"w":25.0500,"t":19.2000,"s":"福建","l":12,"m":"龙岩","j":117.0167,"h":"58927"},{"w":23.2100,"t":19.0000,"s":"广东","l":12,"m":"广州","j":113.4822,"h":"59287"},{"w":21.9833,"t":18.9000,"s":"广西","l":12,"m":"钦州","j":108.6000,"h":"59632"}]}
scene.on('loaded',function(){
const pointLayer = new L7.PointLayer({})
.source(data.list, {
parser: {
type: "json",
x: "j",
y: "w"
}
})
.shape("s",'text')
.size(15)
.color("t", [
"#094D4A",
"#146968",
"#1D7F7E",
"#289899",
"#34B6B7",
"#4AC5AF",
"#5FD3A6",
"#7BE39E",
"#A1EDB8",
"#CEF8D6"
])
.active(true)
.style({
opacity: 1.0
});
scene.addLayer(pointLayer);
scene.render();
})
</script>
</body>
</html>

28
packages/layers/src/core/BaseLayer.ts
View File

@ -52,10 +52,7 @@ import { isFunction, isObject } from 'lodash';
import mergeJsonSchemas from 'merge-json-schemas'; import mergeJsonSchemas from 'merge-json-schemas';
import { normalizePasses } from '../plugins/MultiPassRendererPlugin'; import { normalizePasses } from '../plugins/MultiPassRendererPlugin';
import { BlendTypes } from '../utils/blend'; import { BlendTypes } from '../utils/blend';
import { import { handleStyleDataMapping } from '../utils/dataMappingStyle';
handleStyleOpacity,
handleStyleStrokeOpacity,
} from '../utils/dataMappingStyle';
import baseLayerSchema from './schema'; import baseLayerSchema from './schema';
/** /**
* 分配 layer id * 分配 layer id
@ -210,21 +207,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
}; };
} else { } else {
const sceneId = this.container.get<string>(TYPES.SceneID); const sceneId = this.container.get<string>(TYPES.SceneID);
// @ts-ignore // @ts-ignore
if (configToUpdate.opacity) { handleStyleDataMapping(configToUpdate, this); // 处理 style 中进行数据映射的属性字段
// @ts-ignore
handleStyleOpacity('opacity', this, configToUpdate.opacity);
}
// @ts-ignore
if (configToUpdate.strokeOpacity) {
// @ts-ignore
handleStyleStrokeOpacity(
'strokeOpacity',
this,
// @ts-ignore
configToUpdate.strokeOpacity,
);
}
this.configService.setLayerConfig(sceneId, this.id, { this.configService.setLayerConfig(sceneId, this.id, {
...this.configService.getLayerConfig(this.id), ...this.configService.getLayerConfig(this.id),
...this.needUpdateConfig, ...this.needUpdateConfig,
@ -1024,6 +1010,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
valuesOrCallback?: unknown[], valuesOrCallback?: unknown[],
defaultValues?: unknown[], defaultValues?: unknown[],
) { ) {
// console.log({
// values: isFunction(valuesOrCallback)
// ? undefined
// : valuesOrCallback || defaultValues,
// callback: isFunction(valuesOrCallback) ? valuesOrCallback : undefined,
// })
return { return {
values: isFunction(valuesOrCallback) values: isFunction(valuesOrCallback)
? undefined ? undefined

53
packages/layers/src/core/BaseModel.ts
View File

@ -18,15 +18,41 @@ import {
IRendererService, IRendererService,
IShaderModuleService, IShaderModuleService,
IStyleAttributeService, IStyleAttributeService,
ITexture2D,
ITexture2DInitializationOptions,
lazyInject, lazyInject,
Triangulation, Triangulation,
TYPES, TYPES,
} from '@antv/l7-core'; } from '@antv/l7-core';
import { BlendTypes } from '../utils/blend'; import { BlendTypes } from '../utils/blend';
import { getSize } from '../utils/dataMappingStyle';
interface IDataLayout {
widthCount: number;
heightCount: number;
widthStep: number;
widthStart: number;
heightStep: number;
heightStart: number;
}
export default class BaseModel<ChildLayerStyleOptions = {}> export default class BaseModel<ChildLayerStyleOptions = {}>
implements ILayerModel { implements ILayerModel {
public triangulation: Triangulation; public triangulation: Triangulation;
// style texture data mapping
public createTexture2D: (
options: ITexture2DInitializationOptions,
) => ITexture2D;
public dataLayout: IDataLayout = {
// 默认值
widthCount: 1024,
heightCount: 1,
widthStep: 1 / 1024,
widthStart: 1 / 2048,
heightStep: 1,
heightStart: 0.5,
};
protected layer: ILayer; protected layer: ILayer;
@lazyInject(TYPES.IGlobalConfigService) @lazyInject(TYPES.IGlobalConfigService)
@ -49,6 +75,12 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
protected cameraService: ICameraService; protected cameraService: ICameraService;
protected layerService: ILayerService; protected layerService: ILayerService;
protected opacityTexture: ITexture2D;
protected strokeOpacityTexture: ITexture2D;
protected strokeTexture: ITexture2D;
protected strokeWidthTexture: ITexture2D;
// style texture data mapping
constructor(layer: ILayer) { constructor(layer: ILayer) {
this.layer = layer; this.layer = layer;
this.rendererService = layer this.rendererService = layer
@ -75,7 +107,28 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
this.registerBuiltinAttributes(); this.registerBuiltinAttributes();
// 开启动画 // 开启动画
this.startModelAnimate(); this.startModelAnimate();
const { createTexture2D } = this.rendererService;
this.createTexture2D = createTexture2D;
// 根据数据长度构建样式数据映射到纹理上时需要到布局数值 为纹理贴图映射样式数据做准备工作
this.initEncodeDataLayout(this.layer.getEncodedData().length);
} }
/**
* 根据数据长度构建样式数据映射到纹理上时需要到布局数值
* @param dataLength
*/
public initEncodeDataLayout(dataLength: number) {
const { width: widthCount, height: heightCount } = getSize(dataLength);
this.dataLayout.widthCount = widthCount;
this.dataLayout.heightCount = heightCount;
this.dataLayout.widthStep = 1 / widthCount;
this.dataLayout.widthStart = this.dataLayout.widthStep / 2;
this.dataLayout.heightStep = 1 / heightCount;
this.dataLayout.heightStart = this.dataLayout.heightStep / 2;
}
public getBlend(): IBlendOptions { public getBlend(): IBlendOptions {
const { blend = 'normal' } = this.layer.getLayerConfig(); const { blend = 'normal' } = this.layer.getLayerConfig();
return BlendTypes[BlendType[blend]] as IBlendOptions; return BlendTypes[BlendType[blend]] as IBlendOptions;

40
packages/layers/src/plugins/RegisterStyleAttributePlugin.ts
View File

@ -91,25 +91,25 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
}, },
}, },
}); });
styleAttributeService.registerStyleAttribute({ // styleAttributeService.registerStyleAttribute({
name: 'strokeOpacity', // name: 'strokeOpacity',
type: AttributeType.Attribute, // type: AttributeType.Attribute,
descriptor: { // descriptor: {
name: 'a_stroke_opacity', // name: 'a_stroke_opacity',
buffer: { // buffer: {
// give the WebGL driver a hint that this buffer may change // // give the WebGL driver a hint that this buffer may change
usage: gl.DYNAMIC_DRAW, // usage: gl.DYNAMIC_DRAW,
data: [], // data: [],
type: gl.FLOAT, // type: gl.FLOAT,
}, // },
size: 1, // size: 1,
update: (feature: IEncodeFeature, featureIdx: number) => { // update: (feature: IEncodeFeature, featureIdx: number) => {
const { strokeOpacity } = feature; // const { strokeOpacity } = feature;
// console.log('feature', feature) // // console.log('feature', feature)
// console.log('strokeOpacity', strokeOpacity) // // console.log('strokeOpacity', strokeOpacity)
return !isNumber(strokeOpacity) ? [1.0] : [strokeOpacity]; // return !isNumber(strokeOpacity) ? [1.0] : [strokeOpacity];
}, // },
}, // },
}); // });
} }
} }

364
packages/layers/src/point/models/fill.ts
View File

@ -10,18 +10,18 @@ import {
IModelUniform, IModelUniform,
ITexture2D, ITexture2D,
} from '@antv/l7-core'; } from '@antv/l7-core';
import { rgb2arr } from '@antv/l7-utils'; import { isColor, rgb2arr } from '@antv/l7-utils';
import BaseModel from '../../core/BaseModel'; import BaseModel from '../../core/BaseModel';
import { PointFillTriangulation } from '../../core/triangulation'; import { PointFillTriangulation } from '../../core/triangulation';
import pointFillFrag from '../shaders/fill_frag.glsl'; import pointFillFrag from '../shaders/fill_frag.glsl';
import pointFillVert from '../shaders/fill_vert.glsl'; import pointFillVert from '../shaders/fill_vert.glsl';
import { isNumber } from 'lodash'; import { isArray, isNumber, isString } from 'lodash';
import { import {
getSize, getSize,
getUvPosition, getUvPosition,
initDefaultTextureData, initTextureFloatData,
initTextureData, initTextureVec4Data,
} from '../../utils/dataMappingStyle'; } from '../../utils/dataMappingStyle';
interface IPointLayerStyleOptions { interface IPointLayerStyleOptions {
opacity: any; opacity: any;
@ -31,65 +31,279 @@ interface IPointLayerStyleOptions {
offsets: [number, number]; offsets: [number, number];
} }
interface IDataLayout {
widthCount: number;
heightCount: number;
widthStep: number;
widthStart: number;
heightStep: number;
heightStart: number;
}
// 用于判断 opacity 的值是否发生该改变 // 用于判断 opacity 的值是否发生该改变
let curretnOpacity: any = ''; const curretnOpacity: any = '';
let curretnStrokeOpacity: any = ''; const curretnStrokeOpacity: any = '';
const currentStrokeColor: any = '';
const currentStrokeWidth: any = '';
let testTexture = true;
const cellPropertiesLayout = [
{ attr: 'opacity', flag: true, count: 1 },
{ attr: 'strokeOpacity', flag: true, count: 1 },
{ attr: 'strokeWidth', flag: true, count: 1 },
{ attr: 'stroke', flag: true, count: 4 },
];
const WIDTH = 1024; // 数据纹理的固定长度
// let WIDTH = 10
let calHeight = 1;
/**
* 根据映射的数据字段往推入数据
* @param d
* @param cellData
* @param cellPropertiesLayouts
*/
function patchData(d: number[], cellData: any, cellPropertiesLayouts: any) {
for (const layout of cellPropertiesLayouts) {
const { attr, count } = layout;
if (!cellData) {
if (attr === 'stroke') {
d.push(-1, -1, -1, -1);
} else if (attr === 'offsets') {
d.push(-1, -1);
} else {
d.push(-1);
}
} else {
const value = cellData[attr];
if (value) {
// 数据中存在该属性
if (attr === 'stroke') {
d.push(...rgb2arr(value));
} else if (attr === 'offsets') {
// d.push(...value)
d.push(-value[0], value[1]);
} else {
d.push(value);
}
} else {
// 若不存在时则补位
patchMod(d, count);
}
}
}
}
/**
* 补空位
* @param d
* @param count
*/
function patchMod(d: number[], count: number) {
for (let i = 0; i < count; i++) {
d.push(-1);
}
}
/**
* 计算推入数据纹理的数据
* @param cellLength
* @param encodeData
* @param cellPropertiesLayouts
* @returns
*/
function calDataFrame(
cellLength: number,
encodeData: any,
cellPropertiesLayouts: any,
): any {
if (cellLength > WIDTH) {
// console.log('failed');
return false;
}
const encodeDatalength = encodeData.length;
// WIDTH 行数固定
const rowCount = Math.ceil((encodeDatalength * cellLength) / WIDTH); // 有多少行
const totalLength = rowCount * WIDTH;
const d: number[] = [];
for (let i = 0; i < encodeDatalength; i++) {
// 根据 encodeData 数据推入数据
const cellData = encodeData[i];
patchData(d, cellData, cellPropertiesLayouts);
}
for (let i = d.length; i < totalLength; i++) {
// 每行不足的部分用 -1 补足（数据纹理时 width * height 的矩形数据集合）
d.push(-1);
}
// console.log(d, rowCount)
return { data: d, width: WIDTH, height: rowCount };
}
// 判断当前使用的 style 中的变量属性是否需要进行数据映射
let hasOpacity = 0;
let hasStrokeOpacity = 0;
let hasStrokeWidth = 0;
let hasStroke = 0;
let hasOffsets = 0;
export default class FillModel extends BaseModel { export default class FillModel extends BaseModel {
public dataLayout: IDataLayout = { protected testDataTexture: ITexture2D;
// 默认值
widthCount: 1024,
heightCount: 1,
widthStep: 1 / 1024,
widthStart: 1 / 2048,
heightStep: 1,
heightStart: 0.5,
};
protected opacityTexture: ITexture2D; /**
* 判断 offsets 是否是常量
* @param offsets
* @returns
*/
public isOffsetStatic(offsets: any) {
if (
isArray(offsets) &&
offsets.length === 2 &&
isNumber(offsets[0]) &&
isNumber(offsets[1])
) {
return true;
} else {
return false;
}
}
public isColorStatic(stroke: any) {
if (
isArray(stroke) &&
stroke.length === 4 &&
isNumber(stroke[0]) &&
isNumber(stroke[1]) &&
isNumber(stroke[2]) &&
isNumber(stroke[3])
) {
return true;
} else {
return false;
}
}
public getUninforms(): IModelUniform { public getUninforms(): IModelUniform {
const { const {
opacity, opacity = 1,
stroke = 'rgb(0,0,0,0)',
strokeWidth = 1,
strokeOpacity = 1, strokeOpacity = 1,
strokeWidth = 2,
stroke = [0, 0, 0, 0],
offsets = [0, 0], offsets = [0, 0],
} = this.layer.getLayerConfig() as IPointLayerStyleOptions; } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
if (curretnOpacity !== JSON.stringify(opacity)) { if (testTexture) {
const { createTexture2D } = this.rendererService; const cellProperties = []; // cell 的布局
// 从 encodeData 数据的 opacity 字段上取值，并将值按照排布写入到纹理中 let cellLength = 0; // cell 的长度
this.opacityTexture = initTextureData(
this.dataLayout.heightCount,
createTexture2D,
this.layer.getEncodedData(),
'opacity',
);
curretnOpacity = JSON.stringify(opacity); if (!isNumber(opacity) && opacity !== undefined) {
} // 数据映射
cellProperties.push({ attr: 'opacity', flag: true, count: 1 });
hasOpacity = 1;
cellLength += 1;
} else {
// 常量
hasOpacity = 0;
}
if (curretnStrokeOpacity !== JSON.stringify(strokeOpacity)) { if (!isNumber(strokeOpacity) && strokeOpacity !== undefined) {
curretnStrokeOpacity = JSON.stringify(strokeOpacity); // 数据映射
cellProperties.push({ attr: 'strokeOpacity', flag: true, count: 1 });
hasStrokeOpacity = 1;
cellLength += 1;
} else {
// 常量
hasStrokeOpacity = 0;
}
if (!isNumber(strokeWidth) && strokeWidth !== undefined) {
// 数据映射
cellProperties.push({ attr: 'strokeWidth', flag: true, count: 1 });
hasStrokeWidth = 1;
cellLength += 1;
} else {
// 常量
hasStrokeWidth = 0;
}
// console.log('stroke', stroke);
// if((!isString(stroke) || !isColor(stroke)) && stroke !== undefined) { // 数据映射
if (!this.isColorStatic(stroke)) {
// 数据映射
cellProperties.push({ attr: 'stroke', flag: true, count: 4 });
cellLength += 4;
hasStroke = 1;
} else {
// 常量
hasStroke = 0;
}
if (!this.isOffsetStatic(offsets)) {
cellProperties.push({ attr: 'offsets', flag: true, count: 2 });
cellLength += 2;
hasOffsets = 1;
} else {
hasOffsets = 0;
}
// console.log('cellProperties', cellProperties);
// console.log('cellLength', cellLength);
// console.log('hasStrokeOpacity', hasStrokeOpacity)
// console.log('hasStrokeWidth', hasStrokeWidth)
const encodeData = this.layer.getEncodedData();
// console.log('encodeData', encodeData)
// let {data, width, height } = calDataFrame(cellLength, encodeData, cellPropertiesLayout)
if (cellLength > 0) {
const { data, width, height } = calDataFrame(
cellLength,
encodeData,
cellProperties,
);
calHeight = height;
this.testDataTexture = this.createTexture2D({
flipY: true,
data,
format: gl.LUMINANCE,
type: gl.FLOAT,
width,
height,
});
} else {
this.testDataTexture = this.createTexture2D({
flipY: true,
data: [1],
format: gl.LUMINANCE,
type: gl.FLOAT,
width: 1,
height: 1,
});
}
// console.log('strokeOpacity', strokeOpacity, isNumber(strokeOpacity)? strokeOpacity : 1.0)
testTexture = false;
} }
return { return {
u_opacity_texture: this.opacityTexture, u_testTexture: this.testDataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
u_opacity: opacity ? -1.0 : 1.0, u_cellTypeLayout: [
u_stroke_width: strokeWidth, // 传递样式数据映射信息 - 当前纹理大小以及有哪些字段需要映射
u_stroke_color: rgb2arr(stroke), calHeight,
WIDTH,
0.0,
0.0, // rowCount columnCount - 几行几列
hasOpacity,
hasStrokeOpacity,
hasStrokeWidth,
hasStroke, // opacity strokeOpacity strokeWidth stroke
hasOffsets,
0.0,
0.0,
0.0, // offsets
0.0,
0.0,
0.0,
0.0,
],
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_stroke_opacity: isNumber(strokeOpacity) ? strokeOpacity : 1.0, u_stroke_opacity: isNumber(strokeOpacity) ? strokeOpacity : 1.0,
u_offsets: [-offsets[0], offsets[1]], u_stroke_width: isNumber(strokeWidth) ? strokeWidth : 0.0,
u_stroke_color:
isString(stroke) && isColor(stroke) ? rgb2arr(stroke) : [0, 0, 0, 0],
u_offsets: this.isOffsetStatic(offsets)
? [-offsets[0], offsets[1]]
: [0, 0],
}; };
} }
public getAnimateUniforms(): IModelUniform { public getAnimateUniforms(): IModelUniform {
@ -112,22 +326,40 @@ export default class FillModel extends BaseModel {
); );
} }
public initEncodeDataLayout(dataLength: number) {
const { width: widthCount, height: heightCount } = getSize(dataLength);
this.dataLayout.widthCount = widthCount;
this.dataLayout.heightCount = heightCount;
this.dataLayout.widthStep = 1 / widthCount;
this.dataLayout.widthStart = this.dataLayout.widthStep / 2;
this.dataLayout.heightStep = 1 / heightCount;
this.dataLayout.heightStart = this.dataLayout.heightStep / 2;
}
public initModels(): IModel[] { public initModels(): IModel[] {
this.initEncodeDataLayout(this.layer.getEncodedData().length); // if(cellLength < 1) {
// console.log('err')
// }
// let encodeData = this.layer.getEncodedData()
// dataFrameArr = []
// let mod = WIDTH%cellLength
// let rowCellCount = (WIDTH-mod)/cellLength
// let encodeDatalength = encodeData.length
// let heightCount = Math.ceil(encodeDatalength * cellLength / (WIDTH - mod))
// let heightStep = 1/heightCount
// let heightStart = heightStep/2
// let widthStart = (1/WIDTH)/2
// let widthStep = (1/WIDTH) * (cellLength - 1.0)
// for(let i = 0; i < heightCount; i++) { // 行
// for(let j = 0; j < rowCellCount; j++) {
// let startU = widthStart + widthStep * j
// let startV = 1 - (heightStart + heightStep * i)
// let endU = startU + widthStep
// let endV = startV
// dataFrameArr.push({ startU, startV, endU, endV })
// }
// }
// console.log('dataFrameArr', dataFrameArr)
return this.buildModels(); return this.buildModels();
} }
public buildModels(): IModel[] { public buildModels(): IModel[] {
return [ return [
this.layer.buildLayerModel({ this.layer.buildLayerModel({
@ -195,32 +427,26 @@ export default class FillModel extends BaseModel {
}, },
}); });
// point feature id // vertex id 用于作为数据纹理取值的唯一编号
this.styleAttributeService.registerStyleAttribute({ this.styleAttributeService.registerStyleAttribute({
name: 'featureId', name: 'vertexId',
type: AttributeType.Attribute, type: AttributeType.Attribute,
descriptor: { descriptor: {
name: 'a_featureId', name: 'a_vertexId',
buffer: { buffer: {
// give the WebGL driver a hint that this buffer may change // give the WebGL driver a hint that this buffer may change
usage: gl.DYNAMIC_DRAW, usage: gl.DYNAMIC_DRAW,
data: [], data: [],
type: gl.FLOAT, type: gl.FLOAT,
}, },
size: 2, size: 1,
update: ( update: (
feature: IEncodeFeature, feature: IEncodeFeature,
featureIdx: number, featureIdx: number,
vertex: number[], vertex: number[],
attributeIdx: number, attributeIdx: number,
) => { ) => {
return getUvPosition( return [featureIdx];
this.dataLayout.widthStep,
this.dataLayout.widthStart,
this.dataLayout.heightStep,
this.dataLayout.heightStart,
featureIdx,
);
}, },
}, },
}); });

46
packages/layers/src/point/shaders/fill_frag.glsl
View File

@ -1,14 +1,9 @@
#define Animate 0.0 #define Animate 0.0
uniform float u_blur : 0; uniform float u_blur : 0;
uniform float u_opacity : 1; // uniform float u_stroke_width : 1;
uniform float u_stroke_width : 1;
uniform vec4 u_stroke_color : [0, 0, 0, 0];
uniform float u_stroke_opacity : 1;
varying float v_stroke_opacity;
uniform sampler2D u_opacity_texture; varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
varying vec2 v_featureId;
varying vec4 v_data; varying vec4 v_data;
varying vec4 v_color; varying vec4 v_color;
@ -19,23 +14,27 @@ uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
#pragma include "sdf_2d" #pragma include "sdf_2d"
#pragma include "picking" #pragma include "picking"
void main() { void main() {
int shape = int(floor(v_data.w + 0.5)); int shape = int(floor(v_data.w + 0.5));
// 处理透明度
// float opacity = texture2D(u_opacity_texture, v_featureId).a?texture2D(u_opacity_texture, v_featureId).a:1.0;
float opacity = u_opacity;
if(u_opacity < 0.0) {
opacity = texture2D(u_opacity_texture, v_featureId).a;
}
float stroke_opacity = u_stroke_opacity;
if(v_stroke_opacity > 0.0) { vec4 textrueStroke = vec4(
stroke_opacity = v_stroke_opacity; styleMappingMat[1][0],
} styleMappingMat[1][1],
styleMappingMat[1][2],
styleMappingMat[1][3]
);
float opacity = styleMappingMat[0][0];
float stroke_opacity = styleMappingMat[0][1];
float strokeWidth = styleMappingMat[0][2];
vec4 strokeColor = textrueStroke == vec4(0) ? v_color : textrueStroke;
lowp float antialiasblur = v_data.z; lowp float antialiasblur = v_data.z;
float antialiased_blur = -max(u_blur, antialiasblur); float antialiased_blur = -max(u_blur, antialiasblur);
float r = v_radius / (v_radius + u_stroke_width); // float r = v_radius / (v_radius + u_stroke_width);
float r = v_radius / (v_radius + strokeWidth);
float outer_df; float outer_df;
float inner_df; float inner_df;
@ -70,18 +69,20 @@ void main() {
} }
float opacity_t = smoothstep(0.0, antialiased_blur, outer_df); float opacity_t = smoothstep(0.0, antialiased_blur, outer_df);
float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep( // float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep(
// antialiased_blur,
// 0.0,
// inner_df
// );
float color_t = strokeWidth < 0.01 ? 0.0 : smoothstep(
antialiased_blur, antialiased_blur,
0.0, 0.0,
inner_df inner_df
); );
vec4 strokeColor = u_stroke_color == vec4(0) ? v_color : u_stroke_color;
float PI = 3.14159; float PI = 3.14159;
float N_RINGS = 3.0; float N_RINGS = 3.0;
float FREQ = 1.0; float FREQ = 1.0;
// gl_FragColor = v_color * color_t;
// gl_FragColor = mix(vec4(v_color.rgb, v_color.a * u_opacity), strokeColor * u_stroke_opacity, color_t);
gl_FragColor = mix(vec4(v_color.rgb, v_color.a * opacity), strokeColor * stroke_opacity, color_t); gl_FragColor = mix(vec4(v_color.rgb, v_color.a * opacity), strokeColor * stroke_opacity, color_t);
@ -94,5 +95,4 @@ void main() {
gl_FragColor = filterColor(gl_FragColor); gl_FragColor = filterColor(gl_FragColor);
} }

187
packages/layers/src/point/shaders/fill_vert.glsl
View File

@ -2,36 +2,200 @@ attribute vec4 a_Color;
attribute vec3 a_Position; attribute vec3 a_Position;
attribute vec2 a_Extrude; attribute vec2 a_Extrude;
attribute float a_Size; attribute float a_Size;
attribute float a_stroke_opacity;
attribute float a_Shape; attribute float a_Shape;
attribute vec2 a_featureId; attribute float a_vertexId;
varying vec2 v_featureId; uniform mat4 u_cellTypeLayout;
uniform sampler2D u_testTexture;
varying mat4 styleMappingMat;
uniform mat4 u_ModelMatrix; uniform mat4 u_ModelMatrix;
uniform mat4 u_Mvp; uniform mat4 u_Mvp;
uniform float u_stroke_width : 2;
uniform vec2 u_offsets;
varying vec4 v_data; varying vec4 v_data;
varying vec4 v_color; varying vec4 v_color;
varying float v_radius; varying float v_radius;
varying float v_stroke_opacity;
uniform float u_opacity : 1;
uniform float u_stroke_opacity : 1;
uniform float u_stroke_width : 2;
uniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];
uniform vec2 u_offsets;
#pragma include "projection" #pragma include "projection"
#pragma include "picking" #pragma include "picking"
/*
currentRow 当前行
currentColumn 当前列
columnCount 有多少列
nextStep 需要计算当前 cell 后的第几个 cell （当前 cell 则 nextStep = 0）
*/
vec2 nextPos(float currentRow, float currentColumn, float columnCount, float nextStep) {
float nextColumn = currentColumn;
float nextRow = currentRow;
if(currentColumn + nextStep <= columnCount){
nextColumn = currentColumn + nextStep;
} else {
nextColumn = mod(currentColumn + nextStep, columnCount); // 不会出现跨两行
nextRow = currentRow + 1.0;
}
return vec2(nextColumn, nextRow);
}
// 根据坐标位置先是计算 uv ，然后根据 uv 从数据纹理中取值
float pos2value(vec2 pos, float columnWidth, float rowHeight) {
float u = (pos.r - 1.0) * columnWidth + columnWidth/2.0;
float v = 1.0 - ((pos.g - 1.0) * rowHeight + rowHeight/2.0);
return texture2D(u_testTexture, vec2(u, v)).r;
}
bool hasOpacity() { // 判断 cell 中是否存在 opacity 的数据
return u_cellTypeLayout[1][0] > 0.0;
}
bool hasStrokeOpacity() { // 判断 cell 中是否存在 strokeOpacity 的数据
return u_cellTypeLayout[1][1] > 0.0;
}
bool hasStrokeWidth() { // 判断 cell 中是否存在 strokeWidth 的数据
return u_cellTypeLayout[1][2] > 0.0;
}
bool hasStroke() { // 判断 cell 中是否存在 stroke 的数据
return u_cellTypeLayout[1][3] > 0.0;
}
bool hasOffsets() { // 判断 cell 中是否存在 offsets 的数据
return u_cellTypeLayout[2][0] > 0.0;
}
// 计算 opacity 和标志在 cell 中取值用的 offset
vec2 calOpacityAndOffset(float cellCurrentRow, float cellCurrentColumn, float columnCount, float textureOffset, float columnWidth, float rowHeight) {
if(!hasOpacity()) { // 数据纹理中不存在 opacity 的时候取默认值（用户在 style 中传入的是常量）
return vec2(u_opacity, textureOffset);
} else {
vec2 valuePos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
float textureOpacity = pos2value(valuePos, columnWidth, rowHeight);
return vec2(textureOpacity, textureOffset + 1.0);
}
}
vec2 calStrokeOpacityAndOffset(float cellCurrentRow, float cellCurrentColumn, float columnCount, float textureOffset, float columnWidth, float rowHeight) {
if(!hasStrokeOpacity()) {
return vec2(u_stroke_opacity, textureOffset);
} else {
vec2 valuePos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
float textureStrokeOpacity = pos2value(valuePos, columnWidth, rowHeight);
return vec2(textureStrokeOpacity, textureOffset + 1.0);
}
}
vec2 calStrokeWidthAndOffset(float cellCurrentRow, float cellCurrentColumn, float columnCount, float textureOffset, float columnWidth, float rowHeight) {
if(!hasStrokeWidth()) {
return vec2(u_stroke_width, textureOffset);
} else {
vec2 valuePos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
float textureStrokeWidth = pos2value(valuePos, columnWidth, rowHeight);
return vec2(textureStrokeWidth, textureOffset + 1.0);
}
}
float calCellCount() { // 计算当前单个 cell 的大小
// u_cellTypeLayout
// cal_height, WIDTH, 0.0, 0.0, // rowCount columnCount - 几行几列
// 1.0, 1.0, 1.0, 0.0, // opacity strokeOpacity strokeWidth stroke - 1.0 表示有数据映射、0.0 表示没有
// 1.0, 0.0, 0.0, 0.0, // offsets
// 0.0, 0.0, 0.0, 0.0
return u_cellTypeLayout[1][0] + // opacity
u_cellTypeLayout[1][1] + // strokeOpacity
u_cellTypeLayout[1][2] + // strokeWidth
u_cellTypeLayout[1][3] * 4.0 + // stroke
u_cellTypeLayout[2][0] * 2.0; // offsets
}
void main() { void main() {
vec2 extrude = a_Extrude; vec2 extrude = a_Extrude;
float shape_type = a_Shape; float shape_type = a_Shape;
float newSize = setPickingSize(a_Size); float newSize = setPickingSize(a_Size);
// cal style mapping - 数据纹理映射部分的计算
styleMappingMat = mat4(
0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
0.0, 0.0, 0.0, 0.0
);
float rowCount = u_cellTypeLayout[0][0]; // 当前的数据纹理有几行
float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
float columnWidth = 1.0/columnCount; // 列宽
float rowHeight = 1.0/rowCount; // 行高
float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
float id = a_vertexId; // 第n个顶点
float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
// cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ...
// 按顺序从 cell 中取值、若没有则自动往下取值
float textureOffset = 0.0; // 在 cell 中取值的偏移量
vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
styleMappingMat[0][0] = opacityAndOffset.r;
textureOffset = opacityAndOffset.g;
vec2 strokeOpacityAndOffset = calStrokeOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
styleMappingMat[0][1] = strokeOpacityAndOffset.r;
textureOffset = strokeOpacityAndOffset.g;
vec2 strokeWidthAndOffset = calStrokeWidthAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
styleMappingMat[0][2] = strokeWidthAndOffset.r;
textureOffset = strokeWidthAndOffset.g;
vec4 textrueStroke = vec4(-1.0, -1.0, -1.0, -1.0);
if(hasStroke()) {
vec2 valueRPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
styleMappingMat[1][0] = pos2value(valueRPos, columnWidth, rowHeight); // R
textureOffset += 1.0;
vec2 valueGPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
styleMappingMat[1][1] = pos2value(valueGPos, columnWidth, rowHeight); // G
textureOffset += 1.0;
vec2 valueBPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
styleMappingMat[1][2] = pos2value(valueBPos, columnWidth, rowHeight); // B
textureOffset += 1.0;
vec2 valueAPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
styleMappingMat[1][3] = pos2value(valueAPos, columnWidth, rowHeight); // A
textureOffset += 1.0;
} else {
styleMappingMat[1][0] = u_stroke_color.r;
styleMappingMat[1][1] = u_stroke_color.g;
styleMappingMat[1][2] = u_stroke_color.b;
styleMappingMat[1][3] = u_stroke_color.a;
}
vec2 textrueOffsets = vec2(0.0, 0.0);
if(hasOffsets()) {
vec2 valueXPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
textrueOffsets.r = pos2value(valueXPos, columnWidth, rowHeight); // x
textureOffset += 1.0;
vec2 valueYPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
textrueOffsets.g = pos2value(valueYPos, columnWidth, rowHeight); // x
textureOffset += 1.0;
} else {
textrueOffsets = u_offsets;
}
// cal style mapping
// unpack color(vec2) // unpack color(vec2)
v_color = a_Color; v_color = a_Color;
v_stroke_opacity = a_stroke_opacity;
v_featureId = a_featureId;
// radius(16-bit) // radius(16-bit)
v_radius = newSize; v_radius = newSize;
@ -43,7 +207,8 @@ void main() {
// construct point coords // construct point coords
v_data = vec4(extrude, antialiasblur,shape_type); v_data = vec4(extrude, antialiasblur,shape_type);
vec2 offset = project_pixel(extrude * (newSize + u_stroke_width) + u_offsets); // vec2 offset = project_pixel(extrude * (newSize + u_stroke_width) + u_offsets);
vec2 offset = project_pixel(extrude * (newSize + u_stroke_width) + textrueOffsets);
vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0)); vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));
// gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0)); // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));

231
packages/layers/src/utils/dataMappingStyle.ts
View File

@ -1,15 +1,25 @@
import { import {
gl,
ILayer, ILayer,
IStyleAttributeUpdateOptions, IStyleAttributeUpdateOptions,
ITexture2D, ITexture2D,
StyleAttributeField, StyleAttributeField,
StyleAttributeOption, StyleAttributeOption,
} from '@antv/l7-core'; } from '@antv/l7-core';
import { rgb2arr } from '@antv/l7-utils';
import { isArray, isFunction, isNumber, isString } from 'lodash'; import { isArray, isFunction, isNumber, isString } from 'lodash';
/** /**
* 该文件中的工具方法主要用于对 style 中的属性进行 数据映射 * 该文件中的工具方法主要用于对 style 中的属性进行 数据映射
*/ */
interface IConfigToUpdate {
opacity?: any;
strokeOpacity?: any;
stroke?: any;
strokeWidth?: any;
offsets?: any;
}
// 画布默认的宽度 // 画布默认的宽度
const WIDTH = 1024; const WIDTH = 1024;
@ -19,7 +29,7 @@ const WIDTH = 1024;
* @param values * @param values
* @param updateOptions * @param updateOptions
*/ */
function registerOpacityAttribute( function registerStyleAttribute(
fieldName: string, fieldName: string,
layer: ILayer, layer: ILayer,
field: StyleAttributeField, field: StyleAttributeField,
@ -29,47 +39,122 @@ function registerOpacityAttribute(
layer.updateStyleAttribute(fieldName, field, values, updateOptions); layer.updateStyleAttribute(fieldName, field, values, updateOptions);
} }
/** function handleStyleDataMapping(configToUpdate: IConfigToUpdate, layer: any) {
* 根据传入参数 opacity 的类型和值做相应的操作 if (configToUpdate.opacity) {
*/ // 处理 style 中 opacity 属性的数据映射
function handleStyleOpacity(fieldName: string, layer: ILayer, opacity: any) {
if (isString(opacity)) { handleStyleFloat('opacity', layer, configToUpdate.opacity);
// opacity = 'string' }
registerOpacityAttribute(fieldName, layer, opacity, (value: any) => {
return value; if (configToUpdate.strokeWidth) {
}); // 处理 style 中 strokeWidth 属性的数据映射
} else if (isNumber(opacity)) {
// opacity = 0.4 -> opacity 传入数字 handleStyleFloat('strokeWidth', layer, configToUpdate.strokeWidth);
registerOpacityAttribute(fieldName, layer, [opacity], undefined); }
} else if (isArray(opacity) && opacity.length === 2) {
if (isString(opacity[0]) && isFunction(opacity[1])) { if (configToUpdate.strokeOpacity) {
// opacity = ['string', callback] // 处理 style 中 strokeOpacity 属性的数据映射
registerOpacityAttribute(fieldName, layer, opacity[0], opacity[1]);
} else if ( handleStyleFloat('strokeOpacity', layer, configToUpdate.strokeOpacity);
isString(opacity[0]) && }
isArray(opacity[1]) &&
isNumber(opacity[1][0]) && if (configToUpdate.stroke) {
isNumber(opacity[1][1]) // 处理 style 中 stroke (strokeColor) 属性的数据映射
) { handleStyleColor('stroke', layer, configToUpdate.stroke);
// opacity = ['string', [start: number, end: nuber]] }
registerOpacityAttribute(fieldName, layer, opacity[0], opacity[1]);
} else { if (configToUpdate.offsets) {
registerOpacityAttribute(fieldName, layer, [1.0], undefined); handleStyleOffsets('offsets', layer, configToUpdate.offsets);
}
} else {
registerOpacityAttribute(fieldName, layer, [1.0], undefined);
} }
} }
/** /**
* 根据传入参数 strokeOpacity 的类型和值做相应的操作 * 根据传入参数 opacity 的类型和值做相应的操作
*/ */
function handleStyleStrokeOpacity( function handleStyleFloat(fieldName: string, layer: ILayer, styleFloat: any) {
if (isString(styleFloat)) {
// opacity = 'string'
registerStyleAttribute(fieldName, layer, styleFloat, (value: any) => {
return value;
});
} else if (isNumber(styleFloat)) {
// opacity = 0.4 -> opacity 传入数字
registerStyleAttribute(fieldName, layer, [styleFloat], undefined);
} else if (isArray(styleFloat) && styleFloat.length === 2) {
if (isString(styleFloat[0]) && isFunction(styleFloat[1])) {
// opacity = ['string', callback]
registerStyleAttribute(fieldName, layer, styleFloat[0], styleFloat[1]);
} else if (
isString(styleFloat[0]) &&
isArray(styleFloat[1]) &&
isNumber(styleFloat[1][0]) &&
isNumber(styleFloat[1][1])
) {
// opacity = ['string', [start: number, end: nuber]]
registerStyleAttribute(fieldName, layer, styleFloat[0], styleFloat[1]);
} else {
registerStyleAttribute(fieldName, layer, [1.0], undefined);
}
} else {
registerStyleAttribute(fieldName, layer, [1.0], undefined);
}
}
function handleStyleOffsets(
fieldName: string, fieldName: string,
layer: ILayer, layer: ILayer,
strokeOpacity: any, styleOffsets: any,
) { ) {
handleStyleOpacity(fieldName, layer, strokeOpacity); if (isString(styleOffsets)) {
// 字符串
registerStyleAttribute(fieldName, layer, styleOffsets, (value: any) => {
return value;
});
} else if (
isArray(styleOffsets) &&
styleOffsets.length === 2 &&
isString(styleOffsets[0]) &&
isFunction(styleOffsets[1])
) {
// callback
registerStyleAttribute(fieldName, layer, styleOffsets[0], styleOffsets[1]);
} else if (
isArray(styleOffsets) &&
styleOffsets.length === 2 &&
isNumber(styleOffsets[0]) &&
isNumber(styleOffsets[1])
) {
// normal
registerStyleAttribute(fieldName, layer, styleOffsets, undefined);
} else {
registerStyleAttribute(fieldName, layer, [0, 0], undefined);
}
}
/**
* 根据传入参数 stroke / color 的类型和值做相应的操作
* @param fieldName
* @param layer
* @param styleColor
*/
function handleStyleColor(fieldName: string, layer: ILayer, styleColor: any) {
if (isString(styleColor)) {
registerStyleAttribute(fieldName, layer, styleColor, undefined);
} else if (isArray(styleColor) && styleColor.length === 2) {
if (isString(styleColor[0]) && isFunction(styleColor[1])) {
registerStyleAttribute(fieldName, layer, styleColor[0], styleColor[1]);
} else if (
isString(styleColor[0]) &&
isArray(styleColor[1]) &&
styleColor[1].length > 0
) {
registerStyleAttribute(fieldName, layer, styleColor[0], styleColor[1]);
} else {
registerStyleAttribute(fieldName, layer, '#fff', undefined);
}
} else {
registerStyleAttribute(fieldName, layer, '#fff', undefined);
}
} }
/** /**
@ -113,7 +198,47 @@ function getUvPosition(
/** /**
* 1、根据输入的 field 字段从 originData 中取值 （style 样式用于数据映射的值） * 1、根据输入的 field 字段从 originData 中取值 （style 样式用于数据映射的值）
* 2、根据输入的 heightCount 以及默认的 WIDTH 为纹理对象提供数据 * 2、根据输入的 heightCount 以及默认的 WIDTH 为纹理对象提供数据 (float)
* 3、根据输入的 createTexture2D 构建纹理对象
* 4、存储
* @param heightCount
* @param createTexture2D
* @param originData
* @param field
* @returns
*/
function initTextureFloatData(
heightCount: number,
createTexture2D: any,
originData: any,
field: string,
): ITexture2D {
const d = [];
for (let i = 0; i < WIDTH * heightCount; i++) {
if (originData[i] && originData[i][field]) {
const v = originData[i][field];
d.push(v);
} else {
d.push(0);
}
}
const texture = createTexture2D({
flipY: true,
data: d,
format: gl.LUMINANCE,
type: gl.FLOAT,
width: WIDTH,
height: heightCount,
});
return texture;
}
/**
* 1、根据输入的 field 字段从 originData 中取值 （style 样式用于数据映射的值）
* 2、根据输入的 heightCount 以及默认的 WIDTH 为纹理对象提供数据 (color)
* 3、根据输入的 createTexture2D 构建纹理对象 * 3、根据输入的 createTexture2D 构建纹理对象
* @param heightCount * @param heightCount
* @param createTexture2D * @param createTexture2D
@ -121,7 +246,7 @@ function getUvPosition(
* @param field * @param field
* @returns * @returns
*/ */
function initTextureData( function initTextureVec4Data(
heightCount: number, heightCount: number,
createTexture2D: any, createTexture2D: any,
originData: any, originData: any,
@ -130,8 +255,8 @@ function initTextureData(
const d = []; const d = [];
for (let i = 0; i < WIDTH * heightCount; i++) { for (let i = 0; i < WIDTH * heightCount; i++) {
if (originData[i] && originData[i][field]) { if (originData[i] && originData[i][field]) {
const v = originData[i][field] * 255; const [r, g, b, a] = rgb2arr(originData[i][field]);
d.push(v, v, v, v); d.push(r * 255, g * 255, b * 255, a * 255);
} else { } else {
d.push(0, 0, 0, 0); d.push(0, 0, 0, 0);
} }
@ -149,32 +274,12 @@ function initTextureData(
return texture; return texture;
} }
function initDefaultTextureData(
heightCount: number,
createTexture2D: any,
): ITexture2D {
const d = [];
for (let i = 0; i < WIDTH * heightCount; i++) {
d.push(255, 255, 255, 255);
}
const arr = new Uint8ClampedArray(d);
const imageData = new ImageData(arr, WIDTH, heightCount); // (arr, width, height)
const texture = createTexture2D({
flipY: true,
data: new Uint8Array(imageData.data),
width: imageData.width,
height: imageData.height,
});
return texture;
}
export { export {
handleStyleOpacity, handleStyleDataMapping,
handleStyleStrokeOpacity, handleStyleFloat,
getSize, getSize,
getUvPosition, getUvPosition,
initTextureData, initTextureFloatData,
initDefaultTextureData, initTextureVec4Data,
handleStyleColor,
}; };

1
packages/renderer/src/regl/ReglModel.ts
View File

@ -124,7 +124,6 @@ export default class ReglModel implements IModel {
| number[] | number[]
| boolean; | boolean;
} = {}; } = {};
Object.keys(uniforms).forEach((uniformName: string) => { Object.keys(uniforms).forEach((uniformName: string) => {
const type = typeof uniforms[uniformName]; const type = typeof uniforms[uniformName];
if ( if (

4
packages/utils/src/color.ts
View File

@ -15,6 +15,10 @@ export function rgb2arr(str: string) {
return arr; return arr;
} }
export function isColor(str: string) {
return d3.color(str);
}
export function decodePickingColor(color: Uint8Array): number { export function decodePickingColor(color: Uint8Array): number {
const i1 = color && color[0]; const i1 = color && color[0];
const i2 = color && color[1]; const i2 = color && color[1];

144
stories/Map/components/amap2demo.tsx
View File

@ -17,7 +17,7 @@ export default class Amap2demo extends React.Component {
center: [121.107846, 30.267069], center: [121.107846, 30.267069],
pitch: 0, pitch: 0,
style: 'normal', style: 'normal',
zoom: 20, zoom: 2,
animateEnable: false, animateEnable: false,
}), }),
}); });
@ -27,63 +27,133 @@ export default class Amap2demo extends React.Component {
lat: 30.267069, lat: 30.267069,
opacity2: 0.2, opacity2: 0.2,
strokeOpacity2: 0.2, strokeOpacity2: 0.2,
strokeColor: '#000',
strokeWidth: 0.5,
// offsets2: [0, 0]
offsets2: [100, 100],
}, },
{ {
lng: 121.107, lng: 121.107,
lat: 30.267069, lat: 30.267069,
opacity2: 0.4, opacity2: 0.4,
strokeOpacity2: 0.4, strokeOpacity2: 0.4,
strokeColor: '#0f0',
strokeWidth: 2,
offsets2: [100, 100],
}, },
{ {
lng: 121.107846, lng: 121.107846,
lat: 30.26718, lat: 30.26718,
opacity2: 0.6, opacity2: 0.6,
strokeOpacity2: 0.6, strokeOpacity2: 0.6,
strokeColor: '#f00',
strokeWidth: 4,
// offsets2: [200, 200]
offsets2: [100, 100],
}, },
// { // {
// lng: 38.54, // lng: 38.54,
// lat: 77.02, // lat: 77.02,
// opacity: 0.5 // opacity: 0.5
// strokeColor: "#ff0"
// }, // },
]; ];
this.scene = scene; this.scene = scene;
// https://gw-office.alipayobjects.com/bmw-prod/61c3fca0-2991-48b4-bb6d-ecc2cbd682dd.json // 100 * 100
let hunredMhunred =
'https://gw-office.alipayobjects.com/bmw-prod/61c3fca0-2991-48b4-bb6d-ecc2cbd682dd.json';
// https://gw-office.alipayobjects.com/bmw-prod/ccc91465-d3ea-4eda-a178-7c1815dac32b.json // 1000 * 100
let thousandMhundred =
'https://gw-office.alipayobjects.com/bmw-prod/ccc91465-d3ea-4eda-a178-7c1815dac32b.json';
scene.on('loaded', () => { scene.on('loaded', () => {
const layer = new PointLayer() for (let i = 0; i < 1; i++) {
.source(originData, { fetch(thousandMhundred)
parser: { .then((res) => res.text())
type: 'json', .then((data) => {
x: 'lng', // console.log('data', data)
y: 'lat', // lng: Math.random() * 180, // 0 ~ 180
}, // lat: Math.random() * 100 - 50, // -50 ~ 50
}) // customOpacity: Math.random(),
.shape('circle') // customStroke: `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255}, 1)`,
// .shape('normal') // customStrokeOpacity: Math.random(),
// .shape('fill') // customStrokeWidth: Math.random() * 5,
.color('rgba(255, 0, 0, 0.9)') let layer = new PointLayer()
.size(10) .source(JSON.parse(data), {
.style({ parser: {
stroke: '#000', type: 'json',
storkeWidth: 2, x: 'lng',
// strokeOpacity: 0.2, y: 'lat',
// strokeOpacity: 'strokeOpacity2', },
strokeOpacity: [ })
'strokeOpacity2', .shape('circle')
(d: any) => { .color('rgba(255, 0, 0, 1.0)')
return d; .size(10)
}, .style({
], opacity: 'customOpacity',
// strokeOpacity: ['opacity2', [0.2, 0.6]], strokeOpacity: 'customStrokeOpacity',
// offsets: [100, 100], strokeWidth: 'customStrokeWidth',
opacity: 'opacity2', stroke: 'customStroke',
// opacity: 0.2 });
// opacity: ['opacity2', (d: any) => { scene.addLayer(layer);
// return d });
// }] // let layer = new PointLayer()
// opacity: ['opacity2', [0.2, 0.6]], // .source(originData, {
}) // parser: {
.active(true); // type: 'json',
scene.addLayer(layer); // x: 'lng',
// y: 'lat',
// },
// })
// .shape('circle')
// // .shape('normal')
// // .shape('fill')
// // .color('rgba(255, 0, 0, 0.9)')
// .color('rgba(255, 0, 0, 1.0)')
// .size(10)
// // .offsets('123')
// .style({
// // stroke: '#000',
// // stroke: 'rgba(0, 255, 0, 1)',
// // stroke: 'strokeColor',
// // stroke: ['strokeColor', (d: any) => {
// // return d
// // }],
// // stroke: ['strokeColor', ["#f00", "#ff0"]],
// // strokeWidth: 4,
// // strokeWidth: "strokeWidth",
// // strokeWidth: ["strokeWidth", [1, 2]],
// // strokeWidth: ["strokeWidth", (d: any) => {
// // return d * 2
// // }],
// // strokeOpacity: 0.5,
// // strokeOpacity: 'strokeOpacity2',
// // strokeOpacity: 1.0,
// // strokeOpacity: [
// // 'strokeOpacity2',
// // (d: any) => {
// // // console.log('strokeOpacity2', d)
// // return d*2;
// // },
// // ],
// // strokeOpacity: ['opacity2', [0.2, 0.6]],
// // offsets: [100, 100],
// // offsets: 'offsets2',
// // offsets: ['offsets2', (d: any) => d],
// // opacity: 'opacity2',
// // opacity: 0.2
// // opacity: 0,
// // opacity: ['opacity2', (d: any) => {
// // return d
// // }]
// // opacity: ['opacity2', [0.2, 0.6]],
// })
// .active(true);
// scene.addLayer(layer);
}
}); });
} }