diff --git a/demos/01_point_circle.html b/demos/01_point_circle.html index dd338d5e01..2b66ddd6a2 100644 --- a/demos/01_point_circle.html +++ b/demos/01_point_circle.html @@ -15,29 +15,6 @@
-
-

杭州市微博签到数据

-

- -

-

- -

-

-

-
@@ -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') - }) + }); diff --git a/demos/01_point_column.html b/demos/01_point_column.html index cf83d33d2d..354c58a316 100644 --- a/demos/01_point_column.html +++ b/demos/01_point_column.html @@ -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(); }); }); - diff --git a/demos/01_point_image.html b/demos/01_point_image.html index 6902b67f2d..96473b18c1 100644 --- a/demos/01_point_image.html +++ b/demos/01_point_image.html @@ -80,7 +80,7 @@ scene.on('loaded', () => { .size(8) .shape('2d:circle') .style({ - opacity:1.0 + opacity:0.7 }) .render(); diff --git a/demos/02_contour.html b/demos/02_contour.html index dd7bf8e677..b2782dde8c 100644 --- a/demos/02_contour.html +++ b/demos/02_contour.html @@ -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 => { diff --git a/demos/02_oneBletoneRoad.html b/demos/02_oneBletoneRoad.html index aeec0e50b1..c7a5f17796 100644 --- a/demos/02_oneBletoneRoad.html +++ b/demos/02_oneBletoneRoad.html @@ -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 }) diff --git a/demos/03_1_extrude_polygon.html b/demos/03_1_extrude_polygon.html index 86523e98a7..f8b80004ae 100644 --- a/demos/03_1_extrude_polygon.html +++ b/demos/03_1_extrude_polygon.html @@ -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) diff --git a/demos/03_choropleths_polygon.html b/demos/03_choropleths_polygon.html index a405d8e933..a4dee381b4 100644 --- a/demos/03_choropleths_polygon.html +++ b/demos/03_choropleths_polygon.html @@ -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; diff --git a/demos/04_image.html b/demos/04_image.html index 75ec505087..3f0773c96e 100644 --- a/demos/04_image.html +++ b/demos/04_image.html @@ -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 ] }) diff --git a/demos/07_city.html b/demos/07_city.html index a08839ad21..70dd134c51 100644 --- a/demos/07_city.html +++ b/demos/07_city.html @@ -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 }) diff --git a/demos/taxi.html b/demos/taxi.html index 661f007fe2..45c19dd0df 100644 --- a/demos/taxi.html +++ b/demos/taxi.html @@ -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)', diff --git a/src/core/layer.js b/src/core/layer.js index 4a7e37b7db..a6b25b56bc 100644 --- a/src/core/layer.js +++ b/src/core/layer.js @@ -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]; diff --git a/src/core/scene.js b/src/core/scene.js index 36b1a65430..295c8d562a 100644 --- a/src/core/scene.js +++ b/src/core/scene.js @@ -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); diff --git a/src/geom/buffer/point.js b/src/geom/buffer/point.js index 833b101a2c..7de8e3536e 100644 --- a/src/geom/buffer/point.js +++ b/src/geom/buffer/point.js @@ -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'); diff --git a/src/geom/buffer/text.js b/src/geom/buffer/text.js index 1cab115a71..710dfd1bdc 100644 --- a/src/geom/buffer/text.js +++ b/src/geom/buffer/text.js @@ -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; + } /** * 计算每个标注词语的位置 diff --git a/src/geom/material/polygonMaterial.js b/src/geom/material/polygonMaterial.js index dffa30ab53..221823f836 100644 --- a/src/geom/material/polygonMaterial.js +++ b/src/geom/material/polygonMaterial.js @@ -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, diff --git a/src/geom/shader/line_frag.glsl b/src/geom/shader/line_frag.glsl index f227687d33..38c6ef4140 100644 --- a/src/geom/shader/line_frag.glsl +++ b/src/geom/shader/line_frag.glsl @@ -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; diff --git a/src/geom/shader/line_vert.glsl b/src/geom/shader/line_vert.glsl index 9aa6017402..fd2c1613bf 100644 --- a/src/geom/shader/line_vert.glsl +++ b/src/geom/shader/line_vert.glsl @@ -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); } \ No newline at end of file diff --git a/src/geom/shader/polygon_frag.glsl b/src/geom/shader/polygon_frag.glsl index 42838b25fa..3184fe6133 100644 --- a/src/geom/shader/polygon_frag.glsl +++ b/src/geom/shader/polygon_frag.glsl @@ -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); diff --git a/src/global.js b/src/global.js index 746aac3ca3..b537d8db38 100644 --- a/src/global.js +++ b/src/global.js @@ -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: { } }; diff --git a/src/layer/pointLayer.js b/src/layer/pointLayer.js index fa9c1bc7bb..f7a633a3f5 100644 --- a/src/layer/pointLayer.js +++ b/src/layer/pointLayer.js @@ -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 diff --git a/src/layer/polygonLayer.js b/src/layer/polygonLayer.js index 22b16e072e..be1b3535dd 100644 --- a/src/layer/polygonLayer.js +++ b/src/layer/polygonLayer.js @@ -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;