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

fix(meshline):修复动画流动方向颠倒的问题

This commit is contained in:
李正学 2018-12-24 10:48:03 +08:00
parent bb342b5094
commit c968530976
53 changed files with 1323 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
demos/01_point_circle.html
View File

@ -35,7 +35,9 @@ const scene = new L7.Scene({
mapStyle: 'light', // 样式URL mapStyle: 'light', // 样式URL
center: [ 120.19382669582967, 30.258134 ], center: [ 120.19382669582967, 30.258134 ],
pitch: 0, pitch: 0,
zoom: 12 zoom: 12,
maxZoom:14,
minZoom:11,
}); });
window.scene = scene; window.scene = scene;
scene.on('loaded', () => { scene.on('loaded', () => {
@ -53,7 +55,7 @@ scene.on('loaded', () => {
.shape('2d:circle') .shape('2d:circle')
.size('value', [ 2, 80]) // default 1 .size('value', [ 2, 80]) // default 1
//.size('value', [ 10, 300]) // default 1 //.size('value', [ 10, 300]) // default 1
.active(true) .active(false)
.filter('value', field_8 => { .filter('value', field_8 => {
return field_8 * 1 > 500; return field_8 * 1 > 500;
}) })
@ -65,7 +67,9 @@ scene.on('loaded', () => {
}) })
.render(); .render();
circleLayer.on('click',(e)=>{
console.log(e);
})
}); });
}); });

2
demos/01_point_column.html
View File

@ -38,7 +38,7 @@ scene.on('loaded', () => {
x: 'j', x: 'j',
y: 'w', y: 'w',
}) })
.shape('3d:circle') .shape('cylinder')
.size('t',(level)=> { .size('t',(level)=> {
return [2,2,(level*3+20)]; return [2,2,(level*3+20)];
}) })

4
demos/02_oneBletoneRoad.html
View File

@ -29,8 +29,6 @@ const scene = new L7.Scene({
scene.on('loaded', () => { scene.on('loaded', () => {
scene.image.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png'); scene.image.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png');
$.getJSON('https://gw.alipayobjects.com/os/rmsportal/UpapMomPYUeiBjbHNAma.json', region => { $.getJSON('https://gw.alipayobjects.com/os/rmsportal/UpapMomPYUeiBjbHNAma.json', region => {
const color = [ 'rgb(22,32,101)', 'rgb(28,43,127)', 'rgb(36,68,142)', 'rgb(45,94,158)', 'rgb(53,119,174)', 'rgb(61,145,190)', 'rgb(70,170,206)', 'rgb(98,190,210)', 'rgb(138,205,206)', 'rgb(179,221,204)', 'rgb(220,236,201)' ]; const color = [ 'rgb(22,32,101)', 'rgb(28,43,127)', 'rgb(36,68,142)', 'rgb(45,94,158)', 'rgb(53,119,174)', 'rgb(61,145,190)', 'rgb(70,170,206)', 'rgb(98,190,210)', 'rgb(138,205,206)', 'rgb(179,221,204)', 'rgb(220,236,201)' ];
var points = region.features.map((feature)=>{ var points = region.features.map((feature)=>{
@ -70,7 +68,7 @@ $.getJSON('https://gw.alipayobjects.com/os/rmsportal/dzpMOiLYBKxpdmsgBLoE.json',
.size([ 1.5, 0 ]) .size([ 1.5, 0 ])
.shape('line') .shape('line')
.style({ .style({
// 'lineType':'solid' 'lineType':'dash'
}) })
.render(); .render();
}); });

4
demos/03_choropleths_polygon.html
View File

@ -86,6 +86,7 @@ scene.on('loaded', () => {
opacity: 1 opacity: 1
}) })
.render(); .render();
/**
const citylayer2 = scene.PolygonLayer() const citylayer2 = scene.PolygonLayer()
.source(city) .source(city)
.shape('line') .shape('line')
@ -93,7 +94,8 @@ scene.on('loaded', () => {
.style({ .style({
opacity: 0.1 opacity: 0.1
}) })
.render(); // .render();
**/
citylayer.on('click',(e)=>{ citylayer.on('click',(e)=>{
$("#info").css({'left': e.pixel.x,'top':e.pixel.y, display:'block'}); $("#info").css({'left': e.pixel.x,'top':e.pixel.y, display:'block'});

2
demos/06_text.html
View File

@ -35,7 +35,7 @@ scene.on('loaded', () => {
}) })
.source(data) .source(data)
.shape('name', 'text') .shape('name', 'text')
.size(10) // default 1 .size(12) // default 1
.color('#fff') .color('#fff')
.style({ .style({
stroke: '#999', stroke: '#999',

3
demos/07_city.html
View File

@ -38,6 +38,7 @@ scene.on('loaded', () => {
}) })
.source(data) .source(data)
.shape('fill') .shape('fill')
.active({fill:'blue'})
.color('rgb(79,174,234)') .color('rgb(79,174,234)')
.render(); .render();
}); });
@ -71,10 +72,12 @@ scene.on('loaded', () => {
.size('floor',[10,2000]) .size('floor',[10,2000])
.color('rgba(242,246,250,0.96)') .color('rgba(242,246,250,0.96)')
.render(); .render();
/**
citylayer.on('click',(e)=>{ citylayer.on('click',(e)=>{
$("#info").css({'left': e.pixel.x,'top':e.pixel.y, display:'block'}); $("#info").css({'left': e.pixel.x,'top':e.pixel.y, display:'block'});
$("#info").html(`<p>楼高<span">${e.feature.properties.floor || 0}</span></p>`); $("#info").html(`<p>楼高<span">${e.feature.properties.floor || 0}</span></p>`);
}) })
**/
}); });
}); });

85
demos/line.html Normal file
View File

File diff suppressed because one or more lines are too long

57
demos/point.html Normal file
View File

@ -0,0 +1,57 @@
<!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: [104.838088,34.075889 ],
pitch: 0,
zoom: 9,
minZoom: 8,
rotation:0
});
scene.on('loaded', () => {
scene.image.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png');
$.get('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json', data => {
scene.PointLayer({
zIndex: 2
})
.source(data.list, {
type: 'array',
x: 'j',
y: 'w',
})
.shape('m','text')
.size(20)
.color('#fff')
.style({
stroke:'#fff',
strokeWidth:1.0,
opacity:1.0,
})
.render();
});
});
</script>
</body>
</html>

2
demos/taxi.html
View File

@ -41,7 +41,7 @@ scene.on('loaded', () => {
.animate({enable:true}) .animate({enable:true})
.render(); .render();
}); });
$.get('./data/2.geojson', data => { $.get('https://gw.alipayobjects.com/os/rmsportal/vmvAxgsEwbpoSWbSYvix.json', data => {
buildLayer = scene.PolygonLayer({ buildLayer = scene.PolygonLayer({
zIndex: 2 zIndex: 2
}) })

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@antv/l7", "name": "@antv/l7",
"version": "1.0.0", "version": "1.0.1",
"description": "Large-scale WebGL-powered Geospatial Data Visualization", "description": "Large-scale WebGL-powered Geospatial Data Visualization",
"main": "build/l7.js", "main": "build/l7.js",
"browser": "build/l7.js", "browser": "build/l7.js",

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

@ -48,12 +48,12 @@ class Picking {
// return; // return;
// } // }
const point = { x: event.clientX, y: event.clientY }; const point = { x: event.clientX, y: event.clientY,type:event.type};
const normalisedPoint = { x: 0, y: 0 }; const normalisedPoint = { x: 0, y: 0 };
normalisedPoint.x = (point.x / this._width) * 2 - 1; normalisedPoint.x = (point.x / this._width) * 2 - 1;
normalisedPoint.y = -(point.y / this._height) * 2 + 1; normalisedPoint.y = -(point.y / this._height) * 2 + 1;
this._pickAllObject(point, normalisedPoint);
this._pick(point, normalisedPoint); // this._pick(point, normalisedPoint);
} }
_onWorldMove() { _onWorldMove() {
@ -76,10 +76,10 @@ class Picking {
_update(point) { _update(point) {
const texture = this._pickingTexture; const texture = this._pickingTexture;
if (this._needUpdate) { // if (this._needUpdate) {
this._renderer.render(this._pickingScene, this._camera, this._pickingTexture); this._renderer.render(this._pickingScene, this._camera, this._pickingTexture);
this._needUpdate = false; // this._needUpdate = false;
} // }
this.pixelBuffer = new Uint8Array(4); this.pixelBuffer = new Uint8Array(4);
this._renderer.readRenderTargetPixels(texture, point.x, this._height - point.y, 1, 1, this.pixelBuffer); this._renderer.readRenderTargetPixels(texture, point.x, this._height - point.y, 1, 1, this.pixelBuffer);
@ -99,17 +99,33 @@ class Picking {
}); });
} }
_filterObject(id) {
this._pickingScene.children.forEach((object, index) => {
index === id ? object.visible = true : object.visible = false;
});
}
_pickAllObject(point, normalisedPoint) {
this._pickingScene.children.forEach((object, index) => {
this._filterObject(index);
const item = this._pick(point, normalisedPoint, object.name);
item.type = point.type;
this._world.emit('pick', item);
this._world.emit('pick-' + object.name, item);
});
}
_updateRender() { _updateRender() {
this._renderer.render(this._pickingScene, this._camera, this._pickingTexture); this._renderer.render(this._pickingScene, this._camera, this._pickingTexture);
} }
_pick(point, normalisedPoint) { _pick(point, normalisedPoint, layerId) {
this._update(point); this._update(point);
// Interpret the pixel as an ID // Interpret the pixel as an ID
const id = (this.pixelBuffer[2] * 255 * 255) + (this.pixelBuffer[1] * 255) + (this.pixelBuffer[0]); 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 // Skip if ID is 16646655 (white) as the background returns this
if (id === 16646655 || this.pixelBuffer[3] === 0) { if (id === 16646655 || this.pixelBuffer[3] === 0) {
return; id = -999;
// return;
} }
this._raycaster.setFromCamera(normalisedPoint, this._camera); this._raycaster.setFromCamera(normalisedPoint, this._camera);
@ -118,7 +134,6 @@ class Picking {
// //
// TODO: Only perform intersection test on the relevant picking mesh // TODO: Only perform intersection test on the relevant picking mesh
const intersects = this._raycaster.intersectObjects(this._pickingScene.children, true); const intersects = this._raycaster.intersectObjects(this._pickingScene.children, true);
const _point2d = { x: point.x, y: point.y }; const _point2d = { x: point.x, y: point.y };
let _point3d; let _point3d;
@ -131,13 +146,14 @@ class Picking {
// //
// TODO: Look into the leak potential for passing so much by reference here // TODO: Look into the leak potential for passing so much by reference here
const item = { const item = {
layerId,
featureId: id - 1, featureId: id - 1,
point2d: _point2d, point2d: _point2d,
point3d: _point3d, point3d: _point3d,
intersects intersects
}; };
this._world.emit('pick', item); return item
// this._world.emit('pick-' + id, _point2d, _point3d, intersects);
} }
// Add mesh to picking scene // Add mesh to picking scene

18
src/core/image.js
View File

@ -5,30 +5,32 @@ import { getImage } from '../util/ajax';
export default class LoadImage extends EventEmitter { export default class LoadImage extends EventEmitter {
constructor() { constructor() {
super(); super();
this.imageWidth = 64; const pixelRatio = window.devicePixelRatio || 1;
this.imageWidth = 64 * pixelRatio;
this.canvas = document.createElement('canvas'); this.canvas = document.createElement('canvas');
this.canvas.style.cssText += 'height: 512px;width: 512px;'; this.canvas.style.cssText += 'height: 512px;width: 512px;';
this.canvas.width = this.imageWidth * 8; this.canvas.width = this.imageWidth * 8;
this.canvas.height = this.imageWidth * 8; this.canvas.height = this.imageWidth * 8;
this.ctx = this.canvas.getContext('2d'); this.ctx = this.canvas.getContext('2d');
this.images = []; this.images = [];
this.imagesCount = 0; this.imagesCount = 0;
this.imagePos = {}; this.imagePos = {};
this.imagesIds = [];
} }
addImage(id, opt) { addImage(id, opt) {
this.imagesCount ++; this.imagesCount ++;
this.imagesIds.push(id);
const imageCount = this.imagesCount; const imageCount = this.imagesCount;
const x = imageCount % 8 * 64; const x = imageCount % 8 * this.imageWidth;
const y = parseInt(imageCount / 8) * 64; const y = parseInt(imageCount / 8) * this.imageWidth;
this.imagePos[id] = { x: x / 512, y: y / 512 }; this.imagePos[id] = { x: x / this.canvas.width, y: y / this.canvas.height };
this.texture = new THREE.Texture(this.canvas); this.texture = new THREE.Texture(this.canvas);
if (typeof opt === 'string') { if (typeof opt === 'string') {
getImage({ url: opt }, (err, img) => { getImage({ url: opt }, (err, img) => {
img.id = id; img.id = id;
this.images.push(img); this.images.push(img);
this.ctx.drawImage(img, x, y, 64, 64); this.ctx.drawImage(img, x, y, this.imageWidth, this.imageWidth);
this.texture.magFilter = THREE.LinearFilter; this.texture.magFilter = THREE.LinearFilter;
this.texture.minFilter = THREE.LinearFilter; this.texture.minFilter = THREE.LinearFilter;
@ -47,7 +49,7 @@ export default class LoadImage extends EventEmitter {
image.data = data; image.data = data;
image.id = id; image.id = id;
this.images.push(image); this.images.push(image);
this.ctx.drawImage(image, x, y, 64, 64); this.ctx.drawImage(image, x, y, this.imageWidth, this.imageWidth);
this.texture = new THREE.CanvasTexture(this.canvas); this.texture = new THREE.CanvasTexture(this.canvas);
this.imagePos[id] = { x: x >> 9, y: y >> 9 }; this.imagePos[id] = { x: x >> 9, y: y >> 9 };
if (this.images.length === this.imagesCount) { if (this.images.length === this.imagesCount) {

98
src/core/layer.js
View File

@ -36,9 +36,10 @@ export default class Layer extends Base {
attrs: {}, attrs: {},
// 样式配置项 // 样式配置项
styleOptions: { styleOptions: {
stroke: [ 1.0, 1.0, 1.0, 1.0 ], stroke: 'none',
strokeWidth: 1.0, strokeWidth: 1.0,
opacity: 1.0, opacity: 1.0,
strokeOpacity: 1.0,
texture: false texture: false
}, },
// 选中时的配置项 // 选中时的配置项
@ -63,31 +64,35 @@ export default class Layer extends Base {
this._activeIds = null; this._activeIds = null;
scene._engine._scene.add(this._object3D); scene._engine._scene.add(this._object3D);
this.layerMesh = null; this.layerMesh = null;
this.layerLineMesh = null;
} }
/** /**
* 将图层添加加到 Object * 将图层添加加到 Object
* @param {*} object three 物体 * @param {*} object three 物体
* @param {*} type mesh类型是区别是填充还是边线
*/ */
add(object) { add(object, type = 'fill') {
this.layerMesh = object; type === 'fill' ? this.layerMesh = object : this.layerLineMesh = object;
this._visibleWithZoom(); this._visibleWithZoom();
this.scene.on('zoomchange', () => { this.scene.on('zoomchange', () => {
this._visibleWithZoom(); this._visibleWithZoom();
}); });
this.layerMesh.onBeforeRender = () => { object.onBeforeRender = () => {
const zoom = this.scene.getZoom(); const zoom = this.scene.getZoom();
this.layerMesh.material.setUniformsValue('u_time', this.scene._engine.clock.getElapsedTime()); object.material.setUniformsValue('u_time', this.scene._engine.clock.getElapsedTime());
this.layerMesh.material.setUniformsValue('u_zoom', zoom); object.material.setUniformsValue('u_zoom', zoom);
this._preRender();
}; };
// 更新 // 更新
if (this._needUpdateFilter) { if (this._needUpdateFilter) {
this._updateFilter(); this._updateFilter(object);
} }
this._object3D.add(object); this._object3D.add(object);
this._addPickMesh(object); if (type === 'fill') { this._addPickMesh(object); }
} }
remove(object) { remove(object) {
this._object3D.remove(object); this._object3D.remove(object);
@ -131,7 +136,7 @@ export default class Layer extends Base {
} }
values === 'text' ? this.shapeType = values : null; values === 'text' ? this.shapeType = values : null;
this._createAttrOption('shape', field, values, Global.sizes); this._createAttrOption('shape', field, values, Global.shape);
return this; return this;
} }
/** /**
@ -171,7 +176,7 @@ export default class Layer extends Base {
styleOptions.fields = fields; styleOptions.fields = fields;
Util.assign(styleOptions, cfg); Util.assign(styleOptions, cfg);
for (const item in cfg) { for (const item in cfg) {
if (colorItem.indexOf(item) !== -1) { if (colorItem.indexOf(item) !== -1 && styleOptions[item] !== 'none') {
styleOptions[item] = ColorUtil.color2RGBA(styleOptions[item]); styleOptions[item] = ColorUtil.color2RGBA(styleOptions[item]);
} }
styleOptions[item] = styleOptions[item]; styleOptions[item] = styleOptions[item];
@ -252,20 +257,24 @@ export default class Layer extends Base {
this._mapping(); this._mapping();
const activeHander = this._addActiveFeature.bind(this); const activeHander = this._addActiveFeature.bind(this);
const resetHander = this._resetStyle.bind(this);
if (this.get('allowActive')) { if (this.get('allowActive')) {
this.scene.on('pick', activeHander); this.on('active', activeHander);
this.on('mouseleave', resetHander);
} else { } else {
this.scene.off('pick', activeHander); this.off('active', activeHander);
this.off('mouseleave', resetHander);
} }
} }
_addActiveFeature(e) { _addActiveFeature(e) {
const { featureId } = e; const { featureId } = e;
if (featureId < 0) return;
const activeStyle = this.get('activedOptions'); 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; } if (this.StyleData[selectFeatureIds[0]].hasOwnProperty('filter') && this.StyleData[selectFeatureIds[0]].filter === false) { return; }
const style = Util.assign({}, this.StyleData[featureId]); const style = Util.assign({}, this.StyleData[featureId]);
style.color = ColorUtil.toRGB(activeStyle.fill).map(e => e / 255); style.color = ColorUtil.toRGB(activeStyle.fill).map(e => e / 255);
@ -434,6 +443,7 @@ export default class Layer extends Base {
} }
_addPickMesh(mesh) { _addPickMesh(mesh) {
this._pickingMesh = new THREE.Object3D(); this._pickingMesh = new THREE.Object3D();
this._pickingMesh.name = this.layerId;
this._visibleWithZoom(); this._visibleWithZoom();
this.scene.on('zoomchange', () => { this.scene.on('zoomchange', () => {
this._visibleWithZoom(); this._visibleWithZoom();
@ -445,6 +455,7 @@ export default class Layer extends Base {
}); });
const pickingMesh = new THREE[mesh.type](mesh.geometry, pickmaterial); const pickingMesh = new THREE[mesh.type](mesh.geometry, pickmaterial);
pickingMesh.name = this.layerId;
pickmaterial.setDefinesvalue(this.type, true); pickmaterial.setDefinesvalue(this.type, true);
pickingMesh.onBeforeRender = () => { pickingMesh.onBeforeRender = () => {
const zoom = this.scene.getZoom(); const zoom = this.scene.getZoom();
@ -457,20 +468,40 @@ export default class Layer extends Base {
} }
_addPickingEvents() { _addPickingEvents() {
// TODO: Find a way to properly remove this listener on destroy // TODO: Find a way to properly remove this listener on destroy
this.scene.on('pick', e => { this.scene.on('pick-' + this.layerId, e => {
// Re-emit click event from the layer const { featureId, point2d,type} = e;
const { featureId, point2d, intersects } = e;
if (intersects.length === 0) { return; } if (featureId < -100 && this._activeIds !== null) {
const source = this.layerSource.get('data'); this.emit('mouseleave');
const feature = source.features[featureId]; return;
}
// if (intersects.length === 0) { return; }
const feature = this.layerSource.getSelectFeature(featureId);
const lnglat = this.scene.containerToLngLat(point2d); const lnglat = this.scene.containerToLngLat(point2d);
const target = { const target = {
featureId,
feature, feature,
pixel: point2d, pixel: point2d,
lnglat: { lng: lnglat.lng, lat: lnglat.lat } lnglat: { lng: lnglat.lng, lat: lnglat.lat }
}; };
this.emit('click', target); if(featureId>=0) {
// this.emit('move', target);
switch(type) {
case 'mouseup':
this.emit('click', target);
break;
case 'mousemove':
this.emit('mousemove', target);
this.emit('active', target);
break;
default:
//this.emit('click', target);
}
}
}); });
} }
/** /**
@ -480,7 +511,7 @@ export default class Layer extends Base {
*/ */
updateStyle(featureStyleId, style) { updateStyle(featureStyleId, style) {
if (this._activeIds) { if (this._activeIds) {
this.resetStyle(); this._resetStyle();
} }
this._activeIds = featureStyleId; this._activeIds = featureStyleId;
const pickingId = this.layerMesh.geometry.attributes.pickingId.array; const pickingId = this.layerMesh.geometry.attributes.pickingId.array;
@ -507,15 +538,15 @@ export default class Layer extends Base {
} }
/** /**
* 用于过滤数据 * 用于过滤数据
* @param {*} filterData 数据过滤标识符 * @param {*} object 需要过滤的mesh
*/ */
_updateFilter() { _updateFilter(object) {
this._updateMaping(); this._updateMaping();
const filterData = this.StyleData; const filterData = this.StyleData;
this._activeIds = null; // 清空选中元素 this._activeIds = null; // 清空选中元素
const colorAttr = this.layerMesh.geometry.attributes.a_color; const colorAttr = object.geometry.attributes.a_color;
const pickAttr = this.layerMesh.geometry.attributes.pickingId; const pickAttr = object.geometry.attributes.pickingId;
pickAttr.array.forEach((id, index) => { pickAttr.array.forEach((id, index) => {
id = Math.abs(id); id = Math.abs(id);
const color = [ ...this.StyleData[id - 1].color ]; const color = [ ...this.StyleData[id - 1].color ];
@ -526,7 +557,7 @@ export default class Layer extends Base {
colorAttr.array[index * 4 + 1] = 0; colorAttr.array[index * 4 + 1] = 0;
colorAttr.array[index * 4 + 2] = 0; colorAttr.array[index * 4 + 2] = 0;
colorAttr.array[index * 4 + 3] = 0; colorAttr.array[index * 4 + 3] = 0;
pickAttr.array[index] = -id; pickAttr.array[index] = -id; // 通过Id数据过滤 id<0 不显示
} else { } else {
colorAttr.array[index * 4 + 0] = color[0]; colorAttr.array[index * 4 + 0] = color[0];
colorAttr.array[index * 4 + 1] = color[1]; colorAttr.array[index * 4 + 1] = color[1];
@ -537,8 +568,8 @@ export default class Layer extends Base {
}); });
colorAttr.needsUpdate = true; colorAttr.needsUpdate = true;
pickAttr.needsUpdate = true; pickAttr.needsUpdate = true;
this._needUpdateFilter = false; // this._needUpdateFilter = false;
this._needUpdateColor = false; // this._needUpdateColor = false;
} }
_visibleWithZoom() { _visibleWithZoom() {
const zoom = this.scene.getZoom(); const zoom = this.scene.getZoom();
@ -561,7 +592,8 @@ export default class Layer extends Base {
/** /**
* 重置高亮要素 * 重置高亮要素
*/ */
resetStyle() { _resetStyle() {
const pickingId = this.layerMesh.geometry.attributes.pickingId.array; const pickingId = this.layerMesh.geometry.attributes.pickingId.array;
const colorAttr = this.layerMesh.geometry.attributes.a_color; const colorAttr = this.layerMesh.geometry.attributes.a_color;
this._activeIds.forEach(index => { this._activeIds.forEach(index => {
@ -577,6 +609,7 @@ export default class Layer extends Base {
} }
}); });
colorAttr.needsUpdate = true; colorAttr.needsUpdate = true;
this._activeIds = null;
} }
/** /**
* 销毁Layer对象 * 销毁Layer对象
@ -609,5 +642,8 @@ export default class Layer extends Base {
this._object3D = null; this._object3D = null;
this.scene = null; this.scene = null;
} }
_preRender(){
}
} }

30
src/core/scene.js
View File

@ -1,5 +1,4 @@
import Engine from './engine'; import Engine from './engine';
import * as THREE from './three';
import * as layers from '../layer'; import * as layers from '../layer';
import Base from './base'; import Base from './base';
import LoadImage from './image'; import LoadImage from './image';
@ -19,6 +18,7 @@ export default class Scene extends Base {
} }
_initEngine(mapContainer) { _initEngine(mapContainer) {
this._el = mapContainer;
this._engine = new Engine(mapContainer, this); this._engine = new Engine(mapContainer, this);
this._engine.run(); this._engine.run();
} }
@ -77,16 +77,34 @@ export default class Scene extends Base {
return this._layers; return this._layers;
} }
_addLight() { _addLight() {
const scene = this._engine._scene; // const scene = this._engine._scene;
const ambientLight = new THREE.AmbientLight(0xaaaaaa); // //const ambientLight = new THREE.AmbientLight(0xaaaaaa);
scene.add(ambientLight); // scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); // const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
scene.add(directionalLight); // scene.add(directionalLight);
} }
_addLayer() { _addLayer() {
} }
_registEvents(){
const events = [
'mouseout',
'mouseover',
'mousemove',
'mousedown',
'mouseleave',
'mouseup',
'click',
'dblclick'
];
events.forEach((event)=>{
this._el.addEventListener(event, e => {
}, false);
})
}
// 代理map事件
removeLayer(layer) { removeLayer(layer) {
const layerIndex = this._layers.indexOf(layer); const layerIndex = this._layers.indexOf(layer);
if (layerIndex > -1) { if (layerIndex > -1) {

14
src/core/three.js
View File

@ -9,8 +9,8 @@ export { Points } from 'three/src/objects/Points.js';
export { LineSegments } from 'three/src/objects/LineSegments.js'; export { LineSegments } from 'three/src/objects/LineSegments.js';
export { Mesh } from 'three/src/objects/Mesh.js'; export { Mesh } from 'three/src/objects/Mesh.js';
export { Texture } from 'three/src/textures/Texture.js'; export { Texture } from 'three/src/textures/Texture.js';
export { DirectionalLight } from 'three/src/lights/DirectionalLight.js'; //export { DirectionalLight } from 'three/src/lights/DirectionalLight.js';
export { AmbientLight } from 'three/src/lights/AmbientLight.js'; //export { AmbientLight } from 'three/src/lights/AmbientLight.js';
export { WebGLRenderTarget } from 'three/src/renderers/WebGLRenderTarget.js'; export { WebGLRenderTarget } from 'three/src/renderers/WebGLRenderTarget.js';
export { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera.js'; export { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera.js';
export { BufferGeometry } from 'three/src/core/BufferGeometry.js'; export { BufferGeometry } from 'three/src/core/BufferGeometry.js';
@ -18,15 +18,15 @@ export { Raycaster } from 'three/src/core/Raycaster.js';
export { Matrix4 } from 'three/src/math/Matrix4.js'; export { Matrix4 } from 'three/src/math/Matrix4.js';
export { Matrix3 } from 'three/src/math/Matrix3.js'; export { Matrix3 } from 'three/src/math/Matrix3.js';
export { Line } from 'three/src/objects/Line.js'; export { Line } from 'three/src/objects/Line.js';
export { LineLoop } from 'three/src/objects/LineLoop.js'; // export { LineLoop } from 'three/src/objects/LineLoop.js';
export { Vector4 } from 'three/src/math/Vector4.js'; export { Vector4 } from 'three/src/math/Vector4.js';
export { Vector3 } from 'three/src/math/Vector3.js'; export { Vector3 } from 'three/src/math/Vector3.js';
export { Vector2 } from 'three/src/math/Vector2.js'; export { Vector2 } from 'three/src/math/Vector2.js';
export { TextureLoader } from 'three/src/loaders/TextureLoader.js'; // export { TextureLoader } from 'three/src/loaders/TextureLoader.js';
export { LineDashedMaterial } from 'three/src/materials/LineDashedMaterial.js'; // export { LineDashedMaterial } from 'three/src/materials/LineDashedMaterial.js';
export { ShaderMaterial } from 'three/src/materials/ShaderMaterial.js'; export { ShaderMaterial } from 'three/src/materials/ShaderMaterial.js';
export { PointsMaterial } from 'three/src/materials/PointsMaterial.js'; // export { PointsMaterial } from 'three/src/materials/PointsMaterial.js';
export { VideoTexture } from 'three/src/textures/VideoTexture.js'; // export { VideoTexture } from 'three/src/textures/VideoTexture.js';
export { DataTexture } from 'three/src/textures/DataTexture.js'; export { DataTexture } from 'three/src/textures/DataTexture.js';
export { export {
Float64BufferAttribute, Float64BufferAttribute,

0
src/geo/bound.js Normal file
View File

20
src/geo/lngLat.js Normal file
View File

@ -0,0 +1,20 @@
export class LatLng {
constructor(lat, lng, alt) {
if (isNaN(lat) || isNaN(lng)) {
throw new Error('Invalid LatLng object: (' + lat + ', ' + lng + ')');
}
this.lat = +lat;
this.lng = +lng;
if (alt !== undefined) {
this.alt = +alt;
}
}
equal() {
}
distanceTo() {
}
}

45
src/geom/buffer/point.js
View File

@ -1,5 +1,9 @@
import BufferBase from './bufferBase'; import BufferBase from './bufferBase';
import { regularShape } from '../shape/index'; import { regularShape } from '../shape/index';
import * as polygonPath from '../shape/path';
import * as polygonShape from '../shape/polygon';
import * as lineShape from '../shape/line';
import { pointShape } from '../../global';
import Util from '../../util'; import Util from '../../util';
export default class PointBuffer extends BufferBase { export default class PointBuffer extends BufferBase {
geometryBuffer() { geometryBuffer() {
@ -43,8 +47,17 @@ export default class PointBuffer extends BufferBase {
this.attributes = this._toPointsAttributes(this.bufferStruct); this.attributes = this._toPointsAttributes(this.bufferStruct);
} }
_3dRegularBuffer() { _3dRegularBuffer() {
const lineAttribute = {
shapes: [],
normal: [],
miter: [],
indexArray: [],
sizes: [],
positions: []
};
const coordinates = this.get('coordinates'); const coordinates = this.get('coordinates');
const properties = this.get('properties'); const properties = this.get('properties');
const style = this.get('style');
const type = this.get('type'); const type = this.get('type');
const positions = []; const positions = [];
const shapes = []; const shapes = [];
@ -55,7 +68,7 @@ export default class PointBuffer extends BufferBase {
this.bufferStruct.style = properties; this.bufferStruct.style = properties;
coordinates.forEach((geo, index) => { coordinates.forEach((geo, index) => {
let { size, shape } = properties[index]; let { size, shape } = properties[index];
let shapeType = 'extrude'; let shapeType = '';
if (type === '2d' || (type === '3d' && size[2] === 0)) { if (type === '2d' || (type === '3d' && size[2] === 0)) {
shapeType = 'fill'; shapeType = 'fill';
@ -67,7 +80,20 @@ export default class PointBuffer extends BufferBase {
uvs.push(0, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0); uvs.push(0, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0);
shape = 'square'; shape = 'square';
} }
const vert = regularShape[shape](shapeType); // const vert = regularShape[shape](shapeType);
properties[index].size = size;
const [ vert, polygonLine ] = this._getShape(properties[index], style, lineAttribute.miter.length);
polygonLine.miter.forEach(() => {
lineAttribute.positions.push(...geo);
lineAttribute.sizes.push(...size);
});
lineAttribute.shapes.push(...polygonLine.positions);
lineAttribute.normal.push(...polygonLine.normal);
lineAttribute.miter.push(...polygonLine.miter);
lineAttribute.indexArray.push(...polygonLine.indexArray);
shapes.push(vert.positions); shapes.push(vert.positions);
positions.push(geo); positions.push(geo);
sizes.push(size); sizes.push(size);
@ -81,6 +107,21 @@ export default class PointBuffer extends BufferBase {
this.bufferStruct.sizes = sizes; this.bufferStruct.sizes = sizes;
this.bufferStruct.faceUv = uvs; this.bufferStruct.faceUv = uvs;
this.attributes = this._toPointShapeAttributes(this.bufferStruct); this.attributes = this._toPointShapeAttributes(this.bufferStruct);
this.lineAttribute = lineAttribute;
}
_getShape(props, style, positionsIndex) {
const { shape } = props;
const { stroke, strokeWidth } = style;
const path = polygonPath[shape]();
let polygon = null;
let polygonLine = null;
if (pointShape['3d'].indexOf(shape) === -1) {
polygon = polygonShape.fill([ path ]);
polygonLine = lineShape.Line(path, { size: [ strokeWidth, 0 ], color: stroke }, positionsIndex);
} else {
polygon = polygonShape.extrude([ path ]);
}
return [ polygon, polygonLine ];
} }
} }

81
src/geom/buffer/point/fillBuffer.js Normal file
View File

@ -0,0 +1,81 @@
import { pointShape } from '../../../global';
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) {
const attribute = {
vertices: [],
normals: [],
colors: [],
pickingIds: [],
shapePositions: [],
a_size: [],
faceUv: []
};
coordinates.forEach((geo, index) => {
let { size, shape, color, id } = properties[index];
let polygon = null;
const path = polygonPath[shape]();
if (pointShape['2d'].indexOf(shape) !== -1) {
Util.isArray(size) || (size = [ size, size, 0 ]);
polygon = polygonShape.fill([ path ]);
} else if (pointShape['3d'].indexOf(shape) !== -1) {
Util.isArray(size) || (size = [ size, size, size ]);
polygon = polygonShape.extrude([ path ]);
} else {
throw new Error('Invalid shape type: ' + shape);
}
toPointShapeAttributes(polygon, geo, { size, shape, color, id }, attribute);
});
return attribute;
}
function toPointShapeAttributes(polygon, geo, style, attribute) {
const { positionsIndex, positions } = polygon;
const pA = new THREE.Vector3();
const pB = new THREE.Vector3();
const pC = new THREE.Vector3();
const cb = new THREE.Vector3();
const ab = new THREE.Vector3();
for (let i = 0; i < positionsIndex.length / 3; i++) {
let index = positionsIndex[i * 3];
const { color, size, id } = style;
const ax = positions[index][0];
const ay = positions[index][1];
const az = positions[index][2];
index = positionsIndex[i * 3 + 1];
const bx = positions[index][0];
const by = positions[index][1];
const bz = positions[index][2];
index = positionsIndex[i * 3 + 2];
const cx = positions[index][0];
const cy = positions[index][1];
const cz = positions[index][2];
pA.set(ax, ay, az);
pB.set(bx, by, bz);
pC.set(cx, cy, cz);
cb.subVectors(pC, pB);
ab.subVectors(pA, pB);
cb.cross(ab);
cb.normalize();
const nx = cb.x;
const ny = cb.y;
const nz = cb.z;
attribute.vertices.push(...geo, ...geo, ...geo);
attribute.shapePositions.push(ax, ay, az, bx, by, bz, cx, cy, cz);
attribute.a_size.push(...size, ...size, ...size);
attribute.normals.push(nx, ny, nz, nx, ny, nz, nx, ny, nz);
attribute.colors.push(...color, ...color, ...color);
attribute.pickingIds.push(id, id, id);
}
}

23
src/geom/buffer/point/imageBuffer.js Normal file
View File

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

4
src/geom/buffer/point/index.js Normal file
View File

@ -0,0 +1,4 @@
export { default as FillBuffer } from './fillBuffer';
export { default as StrokeBuffer } from './strokeBuffer';
export { default as ImageBuffer } from './imageBuffer';
export { default as NormalBuffer } from './normalBuffer';

19
src/geom/buffer/point/normalBuffer.js Normal file
View File

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

246
src/geom/buffer/point/sdfCommonWords.js Normal file
View File

@ -0,0 +1,246 @@
const SDFCommonWordsKey = '_AMap_sdf_com_words';
/**
* SDF 常用字获取/存储/check
*
*/
const SDFCommonWords = {
store() {
},
/**
* 检查一个字符是否在常用字中
* @param {*} charcode 汉字
*/
check(charcode) {
const range = this.range || [];
const info = this.info || {};
if (typeof charcode !== 'number') {
charcode = charcode.substr(0).charCodeAt(0);
}
for (let i = 0; i < range.length; i++) {
const curRange = range[i];
const [ rangeStart, rangeEnd ] = curRange.split('-');
if (charcode >= rangeStart && charcode <= rangeEnd) {
const curInfo = info[curRange] && info[curRange].info || {};
if (curInfo[charcode]) {
return true;
}
}
}
return false;
},
/**
* 获取纹理和位置信息
* @param list
* @param cb
*/
getImagesAndInfo(list, cb) {
const range = this.range;
},
loadCanvas(url, range, done) {
try {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
// 直接用 blob 格式 load 图片文件，方便直接转换成 base64
// 转成 base64 便于存储
// 使用 canvas 转换 base64 容易有损
xhr.responseType = 'blob';
xhr.onerror = function() {
done({ code: 0 });
};
xhr.onload = function() {
if (xhr.status === 200) {
const reader = new FileReader();
reader.onload = () => {
done(reader.result, range);
};
reader.readAsDataURL(xhr.response);
} else {
done({ code: 0 });
}
};
xhr.send();
} catch (err) {
done({ code: 0 });
}
},
loadImages(urls = []) {
const deferred = $.Deferred();
const totalNumbers = urls.length;
const localInfo = this.info;
let loadPicNum = 0;
for (let i = 0; i < urls.length; i++) {
const { url, range } = urls[i];
this.loadCanvas(url, range, (base64, range) => {
// image to base64
loadPicNum++;
!localInfo[range] && (localInfo[range] = {});
localInfo[range].pic = base64;
this.info = localInfo;
// todo: temp 暂时用 localstorage 存储，因为数据比较大，最好使用 indexDB
localStorage.setItem(SDFCommonWordsKey, JSON.stringify(localInfo));
if (loadPicNum === totalNumbers) {
deferred.resolve();
}
});
}
return deferred;
},
loadInfo(urls) {
const deferred = $.Deferred();
const totalNumbers = urls.length;
const localInfo = this.info;
let loadInfoNum = 0;
for (let i = 0; i < urls.length; i++) {
const { url, range } = urls[i];
$.ajax({
url,
dataType: 'json',
success: data => {
loadInfoNum++;
!localInfo[range] && (localInfo[range] = {});
localInfo[range].info = data;
this.info = localInfo;
localStorage.setItem(SDFCommonWordsKey, JSON.stringify(localInfo));
if (loadInfoNum === totalNumbers) {
deferred.resolve();
}
},
error: () => {
}
});
}
return deferred;
},
getTotalAssets(info, cb) {
const { range = [], urlPrefix } = info;
const picUrls = [];
const infoUrls = [];
this.range = range;
for (let i = 0; i < range.length; i++) {
const curRange = range[i];
const baseUrl = urlPrefix + curRange;
const picUrl = baseUrl + '.png';
const infoUrl = baseUrl + '.json';
picUrls.push({ range: curRange, url: picUrl });
infoUrls.push({ range: curRange, url: infoUrl });
}
const imageDeferred = this.loadImages(picUrls);
const infoDeferred = this.loadInfo(infoUrls);
$.when(imageDeferred, infoDeferred)
.then(() => {
// all info load complete
// console.log("all info load complete", " -- ", 1);
cb && cb(this.info);
}, () => {
// fail
});
},
// 获取数据
getData(cb) {
if (!_.isEmpty(this.info)) {
cb && cb(this.info);
} else {
this.getRemoteData(cb);
}
},
/**
* 从服务获取数据，什么时候强制去取一回数据？过期？
* @param cb
*/
getRemoteData(cb) {
const self = this;
$.ajax({
url: '/getcommonwords',
dataType: 'json',
success: data => {
if (data.code == 1) {
const info = data.data;
self.getTotalAssets(info, cb);
}
}
});
},
destroy() {
},
init() {
let info = localStorage.getItem(SDFCommonWordsKey);
this.range = [];
this.info = {};
if (info) {
info = JSON.parse(info);
this.range = Object.keys(info);
this.info = info;
}
this.info = info || {};
}
};
export default SDFCommonWords;

53
src/geom/buffer/point/strokeBuffer.js Normal file
View File

@ -0,0 +1,53 @@
import * as polygonPath from '../../shape/path';
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) {
const attribute = {
shapes: [],
normal: [],
miter: [],
indexArray: [],
sizes: [],
positions: [],
pickingIds: [],
colors: []
};
const { stroke, strokeWidth } = style;
coordinates.forEach((geo, index) => {
let { size, shape, id } = properties[index];
const path = polygonPath[shape]();
const positionsIndex = attribute.miter.length;
let polygon = null;
if (pointShape['2d'].indexOf(shape) !== -1) {
Util.isArray(size) || (size = [ size, size, 0 ]);
polygon = lineShape.Line([ path ], { size: [ strokeWidth, 0 ], color: stroke, id }, positionsIndex);
} else if (pointShape['3d'].indexOf(shape) !== -1) {
Util.isArray(size) || (size = [ size, size, size ]);
const polygonExtrudePath = polygonShape.extrudeline([ path ]);
// TODO 3d line
polygon = lineShape.Line([ polygonExtrudePath ], { size: [ strokeWidth, 0 ], color: stroke, id }, positionsIndex);
} else {
throw new Error('Invalid shape type: ' + shape);
}
polygonLineBuffer(polygon, geo, size, attribute);
});
return attribute;
}
function polygonLineBuffer(polygon, geo, size, attribute) {
attribute.shapes.push(...polygon.positions);
attribute.normal.push(...polygon.normal);
attribute.miter.push(...polygon.miter);
attribute.pickingIds.push(...polygon.pickingIds);
attribute.indexArray.push(...polygon.indexArray);
attribute.colors.push(...polygon.colors);
polygon.miter.forEach(() => {
attribute.positions.push(...geo); // 多边形位置
attribute.sizes.push(...size); // 多边形大小
});
}

9
src/geom/buffer/point/textBuffer.js Normal file
View File

@ -0,0 +1,9 @@
import { getJSON } from '../../../util/ajax';
import * as THREE from '../../../core/three';
import Global from '../../../global';
const Space = 1;
export default function TextBuffer(coordinates, properties, style) {
}

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

@ -1,6 +1,8 @@
import BufferBase from './bufferBase'; import BufferBase from './bufferBase';
import { getJSON } from '../../util/ajax'; import { getJSON } from '../../util/ajax';
import * as THREE from '../../core/three'; import * as THREE from '../../core/three';
import TinySDF from '@mapbox/tiny-sdf';
import Global from '../../global'; import Global from '../../global';
const Space = 1; const Space = 1;
export default class TextBuffer extends BufferBase { export default class TextBuffer extends BufferBase {
@ -15,16 +17,21 @@ export default class TextBuffer extends BufferBase {
const properties = this.get('properties'); const properties = this.get('properties');
const { textOffset = [ 0, 0 ] } = this.get('style'); const { textOffset = [ 0, 0 ] } = this.get('style');
const chars = []; const chars = [];
const textChars = {};
properties.forEach(element => { properties.forEach(element => {
let text = element.shape || ''; let text = element.shape || '';
text = text.toString(); text = text.toString();
for (let j = 0; j < text.length; j++) { for (let j = 0; j < text.length; j++) {
const code = text.charCodeAt(j); const code = text.charCodeAt(j);
textChars[text] = 0;
if (chars.indexOf(code) === -1) { if (chars.indexOf(code) === -1) {
chars.push(text.charCodeAt(j)); chars.push(text.charCodeAt(j));
} }
} }
}); });
const sdfTexture = this._updateSdf(Object.keys(textChars).join(''));
this.sdfTexture = sdfTexture;
this._loadTextInfo(chars); this._loadTextInfo(chars);
this.on('SourceLoaded', () => { this.on('SourceLoaded', () => {
const textureElements = []; const textureElements = [];
@ -40,10 +47,10 @@ export default class TextBuffer extends BufferBase {
let text = element.shape || ''; let text = element.shape || '';
text = text.toString(); text = text.toString();
for (let i = 0; i < text.length; i++) { for (let i = 0; i < text.length; i++) {
const chr = text.charCodeAt(i);
const color = element.color; const color = element.color;
this._drawGlyph(pos, chr, pen, size, colors, textureElements, originPoints, textSizes, textOffsets, color); this._drawGlyph(pos, text[i], pen, size, colors, textureElements, originPoints, textSizes, textOffsets, color);
} }
}); });
this.bufferStruct.style = properties; this.bufferStruct.style = properties;
@ -64,6 +71,7 @@ export default class TextBuffer extends BufferBase {
url: `${Global.sdfHomeUrl}/getsdfdata?chars=${chars.join('|')}` url: `${Global.sdfHomeUrl}/getsdfdata?chars=${chars.join('|')}`
}, (e, info) => { }, (e, info) => {
this.metrics.chars = info.info; this.metrics.chars = info.info;
this._loadTextTexture(info.url); this._loadTextTexture(info.url);
}); });
} }
@ -73,8 +81,9 @@ export default class TextBuffer extends BufferBase {
const img = new Image(); const img = new Image();
img.crossOrigin = 'anonymous'; img.crossOrigin = 'anonymous';
img.onload = () => { img.onload = () => {
this.bufferStruct.textTexture = this._creatTexture(img); this.bufferStruct.textTexture = this._creatTexture(this.sdfTexture.texure);
this.emit('SourceLoaded'); this.emit('SourceLoaded');
}; };
img.src = url; img.src = url;
@ -93,22 +102,26 @@ export default class TextBuffer extends BufferBase {
* @param {*} textOffsets 字体偏移量数据 * @param {*} textOffsets 字体偏移量数据
* @param {*} color 文字颜色 * @param {*} color 文字颜色
*/ */
_drawGlyph(pos, chr, pen, size, colors, textureElements, originPoints, textSizes, textOffsets, color) { _drawGlyph(pos, text, pen, size, colors, textureElements, originPoints, textSizes, textOffsets, color) {
const metrics = this.metrics; const metrics = this.metrics;
const chr = text.charCodeAt(0);
const metric = metrics.chars[chr]; const metric = metrics.chars[chr];
if (!metric) return; if (!metric) return;
const info = this.sdfTexture.info;
const { x, y } = info[text];
const scale = size / metrics.size; const scale = size / metrics.size;
let width = metric[0]; let width = 24; // metric[0];
let height = metric[1]; let height = 24;// metric[1];
const horiBearingX = metric[2]; const horiBearingX = metric[2];
const horiBearingY = metric[3]; // const horiBearingY = metric[3];
const horiAdvance = metric[4]; const horiAdvance = metric[4];
const posX = metric[5]; // const posX = metric[5];
const posY = metric[6]; // const posY = metric[6];
const posX = x;
const posY = y;
const buffer = metrics.buffer; const buffer = metrics.buffer;
@ -117,12 +130,17 @@ export default class TextBuffer extends BufferBase {
height += buffer * 2; height += buffer * 2;
// Add a quad (= two triangles) per glyph. // Add a quad (= two triangles) per glyph.
const originX = (horiBearingX - buffer + width / 2) * scale; // const originX = (horiBearingX - buffer + width / 2) * scale;
const originY = -(height / 2 - horiBearingY) * scale; // const originY = -(height - horiBearingY) * scale;
// const originY = (height / 2 - horiBearingY) * scale; const originX = 0;
// const originY = 0; const originY = 0;
const offsetWidth = width / 2 * scale / (1.0 - horiBearingX * 1.5 / horiAdvance);
const offsetHeight = (horiAdvance / 2) * scale; // const offsetWidth = width / 2 * scale / (1.0 - horiBearingX * 1.5 / horiAdvance);
// const offsetHeight = (horiAdvance / 2) * scale;
// const offsetWidth = width/2 * scale;
// const offsetHeight = height / 2 * scale;
// const offsetHeight = height * scale;
const offsetX = pen.x; const offsetX = pen.x;
const offsetY = pen.y; const offsetY = pen.y;
@ -135,14 +153,31 @@ export default class TextBuffer extends BufferBase {
pos[0] + originX, pos[1] + originY, 0, pos[0] + originX, pos[1] + originY, 0,
); );
// textSizes.push(
// offsetWidth, offsetHeight,
// -offsetWidth, offsetHeight,
// -offsetWidth, -offsetHeight,
// offsetWidth, offsetHeight,
// -offsetWidth, -offsetHeight,
// offsetWidth, -offsetHeight,
// );
const bx = 0;
const by = metrics.size / 2 + buffer;
textSizes.push( textSizes.push(
offsetWidth, offsetHeight,
-offsetWidth, offsetHeight,
-offsetWidth, -offsetHeight, ((bx - buffer + width) * scale), (height - by) * scale,
offsetWidth, offsetHeight, ((bx - buffer) * scale), (height - by) * scale,
-offsetWidth, -offsetHeight, ((bx - buffer) * scale), -by * scale,
offsetWidth, -offsetHeight,
((bx - buffer + width) * scale), (height - by) * scale,
((bx - buffer) * scale), -by * scale,
((bx - buffer + width) * scale), -by * scale,
); );
textOffsets.push( textOffsets.push(
offsetX, offsetY, offsetX, offsetY,
offsetX, offsetY, offsetX, offsetY,
@ -172,7 +207,8 @@ export default class TextBuffer extends BufferBase {
); );
} }
pen.x = pen.x + (horiAdvance + Space) * scale; // pen.x = pen.x + (horiAdvance + Space) * scale;
pen.x = pen.x + size * 1.8;
} }
@ -196,8 +232,46 @@ export default class TextBuffer extends BufferBase {
this.bufferStruct.textSize = [ image.width, image.height ]; this.bufferStruct.textSize = [ image.width, image.height ];
const texture = new THREE.Texture(image); const texture = new THREE.Texture(image);
texture.minFilter = THREE.LinearFilter; texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter; texture.magFilter = THREE.ClampToEdgeWrapping;
texture.needsUpdate = true; texture.needsUpdate = true;
return texture; return texture;
} }
_updateSdf(chars) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const sdfs = {};
const fontSize = 24;
const fontWeight = 100;
const buffer = fontSize / 8;
const radius = fontSize / 3;
const canvasSize = Math.floor(Math.pow(chars.length, 0.5)) * (fontSize + buffer + radius);
canvas.width = canvasSize;
canvas.height = canvasSize;
ctx.clearRect(0, 0, canvas.width, canvas.height);
const sdf = new TinySDF(fontSize, buffer, radius, null, null, fontWeight);
for (let y = 0, i = 0; y + sdf.size <= canvas.height && i < chars.length; y += sdf.size) {
for (let x = 0; x + sdf.size <= canvas.width && i < chars.length; x += sdf.size) {
ctx.putImageData(this._makeRGBAImageData(ctx, sdf.draw(chars[i]), sdf.size), x, y);
sdfs[chars[i]] = { x, y };
i++;
}
}
return {
info: sdfs,
texure: canvas
};
}
_makeRGBAImageData(ctx, alphaChannel, size) {
const imageData = ctx.createImageData(size, size);
const data = imageData.data;
for (let i = 0; i < alphaChannel.length; i++) {
data[4 * i + 0] = alphaChannel[i];
data[4 * i + 1] = alphaChannel[i];
data[4 * i + 2] = alphaChannel[i];
data[4 * i + 3] = 255;
}
return imageData;
}
} }

5
src/geom/material/lineMaterial.js
View File

@ -45,7 +45,10 @@ export function MeshLineMaterial(options) {
uniforms: { uniforms: {
u_opacity: { value: options.u_opacity || 1.0 }, u_opacity: { value: options.u_opacity || 1.0 },
u_time: { value: options.u_time || 0 }, u_time: { value: options.u_time || 0 },
u_zoom: { value: options.u_zoom } u_zoom: { value: options.u_zoom },
u_duration: { value: options.u_duration || 2.0 },
u_interval: { value: options.u_interval || 1.0 },
u_trailLength: { value: options.u_trailLength || 0.2 }
}, },
vertexShader: meshline_vert, vertexShader: meshline_vert,
fragmentShader: meshline_frag, fragmentShader: meshline_frag,

29
src/geom/material/pointLineMaterial.js Normal file
View File

@ -0,0 +1,29 @@
import Material from './material';
import point_frag from '../shader/point_meshLine_frag.glsl';
import point_vert from '../shader/point_meshLine_vert.glsl';
export default class PointLineMaterial extends Material {
getDefaultParameters() {
return {
uniforms: {
u_strokeOpacity: { value: 1 },
u_stroke: { value: [ 1.0, 1.0, 1.0, 1.0 ] },
u_strokeWidth: { value: 1.0 },
u_zoom: { value: 10 }
}
};
}
constructor(_uniforms, _defines, parameters) {
super(parameters);
const { uniforms } = this.getDefaultParameters();
this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms));
this.type = 'PointLineMaterial';
this.vertexShader = point_vert;
this.fragmentShader = point_frag;
this.transparent = true;
}
}

6
src/geom/shader/meshline_frag.glsl
View File

@ -1,7 +1,11 @@
precision highp float; precision highp float;
uniform float u_opacity; uniform float u_opacity;
varying vec4 v_color; varying vec4 v_color;
varying float vTime;
void main() { void main() {
gl_FragColor = v_color; gl_FragColor = v_color;
gl_FragColor.a = v_color.a * u_opacity ; gl_FragColor.a = v_color.a * u_opacity;
#ifdef ANIMATE
gl_FragColor.a *= vTime;
#endif
} }

18
src/geom/shader/meshline_vert.glsl
View File

@ -2,12 +2,30 @@ precision highp float;
attribute float a_miter; attribute float a_miter;
attribute vec4 a_color; attribute vec4 a_color;
attribute float a_size; attribute float a_size;
attribute float a_distance;
uniform float u_zoom; uniform float u_zoom;
varying vec4 v_color; varying vec4 v_color;
uniform float u_time;
varying float vTime;
// animate
#ifdef ANIMATE
uniform float u_duration; // 动画持续时间
uniform float u_interval;
uniform float u_repeat;
uniform float u_trailLength;
#endif
void main() { void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix; mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
vec3 pointPos = position.xyz + vec3(normal * a_size * pow(2.0,20.0-u_zoom) / 2.0 * a_miter); vec3 pointPos = position.xyz + vec3(normal * a_size * pow(2.0,20.0-u_zoom) / 2.0 * a_miter);
v_color = a_color; v_color = a_color;
#ifdef ANIMATE
//mod(a_distance,0.2) * 5.
float alpa =1.0 - fract( mod(1.0- a_distance,u_interval)* (1.0/u_interval) + u_time / u_duration);
alpa = (alpa + u_trailLength -1.0) / u_trailLength;
vTime = clamp(alpa,0.,1.);
#endif
gl_Position = matModelViewProjection * vec4(pointPos, 1.0); gl_Position = matModelViewProjection * vec4(pointPos, 1.0);
} }

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

@ -0,0 +1,17 @@
precision highp float;
uniform float u_strokeOpacity;
uniform vec4 u_stroke;
varying float v_pickingId;
void main() {
if(v_pickingId < -0.1) {
discard;
}
#ifdef ANIMATE
if (vTime > 1.0 || vTime < 0.0) {
discard;
}
#endif
gl_FragColor = u_stroke;
gl_FragColor.a = u_stroke.a * u_strokeOpacity ;
}

23
src/geom/shader/point_meshLine_vert.glsl Normal file
View File

@ -0,0 +1,23 @@
precision highp float;
attribute float a_miter;
attribute vec3 a_size;
attribute vec3 a_shape;
attribute float pickingId;
uniform float u_strokeWidth;
uniform float u_zoom;
varying float v_pickingId;
uniform float u_time;
varying float vTime;
void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
float scale = pow(2.0,(20.0 - u_zoom));
vec3 newposition = position + (a_size + vec3(u_strokeWidth/2.,u_strokeWidth/2.,0)) * scale* a_shape;
v_pickingId = pickingId;
#ifdef ANIMATE
vTime = 1.0- (mod(u_time*50.,3600.)- position.z) / 100.;
#endif
//vec3 pointPos = newposition.xyz + vec3(normal * u_strokeWidth * pow(2.0,20.0-u_zoom) / 2.0 * a_miter);
vec3 pointPos = newposition.xyz + vec3(normal * u_strokeWidth * scale / 2.0 * a_miter);
gl_Position = matModelViewProjection * vec4(pointPos, 1.0);
}

9
src/geom/shader/text_frag.glsl
View File

@ -10,20 +10,19 @@ varying vec2 v_texcoord;
void main() { void main() {
float dist = texture2D(u_texture, vec2(v_texcoord.x,1.0-v_texcoord.y)).r; float dist =texture2D(u_texture, vec2(v_texcoord.x,1.0-v_texcoord.y)).r;
float alpha; float alpha;
if(u_strokeWidth == 0.0){ if(u_strokeWidth == 0.0){
alpha = smoothstep(u_buffer - u_gamma, u_buffer, dist); alpha = smoothstep(u_buffer - u_gamma, u_buffer + u_gamma, dist);
gl_FragColor = vec4(v_color.rgb, alpha * v_color.a); gl_FragColor = vec4(v_color.rgb, alpha * v_color.a);
}else{ }else{
if(dist <= u_buffer - u_gamma){ if(dist <= u_buffer - u_gamma){
alpha = smoothstep(u_strokeWidth - u_gamma, u_strokeWidth, dist); alpha = smoothstep(u_strokeWidth - u_gamma, u_strokeWidth+ u_gamma, dist);
gl_FragColor = vec4(u_stroke.rgb, alpha * u_stroke.a); gl_FragColor = vec4(u_stroke.rgb, alpha * u_stroke.a);
}else if(dist < u_buffer){ }else if(dist < u_buffer){
alpha = smoothstep(u_buffer - u_gamma, u_buffer, dist); alpha = smoothstep(u_buffer - u_gamma, u_buffer+u_gamma, dist);
gl_FragColor = vec4(alpha * v_color.rgb + (1.0 - alpha) * u_stroke.rgb, 1.0 * v_color.a * alpha + (1.0 - alpha) * u_stroke.a); gl_FragColor = vec4(alpha * v_color.rgb + (1.0 - alpha) * u_stroke.rgb, 1.0 * v_color.a * alpha + (1.0 - alpha) * u_stroke.a);
}else{ }else{
alpha = 1.0; alpha = 1.0;

8
src/geom/shader/text_vert.glsl
View File

@ -13,8 +13,14 @@ varying vec4 v_color;
void main() { void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix; mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
vec4 cur_position = matModelViewProjection * vec4(position.xy, 0, 1); vec4 cur_position = matModelViewProjection * vec4(position.xy, 0, 1);
gl_Position = cur_position / cur_position.w + vec4((a_txtOffsets + a_txtsize)/ u_glSize * 2.0,0.0, 0.0) +vec4(abs(a_txtsize.x)/u_glSize.x *2.0, -abs(a_txtsize.y)/u_glSize.y* 2.0, 0.0, 0.0); gl_Position = cur_position / cur_position.w + vec4((a_txtOffsets + a_txtsize)/ u_glSize * 2.0,0.0, 0.0) +vec4(abs(a_txtsize.x)/u_glSize.x *2.0, -abs(a_txtsize.y)/u_glSize.y* 2.0, 0.0, 0.0);
highp float camera_to_anchor_distance = gl_Position.w;
// highp float perspective_ratio = clamp(
// 0.5 + 0.5 * distance_ratio,
// 0.0, // Prevents oversized near-field symbols in pitched/overzoomed tiles
// 4.0);
v_color = a_color; v_color = a_color;
v_color.a = v_color.a * camera_to_anchor_distance;
v_texcoord = uv / u_textSize; v_texcoord = uv / u_textSize;
} }

23
src/geom/shape/line.js
View File

@ -120,7 +120,7 @@ export function defaultLine(geo, index) {
return { positions, indexes: indexArray }; return { positions, indexes: indexArray };
} }
// mesh line // mesh line
export function Line(path, props, positionsIndex, dash = false) { export function Line(path, props, positionsIndex) {
if (path.length === 1) path = path[0];// 面坐标转线坐标 if (path.length === 1) path = path[0];// 面坐标转线坐标
const positions = []; const positions = [];
const pickingIds = []; const pickingIds = [];
@ -129,7 +129,7 @@ export function Line(path, props, positionsIndex, dash = false) {
const colors = []; const colors = [];
const indexArray = []; const indexArray = [];
const normals = getNormal(path); const normals = getNormal(path);
const attrDistance = []; let attrDistance = [];
const sizes = []; const sizes = [];
let c = 0; let c = 0;
let index = positionsIndex; let index = positionsIndex;
@ -153,10 +153,14 @@ export function Line(path, props, positionsIndex, dash = false) {
point[2] = size[1]; point[2] = size[1];
positions.push(...point); positions.push(...point);
positions.push(...point); positions.push(...point);
if (dash) {
const d = pointIndex / (list.length - 1); if(pointIndex===0){
attrDistance.push(d, d); attrDistance.push(0, 0);
} else{
const d = attrDistance[pointIndex * 2-1] + lineSegmentDistance(path[pointIndex-1],path[pointIndex]);
attrDistance.push(d,d);
} }
index += 2; index += 2;
}); });
normals.forEach(n => { normals.forEach(n => {
@ -167,6 +171,9 @@ export function Line(path, props, positionsIndex, dash = false) {
miter.push(-m); miter.push(-m);
miter.push(m); miter.push(m);
}); });
attrDistance = attrDistance.map((d)=>{
return d / attrDistance[attrDistance.length-1];
})
return { return {
positions, positions,
normal, normal,
@ -179,3 +186,9 @@ export function Line(path, props, positionsIndex, dash = false) {
}; };
} }
function lineSegmentDistance(end,start) {
const dx = start[0] - end[0];
const dy = start[1] - end[1];
const dz = start[2] - end[2];
return Math.sqrt(dx * dx + dy * dy + dz * dz);
}

45
src/geom/shape/path.js Normal file
View File

@ -0,0 +1,45 @@
/**
* @author lzxue
* @email lzx199065@gmail.com
* @create date 2018-11-28 11:01:33
* @modify date 2018-11-28 11:01:33
* @desc 点,线,面 coordinates
*/
function circle() {
return polygonPath(30);
}
function square() {
return polygonPath(4);
}
function triangle() {
return polygonPath(3);
}
function hexagon() {
return polygonPath(6);
}
export {
circle,
square,
triangle,
hexagon,
circle as cylinder,
triangle as triangleColumn,
hexagon as hexagonColumn,
square as squareColumn
};
export function polygonPath(pointCount) {
const step = Math.PI * 2 / pointCount;
const line = [];
for (let i = 0; i < pointCount; i++) {
line.push(step * i);
}
const path = line.map(t => {
const x = Math.sin(t + Math.PI / 4),
y = Math.cos(t + Math.PI / 4);
return [ x, y, 0 ];
});
path.push(path[0]);
return path;
}

30
src/geom/shape/point.js
View File

@ -1,12 +1,12 @@
import * as polygonShape from './polygon'; import * as polygonShape from './polygon';
import { polygonPath } from './path';
/** /**
* shape circle * shape circle
* @param {enum} type 渲染类型 * @param {enum} type 渲染类型
* @return {object} 顶点坐标和索引坐标 * @return {object} 顶点坐标和索引坐标
*/ */
export function circle(type) { export function circle(type) {
const points = polygonPoint(30); const points = polygonPath(30);
return polygonShape[type]([ points ]); return polygonShape[type]([ points ]);
} }
/** /**
@ -15,7 +15,7 @@ export function circle(type) {
* @return {object} 顶点坐标和索引坐标 * @return {object} 顶点坐标和索引坐标
*/ */
export function triangle(type) { export function triangle(type) {
const points = polygonPoint(3); const points = polygonPath(3);
return polygonShape[type]([ points ]); return polygonShape[type]([ points ]);
} }
@ -25,7 +25,7 @@ export function triangle(type) {
* @return {object} 顶点坐标和索引坐标 * @return {object} 顶点坐标和索引坐标
*/ */
export function diamond(type) { export function diamond(type) {
const points = polygonPoint(4); const points = polygonPath(4);
return polygonShape[type]([ points ]); return polygonShape[type]([ points ]);
} }
@ -39,26 +39,6 @@ export function square(type) {
* @return {object} 顶点坐标和索引坐标 * @return {object} 顶点坐标和索引坐标
*/ */
export function hexagon(type) { export function hexagon(type) {
const points = polygonPoint(6); const points = polygonPath(6);
return polygonShape[type]([ points ]); return polygonShape[type]([ points ]);
} }
/**
* 规则多边形
* @param {*} pointCount 顶点个数
* @param {*} extrude 是否拔高
* @return {Array} 顶点坐标
*/
function polygonPoint(pointCount) {
const step = Math.PI * 2 / pointCount;
const line = [];
for (let i = 0; i < pointCount; i++) {
line.push(step * i);
}
// debugger
const points = line.map(t => {
const x = Math.sin(t + Math.PI / 4),
y = Math.cos(t + Math.PI / 4);
return [ x, y, 0 ];
});
return points;
}

9
src/geom/shape/polygon.js
View File

@ -55,8 +55,9 @@ export function extrudeline(points) {
vertIndex.push(vertCount, 0); vertIndex.push(vertCount, 0);
vertIndex.push(vertCount, vertCount + pointCount); vertIndex.push(vertCount, vertCount + pointCount);
vertIndex.push(vertCount + pointCount, pointCount); vertIndex.push(vertCount + pointCount, pointCount);
return { const newPositions = [];
positions, vertIndex.forEach(index => {
positionsIndex: vertIndex newPositions.push(positions[index]);
}; });
return newPositions;
} }

7
src/global.js
View File

@ -4,7 +4,7 @@
*/ */
// const Global = {}; // const Global = {};
const Global = { const Global = {
version: '____L7_VERSION____', version: '1.0.0',
scene: { scene: {
mapType: 'AMAP', mapType: 'AMAP',
zoom: 5, zoom: 5,
@ -22,6 +22,11 @@ const Global = {
// 指定固定 tick 数的逼近值 // 指定固定 tick 数的逼近值
snapCountArray: [ 0, 1, 1.2, 1.5, 1.6, 2, 2.2, 2.4, 2.5, 3, 4, 5, 6, 7.5, 8, 10 ], snapCountArray: [ 0, 1, 1.2, 1.5, 1.6, 2, 2.2, 2.4, 2.5, 3, 4, 5, 6, 7.5, 8, 10 ],
size: 10000, size: 10000,
shape: 'circle',
pointShape: {
'2d': [ 'circle', 'square', 'hexagon', 'triangle' ],
'3d': [ 'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn' ]
},
sdfHomeUrl: 'https://sdf.amap.com', sdfHomeUrl: 'https://sdf.amap.com',
scales: { scales: {
} }

13
src/index.js
View File

@ -1,8 +1,17 @@
// import Util from './util'; // import Util from './util';
import Scene from './core/scene'; import Scene from './core/scene';
const version = '0.0.1'; import Global from './global';
const version = Global.version;
const track = function(enable) {
Global.trackable = enable;
};
require('./track');
export { export {
version, version,
Scene Scene,
track
}; };

22
src/layer/lineLayer.js
View File

@ -46,6 +46,7 @@ export default class LineLayer extends Layer {
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1)); geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normal, 3)); geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normal, 3));
geometry.addAttribute('a_miter', new THREE.Float32BufferAttribute(attributes.miter, 1)); geometry.addAttribute('a_miter', new THREE.Float32BufferAttribute(attributes.miter, 1));
geometry.addAttribute('a_distance', new THREE.Float32BufferAttribute(attributes.attrDistance, 1));
const lineType = style.lineType; const lineType = style.lineType;
let material; let material;
@ -55,6 +56,20 @@ export default class LineLayer extends Layer {
u_opacity: opacity, u_opacity: opacity,
u_zoom: this.scene.getZoom() u_zoom: this.scene.getZoom()
}); });
if (animateOptions.enable) {
material.setDefinesvalue('ANIMATE', true);
const {duration,interval,trailLength,repeat = Infinity} = animateOptions;
this.animateDuration = this.scene._engine.clock.getElapsedTime() + duration * repeat;
material.upDateUninform({
u_duration: duration,
u_interval: interval,
u_trailLength:trailLength,
});
}
} else { } else {
geometry.addAttribute('a_distance', new THREE.Float32BufferAttribute(attributes.attrDistance, 1)); geometry.addAttribute('a_distance', new THREE.Float32BufferAttribute(attributes.attrDistance, 1));
material = new DashLineMaterial({ material = new DashLineMaterial({
@ -80,4 +95,11 @@ export default class LineLayer extends Layer {
} }
return this; return this;
} }
_preRender(){
if(this.animateDuration>0 && this.animateDuration< this.scene._engine.clock.getElapsedTime()){
this.layerMesh.material.setDefinesvalue('ANIMATE', false);
this.emit('animateEnd');
this.animateDuration = Infinity;
}
}
} }

124
src/layer/pointLayer.js
View File

@ -1,12 +1,11 @@
import Layer from '../core/layer'; import Layer from '../core/layer';
import * as THREE from '../core/three'; import * as THREE from '../core/three';
import PointBuffer from '../geom/buffer/point'; import * as drawPoint from '../layer/render/point';
import PointMaterial from '../geom/material/pointMaterial'; import { pointShape } from '../global';
import PolygonMaterial from '../geom/material/polygonMaterial'; // import PointBuffer from '../geom/buffer/point';
import TextBuffer from '../geom/buffer/text'; import TextBuffer from '../geom/buffer/text';
import TextMaterial from '../geom/material/textMaterial'; import TextMaterial from '../geom/material/textMaterial';
import radar from '../geom/shader/radar_frag.glsl'; import * as PointBuffer from '../geom/buffer/point/index';
import warn from '../geom/shader/warn_frag.glsl';
/** /**
@ -33,83 +32,64 @@ export default class PointLayer extends Layer {
return this; return this;
} }
_prepareRender() { _prepareRender() {
const { opacity, strokeWidth, stroke, strokeOpacity, shape, fill } = this.get('styleOptions');
if (this.shapeType === 'text') { // 绘制文本图层 if (this.shapeType === 'text') { // 绘制文本图层
this._textPoint(); this._textPoint();
return; return;
} }
const source = this.layerSource; const source = this.layerSource;
const { opacity, strokeWidth, stroke, shape } = this.get('styleOptions'); const style = this.get('styleOptions');
this._buffer = new PointBuffer({ const pointShapeType = this._getShape();
type: this.shapeType,
imagePos: this.scene.image.imagePos,
coordinates: source.geoData,
properties: this.StyleData
});
const geometry = this.geometry = new THREE.BufferGeometry();
let mtl;
if (this.shapeType === '2d' || this.shapeType === '3d') {
mtl = new PolygonMaterial({
u_opacity: opacity,
u_zoom: this.scene.getZoom()
});
// mtl= new pickingMaterial({
// u_opacity: opacity,
// u_zoom: this.scene.getZoom()
// })
// mtl.setDefinesvalue('point', true);
mtl.setDefinesvalue('SHAPE', true);
if (shape === 'radar') {
mtl.fragmentShader = radar;
} switch (pointShapeType) {
if (shape === 'warn') { case 'fill' :// 填充图形
mtl.fragmentShader = warn; {
} if (fill !== 'none') { // 是否填充
const attributes = PointBuffer.FillBuffer(source.geoData, this.StyleData, style);
const meshfill = drawPoint.DrawFill(attributes, this.get('styleOptions'));
} else { // sdf 绘制点 this.add(meshfill);
mtl = new PointMaterial({ }
u_opacity: opacity, if (stroke !== 'none') { // 是否绘制边界
u_strokeWidth: strokeWidth, const lineAttribute = PointBuffer.StrokeBuffer(source.geoData, this.StyleData, style);
u_stroke: stroke, const meshStroke = drawPoint.DrawStroke(lineAttribute, this.get('styleOptions'));
shape: this.shapeType || false, this.add(meshStroke, 'line');
u_texture: this.scene.image.texture }
}, { }
SHAPE: (this.shapeType !== 'image'), break;
TEXCOORD_0: (this.shapeType === 'image') case 'image':// 绘制图片标注
}); const imageAttribute = PointBuffer.ImageBuffer(source.geoData, this.StyleData, { 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 normalPointMesh = drawPoint.DrawNormal(normalAttribute, style);
this.add(normalPointMesh);
} }
}
const { attributes } = this._buffer; _getShape() {
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3)); let shape = null;
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4)); if (!this.StyleData[0].hasOwnProperty('shape')) {
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1)); return 'normal';
if (this.shapeType === 'image') { }
geometry.addAttribute('uv', new THREE.Float32BufferAttribute(attributes.uvs, 2)); for (let i = 0; i < this.StyleData.length; i++) {
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1)); shape = this.StyleData[i].shape;
} else if (this.shapeType === undefined) { if (shape !== undefined) {
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1)); break;
} else { // 多边形面
geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3));
geometry.addAttribute('a_shape', new THREE.Float32BufferAttribute(attributes.shapePositions, 3));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.a_size, 3));
if (shape) {
geometry.addAttribute('faceUv', new THREE.Float32BufferAttribute(attributes.faceUv, 2));
} }
} }
let mesh;
if (this.shapeType === 'image') {
mesh = new THREE.Points(geometry, mtl);
} else if (this.shapeType === undefined) { // 散点图
mesh = new THREE.Points(geometry, mtl); if (pointShape['2d'].indexOf(shape) !== -1 || pointShape['3d'].indexOf(shape) !== -1) {
return 'fill';
} else { } else if (shape == 'text') {
mesh = new THREE.Mesh(geometry, mtl); return 'text';
} else if (this.scene.image.imagesIds.indexOf(shape) !== -1) {
return 'image';
} }
return 'normal';
this.add(mesh);
} }
_textPoint() { _textPoint() {
const source = this.layerSource; const source = this.layerSource;
@ -133,11 +113,11 @@ export default class PointLayer extends Layer {
const material = new TextMaterial({ const material = new TextMaterial({
name: this.layerId, name: this.layerId,
u_texture: buffer.bufferStruct.textTexture, u_texture: buffer.bufferStruct.textTexture,
u_strokeWidth: 1, u_strokeWidth: styleOptions.strokeWidth,
u_stroke: stroke, u_stroke: stroke,
u_textSize: buffer.bufferStruct.textSize, u_textSize: buffer.bufferStruct.textSize,
u_gamma: 0.11, u_gamma: 2 * 1.4142 / 64,
u_buffer: 0.8, u_buffer: 0.65,
u_color: color, u_color: color,
u_glSize: [ width, height ] u_glSize: [ width, height ]
}); });

28
src/layer/render/point/drawFill.js Normal file
View File

@ -0,0 +1,28 @@
/**
* @author lzxue
* @email lzx199065@gmail.com
* @create date 2018-11-29 16:07:24
* @modify date 2018-11-29 16:07:24
* @desc [description] 绘制点图层的面状填充，圆，三角形，六边形
*/
import * as THREE from '../../../core/three';
import PolygonMaterial from '../../../geom/material/polygonMaterial';
export default function DrawFill(attributes, style) {
const { opacity } = style;
const geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3));
geometry.addAttribute('a_shape', new THREE.Float32BufferAttribute(attributes.shapePositions, 3));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.a_size, 3));
const material = new PolygonMaterial({
u_opacity: opacity
}, {
SHAPE: true
});
material.setDefinesvalue('SHAPE', true);
const fillMesh = new THREE.Mesh(geometry, material);
return fillMesh;
}

23
src/layer/render/point/drawImage.js Normal file
View File

@ -0,0 +1,23 @@
import * as THREE from '../../../core/three';
import PointMaterial from '../../../geom/material/pointMaterial';
export default function DrawImage(attributes, style) {
const geometry = new THREE.BufferGeometry();
const { strokeWidth, stroke, opacity, texture } = style;
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
geometry.addAttribute('uv', new THREE.Float32BufferAttribute(attributes.uv, 2));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
const material = new PointMaterial({
u_opacity: opacity,
u_strokeWidth: strokeWidth,
u_stroke: stroke,
u_texture: texture
}, {
SHAPE: false,
TEXCOORD_0: true
});
const strokeMesh = new THREE.Points(geometry, material);
return strokeMesh;
}

19
src/layer/render/point/drawNormal.js Normal file
View File

@ -0,0 +1,19 @@
import * as THREE from '../../../core/three';
import PointMaterial from '../../../geom/material/pointMaterial';
export default function DrawNormal(attributes, style) {
const geometry = new THREE.BufferGeometry();
const { opacity } = style;
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
const material = new PointMaterial({
u_opacity: opacity
}, {
SHAPE: false,
TEXCOORD_0: false
});
const strokeMesh = new THREE.Points(geometry, material);
return strokeMesh;
}

29
src/layer/render/point/drawStroke.js Normal file
View File

@ -0,0 +1,29 @@
/**
* @author lzxue
* @email lzx199065@gmail.com
* @create date 2018-11-29 16:35:34
* @modify date 2018-11-29 16:35:34
* @desc [description] 绘制图形的边框
*/
import PointLineMaterial from '../../../geom/material/pointLineMaterial';
import * as THREE from '../../../core/three';
export default function DrawStroke(attributes, style) {
const { strokeWidth, stroke, strokeOpacity } = style;
const geometry = new THREE.BufferGeometry();
geometry.setIndex(attributes.indexArray);
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.positions, 3));
geometry.addAttribute('a_shape', new THREE.Float32BufferAttribute(attributes.shapes, 3));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 3));
geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normal, 3));
geometry.addAttribute('a_miter', new THREE.Float32BufferAttribute(attributes.miter, 1));
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
const material = new PointLineMaterial({
u_strokeOpacity: strokeOpacity,
u_stroke: stroke,
u_strokeWidth: strokeWidth
});
const strokeMesh = new THREE.Mesh(geometry, material);
return strokeMesh;
}

23
src/layer/render/point/drawText.js Normal file
View File

@ -0,0 +1,23 @@
import * as THREE from '../../../core/three';
import TextMaterial from '../../../geom/material/textMaterial';
export default function DawText(attributes, style) {
const geometry = new THREE.BufferGeometry();
const { strokeWidth, stroke, opacity } = style;
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.originPoints, 3));
geometry.addAttribute('uv', new THREE.Float32BufferAttribute(attributes.textureElements, 2));
geometry.addAttribute('a_txtsize', new THREE.Float32BufferAttribute(attributes.textSizes, 2));
geometry.addAttribute('a_txtOffsets', new THREE.Float32BufferAttribute(attributes.textOffsets, 2));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
const material = new TextMaterial({
name: this.layerId,
u_texture: buffer.bufferStruct.textTexture,
u_strokeWidth: 1,
u_stroke: stroke,
u_textSize: buffer.bufferStruct.textSize,
u_gamma: 0.11,
u_buffer: 0.8,
u_color: color,
u_glSize: [ width, height ]
});
const mesh = new THREE.Mesh(geometry, material);
}

4
src/layer/render/point/index.js Normal file
View File

@ -0,0 +1,4 @@
export { default as DrawFill } from './drawFill';
export { default as DrawImage } from './drawImage';
export { default as DrawStroke } from './drawStroke';
export { default as DrawNormal } from './drawNormal';

3
src/map/provider.js
View File

@ -23,6 +23,7 @@ export class MapProvider extends Base {
initMap() { initMap() {
const mapStyle = this.get('mapStyle'); const mapStyle = this.get('mapStyle');
switch (mapStyle) { switch (mapStyle) {
case 'dark' : case 'dark' :
this.set('mapStyle', Theme.DarkTheme.mapStyle); this.set('mapStyle', Theme.DarkTheme.mapStyle);
@ -31,7 +32,7 @@ export class MapProvider extends Base {
this.set('mapStyle', Theme.LightTheme.mapStyle); this.set('mapStyle', Theme.LightTheme.mapStyle);
break; break;
default: default:
this.set('mapStyle', Theme.LightTheme.mapStyle); this.set('mapStyle', mapStyle);
} }
this.set('zooms', [ this.get('minZoom'), this.get('maxZoom') ]); this.set('zooms', [ this.get('minZoom'), this.get('maxZoom') ]);
this.map = new AMap.Map(this.container, this._attrs); this.map = new AMap.Map(this.container, this._attrs);

4
src/source/csvSource.js
View File

@ -39,6 +39,10 @@ export default class CSVSource extends Source {
getSelectFeatureId(featureId) { getSelectFeatureId(featureId) {
return [ featureId ]; return [ featureId ];
} }
getSelectFeature(featureId) {
return this.propertiesData[featureId];
}
_getCoord(geo) { _getCoord(geo) {
if (geo.geometry) { if (geo.geometry) {
// GeoJSON feature // GeoJSON feature

4
src/source/geojsonSource.js
View File

@ -39,5 +39,9 @@ export default class GeojsonSource extends Source {
return selectFeatureIds; return selectFeatureIds;
} }
getSelectFeature(featureId){
const data = this.get('data');
return data.features[featureId];
}
} }

22
src/track.js Normal file
View File

@ -0,0 +1,22 @@
/**
* @fileOverview track g2
* @author dxq613@gmail.com
*/
const Global = require('./global');
const SERVER_URL = 'https://kcart.alipay.com/web/bi.do';
// 延迟发送请求
setTimeout(function() {
if (Global.trackable) {
const image = new Image();
const newObj = {
pg: document.URL,
r: new Date().getTime(),
l7: true,
version: Global.version,
page_type: 'syslog'
};
const d = encodeURIComponent(JSON.stringify([ newObj ]));
image.src = `${SERVER_URL}?BIProfile=merge&d=${d}`;
}
}, 3000);

2
webpack.config.js
View File

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