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

resolve conflicts

This commit is contained in:
mipha.ly@alibaba-inc.com 2019-02-27 17:00:27 +08:00 committed by mipha.ly
parent bced1b7110 d58364d6d3
commit e5e4688d0d
86 changed files with 3190 additions and 580 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -69,7 +69,6 @@ lib
*.sw*
*.un~
demos/mapbox.html
demos/gd.html
demos/data
demos/image

3
.npmignore
View File

@ -70,8 +70,11 @@ test
*.un~
.idea
bin
bundler
demos
docs
lib
src
temp
webpack-dev.config.js
webpack.config.js

4
.torch.compile.opts.js
View File

@ -1,5 +1,4 @@
const path = require('path');
module.exports = {
babelrc: {
presets: [
@ -10,7 +9,8 @@ module.exports = {
include: [
'src/**/*.js',
'test/**/*.js',
'node_modules/three/**/*.js'
'node_modules/_three@0.96.0@three/**/*.js',
'node_modules/simple-statistics/src/*.js'
],
exclude: [
'node_modules/@babel/**/*.js'

9
demos/01_point_circle.html
View File

@ -10,6 +10,9 @@
<title>point_circle</title>
<style>
#map { position:absolute; top:0; bottom:0; width:100%; }
.amap-maps {
cursor: auto !important
}
</style>
</head>
@ -55,15 +58,15 @@ scene.on('loaded', () => {
.shape('2d:circle')
.size('value', [ 2, 80]) // default 1
//.size('value', [ 10, 300]) // default 1
.active(false)
.active(true)
.filter('value', field_8 => {
return field_8 * 1 > 500;
})
.color('type', colorObj.red)
.color('type', colorObj.blue)
.style({
stroke: 'rgb(255,255,255)',
strokeWidth: 1,
opacity: 0.9
opacity: 1.
})
.render();

8
demos/01_point_column.html
View File

@ -34,9 +34,11 @@ scene.on('loaded', () => {
zIndex: 2
})
.source(data.list, {
type: 'array',
x: 'j',
y: 'w',
parser:{
type: 'json',
x: 'j',
y: 'w',
}
})
.shape('cylinder')
.size('t',(level)=> {

8
demos/01_point_distribute.html
View File

@ -34,9 +34,11 @@ scene.on('loaded', () => {
zIndex: 2
})
.source(data, {
type: 'csv',
y: 'lat',
x: 'lng'
parser:{
type: 'csv',
y: 'lat',
x: 'lng'
}
})
.size(1.0)
.color('#0D408C')

77
demos/02_point_circle.html Normal file
View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="geometry" content="diagram">
<link rel="stylesheet" href="./assets/common.css">
<link rel="stylesheet" href="./assets/info.css">
<title>point_circle</title>
<style>
#map { position:absolute; top:0; bottom:0; width:100%; }
.amap-maps {
cursor: auto !important
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/dat.gui.min.js"></script>
<script src="../build/L7.js"></script>
<script>
const colorObj ={
blue: ["#E8FCFF", "#CFF6FF", "#A1E9ff", "#65CEF7", "#3CB1F0", "#2894E0", "#1772c2", "#105CB3", "#0D408C", "#002466"].reverse(),
red: ["#FFF4F2", "#FFDFDB", "#FAADAA", "#F77472", "#F04850", "#D63147", "#BD223E", "#A81642", "#820C37", "#5C0023"].reverse(),
orange:["#FFF7EB", "#FFECD4", "#FAD09D", "#F7B16A", "#F08D41", "#DB6C2C", "#C2491D", "#AD2B11", "#871D0C", "#610800"].reverse(),
green:["#FAFFF0", "#EBF7D2", "#C8E695", "#A5D660", "#7DC238", "#59A616", "#3F8C0B", "#237804", "#125200", "#082B00"].reverse(),
yellow:["#FFFFE8", "#FFFECC", "#FAF896", "#F7E463", "#F0CE3A", "#DBB125", "#C29117", "#AD7410", "#87500C", "#613000"].reverse(),
purple:["#FCF2FF", "#F5DEFF", "#DDB3F2", "#BE7BE3", "#9B4ECF", "#7737B3", "#5B2899", "#411C85", "#270F5E", "#100338"].reverse()
}
const scene = new L7.Scene({
id: 'map',
mapStyle: 'light', // 样式URL
center: [ 120.19382669582967, 30.258134 ],
pitch: 0,
zoom: 4,
maxZoom:14,
minZoom:4,
});
window.scene = scene;
scene.on('loaded', () => {
$.get('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', data => {
const circleLayer = scene.PointLayer({
zIndex: 2
})
.source(data,{
type: 'csv',
x: 'lng',
y: 'lat',
})
.size(1.0)
.color('#0D408C')
.style({
stroke: 'rgb(255,255,255)',
strokeWidth: 1,
opacity: 1.
})
.render();
circleLayer.on('click',(e)=>{
console.log(e);
})
});
});
</script>
</body>
</html>

7
demos/04_image.html
View File

@ -33,8 +33,11 @@ const scene = new L7.Scene({
scene.on('loaded', () => {
const imageLayer = scene.ImageLayer().
source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',{
extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
parser:{
type:'image',
extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
}
})
.style({
opacity:1.0,

15
demos/05_raster_dem.html
View File

@ -48,13 +48,14 @@ scene.on('loaded', () => {
const layer = scene.RasterLayer({ zIndex: 2 }).
source(values, {
type: 'raster',
width: n,
height: m,
min: 0,
max: 8000,
extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ]
parser: {
type: 'raster',
width: n,
height: m,
min: 0,
max: 8000,
extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ]
}
})
.style({
rampColors: {

74
demos/grid.html Normal file
View File

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="geometry" content="diagram">
<link rel="stylesheet" href="./assets/common.css">
<title>point_circle</title>
<style>
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/dat.gui.min.js"></script>
<script src="../build/L7.js"></script>
<script>
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [120.132624,30.281774],
pitch: 0,
zoom: 3.88
});
scene.on('loaded', () => {
$.get('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', data => {
var layer = scene.HeatMapLayer({
zIndex: 2
})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms:[
{
type: 'map',
callback:function(item){
const [x, y] = item.coordinates;
item.lat = item.lat*1;
item.lng = item.lng*1;
item.v = item.v *1;
item.coordinates = [x*1,y*1];
return item;
}
},
{
type: 'grid',
size: 15000,
field:'v',
method:'sum'
}
]
})
.shape('gird')
.style({
coverage: 0.8
})
.color('count', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
.render();
console.log(layer);
});
});
</script>
</body>
</html>

76
demos/hexgon.html Normal file
View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="geometry" content="diagram">
<link rel="stylesheet" href="./assets/common.css">
<title>point_circle</title>
<style>
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/dat.gui.min.js"></script>
<script src="../build/L7.js"></script>
<script>
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [120.132624,30.281774],
pitch: 0,
zoom: 10
});
scene.on('loaded', () => {
$.get('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', data => {
var layer = scene.HeatMapLayer({
zIndex: 2
})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms:[
{
type: 'map',
callback:function(item){
const [x, y] = item.coordinates;
item.lat = item.lat*1;
item.lng = item.lng*1;
item.v = item.v *1;
item.coordinates = [x*1,y*1];
return item;
}
},
{
type: 'hexagon',
size: 6000,
field:'v',
method:'sum'
}
]
})
.active(true)
.shape('hexagon')
.style({
coverage: 0.9,
angle: 0,
})
.color('count', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
.render();
console.log(layer);
});
});
</script>
</body>
</html>

93
demos/mapbox.html Normal file
View File

@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="geometry" content="diagram">
<link rel="stylesheet" href="./assets/common.css">
<link rel="stylesheet" href="./assets/info.css">
<title>point_circle</title>
<style>
body {
margin:0;
padding:0;
}
#map { position:absolute; top:0; bottom:0; width:100%; margin:0; }
</style>
</head>
<body>
<div id="map"></div>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.css' rel='stylesheet' />
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/dat.gui.min.js"></script>
<script src="../build/L7.js"></script>
<script>
const colorObj ={
blue: ["#E8FCFF", "#CFF6FF", "#A1E9ff", "#65CEF7", "#3CB1F0", "#2894E0", "#1772c2", "#105CB3", "#0D408C", "#002466"].reverse(),
red: ["#FFF4F2", "#FFDFDB", "#FAADAA", "#F77472", "#F04850", "#D63147", "#BD223E", "#A81642", "#820C37", "#5C0023"].reverse(),
orange:["#FFF7EB", "#FFECD4", "#FAD09D", "#F7B16A", "#F08D41", "#DB6C2C", "#C2491D", "#AD2B11", "#871D0C", "#610800"].reverse(),
green:["#FAFFF0", "#EBF7D2", "#C8E695", "#A5D660", "#7DC238", "#59A616", "#3F8C0B", "#237804", "#125200", "#082B00"].reverse(),
yellow:["#FFFFE8", "#FFFECC", "#FAF896", "#F7E463", "#F0CE3A", "#DBB125", "#C29117", "#AD7410", "#87500C", "#613000"].reverse(),
purple:["#FCF2FF", "#F5DEFF", "#DDB3F2", "#BE7BE3", "#9B4ECF", "#7737B3", "#5B2899", "#411C85", "#270F5E", "#100338"].reverse()
}
const scene = new L7.Scene({
container: 'map',
mapType:'mapbox',
style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
center: [ 120.19382669582967, 30.258134 ],
pitch: 0,
hash:true,
zoom: 1,
});
window.scene = scene;
scene.on('loaded', () => {
var colors = ["#FFF5B8","#FFDC7D","#FFAB5C","#F27049","#D42F31","#730D1C"];
$.getJSON('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json', city => {
const citylayer = scene.PolygonLayer()
.source(city)
//.color('pm2_5_24h',["#FFF5B8","#FFDC7D","#FFAB5C","#F27049","#D42F31","#730D1C"])
.color('pm2_5_24h',(p)=>{
if(p>120){
return colors[5];
} else if(p>65){
return colors[4];
} else if(p>30) {
return colors[3];
} else if(p>15){
return colors[2];
} else if(p>8){
return colors[1];
}else {
return colors[0];
}
})
.shape('fill')
.active(true)
.style({
opacity: 1
})
.render();
console.log('success');
});
$.get('https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json', data => {
citylayer = scene.PolygonLayer({
zIndex: 2
})
.source(data)
.shape('extrude')
.active({fill:'red'})
.size('floor',[0.1,1])
.color('#aaa')
.render();
})
});
</script>
</body>
</html>

8
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "1.0.1",
"version": "1.0.3",
"description": "Large-scale WebGL-powered Geospatial Data Visualization",
"main": "build/l7.js",
"browser": "build/l7.js",
@ -78,11 +78,11 @@
"prepublishOnly": "npm run build-lib && npm run dist",
"screenshot": "node ./bin/screenshot.js",
"start": "npm run dev",
"test": "torch --compile --renderer --recursive test/unit",
"test": "torch --compile-opts ./.torch.compile.opts.js --compile --renderer --recursive test/unit",
"test-all": "npm run test && npm run test-bugs",
"test-bugs": "torch --compile --renderer --recursive test/bugs",
"test-bugs-live": "torch --compile --interactive --watch --recursive test/bugs",
"test-live": "torch --compile --interactive --watch --recursive test/unit",
"test-live": "torch --compile --interactive --watch --recursive test/unit",
"watch": "webpack --config webpack-dev.config.js",
"win-dev": "node ./bin/win-dev.js"
},
@ -101,12 +101,14 @@
"@turf/invariant": "^6.1.2",
"@turf/meta": "^6.0.2",
"d3-dsv": "^1.0.10",
"d3-hexbin": "^0.2.2",
"earcut": "^2.1.3",
"fecha": "^2.3.3",
"gl-matrix": "^2.4.1",
"lodash": "^4.17.5",
"polyline-normals": "^2.0.2",
"rbush": "^2.0.2",
"simple-statistics": "^7.0.1",
"three": "^0.96.0",
"venn.js": "^0.2.20",
"viewport-mercator-project": "^5.2.0",

36
src/core/controller/geom.js
View File

@ -1,36 +0,0 @@
import geom from '../../geom/geom';
import { GeoBuffer, bufferGeometry, Material } from '../../geom/index';
// geom shape buffer geometry material
// shape name type()
// buffer 1:n geometry
// geometry
//
export default function polygonGeom(shape, coordinates, properties, layerid) {
const polygongeom = geom.polygon;
const { buffer, geometry, material } = polygongeom[shape];// polygon 映射表
const bufferData = new GeoBuffer[buffer]({
coordinates,
properties,
shape
});
bufferData.bufferStruct.name = layerid;
const bg = new bufferGeometry[geometry](bufferData.bufferStruct);
const mtl = Material[material]();
return {
geometry: bg,
mtl
};
}
export function pointGeom(shape, bufferData) {
const pointgeom = geom.point;
const { geometry, material } = pointgeom[shape];
const bg = new bufferGeometry[geometry](bufferData.bufferStruct);
const mtl = Material[material]();
return {
geometry: bg,
mtl
};
}

24
src/core/controller/map.js Normal file
View File

@ -0,0 +1,24 @@
import { getMap } from '../../map';
import Base from '../base';
export default class MapContorller extends Base {
constructor(cfg, engine, scene) {
super(cfg);
this._engine = engine;
this.scene = scene;
}
_init() {
const mapType = this.get('mapType');
const mapCfg = this.get('mapCfg');
this.map = new getMap(mapType)(mapCfg);
this.map('mapLoad', this._mapload.bind(this));
}
_mapload() {
this.map.asyncCamera(this._engine);
this.emit('loaded');
}
_bindMapMethod() {
}
}

3
src/core/engine/index.js
View File

@ -11,6 +11,9 @@ export default class Engine extends EventEmitter {
this._camera = new Camera(container).camera;
this._renderer = new Renderer(container).renderer;
this._world = world;
// for MapBox
this.world = new THREE.Group();
this._scene.add(this.world);
this._picking = Picking(this._world, this._renderer, this._camera, this._scene);
this.clock = new THREE.Clock();
}

72
src/core/engine/picking/picking.js
View File

@ -9,11 +9,10 @@ class Picking {
this._camera = camera;
this._raycaster = new THREE.Raycaster();
this.scene = scene;
this._envents = [];
// TODO: Match this with the line width used in the picking layers
this._raycaster.linePrecision = 3;
this._raycaster.linePrecision = 10;
this._pickingScene = PickingScene;
this.world = new THREE.Group();
this._pickingScene.add(this.world);
const size = this._renderer.getSize();
this._width = size.width;
this._height = size.height;
@ -21,7 +20,7 @@ class Picking {
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
stencilBuffer: false,
depthBuffer: false
depthBuffer: true
};
this._pickingTexture = new THREE.WebGLRenderTarget(this._width, this._height, parameters);
@ -35,38 +34,14 @@ class Picking {
_initEvents() {
this._resizeHandler = this._resizeTexture.bind(this);
window.addEventListener('resize', this._resizeHandler, false);
// this._mouseUpHandler = this._onMouseUp.bind(this);
// this._world._container.addEventListener('mouseup', this._mouseUpHandler, false);
// this._world._container.addEventListener('mousemove', this._mouseUpHandler, false);
// this._world._container.addEventListener('mousemove', this._onWorldMove.bind(this), false);
}
pickdata(event) {
const point = { x: event.clientX, y: event.clientY, type: event.type };
const point = { x: event.offsetX, y: event.offsetY, type: event.type };
const normalisedPoint = { x: 0, y: 0 };
normalisedPoint.x = (point.x / this._width) * 2 - 1;
normalisedPoint.y = -(point.y / this._height) * 2 + 1;
this._pickAllObject(point, normalisedPoint);
}
_onMouseUp(event) {
// Only react to main button click
// if (event.button !== 0) {
// return;
// }
const point = { x: event.clientX, y: event.clientY, type: event.type };
const normalisedPoint = { x: 0, y: 0 };
normalisedPoint.x = (point.x / this._width) * 2 - 1;
normalisedPoint.y = -(point.y / this._height) * 2 + 1;
this._pickAllObject(point, normalisedPoint);
// this._pick(point, normalisedPoint);
}
_onWorldMove() {
this._needUpdate = true;
}
// TODO: Ensure this doesn't get out of sync issue with the renderer resize
_resizeTexture() {
const size = this._renderer.getSize();
@ -80,36 +55,19 @@ class Picking {
_update(point) {
const texture = this._pickingTexture;
// if (this._needUpdate) {
this._renderer.render(this._pickingScene, this._camera, this._pickingTexture);
// this._needUpdate = false;
// }
this.pixelBuffer = new Uint8Array(4);
this._renderer.readRenderTargetPixels(texture, point.x, this._height - point.y, 1, 1, this.pixelBuffer);
}
// 添加dom事件 支持 mousedown ,mouseenter mouseleave mousemove mouseover mouseout mouse up
on(type) {
this._mouseUpHandler = this._onMouseUp.bind(this);
this._world._container.addEventListener(type, this._mouseUpHandler, false);
this._envents.push([ type, this._mouseUpHandler ]);
}
off(type, hander) {
this._world._container.removeEventListener(type, this._mouseUpHandler, false);
this._envents = this._envents.filter(item => {
return item[0] === 'type' && hander === item[1];
});
}
_filterObject(id) {
this._pickingScene.children.forEach((object, index) => {
this.world.children.forEach((object, index) => {
index === id ? object.visible = true : object.visible = false;
});
}
_pickAllObject(point, normalisedPoint) {
this._pickingScene.children.forEach((object, index) => {
this.world.children.forEach((object, index) => {
this._filterObject(index);
const item = this._pick(point, normalisedPoint, object.name);
item.type = point.type;
@ -124,19 +82,13 @@ class Picking {
_pick(point, normalisedPoint, layerId) {
this._update(point);
// Interpret the pixel as an ID
let id = (this.pixelBuffer[2] * 255 * 255) + (this.pixelBuffer[1] * 255) + (this.pixelBuffer[0]);
// Skip if ID is 16646655 (white) as the background returns this
if (id === 16646655 || this.pixelBuffer[3] === 0) {
id = -999;
// return;
}
this._raycaster.setFromCamera(normalisedPoint, this._camera);
// Perform ray intersection on picking scene
//
// TODO: Only perform intersection test on the relevant picking mesh
const intersects = this._raycaster.intersectObjects(this._pickingScene.children, true);
const _point2d = { x: point.x, y: point.y };
@ -144,11 +96,6 @@ class Picking {
if (intersects.length > 0) {
_point3d = intersects[0].point;
}
// Pass along as much data as possible for now until we know more about how
// people use the picking API and what the returned data should be
//
// TODO: Look into the leak potential for passing so much by reference here
const item = {
layerId,
featureId: id - 1,
@ -164,13 +111,14 @@ class Picking {
//
// Picking ID should already be added as an attribute
add(mesh) {
this._pickingScene.add(mesh);
this.world.add(mesh);
this._needUpdate = true;
}
// Remove mesh from picking scene
remove(mesh) {
this._pickingScene.remove(mesh);
this.world.remove(mesh);
this._needUpdate = true;
}

41
src/core/layer.js
View File

@ -5,7 +5,7 @@
import Base from './base';
import * as THREE from './three';
import ColorUtil from '../attr/color-util';
import * as source from '../source/index';
import source from './source';
import PickingMaterial from '../core/engine/picking/pickingMaterial';
import Attr from '../attr/index';
import Util from '../util';
@ -63,7 +63,8 @@ export default class Layer extends Base {
const layerId = this._getUniqueId();
this.layerId = layerId;
this._activeIds = null;
scene._engine._scene.add(this._object3D);
const world = scene._engine.world;
world.add(this._object3D);
this.layerMesh = null;
this.layerLineMesh = null;
this._initEvents();
@ -106,12 +107,9 @@ export default class Layer extends Base {
this._object3D.visible = this.get('visible');
}
source(data, cfg = {}) {
const dataType = this._getDataType(data);
const { type = dataType } = cfg;
cfg.data = data;
cfg.mapType = this.get('mapType');
this.layerSource = new source[type](cfg);
cfg.mapType = this.scene.mapType;
this.layerSource = new source(cfg);
// this.scene.workerPool.runTask({
// command: 'geojson',
// data: cfg
@ -279,10 +277,10 @@ export default class Layer extends Base {
const { featureId } = e;
if (featureId < 0) return;
const activeStyle = this.get('activedOptions');
const selectFeatureIds = this.layerSource.getSelectFeatureId(featureId);
// const selectFeatureIds = this.layerSource.getSelectFeatureId(featureId);
// 如果数据不显示状态则不进行高亮
if (this.StyleData[selectFeatureIds[0]].hasOwnProperty('filter') && this.StyleData[selectFeatureIds[0]].filter === false) { return; }
const style = Util.assign({}, this.StyleData[featureId]);
if (this.layerData[featureId].hasOwnProperty('filter') && this.layerData[featureId].filter === false) { return; }
const style = Util.assign({}, this.layerData[featureId]);
style.color = ColorUtil.toRGB(activeStyle.fill).map(e => e / 255);
this.updateStyle([ featureId ], style);
}
@ -321,7 +319,7 @@ export default class Layer extends Base {
_updateSize(zoom) {
const sizeOption = this.get('attrOptions').size;
const fields = parseFields(sizeOption.field);
const data = this.layerSource.propertiesData;
const data = this.layerSource.data.dataArray;
if (!this.zoomSizeCache) this.zoomSizeCache = {};
if (!this.zoomSizeCache[zoom]) {
this.zoomSizeCache[zoom] = [];
@ -339,7 +337,8 @@ export default class Layer extends Base {
const self = this;
const attrs = self.get('attrs');
const mappedData = [];
const data = this.layerSource.propertiesData;
// const data = this.layerSource.propertiesData;
const data = this.layerSource.data.dataArray;
for (let i = 0; i < data.length; i++) {
const record = data[i];
const newRecord = {};
@ -362,18 +361,17 @@ export default class Layer extends Base {
}
}
}
newRecord.coordinates = record.coordinates;
mappedData.push(newRecord);
}
this.StyleData = mappedData;
return mappedData;
this.layerData = mappedData;
}
// 更新地图映射
_updateMaping() {
const self = this;
const attrs = self.get('attrs');
const data = this.layerSource.propertiesData;
const data = this.layerSource.data.dataArray;
for (let i = 0; i < data.length; i++) {
const record = data[i];
for (const attrName in attrs) {
@ -385,10 +383,10 @@ export default class Layer extends Base {
for (let j = 0; j < values.length; j++) {
const val = values[j];
const name = names[j];
this.StyleData[i][name] = (Util.isArray(val) && val.length === 1) ? val[0] : val; // 只有一个值时返回第一个属性值
this.layerData[i][name] = (Util.isArray(val) && val.length === 1) ? val[0] : val; // 只有一个值时返回第一个属性值
}
} else {
this.StyleData[i][names[0]] = values.length === 1 ? values[0] : values;
this.layerData[i][names[0]] = values.length === 1 ? values[0] : values;
}
attr.neadUpdate = true;
@ -468,6 +466,7 @@ export default class Layer extends Base {
pickingMesh.material.setUniformsValue('u_zoom', zoom);
};
this._pickingMesh.add(pickingMesh);
}
_setPickingId() {
this._pickingId = this.getPickingId();
@ -532,13 +531,13 @@ export default class Layer extends Base {
*/
_updateFilter(object) {
this._updateMaping();
const filterData = this.StyleData;
const filterData = this.layerData;
this._activeIds = null; // 清空选中元素
const colorAttr = object.geometry.attributes.a_color;
const pickAttr = object.geometry.attributes.pickingId;
pickAttr.array.forEach((id, index) => {
id = Math.abs(id);
const color = [ ...this.StyleData[id - 1].color ];
const color = [ ...this.layerData[id - 1].color ];
id = Math.abs(id);
const item = filterData[id - 1];
if (item.hasOwnProperty('filter') && item.filter === false) {
@ -584,7 +583,7 @@ export default class Layer extends Base {
const pickingId = this.layerMesh.geometry.attributes.pickingId.array;
const colorAttr = this.layerMesh.geometry.attributes.a_color;
this._activeIds.forEach(index => {
const color = this.StyleData[index].color;
const color = this.layerData[index].color;
const firstId = pickingId.indexOf(index + 1);
for (let i = firstId; i < pickingId.length; i++) {
if (pickingId[i] === index + 1) {

23
src/core/scene.js
View File

@ -3,9 +3,10 @@ import { LAYER_MAP } from '../layer';
import Base from './base';
import LoadImage from './image';
import WorkerPool from './worker';
import { MapProvider } from '../map/provider';
import GaodeMap from '../map/gaodeMap';
// import { MapProvider } from '../map/AMap';
import { getMap } from '../map/index';
import Global from '../global';
import { compileBuiltinModules } from '../geom/shader';
export default class Scene extends Base {
getDefaultCfg() {
return Global.scene;
@ -22,6 +23,7 @@ export default class Scene extends Base {
this._engine = new Engine(mapContainer, this);
this._engine.run();
this.workerPool = new WorkerPool();
compileBuiltinModules();
}
// 为pickup场景添加 object 对象
addPickMesh(object) {
@ -29,16 +31,14 @@ export default class Scene extends Base {
}
_initMap() {
this.mapContainer = this.get('id');
this._container = document.getElementById(this.mapContainer);
const Map = new MapProvider(this.mapContainer, this._attrs);
this.mapType = this.get('mapType') || 'amap';
const MapProvider = getMap(this.mapType);
const Map = new MapProvider(this._attrs);
Map.mixMap(this);
this._container = document.getElementById(Map.container);
// const Map = new MapProvider(this.mapContainer, this._attrs);
Map.on('mapLoad', () => {
this._initEngine(Map.renderDom);
const sceneMap = new GaodeMap(Map.map);
// eslint-disable-next-line
Object.getOwnPropertyNames(sceneMap.__proto__).forEach((key)=>{
// eslint-disable-next-line
if ('key' !== 'constructor') { this.__proto__[key] = sceneMap.__proto__[key]; }
});
this.map = Map.map;
Map.asyncCamera(this._engine);
this.initLayer();
@ -94,12 +94,15 @@ export default class Scene extends Base {
'mousedown',
'mouseleave',
'mouseup',
'rightclick',
'click',
'dblclick'
];
events.forEach(event => {
this._container.addEventListener(event, e => {
// 要素拾取
e.pixel || (e.pixel = e.point);
this._engine._picking.pickdata(e);
}, false);
});

65
src/core/source.js
View File

@ -1,17 +1,15 @@
/*
* @Author: ThinkGIS
* @Date: 2018-06-08 11:19:06
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2018-11-01 11:50:43
*/
import Base from './base';
const Controller = require('./controller/index');
import { aProjectFlat } from '../geo/project';
import { getTransform, getParser } from '../source';
import { getMap } from '../map/index';
export default class Source extends Base {
getDefaultCfg() {
return {
data: null,
defs: {},
parser: {},
transforms: [],
scales: {
},
options: {}
@ -19,26 +17,40 @@ export default class Source extends Base {
}
constructor(cfg) {
super(cfg);
const transform = this.get('transforms');
this._transforms = transform || [];
this._initControllers();
this.prepareData();
// 数据解析
this._excuteParser();
// 数据转换 统计，聚合，分类
this._executeTrans();
// 坐标转换
this._projectCoords();
}
// 标准化数据
prepareData() {
_excuteParser() {
const parser = this.get('parser');
const { type = 'geojson' } = parser;
const data = this.get('data');
this.propertiesData = [];// 临时使用
this.geoData = [];
data.coordinates.forEach(geo => {
const coord = this._coordProject(geo);
this.geoData.push(coord);
this.propertiesData.push([]);
this.data = getParser(type)(data, parser);
}
/**
* 数据统计
*/
_executeTrans() {
const trans = this._transforms;
trans.forEach(tran => {
const { type } = tran;
this.data = getTransform(type)(this.data, tran);
});
this._transforms = trans;
}
_projectCoords() {
this.data.dataArray.forEach(data => {
data.coordinates = this._coordProject(data.coordinates);
});
}
createScale(field) {
const data = this.propertiesData;
const data = this.data.dataArray;
const scales = this.get('scales');
let scale = scales[field];
const scaleController = this.get('scaleController');
@ -50,6 +62,8 @@ export default class Source extends Base {
}
_initControllers() {
const defs = this.get('defs');
const mapType = this.get('mapType');
this.projectFlat = getMap(mapType).project;
const scaleController = new Controller.Scale({
defs
});
@ -83,9 +97,14 @@ export default class Source extends Base {
}
_coorConvert(geo) {
const ll = aProjectFlat(geo);
return [ ll.x, -ll.y, geo[2] || 0 ];
const ll = this.projectFlat(geo);
return [ ll.x, ll.y, geo[2] || 0 ];
}
getSelectFeature(featureId) {
const data = this.get('data');
// 如果是GeoJSON 数据返回原数
return data.features ? data.features[featureId] : this.data.dataArray[featureId];
}
}

3
src/core/three.js
View File

@ -4,6 +4,7 @@ export { Scene } from 'three/src/scenes/Scene.js';
export { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js';
export { CanvasTexture } from 'three/src/textures/CanvasTexture.js';
export { Object3D } from 'three/src/core/Object3D.js';
export { Group } from 'three/src/objects/Group';
export { Clock } from 'three/src/core/Clock';
export { Points } from 'three/src/objects/Points.js';
export { LineSegments } from 'three/src/objects/LineSegments.js';
@ -38,4 +39,4 @@ export {
BufferAttribute
} from 'three/src/core/BufferAttribute.js';
// export * from '../../build/Three.js';
// export * from '../../build/three.js';

87
src/geo/lngLat.js
View File

File diff suppressed because one or more lines are too long

17
src/geo/project.js
View File

@ -13,5 +13,20 @@ export function aProjectFlat(lnglat) {
d = 0.5;
x = scale * (a * x + b) - 215440491;
y = scale * (c * y + d) - 106744817;
return { x, y };
return { x: parseInt(x), y: parseInt(y) };
}
export function unProjectFlat(px) {
const a = 0.5 / Math.PI,
b = 0.5,
c = -0.5 / Math.PI;
let d = 0.5;
const scale = 256 << 20;
let [ x, y ] = px;
x = ((x + 215440491) / scale - b) / a;
y = ((y + 106744817) / scale - d) / c;
y = (Math.atan(Math.pow(Math.E, y)) - (Math.PI / 4)) * 2;
d = Math.PI / 180;
const lat = y / d;
const lng = x / d;
return [ lng, lat ];
}

26
src/geom/buffer/heatmap.js
View File

@ -5,36 +5,30 @@ import * as THREE from '../../core/three';
export default class HeatmapBuffer extends BufferBase {
geometryBuffer() {
const coordinates = this.get('coordinates');
const properties = this.get('properties');
const data = this.get('data');
const positions = [];
const dirs = [];
const weights = [];
const indices = [];
// const indices = [];
// 组织顶点数据
coordinates.forEach((geo, index) => {
const totalIndex = index * 4;
const props = properties[index];
const radius = props.size;
/* const tl = this._addVertex(geo, -1, -1);
const tr = this._addVertex(geo, 1, -1);
const bl = this._addVertex(geo, -1, 1);
const br = this._addVertex(geo, 1, 1);*/
data.forEach((d, index) => {
// const totalIndex = index * 4;
const coord = d.coordinates;
const weight = d.size;
const dir = this._addDir(-1, 1);
const dir1 = this._addDir(1, 1);
const dir2 = this._addDir(-1, -1);
const dir3 = this._addDir(1, -1);
positions.push(...geo, ...geo, ...geo, ...geo, ...geo, ...geo);
positions.push(...coord, ...coord, ...coord, ...coord, ...coord, ...coord);
dirs.push(...dir, ...dir2, ...dir3, ...dir1, ...dir, ...dir3);
// dirs.push(...this._addDir(-1, 1), ...this._addDir(1, 1), ...this._addDir(-1, -1), ...this._addDir(1, -1));
weights.push(radius, radius, radius, radius, radius, radius);
indices.push(totalIndex, totalIndex + 2, totalIndex + 3, totalIndex, totalIndex + 3, totalIndex + 1);
weights.push(weight, weight, weight, weight, weight, weight);
// indices.push(totalIndex, totalIndex + 2, totalIndex + 3, totalIndex, totalIndex + 3, totalIndex + 1);
});
this.attributes = {
vertices: positions,
indices,
// indices,
dirs,
weights
};

32
src/geom/buffer/heatmap/grid.js Normal file
View File

@ -0,0 +1,32 @@
export default function gridBuffer(layerData) {
const attribute = {
vertices: [],
miter: [],
colors: [],
pickingIds: []
};
layerData.forEach(element => {
const { color, id } = element;
const [ x, y, z ] = element.coordinates;
attribute.vertices.push(x, y, z);
attribute.miter.push(-1, -1);
attribute.vertices.push(x, y, z);
attribute.miter.push(1, 1);
attribute.vertices.push(x, y, z);
attribute.miter.push(-1, 1);
attribute.vertices.push(x, y, z);
attribute.miter.push(-1, -1);
attribute.vertices.push(x, y, z);
attribute.miter.push(1, -1);
attribute.vertices.push(x, y, z);
attribute.miter.push(1, 1);
attribute.colors.push(...color);
attribute.colors.push(...color);
attribute.colors.push(...color);
attribute.colors.push(...color);
attribute.colors.push(...color);
attribute.colors.push(...color);
attribute.pickingIds.push(id, id, id, id, id, id);
});
return attribute;
}

32
src/geom/buffer/heatmap/hexagon.js Normal file
View File

@ -0,0 +1,32 @@
import { polygonPath } from '../../shape/path';
import { fill } from '../../shape/polygon';
export default function hexagonBuffer(layerData) {
const attribute = {
vertices: [],
miter: [],
colors: [],
pickingIds: []
};
const a = Math.cos(Math.PI / 6);
const points = [
[ 0, -1, 0 ],
[ -a, -0.5, 0 ],
[ -a, 0.5, 0 ],
[ 0, 1, 0 ],
[ a, 0.5, 0 ],
[ a, -0.5, 0 ],
[ 0, -1, 0 ]
];
// const hexgonPoints = polygonPath(6);
const hexgonFill = fill([ points ]);
const { positionsIndex, positions } = hexgonFill;
layerData.forEach(element => {
positionsIndex.forEach(pointIndex => {
attribute.vertices.push(...element.coordinates);
attribute.miter.push(positions[pointIndex][0], positions[pointIndex][1]);
attribute.pickingIds.push(element.id);
attribute.colors.push(...element.color);
});
});
return attribute;
}

5
src/geom/buffer/image.js
View File

@ -4,8 +4,9 @@ import * as THREE from '../../core/three';
export default class ImageBuffer extends BufferBase {
geometryBuffer() {
const coordinates = this.get('coordinates');
const images = this.get('image');
const layerData = this.get('layerData');
const coordinates = layerData[0].coordinates;
const images = layerData[0].images;
const positions = [ ...coordinates[0],
coordinates[1][0], coordinates[0][1], 0,
...coordinates[1],

29
src/geom/buffer/line.js
View File

@ -3,8 +3,7 @@ import { lineShape } from '../shape';
export default class LineBuffer extends BufferBase {
geometryBuffer() {
const coordinates = this.get('coordinates');
const properties = this.get('properties');
const layerData = this.get('layerData');
const shapeType = this.shapeType = this.get('shapeType');
const positions = [];
const positionsIndex = [];
@ -16,16 +15,16 @@ export default class LineBuffer extends BufferBase {
this.attributes = this._getArcLineAttributes();
return;
}
coordinates.forEach((geo, index) => {
const props = properties[index];
const attrData = this._getShape(geo, props, index);
layerData.forEach((item, index) => {
const props = item;
const attrData = this._getShape(item.coordinates, props, index);
positions.push(...attrData.positions);
positionsIndex.push(...attrData.indexes);
if (attrData.hasOwnProperty('instances')) {
instances.push(...attrData.instances);
}
});
this.bufferStruct.style = properties;
this.bufferStruct.style = layerData;
this.bufferStruct.verts = positions;
this.bufferStruct.indexs = positionsIndex;
if (instances.length > 0) {
@ -50,17 +49,16 @@ export default class LineBuffer extends BufferBase {
}
_getArcLineAttributes() {
const coordinates = this.get('coordinates');
const properties = this.get('properties');
const layerData = this.get('layerData');
const positions = [];
const colors = [];
const indexArray = [];
const sizes = [];
const instances = [];
coordinates.forEach((geo, index) => {
const props = properties[index];
layerData.forEach(item => {
const props = item;
const positionCount = positions.length / 3;
const attrData = this._getShape(geo, props, positionCount);
const attrData = this._getShape(item.coordinates, props, positionCount);
positions.push(...attrData.positions);
colors.push(...attrData.colors);
indexArray.push(...attrData.indexArray);
@ -76,8 +74,7 @@ export default class LineBuffer extends BufferBase {
};
}
_getMeshLineAttributes() {
const coordinates = this.get('coordinates');
const properties = this.get('properties');
const layerData = this.get('layerData');
const { lineType } = this.get('style');
const positions = [];
const pickingIds = [];
@ -87,10 +84,10 @@ export default class LineBuffer extends BufferBase {
const indexArray = [];
const sizes = [];
const attrDistance = [];
coordinates.forEach((geo, index) => {
const props = properties[index];
layerData.forEach(item => {
const props = item;
const positionCount = positions.length / 3;
const attr = lineShape.Line(geo, props, positionCount, (lineType !== 'soild'));
const attr = lineShape.Line(item.coordinates, props, positionCount, (lineType !== 'soild'));
positions.push(...attr.positions);
normal.push(...attr.normal);
miter.push(...attr.miter);

8
src/geom/buffer/point/fillBuffer.js
View File

@ -3,7 +3,7 @@ import * as THREE from '../../../core/three';
import * as polygonShape from '../../shape/polygon';
import * as polygonPath from '../../shape/path';
import Util from '../../../util';
export default function fillBuffer(coordinates, properties) {
export default function fillBuffer(layerData) {
const attribute = {
vertices: [],
normals: [],
@ -14,8 +14,8 @@ export default function fillBuffer(coordinates, properties) {
faceUv: []
};
coordinates.forEach((geo, index) => {
let { size, shape, color, id } = properties[index];
layerData.forEach(item => {
let { size, shape, color, id, coordinates } = item;
let polygon = null;
const path = polygonPath[shape]();
if (pointShape['2d'].indexOf(shape) !== -1) {
@ -27,7 +27,7 @@ export default function fillBuffer(coordinates, properties) {
} else {
throw new Error('Invalid shape type: ' + shape);
}
toPointShapeAttributes(polygon, geo, { size, shape, color, id }, attribute);
toPointShapeAttributes(polygon, coordinates, { size, shape, color, id }, attribute);
});
return attribute;

8
src/geom/buffer/point/imageBuffer.js
View File

@ -1,4 +1,4 @@
export default function ImageBuffer(coordinates, properties, opt) {
export default function ImageBuffer(layerData, opt) {
const attributes = {
vertices: [],
colors: [],
@ -7,10 +7,10 @@ export default function ImageBuffer(coordinates, properties, opt) {
pickingIds: [],
uv: []
};
coordinates.forEach((pos, index) => {
const { color, size, id, shape } = properties[index];
layerData.forEach(item => {
const { color, size, id, shape, coordinates } = item;
const { x, y } = opt.imagePos[shape];
attributes.vertices.push(...pos);
attributes.vertices.push(...coordinates);
attributes.colors.push(...color);
attributes.pickingIds.push(id);
attributes.sizes.push(size * window.devicePixelRatio); //

8
src/geom/buffer/point/normalBuffer.js
View File

@ -1,13 +1,13 @@
export default function NormalBuffer(coordinates, properties) {
export default function NormalBuffer(layerData) {
const attributes = {
vertices: [],
colors: [],
sizes: [],
pickingIds: []
};
coordinates.forEach((pos, index) => {
const { color, size, id } = properties[index];
attributes.vertices.push(...pos);
layerData.forEach(item => {
const { color, size, id, coordinates} = item;
attributes.vertices.push(...coordinates);
attributes.colors.push(...color);
attributes.pickingIds.push(id);
attributes.sizes.push(size);

8
src/geom/buffer/point/strokeBuffer.js
View File

@ -3,7 +3,7 @@ import * as polygonShape from '../../shape/polygon';
import * as lineShape from '../../shape/line';
import { pointShape } from '../../../global';
import Util from '../../../util';
export default function StrokeBuffer(coordinates, properties, style) {
export default function StrokeBuffer(layerData, style) {
const attribute = {
shapes: [],
normal: [],
@ -15,8 +15,8 @@ export default function StrokeBuffer(coordinates, properties, style) {
colors: []
};
const { stroke, strokeWidth } = style;
coordinates.forEach((geo, index) => {
let { size, shape, id } = properties[index];
layerData.forEach(item => {
let { size, shape, id, coordinates } = item;
const path = polygonPath[shape]();
const positionsIndex = attribute.miter.length;
let polygon = null;
@ -33,7 +33,7 @@ export default function StrokeBuffer(coordinates, properties, style) {
} else {
throw new Error('Invalid shape type: ' + shape);
}
polygonLineBuffer(polygon, geo, size, attribute);
polygonLineBuffer(polygon, coordinates, size, attribute);
});
return attribute;

8
src/geom/buffer/point/textBuffer.js
View File

@ -9,7 +9,7 @@ const metrics = {
family: 'ios9',
size: 24
};
export default function TextBuffer(coordinates, properties, style) {
export default function TextBuffer(layerData, style) {
EventEmitter.call(this);
const attributes = {
originPoints: [],
@ -21,7 +21,7 @@ export default function TextBuffer(coordinates, properties, style) {
const { textOffset = [ 0, 0 ] } = style;
const chars = [];
const textChars = {};
properties.forEach(element => {
layerData.forEach(element => {
let text = element.shape || '';
text = text.toString();
for (let j = 0; j < text.length; j++) {
@ -33,9 +33,9 @@ export default function TextBuffer(coordinates, properties, style) {
}
});
loadTextInfo(chars, (chars, texture) => {
properties.forEach((element, index) => {
layerData.forEach(element => {
const size = element.size;
const pos = coordinates[index];
const pos = layerData.coordinates;
const pen = { x: textOffset[0], y: textOffset[1] };
let text = element.shape || '';
text = text.toString();

17
src/geom/buffer/polygon.js
View File

@ -3,22 +3,21 @@ import BufferBase from './bufferBase';
export default class PolygonBuffer extends BufferBase {
geometryBuffer() {
const coordinates = this.get('coordinates');
const properties = this.get('properties');
const layerData = this.get('layerData');
const shape = this.get('shape');
const positions = [];
const faceUv = [];
const sizes = [];
const positionsIndex = [];
let indexCount = 0;
this.bufferStruct.style = properties;
const isExtrude = properties[0].hasOwnProperty('size');
this.bufferStruct.style = layerData;
const isExtrude = layerData[0].hasOwnProperty('size');
// indices, normals, colors, UVs
coordinates.forEach((geo, index) => {
const heightValue = properties[index].size;
let extrudeData = polygonShape[shape](geo);
layerData.forEach(item => {
const heightValue = item.size;
let extrudeData = polygonShape[shape](item.coordinates);
if (isExtrude && shape === 'extrude') {
extrudeData = polygonShape.extrude(geo);
extrudeData = polygonShape.extrude(item.coordinates);
extrudeData.positions = extrudeData.positions.map(pos => {
pos[2] *= heightValue;
return pos;
@ -48,7 +47,7 @@ export default class PolygonBuffer extends BufferBase {
this.bufferStruct.indices = positionsIndex;
this.bufferStruct.position = positions;
this.bufferStruct.indexCount = indexCount;
this.bufferStruct.style = properties;
this.bufferStruct.style = layerData;
this.bufferStruct.faceUv = faceUv;
this.bufferStruct.sizes = sizes;
if (shape !== 'line') {

12
src/geom/buffer/raster.js
View File

@ -3,8 +3,8 @@ import { colorScales } from '../../attr/colorscales';
import * as THREE from '../../core/three';
export class RasterBuffer extends BufferBase {
geometryBuffer() {
const coordinates = this.get('coordinates');
const layerData = this.get('layerData');
const { coordinates, width, data, height } = layerData.dataArray[0];
const positions = [
...coordinates[0],
coordinates[1][0], coordinates[0][1], 0,
@ -14,9 +14,8 @@ export class RasterBuffer extends BufferBase {
coordinates[0][0], coordinates[1][1], 0
];
const imgPosUv = [ 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0 ];
const raster = this.get('raster');
const size = this.get('size');
const texture = new THREE.DataTexture(new Float32Array(raster.data), raster.width, raster.height, THREE.LuminanceFormat, THREE.FloatType);
const texture = new THREE.DataTexture(new Float32Array(data), width, height, THREE.LuminanceFormat, THREE.FloatType);
texture.generateMipmaps = true;
texture.needsUpdate = true;
const colors = this.get('rampColors');
@ -28,7 +27,7 @@ export class RasterBuffer extends BufferBase {
this.bufferStruct.u_extent = [ coordinates[0][0], coordinates[0][1], coordinates[1][0], coordinates[1][1] ];
this.bufferStruct.u_colorTexture = colorTexture; // 颜色表‘=
const triangles = this._buildTriangles(raster, size, this.bufferStruct.u_extent);
const triangles = this._buildTriangles(width, height, size, this.bufferStruct.u_extent);
const attributes = {
vertices: new Float32Array(triangles.vertices),
uvs: new Float32Array(triangles.uvs),
@ -78,9 +77,8 @@ export class RasterBuffer extends BufferBase {
texture1.needsUpdate = true;
return texture1;
}
_buildTriangles(raster, size = 1, extent) {
_buildTriangles(width, height, size = 1, extent) {
// const extent = [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ]
const { width, height } = raster;
const indices = [];
const vertices = [];
const uvs = [];

11
src/geom/buffer/text.js
View File

@ -13,12 +13,11 @@ export default class TextBuffer extends BufferBase {
family: 'ios9',
size: 24
};
const coordinates = this.get('coordinates');
const properties = this.get('properties');
const layerData = this.get('layerData');
const { textOffset = [ 0, 0 ] } = this.get('style');
const chars = [];
const textChars = {};
properties.forEach(element => {
layerData.forEach(element => {
let text = element.shape || '';
text = text.toString();
for (let j = 0; j < text.length; j++) {
@ -39,9 +38,9 @@ export default class TextBuffer extends BufferBase {
const originPoints = [];
const textSizes = [];
const textOffsets = [];
properties.forEach((element, index) => {
layerData.forEach(element => {
const size = element.size;
const pos = coordinates[index];
const pos = element.coordinates;
// const pen = { x: pos[0] - dimensions.advance / 2, y: pos[1] };
const pen = { x: textOffset[0], y: textOffset[1] };
let text = element.shape || '';
@ -53,7 +52,7 @@ export default class TextBuffer extends BufferBase {
this._drawGlyph(pos, text[i], pen, size, colors, textureElements, originPoints, textSizes, textOffsets, color);
}
});
this.bufferStruct.style = properties;
this.bufferStruct.style = layerData;
this.attributes = {
originPoints,
textSizes,

31
src/geom/material/grid.js Normal file
View File

@ -0,0 +1,31 @@
import grid_frag from '../shader/grid_frag.glsl';
import grid_vert from '../shader/grid_vert.glsl';
import Material from './material';
export default class GridMaterial extends Material {
getDefaultParameters() {
return {
uniforms: {
u_opacity: { value: 1.0 },
u_time: { value: 0 },
u_xOffset: { value: 0.01 },
u_yOffset: { value: 0.01 },
u_coverage: { value: 0.8 }
},
defines: {
}
};
}
constructor(_uniforms, _defines, parameters) {
super(parameters);
const { uniforms, defines } = this.getDefaultParameters();
this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms));
this.type = 'GridMaterial';
this.defines = Object.assign(defines, _defines);
this.vertexShader = grid_vert;
this.fragmentShader = grid_frag;
this.transparent = true;
}
}

31
src/geom/material/hexagon.js Normal file
View File

@ -0,0 +1,31 @@
import grid_frag from '../shader/hexagon_frag.glsl';
import grid_vert from '../shader/hexagon_vert.glsl';
import Material from './material';
export default class hexagonMaterial extends Material {
getDefaultParameters() {
return {
uniforms: {
u_opacity: { value: 1.0 },
u_time: { value: 0 },
u_radius: { value: 0.01 },
u_angle: { value: 0.01 },
u_coverage: { value: 0.8 }
},
defines: {
}
};
}
constructor(_uniforms, _defines, parameters) {
super(parameters);
const { uniforms, defines } = this.getDefaultParameters();
this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms));
this.type = 'hexagonMaterial';
this.defines = Object.assign(defines, _defines);
this.vertexShader = grid_vert;
this.fragmentShader = grid_frag;
this.transparent = true;
}
}

32
src/geom/material/polygonMaterial.js
View File

@ -1,29 +1,5 @@
import polygon_frag from '../shader/polygon_frag.glsl';
import polygon_vert from '../shader/polygon_vert.glsl';
import Material from './material';
// export default function PolygonMaterial(options) {
// const material = new Material({
// uniforms: {
// u_opacity: { value: options.u_opacity || 1.0 },
// u_texture: { value: options.u_texture },
// u_time: { value: options.u_time || 0 },
// u_zoom: { value: options.u_zoom || 0 },
// u_baseColor: { value: options.u_baseColor || [ 1.0, 0, 0, 1.0 ] },
// u_brightColor: { value: options.u_brightColor || [ 1.0, 0, 0, 1.0 ] },
// u_windowColor: { value: options.u_windowColor || [ 1.0, 0, 0, 1.0 ] },
// u_near: { value: options.u_near || 0.0 },
// u_far: { value: options.u_far || 1.0 }
// },
// vertexShader: polygon_vert,
// fragmentShader: polygon_frag,
// transparent: true,
// defines: {
// TEXCOORD_0: !!options.u_texture
// }
// });
// return material;
// }
import { getModule } from '../../util/shaderModule';
export default class PolygonMaterial extends Material {
getDefaultParameters() {
return {
@ -48,8 +24,10 @@ export default class PolygonMaterial extends Material {
this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms));
this.type = 'PolygonMaterial';
this.defines = Object.assign(defines, _defines);
this.vertexShader = polygon_vert;
this.fragmentShader = polygon_frag;
const { vs, fs } = getModule('polygon');
this.vertexShader = vs;
this.fragmentShader = fs;
this.transparent = true;
}
}

2
src/geom/shader/common.glsl Normal file
View File

@ -0,0 +1,2 @@
#define PI 3.14159265359
#define TWO_PI 6.28318530718

8
src/geom/shader/grid_frag.glsl Normal file
View File

@ -0,0 +1,8 @@
precision highp float;
uniform float u_opacity;
varying vec4 v_color;
void main() {
vec4 color = v_color;
gl_FragColor = color;
gl_FragColor.a =color.a*u_opacity;
}

15
src/geom/shader/grid_vert.glsl Normal file
View File

@ -0,0 +1,15 @@
precision highp float;
attribute vec2 miter;
attribute vec4 a_color;
uniform float u_xOffset;
uniform float u_yOffset;
uniform float u_coverage;
varying vec4 v_color;
void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
v_color = a_color;
float x = position.x + miter.x * u_xOffset * u_coverage;
float y = position.y + miter.y * u_yOffset * u_coverage;
gl_Position = matModelViewProjection * vec4(x, y, position.z, 1.0);
}

8
src/geom/shader/hexagon_frag.glsl Normal file
View File

@ -0,0 +1,8 @@
precision highp float;
uniform float u_opacity;
varying vec4 v_color;
void main() {
vec4 color = v_color;
gl_FragColor = color;
gl_FragColor.a =color.a*u_opacity;
}

17
src/geom/shader/hexagon_vert.glsl Normal file
View File

@ -0,0 +1,17 @@
precision highp float;
attribute vec2 miter;
attribute vec4 a_color;
uniform float u_radius;
uniform float u_coverage;
uniform float u_angle;
varying vec4 v_color;
void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));
v_color = a_color;
vec2 offset =vec2(rotationMatrix * miter * u_radius * u_coverage );
float x = position.x + offset.x;
float y = position.y + offset.y;
gl_Position = matModelViewProjection * vec4(x, y, position.z, 1.0);
}

22
src/geom/shader/index.js
View File

@ -1,14 +1,12 @@
import point_frag from '../shader/point_frag.glsl';
import point_vert from '../shader/point_vert.glsl';
const shaderslib = {
pointShader: {
fragment: point_frag,
vertex: point_vert
}
};
// for (const programName in shaderslib) {
// const program = shaderslib[programName];
// program.fragment = ShaderFactory.parseIncludes(program.fragment);
// program.vertex = ShaderFactory.parseIncludes(program.vertex);
// }
export default shaderslib;
import polygon_frag from '../shader/polygon_frag.glsl';
import polygon_vert from '../shader/polygon_vert.glsl';
import common from './common.glsl';
import { registerModule } from '../../util/shaderModule';
export function compileBuiltinModules() {
registerModule('point', { vs: point_vert, fs: point_frag });
registerModule('common', { vs: common, fs: common });
registerModule('polygon', { vs: polygon_vert, fs: polygon_frag });
}

2
src/geom/shader/point_frag.glsl
View File

@ -1,7 +1,9 @@
precision highp float;
#define PI 3.14159265359
#define TWO_PI 6.28318530718
uniform float u_strokeWidth;
uniform vec4 u_stroke;
uniform float u_opacity;

1
src/geom/shader/point_vert.glsl
View File

@ -2,7 +2,6 @@ precision highp float;
attribute vec4 a_color;
attribute float a_size;
attribute float a_shape;
attribute vec4 a_idColor;
uniform vec4 u_stroke;
uniform float u_strokeWidth;
uniform float u_opacity;

3
src/geom/shader/polygon_vert.glsl
View File

@ -3,7 +3,6 @@ precision highp float;
#define diffuseRatio 0.4
#define specularRatio 0.1
attribute vec4 a_color;
attribute vec4 a_idColor;
attribute vec2 faceUv;
attribute vec3 a_shape;
attribute vec3 a_size;
@ -15,7 +14,7 @@ varying float v_size;
void main() {
float scale = pow(2.0,(20.0 - u_zoom));
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix * 100.;
vec3 newposition = position;
// newposition.x -= 128.0;
#ifdef SHAPE

0
src/map/baseMap.js → src/geom/shader/project_vert.glsl
View File

55
src/layer/heatmap.js Normal file
View File

@ -0,0 +1,55 @@
import Layer from '../core/layer';
import gridBuffer from '../geom/buffer/heatmap/grid';
import DrawGrid from './render/heatmap/gird';
import DrawHexagon from './render/heatmap/hexagon';
import hexagonBuffer from '../geom/buffer/heatmap/hexagon';
export default class HeatMapLayer extends Layer {
shape(type) {
this.shapeType = type;
return this;
}
render() {
this._prepareRender();
return this;
}
_prepareRender() {
this.init();
switch (this.shapeType) {
case 'grid' :
this._drawGrid();
break;
case 'hexagon' :
this._drawHexagon();
break;
default:
this._drawGrid();
}
}
_drawHexagon() {
const style = this.get('styleOptions');
const { radius } = this.layerSource.data;
this._buffer = new hexagonBuffer(this.layerData);
const config = {
...style,
radius
};
const Mesh = new DrawHexagon(this._buffer, config);
this.add(Mesh);
}
_drawGrid() {
this.type = 'heatmap';
const style = this.get('styleOptions');
const { xOffset, yOffset } = this.layerSource.data;
this._buffer = new gridBuffer(this.layerData);
const config = {
...style,
xOffset,
yOffset
};
const girdMesh = new DrawGrid(this._buffer, config);
this.add(girdMesh);
}
}

14
src/layer/heatmapLayer.js
View File

@ -9,7 +9,7 @@ export default class HeatmapLayer extends Layer {
render() {
this.init();
const bbox = this._calBoundingBox(this.layerSource.geoData);
const bbox = this._calBoundingBox(this.layerData);
const colors = this.get('styleOptions').rampColors;
this.colorRamp = createColorRamp(colors);
this._createIntensityPass(bbox);
@ -17,13 +17,11 @@ export default class HeatmapLayer extends Layer {
}
_createIntensityPass(bbox) {
const source = this.layerSource;
const style = this.get('styleOptions');
const StyleData = this.StyleData;
const data = this.layerData;
// get attributes data
const buffer = new HeatmapBuffer({
coordinates: source.geoData,
properties: StyleData
data
});
const attributes = buffer.attributes;
// create geometery
@ -78,13 +76,13 @@ export default class HeatmapLayer extends Layer {
this.add(mesh);
}
_calBoundingBox(positions) {
_calBoundingBox(data) {
let minX = Infinity;
let minY = Infinity;
let maxX = -Infinity;
let maxY = -Infinity;
for (let i = 0; i < positions.length; i++) {
const p = positions[i];
for (let i = 0; i < data.length; i++) {
const p = data[i].coordinates;
if (p[0] < minX) {
minX = p[0];
} else if (p[0] > maxX) {

13
src/layer/imageLayer.js
View File

@ -1,26 +1,19 @@
import Layer from '../core/layer';
import * as THREE from '../core/three';
import imageSource from '../source/imageSource';
import ImageBuffer from '../geom/buffer/image';
// import ImageGeometry from '../geom/bufferGeometry/image';
import ImageMaterial from '../geom/material/imageMaterial';
export default class imageLayer extends Layer {
source(data, cfg = {}) {
cfg.mapType = this.get('mapType');
cfg.data = data;
this.layerSource = new imageSource(cfg);
return this;
}
render() {
this.init();
this.type = 'image';
const source = this.layerSource;
const { opacity } = this.get('styleOptions');
// 加载 完成事件
source.on('imageLoaded', () => {
source.data.images.then(images => {
this.layerData[0].images = images;
const buffer = new ImageBuffer({
coordinates: source.geoData,
image: source.image
layerData: this.layerData
});
this.initGeometry(buffer.attributes);
const material = new ImageMaterial({

8
src/layer/index.js
View File

@ -5,19 +5,15 @@ import LineLayer from './lineLayer';
import ImageLayer from './imageLayer';
import RasterLayer from './rasterLayer';
import HeatmapLayer from './heatmapLayer';
import HeatMapLayer from './heatmap';
registerLayer('PolygonLayer', PolygonLayer);
registerLayer('PointLayer', PointLayer);
registerLayer('LineLayer', LineLayer);
registerLayer('ImageLayer', ImageLayer);
registerLayer('RasterLayer', RasterLayer);
registerLayer('HeatMapLayer', HeatMapLayer);
registerLayer('HeatmapLayer', HeatmapLayer);
export { LAYER_MAP } from './factory';
export { default as PolygonLayer } from './polygonLayer';
export { default as PointLayer } from './pointLayer';
export { default as LineLayer } from './lineLayer';
export { default as ImageLayer } from './imageLayer';
export { default as RasterLayer } from './rasterLayer';
export { default as HeatmapLayer } from './heatmapLayer';

5
src/layer/lineLayer.js
View File

@ -11,11 +11,10 @@ export default class LineLayer extends Layer {
this.type = 'polyline';
this.init();
const source = this.layerSource;
const StyleData = this.StyleData;
const layerData = this.layerData;
const style = this.get('styleOptions');
const buffer = this._buffer = new LineBuffer({
coordinates: source.geoData,
properties: StyleData,
layerData,
shapeType: this.shapeType,
style
});

18
src/layer/pointLayer.js
View File

@ -7,7 +7,6 @@ import TextBuffer from '../geom/buffer/text';
import TextMaterial from '../geom/material/textMaterial';
import * as PointBuffer from '../geom/buffer/point/index';
/**
* point shape 2d circle, traingle text,image
* shape 3d cube，column, sphere
@ -45,12 +44,12 @@ export default class PointLayer extends Layer {
case 'fill' :// 填充图形
{
if (fill !== 'none') { // 是否填充
const attributes = PointBuffer.FillBuffer(source.geoData, this.StyleData, style);
const attributes = PointBuffer.FillBuffer(this.layerData, style);
const meshfill = drawPoint.DrawFill(attributes, this.get('styleOptions'));
this.add(meshfill);
}
if (stroke !== 'none') { // 是否绘制边界
const lineAttribute = PointBuffer.StrokeBuffer(source.geoData, this.StyleData, style);
const lineAttribute = PointBuffer.StrokeBuffer(this.layerData, style);
const meshStroke = drawPoint.DrawStroke(lineAttribute, this.get('styleOptions'));
this.add(meshStroke, 'line');
}
@ -58,14 +57,14 @@ export default class PointLayer extends Layer {
}
case 'image':// 绘制图片标注
{
const imageAttribute = PointBuffer.ImageBuffer(source.geoData, this.StyleData, { imagePos: this.scene.image.imagePos });
const imageAttribute = PointBuffer.ImageBuffer(this.layerData, { imagePos: this.scene.image.imagePos });
const imageMesh = drawPoint.DrawImage(imageAttribute, { ...style, texture: this.scene.image.texture });
this.add(imageMesh);
break;
}
case 'normal' : // 原生点
{
const normalAttribute = PointBuffer.NormalBuffer(source.geoData, this.StyleData, style);
const normalAttribute = PointBuffer.NormalBuffer(this.layerData, style);
const normalPointMesh = drawPoint.DrawNormal(normalAttribute, style);
this.add(normalPointMesh);
break;
@ -77,11 +76,11 @@ export default class PointLayer extends Layer {
_getShape() {
let shape = null;
if (!this.StyleData[0].hasOwnProperty('shape')) {
if (!this.layerData[0].hasOwnProperty('shape')) {
return 'normal';
}
for (let i = 0; i < this.StyleData.length; i++) {
shape = this.StyleData[i].shape;
for (let i = 0; i < this.layerData.length; i++) {
shape = this.layerData[i].shape;
if (shape !== undefined) {
break;
}
@ -102,8 +101,7 @@ export default class PointLayer extends Layer {
const styleOptions = this.get('styleOptions');
const buffer = new TextBuffer({
type: this.shapeType,
coordinates: source.geoData,
properties: this.StyleData,
layerData: this.layerData,
style: this.get('styleOptions')
});

4
src/layer/polygonLayer.js
View File

@ -21,11 +21,9 @@ export default class PolygonLayer extends Layer {
_prepareRender() {
this.init();
this.type = 'polygon';
const source = this.layerSource;
this._buffer = new PolygonBuffer({
shape: this.shape,
coordinates: source.geoData,
properties: this.StyleData
layerData: this.layerData
});
this.add(this._getLayerRender());
}

16
src/layer/rasterLayer.js
View File

@ -1,16 +1,10 @@
import Layer from '../core/layer';
import * as THREE from '../core/three';
import RasterSource from '../source/rasterSource';
import RasterMaterial from '../geom/material/rasterMaterial';
import { RasterBuffer } from '../geom/buffer/raster';
export default class RasterLayer extends Layer {
source(data, cfg = {}) {
cfg.mapType = this.get('mapType');
cfg.data = data;
this.layerSource = new RasterSource(cfg);
return this;
}
render() {
this.type = 'raster';
this.init();
@ -18,18 +12,18 @@ export default class RasterLayer extends Layer {
// 加载 完成事件
const styleOptions = this.get('styleOptions');
const buffer = new RasterBuffer({
coordinates: source.geoData,
raster: source.rasterData,
layerData: source.data,
rampColors: styleOptions.rampColors
});
this.initGeometry(buffer.attributes);
const rasterConfig = source.data.dataArray[0];
const material = new RasterMaterial({
u_texture: buffer.bufferStruct.u_raster,
u_colorTexture: buffer.bufferStruct.u_colorTexture,
u_opacity: 1.0,
u_extent: buffer.bufferStruct.u_extent,
u_min: source.rasterData.min,
u_max: source.rasterData.max,
u_min: rasterConfig.min,
u_max: rasterConfig.max,
u_dimension: buffer.attributes.dimension
});

21
src/layer/render/heatmap/gird.js Normal file
View File

@ -0,0 +1,21 @@
import * as THREE from '../../../core/three';
import GridMaterial from '../../../geom/material/grid';
export default function DrawGrid(attributes, style) {
const { opacity, xOffset, yOffset, coverage } = style;
const geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('miter', new THREE.Float32BufferAttribute(attributes.miter, 2));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
const material = new GridMaterial({
u_opacity: opacity,
u_xOffset: xOffset,
u_yOffset: yOffset,
u_coverage: coverage
}, {
SHAPE: false
});
const gridMesh = new THREE.Mesh(geometry, material);
return gridMesh;
}

21
src/layer/render/heatmap/hexagon.js Normal file
View File

@ -0,0 +1,21 @@
import * as THREE from '../../../core/three';
import GridMaterial from '../../../geom/material/hexagon';
export default function DrawHexagon(attributes, style) {
const { opacity, radius, angle, coverage } = style;
const geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('miter', new THREE.Float32BufferAttribute(attributes.miter, 2));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
const material = new GridMaterial({
u_opacity: opacity,
u_radius: radius,
u_angle: angle / 180 * Math.PI,
u_coverage: coverage
}, {
SHAPE: false
});
const hexgonMesh = new THREE.Mesh(geometry, material);
return hexgonMesh;
}

51
src/map/provider.js → src/map/AMap.js
View File

@ -1,18 +1,34 @@
import Base from '../core/base';
import { scene } from '../global';
import * as Theme from '../theme/index';
import Util from '../util';
import { scene } from '../global';
const DEG2RAD = Math.PI / 180;
export class MapProvider extends Base {
export default class GaodeMap extends Base {
getDefaultCfg() {
return Util.assign(scene, {
resizeEnable: true,
viewMode: '3D'
});
}
constructor(container, cfg) {
static project(lnglat) {
const maxs = 85.0511287798;
const lat = Math.max(Math.min(maxs, lnglat[1]), -maxs);
const scale = 256 << 20;
let d = Math.PI / 180;
let x = lnglat[0] * d;
let y = lat * d;
y = Math.log(Math.tan((Math.PI / 4) + (y / 2)));
const a = 0.5 / Math.PI,
b = 0.5,
c = -0.5 / Math.PI;
d = 0.5;
x = scale * (a * x + b) - 215440491;
y = -(scale * (c * y + d) - 106744817);
return { x, y };
}
constructor(cfg) {
super(cfg);
this.container = container;
this.container = this.get('id');
this.initMap();
this.addOverLayer();
setTimeout(() => {
@ -85,4 +101,31 @@ export class MapProvider extends Base {
this.renderDom.id = 'l7_canvaslayer';
canvasContainer.appendChild(this.renderDom);
}
mixMap(scene) {
const map = this.map;
scene.getZoom = () => { return map.getZoom(); };
scene.getCenter = () => { return map.getCenter(); };
scene.getSize = () => { return map.getSize(); };
scene.getPitch = () => { return map.getPitch(); };
scene.getRotation = () => { return map.getRotation(); };
scene.getStatus = () => { return map.getStatus(); };
scene.getScale = () => { return map.getScale(); };
scene.getZoom = () => { return map.getZoom(); };
scene.setZoom = () => { return map.setZoom(); };
scene.setBounds = () => { return map.setBounds(); };
scene.setRotation = () => { return map.setRotation(); };
scene.zoomIn = () => { return map.zoomIn(); };
scene.setRotation = () => { return map.setRotation(); };
scene.zoomOut = () => { return map.zoomOut(); };
scene.panTo = () => { return map.panTo(); };
scene.panBy = () => { return map.panBy(); };
scene.setPitch = () => { return map.setPitch(); };
scene.pixelToLngLat = () => { return map.pixelToLngLat(); };
scene.lngLatToPixel = () => { return map.lngLatToPixel(); };
scene.setMapStyle = () => { return map.setMapStyle(); };
scene.containerToLngLat = pixel => {
const ll = new AMap.Pixel(pixel.x, pixel.y);
return map.containerToLngLat(ll);
};
}
}

2
src/map/gaodeMap.js
View File

@ -21,7 +21,7 @@ export default class GaodeMap {
return this.map.getStatus();
}
getScale() {
return this.getScale();
return this.map.getScale();
}
setZoom(zoom) {
return this.map.setZoom(zoom);

22
src/map/index.js Normal file
View File

@ -0,0 +1,22 @@
import MapBox from './mapbox';
import { default as AMap } from './AMap';
export {
AMap,
MapBox
};
const MapType = {
amap: AMap,
mapbox: MapBox
};
export const getMap = type => {
return MapType[type.toLowerCase()];
};
export const registerMap = (type, map) => {
if (getMap(type)) {
throw new Error(`Map type '${type}' existed.`);
}
map.type = type;
// 存储到 map 中
MapType[type.toLowerCase()] = map;
};

154
src/map/mapbox.js Normal file
View File

@ -0,0 +1,154 @@
import Base from '../core/base';
import Util from '../util';
import { scene } from '../global';
import * as THREE from '../core/three';
const WORLD_SIZE = 512;
const MERCATOR_A = 6378137.0;
const WORLD_SCALE = 1 / 100;
const PROJECTION_WORLD_SIZE = WORLD_SIZE / (MERCATOR_A * Math.PI) / 2;
export default class MapBox extends Base {
getDefaultCfg() {
return Util.assign(scene, {
resizeEnable: true,
viewMode: '3D'
});
}
static project(lnglat) {
const d = Math.PI / 180;
const x = -MERCATOR_A * lnglat[0] * d * PROJECTION_WORLD_SIZE;
const y = -MERCATOR_A * Math.log(Math.tan((Math.PI * 0.25) + (0.5 * lnglat[1] * d))) * PROJECTION_WORLD_SIZE;
return { x, y };
}
constructor(cfg) {
super(cfg);
this.container = this.get('container');
this.initMap();
this.addOverLayer();
setTimeout(() => {
this.emit('mapLoad');
}, 100);
}
initMap() {
mapboxgl.accessToken = 'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ';
this.map = new mapboxgl.Map(this._attrs);
}
asyncCamera(engine) {
this.engine = engine;
const camera = engine._camera;
const scene = engine.world;
const pickScene = engine._picking.world;
camera.matrixAutoUpdate = false;
scene.position.x = scene.position.y = WORLD_SIZE / 2;
scene.matrixAutoUpdate = false;
pickScene.position.x = pickScene.position.y = WORLD_SIZE / 2;
pickScene.matrixAutoUpdate = false;
this.updateCamera();
this.map.on('move', () => {
this.updateCamera();
});
}
updateCamera() {
const engine = this.engine;
const scene = engine.world;
const pickScene = engine._picking.world;
const camera = engine._camera;
// Build a projection matrix, paralleling the code found in Mapbox GL JS
const fov = 0.6435011087932844;
const cameraToCenterDistance = 0.5 / Math.tan(fov / 2) * this.map.transform.height * WORLD_SCALE;
const halfFov = fov / 2;
const groundAngle = Math.PI / 2 + this.map.transform._pitch;
const topHalfSurfaceDistance = Math.sin(halfFov) * cameraToCenterDistance / Math.sin(Math.PI - groundAngle - halfFov);
// Calculate z distance of the farthest fragment that should be rendered.
const furthestDistance = Math.cos(Math.PI / 2 - this.map.transform._pitch) * topHalfSurfaceDistance + cameraToCenterDistance;
// Add a bit extra to avoid precision problems when a fragment's distance is exactly `furthestDistance`
let farZ = furthestDistance * 1.1;
if (this.pitch > 50) {
farZ = 1000;
}
const { x, y } = this.map.transform.point;
camera.projectionMatrix = this.makePerspectiveMatrix(fov, this.map.transform.width / this.map.transform.height, 1, farZ);
const cameraWorldMatrix = new THREE.Matrix4();
const cameraTranslateZ = new THREE.Matrix4().makeTranslation(0, 0, cameraToCenterDistance);
const cameraRotateX = new THREE.Matrix4().makeRotationX(this.map.transform._pitch);
const cameraRotateZ = new THREE.Matrix4().makeRotationZ(this.map.transform.angle);
const cameraTranslateXY = new THREE.Matrix4().makeTranslation(x * WORLD_SCALE, -y * WORLD_SCALE, 0);
// const cameraTranslateCenter = new THREE.Matrix4().makeTranslation(0, 0, cameraToCenterDistance);
// Unlike the Mapbox GL JS camera, separate camera translation and rotation out into its world matrix
// If this is applied directly to the projection matrix, it will work OK but break raycasting
cameraWorldMatrix
.premultiply(cameraTranslateZ)
.premultiply(cameraRotateX)
.premultiply(cameraRotateZ)
.premultiply(cameraTranslateXY);
camera.matrixWorld.copy(cameraWorldMatrix);
const zoomPow = this.map.transform.scale * WORLD_SCALE;
// Handle scaling and translation of objects in the map in the world's matrix transform, not the camera
const scale = new THREE.Matrix4();
const translateCenter = new THREE.Matrix4();
const translateMap = new THREE.Matrix4();
const rotateMap = new THREE.Matrix4();
scale
.makeScale(zoomPow, zoomPow, 1.0);
translateCenter
.makeTranslation(WORLD_SIZE / 2, -WORLD_SIZE / 2, 0);
translateMap
.makeTranslation(-this.map.transform.x, this.map.transform.y, 0);
rotateMap
.makeRotationZ(Math.PI);
scene.matrix = new THREE.Matrix4();
scene.matrix
.premultiply(rotateMap)
.premultiply(translateCenter)
.premultiply(scale);
pickScene.matrix = new THREE.Matrix4();
pickScene.matrix
.premultiply(rotateMap)
.premultiply(translateCenter)
.premultiply(scale);
}
makePerspectiveMatrix(fovy, aspect, near, far) {
const out = new THREE.Matrix4();
const f = 1.0 / Math.tan(fovy / 2),
nf = 1 / (near - far);
const newMatrix = [
f / aspect, 0, 0, 0,
0, f, 0, 0,
0, 0, (far + near) * nf, -1,
0, 0, (2 * far * near) * nf, 0
];
out.elements = newMatrix;
return out;
}
projectFlat(lnglat) {
return this.map.lngLatToGeodeticCoord(lnglat);
}
getCenter() {
return this.map.getCenter();
}
getCenterFlat() {
return this.projectFlat(this.getCenter());
}
addOverLayer() {
const canvasContainer = document.getElementById(this.container);
this.canvasContainer = canvasContainer;
this.renderDom = document.createElement('div');
this.renderDom.style.cssText += 'position: absolute;top: 0; z-index:10;height: 100%;width: 100%;pointer-events: none;';
this.renderDom.id = 'l7_canvaslayer';
canvasContainer.appendChild(this.renderDom);
}
mixMap(scene) {
const map = this.map;
scene.getZoom = () => { return map.getZoom(); };
scene.getCenter = () => { return map.getCenter(); };
scene.getPitch = () => { return map.getPitch(); };
scene.containerToLngLat = point => { return map.unproject(point); };
}
}

69
src/source/csvSource.js
View File

@ -1,69 +0,0 @@
import Source from '../core/source';
import FeatureIndex from '../geo/featureIndex';
import { csvParse } from 'd3-dsv';
export default class CSVSource extends Source {
prepareData() {
this.type = 'csv';
const data = this.get('data');
const x = this.get('x');
const y = this.get('y');
const x1 = this.get('x1');
const y1 = this.get('y1');
const coords = this.get('coordinates');
this.propertiesData = [];// 临时使用
this.geoData = [];
let csvdata = data;
Array.isArray(csvdata) || (csvdata = csvParse(data));
this.propertiesData = csvdata;
csvdata.forEach((col, featureIndex) => {
let coordinates = [];
if (col.coordinates) {
coordinates = col.coordinates;
}
if (x && y) { coordinates = [ col[x], col[y] ]; } // 点数据
if (x1 && y1) { // 弧线 或者线段
coordinates = [[ col[x], col[y] ], [ col[x1], col[y1] ]];
}
if (coords && col.coords) { coordinates = col.coords; }
col._id = featureIndex + 1;
this._coordProject(coordinates);
this.geoData.push(this._coordProject(coordinates));
});
}
featureIndex() {
const data = this.get('data');
this.featureIndex = new FeatureIndex(data);
}
getSelectFeatureId(featureId) {
return [ featureId ];
}
getSelectFeature(featureId) {
return this.propertiesData[featureId];
}
_getCoord(geo) {
if (geo.geometry) {
// GeoJSON feature
geo = geo.geometry.coordinates;
} else if (geo.coordinates) {
// GeoJSON geometry
geo = geo.coordinates;
}
return geo;
}
_coordProject(geo) {
if (Array.isArray(geo[0][0])) {
return geo.map(coor => {
return this._coordProject(coor);
});
}
if (!Array.isArray(geo[0])) {
return this._coorConvert(geo);
}
return geo.map(coor => {
return this._coorConvert(coor);
});
}
}

11
src/source/factory.js Normal file
View File

@ -0,0 +1,11 @@
const TRANSFORMS = {};
const PARSERS = {};
export const getParser = type => PARSERS[type];
export const registerParser = (type, parserFunction) => {
PARSERS[type] = parserFunction;
};
export const getTransform = type => TRANSFORMS[type];
export const registerTransform = (type, transFunction) => {
TRANSFORMS[type] = transFunction;
};

47
src/source/geojsonSource.js
View File

@ -1,47 +0,0 @@
import Source from '../core/source';
import * as turfMeta from '@turf/meta';
import { default as cleanCoords } from '@turf/clean-coords';
import { getCoords } from '@turf/invariant';
import FeatureIndex from '../geo/featureIndex';
export default class GeojsonSource extends Source {
prepareData() {
this.type = 'geojson';
const data = this.get('data');
this.propertiesData = [];
this.geoData = [];
turfMeta.flattenEach(data, (currentFeature, featureIndex) => {
const coord = getCoords(cleanCoords(currentFeature));
this.geoData.push(this._coordProject(coord));
currentFeature.properties._id = featureIndex + 1;
this.propertiesData.push(currentFeature.properties);
});
}
featureIndex() {
const data = this.get('data');
this.featureIndex = new FeatureIndex(data);
}
getSelectFeatureId(featureId) {
const data = this.get('data');
const selectFeatureIds = [];
let featureStyleId = 0;
/* eslint-disable */
turfMeta.flattenEach(data, (currentFeature, featureIndex, multiFeatureIndex) => {
/* eslint-disable */
if (featureIndex === (featureId)) {
selectFeatureIds.push(featureStyleId);
}
featureStyleId++;
if (featureIndex > featureId) {
return;
}
});
return selectFeatureIds;
}
getSelectFeature(featureId){
const data = this.get('data');
return data.features[featureId];
}
}

37
src/source/imageSource.js
View File

@ -1,37 +0,0 @@
import Source from '../core/source';
import { getImage } from '../util/ajax';
export default class ImageSource extends Source {
prepareData() {
this.type = 'image';
const extent = this.get('extent');
const lb = this._coorConvert(extent.slice(0, 2));
const tr = this._coorConvert(extent.slice(2, 4));
this.geoData = [ lb, tr ];
this.propertiesData = [];
this._loadData();
}
_loadData() {
const url = this.get('data');
this.image = [];
if (typeof (url) === 'string') {
getImage({ url }, (err, img) => {
this.image = img;
this.emit('imageLoaded');
});
} else {
const imageCount = url.length;
let imageindex = 0;
url.forEach(item => {
getImage({ url: item }, (err, img) => {
imageindex++;
this.image.push(img);
if (imageindex === imageCount) {
this.emit('imageLoaded');
}
});
});
}
}
}

30
src/source/index.js
View File

@ -1,5 +1,25 @@
export { default as geojson } from './geojsonSource';
export { default as csv } from './csvSource';
export { default as array } from './csvSource';
export { default as basic } from '../core/source';
export { default as imageSource } from './imageSource';
// source parser
import geojson from './parser/geojson';
import image from './parser/image';
import csv from './parser/csv';
import json from './parser/json';
import raster from './parser/raster';
import { registerTransform, registerParser } from './factory';
import { aggregatorToGrid } from './transform/grid';
import { pointToHexbin } from './transform/hexagon';
import { map } from './transform/map';
registerParser('geojson', geojson);
registerParser('image', image);
registerParser('csv', csv);
registerParser('json', json);
registerParser('raster', raster);
// 注册transform
registerTransform('grid', aggregatorToGrid);
registerTransform('hexagon', pointToHexbin);
registerTransform('map', map);
export { getTransform, registerTransform, getParser, registerParser } from './factory';

23
src/source/parser/csv.js Normal file
View File

@ -0,0 +1,23 @@
import { csvParse } from 'd3-dsv';
export default function csv(data, cfg) {
const { x, y, x1, y1 } = cfg;
const csvdata = csvParse(data);
const resultdata = [];
csvdata.forEach((col, featureIndex) => {
let coordinates = [];
if (x && y) { coordinates = [ col[x], col[y] ]; } // 点数据
if (x1 && y1) { // 弧线 或者线段
coordinates = [[ col[x], col[y] ], [ col[x1], col[y1] ]];
}
col._id = featureIndex + 1;
const dataItem = {
...col,
coordinates
};
resultdata.push(dataItem);
});
return {
dataArray: resultdata
};
}

19
src/source/parser/geojson.js Normal file
View File

@ -0,0 +1,19 @@
import * as turfMeta from '@turf/meta';
import { default as cleanCoords } from '@turf/clean-coords';
import { getCoords } from '@turf/invariant';
export default function geoJSON(data) {
const resultData = [];
turfMeta.flattenEach(data, (currentFeature, featureIndex) => { // 多个polygon 拆成一个
const coord = getCoords(cleanCoords(currentFeature));
const dataItem = {
...currentFeature.properties,
coordinates: coord,
_id: featureIndex + 1
};
resultData.push(dataItem);
});
return {
dataArray: resultData
};
}

41
src/source/parser/image.js Normal file
View File

@ -0,0 +1,41 @@
import { getImage } from '../../util/ajax';
export default function image(data, cfg) {
const { extent } = cfg;
const images = new Promise(resolve => {
loadData(data, res => {
resolve(res);
});
});
const resultData = {
images,
_id: 1,
dataArray: [{ coordinates: [[ extent[0], extent[1] ], [ extent[2], extent[3] ]] }]
};
return resultData;
}
function loadData(data, done) {
const url = data;
let image = [];
if (typeof (url) === 'string') {
getImage({ url }, (err, img) => {
image = img;
done(image);
});
} else {
const imageCount = url.length;
let imageindex = 0;
url.forEach(item => {
getImage({ url: item }, (err, img) => {
imageindex++;
image.push(img);
if (imageindex === imageCount) {
done(image);
}
});
});
}
return image;
}

21
src/source/parser/json.js Normal file
View File

@ -0,0 +1,21 @@
export default function json(data, cfg) {
const { x, y, x1, y1 } = cfg;
const resultdata = [];
data.forEach((col, featureIndex) => {
let coordinates = [];
if (x && y) { coordinates = [ col[x], col[y] ]; } // 点数据
if (x1 && y1) { // 弧线 或者线段
coordinates = [[ col[x], col[y] ], [ col[x1], col[y1] ]];
}
col._id = featureIndex + 1;
const dataItem = {
...col,
coordinates
};
resultdata.push(dataItem);
});
return {
dataArray: resultdata
};
}

15
src/source/parser/raster.js Normal file
View File

@ -0,0 +1,15 @@
export default function raster(data, cfg) {
const { extent, width, height, min, max } = cfg;
const resultData = {
_id: 1,
dataArray: [
{
data,
width,
height,
min,
max,
coordinates: [[ extent[0], extent[1] ], [ extent[2], extent[3] ]] }]
};
return resultData;
}

31
src/source/rainSource.js
View File

@ -1,31 +0,0 @@
import imageSource from './imageSource';
export class RainSource extends imageSource {
prepareData() {
const extent = this.get('extent');
const lb = this._coorConvert(extent.slice(0, 2));
const tr = this._coorConvert(extent.slice(2, 4));
this.extent = [ lb, tr ];
this.propertiesData = [];
this._genaratePoints();
this._loadData();
}
_genaratePoints() {
const numParticles = 512 * 512;
const particleRes = this.particleRes = Math.ceil(Math.sqrt(numParticles));
const numPoints = particleRes * particleRes;
const particleState = [];
const particleState0 = new Uint8ClampedArray(numPoints * 4);
const particleState1 = new Uint8ClampedArray(numPoints * 4);
const emptyPixels = new Uint8ClampedArray(numPoints * 4);
for (let i = 0; i < particleState0.length; i++) {
particleState0[i] = Math.floor(Math.random() * 256); // randomize the initial particle positions
}
this.particleIndices = new Float32Array(numPoints);
for (let i = 0; i < numPoints; i++) this.particleIndices[i] = i;
this.particleImage0 = new ImageData(particleState0, particleRes, particleRes);
this.particleImage1 = new ImageData(particleState1, particleRes, particleRes);
this.backgroundImage = new ImageData(emptyPixels, particleRes, particleRes);
this.geoData = particleState;
}
}

20
src/source/rasterSource.js
View File

@ -1,20 +0,0 @@
import Source from '../core/source';
export default class RasterSource extends Source {
prepareData() {
this.type = 'raster';
const extent = this.get('extent');
const lb = this._coorConvert(extent.slice(0, 2));
const tr = this._coorConvert(extent.slice(2, 4));
this.geoData = [ lb, tr ];
this.propertiesData = [];
this.rasterData = {
data: this.get('data'),
width: this.get('width'),
height: this.get('height'),
min: this.get('min'),
max: this.get('max')
};
}
}

101
src/source/transform/grid.js Normal file
View File

@ -0,0 +1,101 @@
/**
* 生成四边形热力图
*/
import * as statistics from './statistics';
const R_EARTH = 6378000;
/**
* 计算方格密度图
* @param {*} data 经纬度数据 和属性数据
* @param {*} size 半径大小 单位 km
* @return
*/
export function aggregatorToGrid(data, option) {
const dataArray = data.dataArray;
const { size = 10 } = option;
const { gridHash, gridOffset } = _pointsGridHash(dataArray, size);
const layerData = _getGridLayerDataFromGridHash(gridHash, gridOffset, option);
return {
yOffset: gridOffset.xOffset / 360 * (256 << 20) / 2,
xOffset: gridOffset.xOffset / 360 * (256 << 20) / 2,
dataArray: layerData
};
}
function _pointsGridHash(dataArray, size) {
let latMin = Infinity;
let latMax = -Infinity;
let pLat;
for (let index = 0; index < dataArray.length; index++) {
const point = dataArray[index];
pLat = point.coordinates[1];
if (Number.isFinite(pLat)) {
latMin = pLat < latMin ? pLat : latMin;
latMax = pLat > latMax ? pLat : latMax;
}
}
// const centerLat = (latMin + latMax) / 2;
const centerLat = 34.54083;
const gridOffset = _calculateGridLatLonOffset(size, centerLat);
if (gridOffset.xOffset <= 0 || gridOffset.yOffset <= 0) {
return { gridHash: {}, gridOffset };
}
const gridHash = {};
for (let index = 0; index < dataArray.length; index++) {
const point = dataArray[index];
const lat = point.coordinates[1];
const lng = point.coordinates[0];
if (Number.isFinite(lat) && Number.isFinite(lng)) {
const latIdx = Math.floor((lat + 90) / gridOffset.yOffset);
const lonIdx = Math.floor((lng + 180) / gridOffset.xOffset);
const key = `${latIdx}-${lonIdx}`;
gridHash[key] = gridHash[key] || { count: 0, points: [] };
gridHash[key].count += 1;
gridHash[key].points.push(point);
}
}
return { gridHash, gridOffset };
}
// 计算网格偏移量
function _calculateGridLatLonOffset(cellSize, latitude) {
const yOffset = _calculateLatOffset(cellSize);
const xOffset = _calculateLonOffset(latitude, cellSize);
return { yOffset, xOffset };
}
function _calculateLatOffset(dy) {
return (dy / R_EARTH) * (180 / Math.PI);
}
function _calculateLonOffset(lat, dx) {
return ((dx / R_EARTH) * (180 / Math.PI)) / Math.cos((lat * Math.PI) / 180);
}
function _getGridLayerDataFromGridHash(gridHash, gridOffset, option) {
return Object.keys(gridHash).reduce((accu, key, i) => {
const idxs = key.split('-');
const latIdx = parseInt(idxs[0], 10);
const lonIdx = parseInt(idxs[1], 10);
const item = {};
if (option.field && option.method) {
const columns = getColumn(gridHash[key].points, option.field);
item[option.method] = statistics[option.method](columns);
}
Object.assign(item, {
_id: i + 1,
coordinates: [ -180 + gridOffset.xOffset * lonIdx, -90 + gridOffset.yOffset * latIdx ],
count: gridHash[key].count
});
accu.push(item);
return accu;
}, []);
}
function getColumn(data, columnName) {
return data.map(item => {
return item[columnName];
});
}

45
src/source/transform/hexagon.js Normal file
View File

@ -0,0 +1,45 @@
import { hexbin } from 'd3-hexbin';
import { aProjectFlat, unProjectFlat } from '../../geo/project';
import * as statistics from './statistics';
const R_EARTH = 6378000;
export function pointToHexbin(data, option) {
const dataArray = data.dataArray;
const { size = 10 } = option;
const pixlSize = size / (2 * Math.PI * R_EARTH) * (256 << 20) / 2;
const screenPoints = dataArray.map(point => {
const { x, y } = aProjectFlat(point.coordinates);
return {
...point,
coordinates: [ x, y ]
};
});
const newHexbin = hexbin()
.radius(pixlSize)
.x(d => d.coordinates[0])
.y(d => d.coordinates[1]);
const hexbinBins = newHexbin(screenPoints);
const result = {
radius: pixlSize
};
result.dataArray = hexbinBins.map((hex, index) => {
if (option.field && option.method) {
const columns = getColumn(hex, option.field);
hex[option.method] = statistics[option.method](columns);
}
const item = {};
item[option.method] = hex[option.method];
return {
...item,
count: hex.length,
coordinates: unProjectFlat([ hex.x, hex.y ]),
_id: index + 1
};
});
return result;
}
function getColumn(data, columnName) {
return data.map(item => {
return item[columnName];
});
}

7
src/source/transform/map.js Normal file
View File

@ -0,0 +1,7 @@
export function map(data, options) {
const { callback } = options;
if (callback) {
data.dataArray = data.dataArray.map(callback);
}
return data;
}

76
src/source/transform/statistics.js Normal file
View File

@ -0,0 +1,76 @@
function max(x) {
if (x.length === 0) {
throw new Error('max requires at least one data point');
}
let value = x[0];
for (let i = 1; i < x.length; i++) {
// On the first iteration of this loop, max is
// undefined and is thus made the maximum element in the array
if (x[i] > value) {
value = x[i];
}
}
return value;
}
function min(x) {
if (x.length === 0) {
throw new Error('min requires at least one data point');
}
let value = x[0];
for (let i = 1; i < x.length; i++) {
// On the first iteration of this loop, min is
// undefined and is thus made the minimum element in the array
if (x[i] < value) {
value = x[i];
}
}
return value;
}
function sum(x) {
// If the array is empty, we needn't bother computing its sum
if (x.length === 0) {
return 0;
}
// Initializing the sum as the first number in the array
let sum = x[0];
// Keeping track of the floating-point error correction
let correction = 0;
let transition;
for (let i = 1; i < x.length; i++) {
transition = sum + x[i];
// Here we need to update the correction in a different fashion
// if the new absolute value is greater than the absolute sum
if (Math.abs(sum) >= Math.abs(x[i])) {
correction += sum - transition + x[i];
} else {
correction += x[i] - transition + sum;
}
sum = transition;
}
// Returning the corrected sum
return sum + correction;
}
function mean(x) {
if (x.length === 0) {
throw new Error('mean requires at least one data point');
}
return sum(x) / x.length;
}
export {
sum,
max,
min,
mean
};

59
src/util/shaderModule.js Normal file
View File

@ -0,0 +1,59 @@
const SHADER_TYPE = {
VS: 'vs',
FS: 'fs'
};
const moduleCache = {};
const rawContentCache = {};
const precisionRegExp = /precision\s+(high|low|medium)p\s+float/;
const globalDefaultprecision = '#ifdef GL_FRAGMENT_PRECISION_HIGH\n precision highp float;\n #else\n precision mediump float;\n#endif\n';
const includeRegExp = /#pragma include (["^+"]?["\ "[a-zA-Z_0-9](.*)"]*?)/g;
function processModule(rawContent, includeList, type) {
return rawContent.replace(includeRegExp, (_, strMatch) => {
const includeOpt = strMatch.split(' ');
const includeName = includeOpt[0].replace(/"/g, '');
if (includeList.indexOf(includeName) > -1) {
return '';
}
let txt = rawContentCache[includeName][type];
includeList.push(includeName);
txt = processModule(txt, includeList, type);
return txt;
});
}
export function registerModule(moduleName, { vs, fs }) {
rawContentCache[moduleName] = {
[SHADER_TYPE.VS]: vs,
[SHADER_TYPE.FS]: fs
};
}
export function getModule(moduleName) {
if (moduleCache[moduleName]) {
return moduleCache[moduleName];
}
let vs = rawContentCache[moduleName][SHADER_TYPE.VS];
let fs = rawContentCache[moduleName][SHADER_TYPE.FS];
vs = processModule(vs, [], SHADER_TYPE.VS);
fs = processModule(fs, [], SHADER_TYPE.FS);
/**
* set default precision for fragment shader
* https://stackoverflow.com/questions/28540290/why-it-is-necessary-to-set-precision-for-the-fragment-shader
*/
if (!precisionRegExp.test(fs)) {
fs = globalDefaultprecision + fs;
}
moduleCache[moduleName] = {
[SHADER_TYPE.VS]: vs.trim(),
[SHADER_TYPE.FS]: fs.trim()
};
return moduleCache[moduleName];
}

3
src/worker/main.worker.js
View File

@ -17,6 +17,5 @@ self.addEventListener('message', e => {
}
});
self.addEventListener('error', function(e) {
/* eslint-disable */
console.log('filename:' + e.filename + '\nmessage:' + e.message + '\nline:' + e.lineno);
console.error('filename:' + e.filename + '\nmessage:' + e.message + '\nline:' + e.lineno);
});

1490
test/asset/data/point.js Normal file
View File

File diff suppressed because it is too large Load Diff

35
test/unit/geom/buffer/heatmap/hexagon.js Normal file
View File

@ -0,0 +1,35 @@
import { expect } from 'chai';
import hexagonBuffer from '../../../../../src/geom/buffer/heatmap/hexagon';
describe('hexagon heatMap buffer', () => {
const layerData = [
{ color: [ 1, 1, 0, 1 ], coordinates: [ 120.12063099925889, 30.263947783103486, 0 ], id: 1 },
{ color: [ 1, 0.5, 0, 1 ], coordinates: [ 120.12218696039365, 30.263947783103486, 0 ], id: 2 },
{
color: [ 1, 0.1, 0, 1 ],
coordinates: [ 120.12374292152843, 30.263947783103486, 0 ],
id: 3
},
{ color: [ 1, 0, 0.2, 1 ], coordinates: [ 120.1252988826632, 30.263947783103486, 0 ], id: 4 },
{
color: [ 0, 1, 0, 1 ],
coordinates: [ 120.12607686323062, 30.263947783103486, 0 ],
id: 5
},
{
color: [ 1, 1, 0, 1 ],
coordinates: [ 120.12685484379799, 30.263947783103486, 0 ],
id: 6
},
{ color: [ 1, 1, 1, 1 ], coordinates: [ 120.12841080493274, 30.263947783103486, 0 ], id: 7 },
{ color: [ 0, 1, 1, 1 ], coordinates: [ 120.13230070776972, 30.263947783103486, 0 ], id: 8 },
{ color: [ 0, 1, 0, 1 ], coordinates: [ 120.12763282436538, 30.263947783103486, 0 ], id: 9 },
{ color: [ 1, 1, 0, 1 ], coordinates: [ 120.12996676606754, 30.263947783103486, 0 ], id: 10 }
];
it('hexagon buffer', () => {
const attribute = hexagonBuffer(layerData);
expect(attribute.colors.length).eql(480);
expect(attribute.miter.length).eql(240);
expect(attribute.pickingIds.length).eql(120);
expect(attribute.vertices.length).eql(360);
});
});

31
test/unit/shader-module/base-spec.js Normal file
View File

@ -0,0 +1,31 @@
import { expect } from 'chai';
import { registerModule, getModule } from '../../../src/util/shaderModule';
describe('test shader module', function() {
const vs = `
#define PI 3.14
`;
const commonModule = {
vs,
fs: vs
};
const module1 = {
vs: `
#pragma include "common"
`,
fs: ''
};
registerModule('common', commonModule);
registerModule('module1', module1);
it('should import a module correctly.', function() {
const { vs, fs } = getModule('module1');
expect(vs).eq('#define PI 3.14');
expect(fs.replace(/(\s+)|(\n)+|(\r\n)+/g, '')).eqls('#ifdefGL_FRAGMENT_PRECISION_HIGHprecisionhighpfloat;#elseprecisionmediumpfloat;#endif');
});
});

22
test/unit/source/transfrom/hexagon.js Normal file
View File

@ -0,0 +1,22 @@
import { expect } from 'chai';
import { pointData } from '../../../asset/data/point';
import { pointToHexbin } from '../../../../src/source/transform/hexagon';
describe('hexagon Test', function() {
it('pointToHexbin', function() {
const dataArray = pointData.map(item => {
const lng = 1e-6 * (250 * item.grid_x + 125),
lat = 1e-6 * (250 * item.grid_y + 125);
return {
v: item.count * 1,
coordinates: [ lng, lat ]
};
});
const data = {
dataArray
};
const hexgonGrid = pointToHexbin(data, { size: 100, field: 'v', method: 'sum' });
expect(hexgonGrid.dataArray.length).eql(567);
});
});

3
webpack.config.js
View File

@ -4,7 +4,8 @@ const pkg = require('./package.json');
module.exports = {
devtool: 'cheap-source-map',
entry: {
l7: './src/index.js'
l7: './src/index.js',
three: './src/core/three.js'
},
output: {
filename: '[name].js',