diff --git a/demos/01_point_circle.html b/demos/01_point_circle.html index a52b29356d..dd338d5e01 100644 --- a/demos/01_point_circle.html +++ b/demos/01_point_circle.html @@ -74,7 +74,7 @@ scene.on('loaded', () => { } }) .shape('2d:circle') - .size('value', [ 3, 60]) // default 1 + .size('value', [ 0, 60]) // default 1 //.size('value', [ 10, 300]) // default 1 .active(true) .filter('value', field_8 => { diff --git a/demos/01_point_distribute.html b/demos/01_point_distribute.html index dc6056973e..18a714ab75 100644 --- a/demos/01_point_distribute.html +++ b/demos/01_point_distribute.html @@ -28,7 +28,8 @@ const scene = new L7.Scene({ }); window.scene = scene; scene.on('loaded', () => { - $.get('./data/mUQPWCYaxOfiSznuANvG.txt', data => { + // ./data/mUQPWCYaxOfiSznuANvG.txt + $.get('./data/00.csv', data => { scene.PointLayer({ zIndex: 2 }) diff --git a/demos/01_point_image.html b/demos/01_point_image.html index 533bd810f8..6902b67f2d 100644 --- a/demos/01_point_image.html +++ b/demos/01_point_image.html @@ -6,21 +6,33 @@ + point_distribute
+
+
+
+ 全部 + 可用车 + 不可用 +
+
+
- + @@ -30,6 +31,27 @@ const scene = new L7.Scene({ }); scene.on('loaded', () => { $.get('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt', data => { + const rows = data.split('\n'); + var features =[]; + for(var i =1;i { }) //.animate({enable:true}) .render(); + **/ }); }); diff --git a/demos/assets/info.css b/demos/assets/info.css index 94c6efb937..1dca406fae 100644 --- a/demos/assets/info.css +++ b/demos/assets/info.css @@ -49,3 +49,111 @@ margin: 0; } +.input-item { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-align: center; + align-items: center; + width: 100%; + height: 3rem; + } + + .input-item:last-child { + margin-bottom: 0; + } + + .input-item>select, .input-item>input[type=text], .input-item>input[type=date] { + position: relative; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + width: 1%; + margin-bottom: 0; + } + + .input-item>select:not(:last-child), .input-item>input[type=text]:not(:last-child), .input-item>input[type=date]:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0 + } + + .input-item>select:not(:first-child), .input-item>input[type=text]:not(:first-child), .input-item>input[type=date]:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0 + } + + .input-item-prepend { + margin-right: -1px; + } + + .input-item-text, input[type=text],input[type=date], select { + height: calc(2.2rem + 2px); + } + + .input-item-text { + width: 6rem; + text-align: justify; + padding: 0.4rem 0.7rem; + display: inline-block; + text-justify: distribute-all-lines; + /*ie6-8*/ + text-align-last: justify; + /* ie9*/ + -moz-text-align-last: justify; + /*ff*/ + -webkit-text-align-last: justify; + /*chrome 20+*/ + -ms-flex-align: center; + align-items: center; + margin-bottom: 0; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #495057; + text-align: center; + white-space: nowrap; + background-color: #e9ecef; + border: 1px solid #ced4da; + border-radius: .25rem; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + .input-item-text input[type=checkbox], .input-item-text input[type=radio] { + margin-top: 0 + } + +.input-card { + display: flex; + flex-direction: column; + min-width: 0; + word-wrap: break-word; + background-color: #fff; + background-clip: border-box; + width: 10rem; + border-width: 0; + position: fixed; + top: 1rem; + right: 1rem; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + padding: 0.1rem 0.6rem; + } + .info hr { + margin-right: 0; + margin-left: 0; + border-top-color: grey; + } + + .info { + padding: .75rem 1.25rem; + margin-bottom: 1rem; + position: fixed; + top: 1rem; + background-color: white; + width: auto; + border-width: 0; + right: 1rem; + z-index: 10; + } \ No newline at end of file diff --git a/package.json b/package.json index 6efea7621b..816c18fbbc 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "@ali/l7", - "version": "0.1.1", - "description": "the Grammar of Graphics in Javascript", + "name": "@antv/l7", + "version": "1.0.0", + "description": "Large-scale WebGL-powered Geospatial Data Visualization", "main": "build/l7.js", "browser": "build/l7.js", "module": "lib/index.js", @@ -15,7 +15,8 @@ }, "keywords": [ "l7", - "chart" + "gis", + "geometry" ], "author": "https://github.com/orgs/antvis/people", "license": "MIT", @@ -107,6 +108,7 @@ "fecha": "^2.3.3", "gl-matrix": "^2.4.1", "lodash": "^4.17.5", + "polyline-normals": "^2.0.2", "rbush": "^2.0.2", "three": "^0.96.0", "venn.js": "^0.2.20", diff --git a/src/core/engine/picking/pickingMaterial.js b/src/core/engine/picking/pickingMaterial.js index ebf4bd8349..b35120137f 100755 --- a/src/core/engine/picking/pickingMaterial.js +++ b/src/core/engine/picking/pickingMaterial.js @@ -9,7 +9,7 @@ export default function PickingMaterial(options) { }, vertexShader: picking_vert, fragmentShader: picking_frag, - transparent: true + transparent: false }); return material; } diff --git a/src/core/engine/picking/picking_vert.glsl b/src/core/engine/picking/picking_vert.glsl index 2f39b26718..12cad42cd5 100644 --- a/src/core/engine/picking/picking_vert.glsl +++ b/src/core/engine/picking/picking_vert.glsl @@ -14,7 +14,7 @@ void main() { float scale = pow(2.0,(20.0 - u_zoom)); vec3 newposition = position; #ifdef point - newposition =position + a_size * scale* a_shape; + newposition =position + a_size * scale * a_shape; #endif #ifdef polyline newposition = position.xyz + vec3(normal * a_size * pow(2.0,20.0-u_zoom) / 2.0 * a_miter); diff --git a/src/core/extend/windframebuffer/drawMaterial.js b/src/core/extend/windframebuffer/drawMaterial.js deleted file mode 100644 index 5eb07a7da3..0000000000 --- a/src/core/extend/windframebuffer/drawMaterial.js +++ /dev/null @@ -1,23 +0,0 @@ - -import Material from '../../../geom/material/material'; -import draw_vert from './draw_vert.glsl'; -import draw_frag from './draw_frag.glsl'; -export default function DrawMaterial(options) { - const material = new Material({ - uniforms: { - u_color_ramp: { value: options.u_color_ramp }, - u_wind_max: { value: options.u_wind_max }, - u_particles_res: { value: options.u_particles_res }, - u_wind_min: { value: options.u_wind_min }, - u_opacity: { value: options.u_opacity }, - u_wind: { value: options.u_wind }, - u_particles: { value: options.u_particles }, - u_bbox: { value: options.u_bbox } - }, - vertexShader: draw_vert, - fragmentShader: draw_frag, - transparent: true - }); -// material.blending = THREE.AdditiveBlending - return material; -} diff --git a/src/core/extend/windframebuffer/draw_frag.glsl b/src/core/extend/windframebuffer/draw_frag.glsl deleted file mode 100644 index 322eb91760..0000000000 --- a/src/core/extend/windframebuffer/draw_frag.glsl +++ /dev/null @@ -1,19 +0,0 @@ -precision mediump float; -uniform sampler2D u_wind; -uniform vec2 u_wind_min; -uniform vec2 u_wind_max; -uniform sampler2D u_color_ramp; -uniform float u_opacity; -varying vec2 v_particle_pos; - -void main() { - vec2 velocity = mix(u_wind_min, u_wind_max, texture2D(u_wind, v_particle_pos).rg); - float speed_t = length(velocity) / length(u_wind_max); - - // color ramp is encoded in a 16x16 texture - vec2 ramp_pos = vec2( - fract(16.0 * speed_t), - floor(16.0 * speed_t) / 16.0); - - gl_FragColor = texture2D(u_color_ramp, ramp_pos); -} diff --git a/src/core/extend/windframebuffer/draw_geometry.js b/src/core/extend/windframebuffer/draw_geometry.js deleted file mode 100644 index c83a8f2e9a..0000000000 --- a/src/core/extend/windframebuffer/draw_geometry.js +++ /dev/null @@ -1,34 +0,0 @@ -import { DataType, DrawMode } from '@ali/r3-base'; -import { BufferGeometry } from '@ali/r3-geometry'; - -/** - * 创建点图层几何体 - */ -export default class DrawGeometry extends BufferGeometry { - - constructor(opts) { - super(opts.name); - this._index = opts.index; - this.mode = DrawMode.POINTS; - - this.primitive.indexType = DataType.UNSIGNED_INT; - this.initialize(); - } - - /** - * 构造多边形数据 - * @private - */ - initialize() { - super.initialize([ - { semantic: 'INDEX', size: 1, type: DataType.FLOAT, normalized: false } - ], this._index.length); - - this._index.forEach((vert, j) => { - this.setVertexValues(j, { - INDEX: [ vert ] - }); - }); - } - -} diff --git a/src/core/extend/windframebuffer/draw_vert.glsl b/src/core/extend/windframebuffer/draw_vert.glsl deleted file mode 100644 index df66425c33..0000000000 --- a/src/core/extend/windframebuffer/draw_vert.glsl +++ /dev/null @@ -1,26 +0,0 @@ -precision mediump float; - -attribute float a_index; -uniform sampler2D u_particles; -uniform vec4 u_bbox; -uniform float u_particles_res; - -varying vec2 v_particle_pos; -void main() { - mat4 matModelViewProjection = projectionMatrix * modelViewMatrix; - vec4 color = texture2D(u_particles, vec2( - fract(a_index / u_particles_res), - 1.0 - floor(a_index / u_particles_res) / u_particles_res)); - - // decode current particle position from the pixel's RGBA value - v_particle_pos = vec2( - color.r / 255.0 + color.b, - 1.0 - (color.g / 255.0 + color.a)); - vec2 xyrange = u_bbox.zw - u_bbox.xy; - float x = u_bbox.x + v_particle_pos.x * xyrange.x; - float y = u_bbox.w - v_particle_pos.y * xyrange.y; - gl_PointSize = 1.0; - //gl_Position = matModelViewProjection * vec4(v_particle_pos, 0.0, 1.0); - gl_Position = vec4(2.0 * v_particle_pos.x - 1.0, 1.0 - 2.0 * v_particle_pos.y, 0, 1); - -} diff --git a/src/core/extend/windframebuffer/geoRenderPass.js b/src/core/extend/windframebuffer/geoRenderPass.js deleted file mode 100644 index 3146f534c5..0000000000 --- a/src/core/extend/windframebuffer/geoRenderPass.js +++ /dev/null @@ -1,39 +0,0 @@ -import { RenderPass } from '@ali/r3-renderer-basic'; -import { TextureFilter } from '@ali/r3-base'; -export class GeoRenderPass extends RenderPass { - - constructor(name, priority, renderTarget, mask, Material, id, done) { - renderTarget.texture.setFilter(TextureFilter.NEAREST, TextureFilter.NEAREST); - super(name, priority, renderTarget, Material, mask); - typeof (id) === 'string' || typeof (id) === 'number' && (id = [ id ]); - this.id = id; - this.renderPassFlags = []; - this.done = done; - } - /* eslint-disable */ - preRender(camera, opaquaQueue, transparentQueue) { - /* eslint-disable */ - - opaquaQueue.items.forEach(item => { - const nodeAbility = item.nodeAbility; - this.renderPassFlags.push(nodeAbility.renderPassFlag); - this.id.indexOf(nodeAbility.id) > -1 ? nodeAbility.renderPassFlag = 0 : nodeAbility.renderPassFlag = 1; - }); - - - } - - postRender(camera, opaquaQueue, transparentQueue) { - opaquaQueue.items.forEach((item, index) => { - const nodeAbility = item.nodeAbility; - nodeAbility.renderPassFlag = this.renderPassFlags[index]; - }); - this.renderPassFlags.length = 0; - if(this.done) { - this.done(); - } - - } -} - -export { ColorRenderPass }; diff --git a/src/core/extend/windframebuffer/quad.vert.glsl b/src/core/extend/windframebuffer/quad.vert.glsl deleted file mode 100644 index a81dcf6e66..0000000000 --- a/src/core/extend/windframebuffer/quad.vert.glsl +++ /dev/null @@ -1,7 +0,0 @@ -precision highp float; -varying vec2 v_texCoord; -void main() { - v_texCoord = uv; - - gl_Position = vec4(1.0 - 2.0 * vec2(position), 0., 1.0); -} \ No newline at end of file diff --git a/src/core/extend/windframebuffer/screen_frag.glsl b/src/core/extend/windframebuffer/screen_frag.glsl deleted file mode 100644 index 8bc75d992d..0000000000 --- a/src/core/extend/windframebuffer/screen_frag.glsl +++ /dev/null @@ -1,12 +0,0 @@ -precision mediump float; -uniform sampler2D u_texture; -uniform float u_opacity; -varying vec2 v_texCoord; - -void main() { - if(u_opacity == 0.0) - discard; - gl_FragColor = texture2D(u_texture,1.0 - v_texCoord) * u_opacity; - // gl_FragColor.w =u_opacity; - -} \ No newline at end of file diff --git a/src/core/extend/windframebuffer/updateMaterial.js b/src/core/extend/windframebuffer/updateMaterial.js deleted file mode 100644 index 67391e66d5..0000000000 --- a/src/core/extend/windframebuffer/updateMaterial.js +++ /dev/null @@ -1,26 +0,0 @@ -import Material from '../../../geom/material/material'; -import quad_vert from './quad.vert.glsl'; -import update_frag from './update_frag.glsl'; -export default function UpdateMaterial(options) { - const material = new Material({ - uniforms: { - u_wind_max: { value: options.u_wind_max }, - u_particles_res: { value: options.u_particles_res }, - u_wind_min: { value: options.u_wind_min }, - u_opacity: { value: options.u_opacity }, - u_wind: { value: options.u_wind }, - u_particles: { value: options.u_particles }, - u_drop_rate_bump: { value: options.u_drop_rate_bump }, - u_drop_rate: { value: options.u_drop_rate }, - u_speed_factor: { value: options.u_speed_factor }, - u_rand_seed: { value: options.u_rand_seed }, - u_extent: { value: options.u_extent }, - u_wind_res: { value: options.u_wind_res } - }, - vertexShader: quad_vert, - fragmentShader: update_frag, - transparent: true - }); -// material.blending = THREE.AdditiveBlending - return material; -} diff --git a/src/core/extend/windframebuffer/update_frag.glsl b/src/core/extend/windframebuffer/update_frag.glsl deleted file mode 100644 index f68e6c43d1..0000000000 --- a/src/core/extend/windframebuffer/update_frag.glsl +++ /dev/null @@ -1,76 +0,0 @@ -precision highp float; - -uniform sampler2D u_particles; -uniform sampler2D u_wind; -uniform vec2 u_wind_res; -uniform vec2 u_wind_min; -uniform vec2 u_wind_max; -uniform float u_rand_seed; -uniform float u_speed_factor; -uniform float u_drop_rate; -uniform float u_drop_rate_bump; -uniform vec4 u_extent; -uniform float u_particles_res; - -varying vec2 v_texCoord; - -// pseudo-random generator -const vec3 rand_constants = vec3(12.9898, 78.233, 4375.85453); -float rand(const vec2 co) { - float t = dot(rand_constants.xy, co); - return fract(sin(t) * (rand_constants.z + t)); -} - -// wind speed lookup; use manual bilinear filtering based on 4 adjacent pixels for smooth interpolation -vec2 lookup_wind(const vec2 uv) { - // return texture2D(u_wind, uv).rg; // lower-res hardware filtering - vec2 px = 1.0 / u_wind_res; - vec2 vc = (floor(uv * u_wind_res)) * px; - vec2 f = fract(uv * u_wind_res); - vec2 tl = texture2D(u_wind, vc).rg; - vec2 tr = texture2D(u_wind, vc + vec2(px.x, 0)).rg; - vec2 bl = texture2D(u_wind, vc + vec2(0, px.y)).rg; - vec2 br = texture2D(u_wind, vc + px).rg; - return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y); -} - -void main() { - vec4 color = texture2D(u_particles, v_texCoord); - vec2 pos = vec2( - color.r / 255.0 + color.b, - color.g / 255.0 + color.a); // decode particle position from pixel RGBA - - vec2 velocity = mix(u_wind_min, u_wind_max, lookup_wind(pos)); - float speed_t = length(velocity) / length(u_wind_max); - - // pos = pos + vec2(0.001,0.001); - // take EPSG:4236 distortion into account for calculating where the particle moved - // float y = u_extent.w - pos.y * (u_extent.w - u_extent.y); - // float distortion = cos(radians(y)); - // vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor; - - // take EPSG:4236 distortion into account for calculating where the particle moved - float distortion = cos(radians(pos.y * 180.0 - 90.0)); - vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor; - // vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor; - - // update particle position, wrapping around the date line - pos = fract(1.0 + pos + offset); - - // // a random seed to use for the particle drop - vec2 seed = (pos + v_texCoord) * u_rand_seed; - - // drop rate is a chance a particle will restart at random position, to avoid degeneration - float drop_rate = u_drop_rate + speed_t * u_drop_rate_bump; - float drop = step(1.0 - drop_rate, rand(seed)); - - vec2 random_pos = vec2( - rand(seed + 1.3), - rand(seed + 2.1)); - pos = mix(pos, random_pos, drop); - - // encode the new particle position back into RGBA - gl_FragColor = vec4( - fract(pos * 255.0), - floor(pos * 255.0) / 255.0); -} \ No newline at end of file diff --git a/src/core/extend/windframebuffer/windMaterial.js b/src/core/extend/windframebuffer/windMaterial.js deleted file mode 100644 index 52583fd579..0000000000 --- a/src/core/extend/windframebuffer/windMaterial.js +++ /dev/null @@ -1,17 +0,0 @@ - -import image_vert from './wind_vert.glsl'; -import image_frag from './wind_frag.glsl'; -import Material from '../../../geom/material/material'; -export default function WindMaterial(options) { - const material = new Material({ - uniforms: { - u_texture: { value: options.u_texture }, - u_opacity: { value: options.u_opacity } - }, - vertexShader: image_vert, - fragmentShader: image_frag, - transparent: true - }); -// material.blending = THREE.AdditiveBlending - return material; -} diff --git a/src/core/extend/windframebuffer/wind_frag.glsl b/src/core/extend/windframebuffer/wind_frag.glsl deleted file mode 100644 index a3f0dd1584..0000000000 --- a/src/core/extend/windframebuffer/wind_frag.glsl +++ /dev/null @@ -1,11 +0,0 @@ -precision mediump float; -uniform sampler2D u_texture; -uniform float u_opacity; -varying vec2 v_texCoord; - -void main() { - if(u_opacity == 0.0) - discard; - gl_FragColor = texture2D(u_texture,1.0 - v_texCoord) * u_opacity; - -} \ No newline at end of file diff --git a/src/core/extend/windframebuffer/wind_vert.glsl b/src/core/extend/windframebuffer/wind_vert.glsl deleted file mode 100644 index 0abb19d5ff..0000000000 --- a/src/core/extend/windframebuffer/wind_vert.glsl +++ /dev/null @@ -1,6 +0,0 @@ -precision highp float; -varying vec2 v_texCoord; -void main() { - v_texCoord = uv; - gl_Position = vec4(1.0 - 2.0 * vec2(position), 0., 1.0); -} \ No newline at end of file diff --git a/src/core/layer.js b/src/core/layer.js index 8ba5bc3efa..f8132f46b0 100644 --- a/src/core/layer.js +++ b/src/core/layer.js @@ -105,6 +105,7 @@ export default class Layer extends Base { const { type = dataType } = cfg; cfg.data = data; cfg.mapType = this.get('mapType'); + this.layerSource = new source[type](cfg); return this; @@ -447,13 +448,13 @@ export default class Layer extends Base { const pickmaterial = new PickingMaterial({ u_zoom: this.scene.getZoom() }); - pickmaterial.setDefinesvalue(this.type, true); - this._pickingMesh.onBeforeRender = () => { - const zoom = this.scene.getZoom(); - this._pickingMesh.material.setUniformsValue('u_zoom', zoom); - - }; + const pickingMesh = new THREE[mesh.type](mesh.geometry, pickmaterial); + pickmaterial.setDefinesvalue(this.type, true); + pickingMesh.onBeforeRender = () => { + const zoom = this.scene.getZoom(); + pickingMesh.material.setUniformsValue('u_zoom', zoom); + }; this._pickingMesh.add(pickingMesh); } _setPickingId() { @@ -555,7 +556,7 @@ export default class Layer extends Base { } else if (this.type === 'polyline') { offset = 2; } - this._object3D.position.z = offset * Math.pow(2, 20 - zoom); + this._object3D.position.z = offset * Math.pow(2, 20 - zoom); if (zoom < minZoom || zoom > maxZoom) { this._object3D.visible = false; } else if (this.get('visible')) { diff --git a/src/core/scene.js b/src/core/scene.js index 006ab13b13..52e9d90ed1 100644 --- a/src/core/scene.js +++ b/src/core/scene.js @@ -63,7 +63,7 @@ export default class Scene extends Base { const element = document.createElement('div'); element.innerHTML = message; - element.style.cssText += 'position: absolute; pointer-events:none;background: rgba(255, 255, 255, 0.7);font-size: 11px;z-index:100; padding:4px;bottom: 0;right:0;'; + element.style.cssText += 'position: absolute; pointer-events:none;background: rgba(255, 255, 255, 0.7);font-size: 11px;z-index:100; padding:4px;bottom: 0;right:0px;'; this._container.appendChild(element); } addImage() { diff --git a/src/geom/shader/raster_vert.glsl b/src/geom/shader/raster_vert.glsl index 7cb385f76b..ca918e4c40 100644 --- a/src/geom/shader/raster_vert.glsl +++ b/src/geom/shader/raster_vert.glsl @@ -19,6 +19,6 @@ void main() { floor(16.0 * (1.0 - value1)) / 16.0); v_color = texture2D(u_colorTexture,ramp_pos); vec2 range = u_extent.zw - u_extent.xy; - gl_Position = matModelViewProjection * vec4(position.xy, value, 1.0); + gl_Position = matModelViewProjection * vec4(position.xy, value*100., 1.0); } \ No newline at end of file diff --git a/src/layer/pointLayer.js b/src/layer/pointLayer.js index 83c4341429..1ba952e088 100644 --- a/src/layer/pointLayer.js +++ b/src/layer/pointLayer.js @@ -7,6 +7,7 @@ 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 @@ -52,7 +53,12 @@ export default class PointLayer extends Layer { u_opacity: opacity, u_zoom: this.scene.getZoom() }); - mtl.setDefinesvalue('SHAPE', true); + // 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; diff --git a/src/source/csvSource.js b/src/source/csvSource.js index b6bc8422b1..294407cc53 100644 --- a/src/source/csvSource.js +++ b/src/source/csvSource.js @@ -21,7 +21,8 @@ export default class CSVSource extends Source { if (col.coordinates) { coordinates = col.coordinates; } - let coordinates = [ col[x], col[y] ]; + if(x && y) + coordinates = [ col[x], col[y] ]; if (x1 && y1) { coordinates = [[ col[x], col[y] ], [ col[x1], col[y1] ]]; }