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

fix(src):confict

This commit is contained in:
李正学 2018-11-20 20:18:47 +08:00
parent f15ce44702 7ee686d6ed
commit f08a455f1f
21 changed files with 104 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
demos/01_point_circle.html
View File

@ -15,29 +15,6 @@
<body>
<div id="map"></div>
<div class='info-panel top-right'>
<h4>杭州市微博签到数据</h4>
<p>
<label>min</label><input name="minaqi" type="range" step="1" min="0" max="30000" value=500> <label>500</label>
</p>
<p>
<label>max</label><input name="maxaqi" type="range" step="1" min="0" max="30000" value=30000><label>30000</label>
</p>
<p><label>color</label><select>
<option value ="blue">blue</option>
<option value ="red">red</option>
<option value="orange">orange</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
<option value="purple">purple</option>
</select> </p>
<p><label>shape</label><select>
<option value ="circle">circle</option>
<option value ="triangle">triangle</option>
<option value="hexagon">hexagon</option>
<option value="square">square</option>
</select> </p>
<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>
@ -58,7 +35,7 @@ const scene = new L7.Scene({
mapStyle: 'light', // 样式URL
center: [ 120.19382669582967, 30.258134 ],
pitch: 0,
zoom: 11.6
zoom: 12
});
window.scene = scene;
scene.on('loaded', () => {
@ -74,7 +51,7 @@ scene.on('loaded', () => {
}
})
.shape('2d:circle')
.size('value', [ 0, 60]) // default 1
.size('value', [ 2, 80]) // default 1
//.size('value', [ 10, 300]) // default 1
.active(true)
.filter('value', field_8 => {
@ -87,20 +64,7 @@ scene.on('loaded', () => {
opacity: 0.9
})
.render();
$('.info-panel input').change(function(){
$(this).next().text($(this).val());
const min = $('.info-panel input').val();
const max = $($('.info-panel input')[1]).val();
circleLayer.filter('value',(value)=>{
return (value>=min && value<=max)
}).render();
})
$('.info-panel select').change(function(){
const color = $(this).val();
console.time('color');
circleLayer.color('type',colorObj[color]).render();
console.timeEnd('color')
})
});

13
demos/01_point_column.html
View File

@ -23,13 +23,13 @@
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [ 120.037828998113099, 30.086317611850635 ],
pitch: 36.002858,
zoom: 5.44
center: [104.838088,34.075889 ],
pitch: 35,
zoom: 4.88,
rotation:4.183582
});
window.scene = scene;
scene.on('loaded', () => {
$.get('./data/rainfall.json', data => {
$.get('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json', data => {
scene.PointLayer({
zIndex: 2
})
@ -40,14 +40,13 @@ scene.on('loaded', () => {
})
.shape('3d:circle')
.size('t',(level)=> {
return [4,4,(level+40)];
return [2,2,(level*3+20)];
})
.active(true)
.color('t', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
.render();
});
});
</script>
</body>
</html>

2
demos/01_point_image.html
View File

@ -80,7 +80,7 @@ scene.on('loaded', () => {
.size(8)
.shape('2d:circle')
.style({
opacity:1.0
opacity:0.7
})
.render();

4
demos/02_contour.html
View File

@ -25,9 +25,9 @@ const color1 = [ 'rgba(37, 140, 249, 0.8)', 'rgba(14, 241, 242, 0.8)', 'rgba(255
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [ 102.615023, 23.107799],
center: [ 102.602992, 23.107329],
pitch: 15,
zoom: 14,
zoom: 14.82,
});
scene.on('loaded', () => {
$.get('./data/contour.geojson', data => {

11
demos/02_oneBletoneRoad.html
View File

@ -28,11 +28,10 @@ const scene = new L7.Scene({
});
scene.on('loaded', () => {
scene.image.addImage('marker', './data/onebelt/marker.png');
scene.image.addImage('local', './image/local.png');
scene.image.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png');
$.getJSON('./data/onebelt/regions.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)' ];
var points = region.features.map((feature)=>{
return feature.properties;
@ -48,7 +47,7 @@ $.getJSON('./data/onebelt/regions.json', region => {
.shape('fill')
.render();
});
$.getJSON('./data/onebelt/seaway.geojson', contourData => {
$.getJSON('https://gw.alipayobjects.com/os/rmsportal/kwUdcXnxQtexeGRvTGtA.json', contourData => {
const layer = scene.LineLayer({
zIndex:2}
@ -62,7 +61,7 @@ $.getJSON('./data/onebelt/seaway.geojson', contourData => {
})
.render();
});
$.getJSON('./data/onebelt/landway.json', contourData => {
$.getJSON('https://gw.alipayobjects.com/os/rmsportal/dzpMOiLYBKxpdmsgBLoE.json', contourData => {
const landlayer = scene.LineLayer(
{zIndex:2}
)
@ -75,7 +74,7 @@ $.getJSON('./data/onebelt/landway.json', contourData => {
})
.render();
});
$.getJSON('./data/onebelt/city.geojson', city => {
$.getJSON('https://gw.alipayobjects.com/os/rmsportal/opYqFyDGyGUAUXkLUhBV.json', city => {
var makerLayer = scene.PointLayer({
zIndex: 4
})

10
demos/03_1_extrude_polygon.html
View File

@ -24,20 +24,22 @@
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [ 120.4047, 30.0679 ],
pitch: 35,
zoom: 4
center: [104.838088,34.075889 ],
pitch: 27,
zoom: 4.5,
rotation:4.183582
});
window.scene = scene;
scene.on('loaded', () => {
$.getJSON('./data/chinandvohexagon.geojson', city => {
$.getJSON('https://gw.alipayobjects.com/os/rmsportal/xxvoBnsYNEPiAXGRmlPD.json', city => {
citylayer = scene.PolygonLayer()
.source(city)
.color('sum', ["#FAFFF0", "#EBF7D2", "#C8E695", "#A5D660", "#7DC238", "#59A616", "#3F8C0B", "#237804", "#125200", "#082B00"])
.shape('extrude')
.size('max',(value)=>{
if(value<0)value =0;
return value * 1000;
})
.active(true)

4
demos/03_choropleths_polygon.html
View File

@ -36,9 +36,9 @@ const colorObj ={
const scene = new L7.Scene({
id: 'map',
mapStyle: 'light', // 样式URL
center: [ 120.4047, 30.0679 ],
center: [104.838088,34.075889 ],
pitch: 0,
zoom: 4
zoom: 4.5,
});
window.scene = scene;

4
demos/04_image.html
View File

@ -31,10 +31,8 @@ const scene = new L7.Scene({
});
scene.on('loaded', () => {
// https://gw.alipayobjects.com/zos/rmsportal/wAQqmdcWOPdomuKUyHDF.png
//
const imageLayer = scene.ImageLayer().
source('./image/hangzhoubay.jpg',{
source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',{
extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
})

8
demos/07_city.html
View File

@ -32,7 +32,7 @@ const scene = new L7.Scene({
});
window.scene = scene;
scene.on('loaded', () => {
$.get('./data/water.geojson', data => {
$.get('https://gw.alipayobjects.com/os/rmsportal/XHMbjQwrSrajvLLvMPbK.json', data => {
scene.PolygonLayer({
zIndex: 0
})
@ -41,7 +41,7 @@ scene.on('loaded', () => {
.color('rgb(79,174,234)')
.render();
});
$.get('./data/land.geojson', data => {
$.get('https://gw.alipayobjects.com/os/rmsportal/VifgwJEyBIXnDrjCwWdK.json', data => {
scene.PolygonLayer({
zIndex: 0
})
@ -50,7 +50,7 @@ scene.on('loaded', () => {
.color('rgb(156,194,116)')
.render();
});
$.get('./data/river.geojson', data => {
$.get('https://gw.alipayobjects.com/os/rmsportal/ZseLNWMOPGrgqQYfvtli.json', data => {
scene.LineLayer({
zIndex: 2
})
@ -61,7 +61,7 @@ scene.on('loaded', () => {
.render();
});
$.get('./data/build.geojson', data => {
$.get('https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json', data => {
citylayer = scene.PolygonLayer({
zIndex: 2
})

15
demos/taxi.html
View File

@ -48,19 +48,6 @@ const scene = new L7.Scene({
maxZoom: 18
});
scene.on('loaded', () => {
$.get('./data/cityPoint.json', data => {
scene.PointLayer({
zIndex: 10
})
.source(data)
.shape('2d:warn')
.size(90)
.color('#F00')
.style({
shape:'warn'
})
.render();
});
$.get('./data/road.json', data => {
scene.LineLayer({
zIndex: 2
@ -81,7 +68,7 @@ scene.on('loaded', () => {
.animate({enable:true})
.style({
opacity:1.0,
baseColor:'rgb(25,25,165)',
baseColor:'rgb(16,16,16)',
windowColor:'rgb(30,60,89)',
brightColor:'rgb(155,217,255)',

6
src/core/layer.js
View File

@ -418,10 +418,6 @@ export default class Layer extends Base {
});
}
}
/**
* @param {*} type 类型
* @param {*} callback 回调函数
*/
on(type, callback) {
this._addPickingEvents();
@ -463,7 +459,7 @@ export default class Layer extends Base {
// TODO: Find a way to properly remove this listener on destroy
this.scene.on('pick', e => {
// Re-emit click event from the layer
const { featureId, point2d, /* point3d, */intersects } = e;
const { featureId, point2d, intersects } = e;
if (intersects.length === 0) { return; }
const source = this.layerSource.get('data');
const feature = source.features[featureId];

8
src/core/scene.js
View File

@ -33,10 +33,10 @@ export default class Scene extends Base {
Map.on('mapLoad', () => {
this._initEngine(Map.renderDom);
const sceneMap = new GaodeMap(Map.map);
Object.getOwnPropertyNames(sceneMap.prototype).forEach(key => {
if (key !== 'constructor') {
this.prototype[key] = sceneMap.prototype[key];
}
// 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);

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

@ -1,7 +1,6 @@
import BufferBase from './bufferBase';
import { regularShape } from '../shape/index';
import Util from '../../util';
// import * as THREE from '../../core/three';
export default class PointBuffer extends BufferBase {
geometryBuffer() {
const type = this.get('type');

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

@ -1,5 +1,5 @@
import BufferBase from './bufferBase';
import { getJSON, getImage } from '../../util/ajax';
import { getJSON } from '../../util/ajax';
import * as THREE from '../../core/three';
import Global from '../../global';
const Space = 1;
@ -68,12 +68,17 @@ export default class TextBuffer extends BufferBase {
});
}
_loadTextTexture(url) {
getImage({
url: `${Global.sdfHomeUrl}${url}`
}, (e, image) => {
this.bufferStruct.textTexture = this._creatTexture(image);
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
this.bufferStruct.textTexture = this._creatTexture(img);
this.emit('SourceLoaded');
});
};
img.src = url;
}
/**
* 计算每个标注词语的位置

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

@ -10,7 +10,9 @@ export default function PolygonMaterial(options) {
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_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,

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

@ -9,7 +9,7 @@
if (vTime > 1.0 || vTime < 0.0) {
discard;
}
color.a= color.a * vTime;
color.a= color.a * vTime * 1.5;
#endif
gl_FragColor = color;
gl_FragColor.a =color.a*u_opacity;

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

@ -8,7 +8,7 @@
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
v_color = a_color;
#ifdef ANIMATE
vTime = 1.0- (mod(u_time*100.,3600.)- position.z) / 100.;
vTime = 1.0- (mod(u_time*50.,3600.)- position.z) / 100.;
#endif
gl_Position = matModelViewProjection * vec4(position.xy,0., 1.0);
}

61
src/geom/shader/polygon_frag.glsl
View File

@ -4,20 +4,45 @@ uniform sampler2D u_texture;
uniform vec4 u_baseColor;
uniform vec4 u_brightColor;
uniform vec4 u_windowColor;
uniform float u_zoom;
uniform float u_time;
uniform float u_near;
uniform float u_far;
varying vec2 v_texCoord;
varying vec4 v_color;
varying float v_lightWeight;
varying float v_size;
vec3 getWindowColor(float n, float hot, vec3 brightColor, vec3 darkColor) {
float s = step(hot, n);
return mix(darkColor, brightColor, s);
//vec3 color = mix(brightColor,brightColor - vec3(0.4,0.4,0.4),n);
vec3 color = mix(brightColor,vec3(1.0,1.0,1.0),n);
return mix(darkColor, color, s);
}
float random (vec2 st) {
return fract(sin(dot(st.xy,
vec2(12.9898,78.233)))*
43758.5453123);
return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123);
}
float LinearizeDepth()
{
float z = gl_FragCoord.z * 2.0 - 1.0;
return (2.0 * u_near * u_far) / (u_far + u_near - z * (u_far - u_near));
}
vec3 fog(vec3 color, vec3 fogColor, float depth){
float fogFactor=clamp(depth,0.0,1.0);
vec3 output_color=mix(fogColor,color,fogFactor);
return output_color;
}
float sdRect(vec2 p, vec2 sz) {
vec2 d = abs(p) - sz;
float outside = length(max(d, 0.));
float inside = min(max(d.x, d.y), 0.);
return outside + inside;
}
void main() {
if(v_color.w == 0.0) {
discard;
@ -27,17 +52,17 @@ void main() {
vec3 brightColor = u_brightColor.xyz;
vec3 windowColor = u_windowColor.xyz;
float targetColId = 5.;
float depth = 1.0 - LinearizeDepth() / u_far * u_zoom;
vec3 fogColor = vec3(23.0/255.0,31.0/255.0,51.0/255.0);
#ifdef ANIMATE
if(v_texCoord.x < 0.) { //顶部颜色
//gl_FragColor = vec4(1.0,0.,0.,1.0); // v_color.w * u_opacity
gl_FragColor = vec4(v_color.xyz , v_color.w * u_opacity);
vec3 foggedColor = fog(baseColor.xyz + vec3(0.12*0.9,0.2*0.9,0.3*0.9),fogColor,depth);
gl_FragColor = vec4( foggedColor, v_color.w * u_opacity);
}else { // 侧面颜色
//vec4 color = texture2D(u_texture,v_texCoord) * v_color;
vec2 st = v_texCoord;
// st.y = st.y / (3000.0 - v_size) *3000.;
vec2 UvScale = v_texCoord;
float tStep = 0.01;
float tStart = 0.1 * tStep;
float tStep = min(0.08,max(0.05* (18.0-u_zoom),0.02));
float tStart = 0.25 * tStep;
float tEnd = 0.75 * tStep;
float u = mod(UvScale.x, tStep);
float v = mod(UvScale.y, tStep);
@ -50,6 +75,8 @@ void main() {
// 将窗户颜色和墙面颜色区别开来
float sU = step(tStart, u) - step(tEnd, u);
float sV = step(tStart, v) - step(tEnd, v);
vec2 windowSize = vec2(abs(tEnd-tStart),abs(tEnd-tStart));
float dist = sdRect(vec2(u,v), windowSize);
float s = sU * sV;
float curColId = floor(UvScale.x / tStep);
@ -60,17 +87,23 @@ void main() {
if(ux == targetColId){
n =0.;
}
vec3 color = mix(baseColor, getWindowColor(n,0.8,brightColor,windowColor), s);
float timeP = min(0.95, abs ( sin(u_time/6.0) ) );
float hot = smoothstep(1.0,0.0,timeP);
vec3 color = mix(baseColor, getWindowColor(n,hot,brightColor,windowColor), s);
//vec3 color = mix(baseColor, getWindowColor(n,hot,brightColor,windowColor), 1.0);
float sFinal = s * sCol * sRow;
color += mix(baseColor, brightColor, sFinal);
color += mix(baseColor, brightColor, sFinal*n);
// if (st.y<0.01){
// color = baseColor;
// }
// if(head ==1.0) { // 顶部亮线
// color = brightColor;
// }
gl_FragColor = vec4(color * v_lightWeight,1.0);
color = color * v_lightWeight;
vec3 foggedColor = fog(color,fogColor,depth);
gl_FragColor = vec4(foggedColor,1.0);
}
#else
gl_FragColor = vec4(v_color.xyz , v_color.w * u_opacity);

2
src/global.js
View File

@ -22,7 +22,7 @@ const Global = {
// 指定固定 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 ],
size: 10000,
sdfHomeUrl: 'http://visualtest.amap.com',
sdfHomeUrl: 'https://sdf.amap.com',
scales: {
}
};

1
src/layer/pointLayer.js
View File

@ -7,7 +7,6 @@ import TextBuffer from '../geom/buffer/text';
import TextMaterial from '../geom/material/textMaterial';
import radar from '../geom/shader/radar_frag.glsl';
import warn from '../geom/shader/warn_frag.glsl';
// import pickingMaterial from '../core/engine/picking/pickingMaterial';
/**
* point shape 2d circle, traingle text,image

5
src/layer/polygonLayer.js
View File

@ -62,11 +62,14 @@ export default class PolygonLayer extends Layer {
_renderPolygon() {
const animateOptions = this.get('animateOptions');
const { opacity, baseColor, brightColor, windowColor } = this.get('styleOptions');
const camera = this.map.getCameraState();
const material = new PolygonMaterial({
u_opacity: opacity,
u_baseColor: baseColor,
u_brightColor: brightColor,
u_windowColor: windowColor
u_windowColor: windowColor,
u_near: camera.near,
u_far: camera.far
});
const { attributes } = this._buffer;