From 879535f3f8d970868520cef2ee7da1d4eec4a2d9 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Tue, 5 Mar 2019 21:06:12 +0800 Subject: [PATCH] feat(layer) add fitbounds --- demos/01_point_column.html | 2 +- src/core/layer.js | 11 ++- src/core/source.js | 5 +- src/geom/shader/point_vert.glsl | 1 + src/geom/shader/shaderChunks/pick_color.glsl | 7 ++ src/map/AMap.js | 96 ++++++++++++++------ src/map/gaodeMap.js | 69 -------------- src/source/parser/csv.js | 4 +- src/util.js | 33 +------ src/util/geo.js | 25 +++++ 10 files changed, 119 insertions(+), 134 deletions(-) create mode 100644 src/geom/shader/shaderChunks/pick_color.glsl delete mode 100644 src/map/gaodeMap.js create mode 100644 src/util/geo.js diff --git a/demos/01_point_column.html b/demos/01_point_column.html index fd7d33ae02..787ca34a8f 100644 --- a/demos/01_point_column.html +++ b/demos/01_point_column.html @@ -30,7 +30,7 @@ const scene = new L7.Scene({ }); scene.on('loaded', () => { $.get('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json', data => { - scene.PointLayer({ + window.layer = scene.PointLayer({ zIndex: 2 }) .source(data.list, { diff --git a/src/core/layer.js b/src/core/layer.js index 9cad42e7f2..084b8a6291 100644 --- a/src/core/layer.js +++ b/src/core/layer.js @@ -213,6 +213,10 @@ export default class Layer extends Base { } texture() { + } + fitBounds() { + const extent = this.layerSource.data.extent; + this.scene.fitBounds(extent); } hide() { this._visible(false); @@ -472,10 +476,10 @@ export default class Layer extends Base { } _initEvents() { this.scene.on('pick-' + this.layerId, e => { - const { featureId, point2d, type } = e; + let { featureId, point2d, type } = e; if (featureId < -100 && this._activeIds !== null) { - this.emit('mouseleave'); - return; + type = 'mouseleave'; + featureId = this._activeIds[0]; } const feature = this.layerSource.getSelectFeature(featureId); const lnglat = this.scene.containerToLngLat(point2d); @@ -483,6 +487,7 @@ export default class Layer extends Base { featureId, feature, pixel: point2d, + type, lnglat: { lng: lnglat.lng, lat: lnglat.lat } }; if (featureId >= 0) { diff --git a/src/core/source.js b/src/core/source.js index 230e9c3b33..02d29352fa 100644 --- a/src/core/source.js +++ b/src/core/source.js @@ -2,6 +2,7 @@ import Base from './base'; import Controller from './controller/index'; import { getTransform, getParser } from '../source'; +import { extent } from '../util/geo'; import { getMap } from '../map/index'; export default class Source extends Base { getDefaultCfg() { @@ -32,6 +33,7 @@ export default class Source extends Base { const { type = 'geojson' } = parser; const data = this.get('data'); this.data = getParser(type)(data, parser); + this.data.extent = extent(this.data.dataArray); } /** * 数据统计 @@ -40,7 +42,8 @@ export default class Source extends Base { const trans = this._transforms; trans.forEach(tran => { const { type } = tran; - this.data = getTransform(type)(this.data, tran); + const data = getTransform(type)(this.data, tran); + Object.assign(this.data, data); }); this._transforms = trans; } diff --git a/src/geom/shader/point_vert.glsl b/src/geom/shader/point_vert.glsl index a39283badf..8ef9a53052 100644 --- a/src/geom/shader/point_vert.glsl +++ b/src/geom/shader/point_vert.glsl @@ -1,4 +1,5 @@ precision highp float; +attribute float pickingId; attribute vec4 a_color; attribute float a_size; attribute float a_shape; diff --git a/src/geom/shader/shaderChunks/pick_color.glsl b/src/geom/shader/shaderChunks/pick_color.glsl new file mode 100644 index 0000000000..928d8cea72 --- /dev/null +++ b/src/geom/shader/shaderChunks/pick_color.glsl @@ -0,0 +1,7 @@ + vec4 id_topickColor(float pickingId) { + float id = step(0.,pickingId) * pickingId; + vec3 a = fract(vec3(1.0/255.0, 1.0/(255.0*255.0), 1.0/(255.0*255.0*255.0)) * id); + a -= a.xxy * vec3(0.0, 1.0/255.0, 1.0/255.0); + vec4 worldId = vec4(a,1); + return worldId + } \ No newline at end of file diff --git a/src/map/AMap.js b/src/map/AMap.js index 6e9ef3b5df..68f1d9c67e 100644 --- a/src/map/AMap.js +++ b/src/map/AMap.js @@ -17,7 +17,7 @@ export default class GaodeMap extends Base { let d = Math.PI / 180; let x = lnglat[0] * d; let y = lat * d; - y = Math.log(Math.tan((Math.PI / 4) + (y / 2))); + y = Math.log(Math.tan(Math.PI / 4 + y / 2)); const a = 0.5 / Math.PI, b = 0.5, c = -0.5 / Math.PI; @@ -34,14 +34,13 @@ export default class GaodeMap extends Base { setTimeout(() => { this.emit('mapLoad'); }, 100); - } initMap() { const mapStyle = this.get('mapStyle'); switch (mapStyle) { - case 'dark' : + case 'dark': this.set('mapStyle', Theme.DarkTheme.mapStyle); break; case 'light': @@ -52,7 +51,6 @@ export default class GaodeMap extends Base { } this.set('zooms', [ this.get('minZoom'), this.get('maxZoom') ]); this.map = new AMap.Map(this.container, this._attrs); - } asyncCamera(engine) { this._engine = engine; @@ -64,7 +62,7 @@ export default class GaodeMap extends Base { let { fov, near, far, height, pitch, rotation, aspect } = mapCamera; pitch *= DEG2RAD; rotation *= DEG2RAD; - camera.fov = 180 * fov / Math.PI; + camera.fov = (180 * fov) / Math.PI; camera.aspect = aspect; camera.near = near; camera.far = far; @@ -97,32 +95,78 @@ export default class GaodeMap extends Base { const canvasContainer = document.getElementById(this.container); this.canvasContainer = canvasContainer; this.renderDom = document.createElement('div'); - this.renderDom.style.cssText += 'position: absolute;top: 0; z-index:1;height: 100%;width: 100%;pointer-events: none;'; + this.renderDom.style.cssText += + 'position: absolute;top: 0; z-index:1;height: 100%;width: 100%;pointer-events: none;'; this.renderDom.id = 'l7_canvaslayer'; canvasContainer.appendChild(this.renderDom); } mixMap(scene) { const map = this.map; - scene.getZoom = () => { return map.getZoom(); }; - scene.getCenter = () => { return map.getCenter(); }; - scene.getSize = () => { return map.getSize(); }; - scene.getPitch = () => { return map.getPitch(); }; - scene.getRotation = () => { return map.getRotation(); }; - scene.getStatus = () => { return map.getStatus(); }; - scene.getScale = () => { return map.getScale(); }; - scene.getZoom = () => { return map.getZoom(); }; - scene.setZoom = () => { return map.setZoom(); }; - scene.setBounds = () => { return map.setBounds(); }; - scene.setRotation = () => { return map.setRotation(); }; - scene.zoomIn = () => { return map.zoomIn(); }; - scene.setRotation = () => { return map.setRotation(); }; - scene.zoomOut = () => { return map.zoomOut(); }; - scene.panTo = () => { return map.panTo(); }; - scene.panBy = () => { return map.panBy(); }; - scene.setPitch = () => { return map.setPitch(); }; - scene.pixelToLngLat = () => { return map.pixelToLngLat(); }; - scene.lngLatToPixel = () => { return map.lngLatToPixel(); }; - scene.setMapStyle = () => { return map.setMapStyle(); }; + scene.getZoom = () => { + return map.getZoom(); + }; + scene.getCenter = () => { + return map.getCenter(); + }; + scene.getSize = () => { + return map.getSize(); + }; + scene.getPitch = () => { + return map.getPitch(); + }; + scene.getRotation = () => { + return map.getRotation(); + }; + scene.getStatus = () => { + return map.getStatus(); + }; + scene.getScale = () => { + return map.getScale(); + }; + scene.getZoom = () => { + return map.getZoom(); + }; + scene.setZoom = () => { + return map.setZoom(); + }; + scene.setBounds = () => { + return map.setBounds(); + }; + scene.setRotation = () => { + return map.setRotation(); + }; + scene.zoomIn = () => { + return map.zoomIn(); + }; + scene.setRotation = () => { + return map.setRotation(); + }; + scene.zoomOut = () => { + return map.zoomOut(); + }; + scene.panTo = () => { + return map.panTo(); + }; + scene.panBy = () => { + return map.panBy(); + }; + scene.setPitch = () => { + return map.setPitch(); + }; + scene.pixelToLngLat = () => { + return map.pixelToLngLat(); + }; + scene.lngLatToPixel = () => { + return map.lngLatToPixel(); + }; + scene.setMapStyle = () => { + return map.setMapStyle(); + }; + scene.fitBounds = extent => { + return map.setBounds( + new AMap.Bounds([ extent[0], extent[1] ], [ extent[2], extent[3] ]) + ); + }; scene.containerToLngLat = pixel => { const ll = new AMap.Pixel(pixel.x, pixel.y); return map.containerToLngLat(ll); diff --git a/src/map/gaodeMap.js b/src/map/gaodeMap.js deleted file mode 100644 index 4b4ff3eb5c..0000000000 --- a/src/map/gaodeMap.js +++ /dev/null @@ -1,69 +0,0 @@ -export default class GaodeMap { - constructor(map) { - this.map = map; - } - getZoom() { - return this.map.getZoom(); - } - getCenter() { - return this.map.getCenter(); - } - getSize() { - return this.map.getSize(); - } - getPitch() { - return this.map.getPitch(); - } - getRotation() { - return this.map.getRotation(); - } - getStatus() { - return this.map.getStatus(); - } - getScale() { - return this.map.getScale(); - } - setZoom(zoom) { - return this.map.setZoom(zoom); - } - setCenter(lnglat) { - return this.map.setCenter(lnglat); - } - setBounds(bounds) { - return this.map.setBounds(bounds); - } - setRotation(rotation) { - return this.map.setRotation(rotation); - } - zoomIn() { - return this.map.zoomIn(); - } - zoomOut() { - return this.map.zoomOut(); - } - panTo(lngLat) { - return this.map.panTo(lngLat); - } - panBy(x, y) { - return this.map.panBy(x, y); - } - setPitch(pitch) { - return this.map.setPitch(pitch); - } - pixelToLngLat(lngLat, level) { - return this.map.pixelToLngLat(lngLat, level); - } - lngLatToPixel(lngLat, level) { - return this.map.lnglatToPixel(lngLat, level); - - } - containerToLngLat(pixel) { - const ll = new AMap.Pixel(pixel.x, pixel.y); - return this.map.containerToLngLat(ll); - } - setMapStyle(style) { - return this.map.setMapStyle(style); - } - - -} diff --git a/src/source/parser/csv.js b/src/source/parser/csv.js index f727d18209..69dec1259c 100644 --- a/src/source/parser/csv.js +++ b/src/source/parser/csv.js @@ -5,9 +5,9 @@ export default function csv(data, cfg) { const resultdata = []; csvdata.forEach((col, featureIndex) => { let coordinates = []; - if (x && y) { coordinates = [ col[x], col[y] ]; } // 点数据 + if (x && y) { coordinates = [ col[x] * 1, col[y] * 1 ]; } // 点数据 if (x1 && y1) { // 弧线 或者线段 - coordinates = [[ col[x], col[y] ], [ col[x1], col[y1] ]]; + coordinates = [[ col[x] * 1, col[y] * 1 ], [ col[x1] * 1, col[y1] * 1 ]]; } col._id = featureIndex + 1; const dataItem = { diff --git a/src/util.js b/src/util.js index 77d8948ffc..d2c4583466 100644 --- a/src/util.js +++ b/src/util.js @@ -1,8 +1,3 @@ -/** - * @fileOverview The util method based on the lodash. - * @author dxq613@gmail.com - * @see https://github.com/lodash/lodash - */ import Utils from '@antv/util'; const Util = Utils.mix({}, Utils, { @@ -13,33 +8,7 @@ const Util = Utils.mix({}, Utils, { isNaN, snapEqual: Utils.isNumberEqual, remove: Utils.pull, - inArray: Utils.contains, - /** - * 将用户输入的 padding 转换成 [top, right, bottom, right] 的模式 - * @param {Number|Array} padding 输入的padding - * @return {Array} 四个padding 值 - */ - toAllPadding(padding) { - let top = 0; - let left = 0; - let right = 0; - let bottom = 0; - - if (Util.isNumber(padding) || Util.isString(padding)) { - top = left = right = bottom = padding; - } else if (Util.isArray(padding)) { - top = padding[0]; - right = !Util.isNil(padding[1]) ? padding[1] : padding[0]; - bottom = !Util.isNil(padding[2]) ? padding[2] : padding[0]; - left = !Util.isNil(padding[3]) ? padding[3] : right; - } else if (Util.isObject(padding)) { - top = padding.top || 0; - right = padding.right || 0; - bottom = padding.bottom || 0; - left = padding.left || 0; - } - return [ top, right, bottom, left ]; - } + inArray: Utils.contains }); Util.Array = { diff --git a/src/util/geo.js b/src/util/geo.js new file mode 100644 index 0000000000..1930036cf9 --- /dev/null +++ b/src/util/geo.js @@ -0,0 +1,25 @@ +/** + * 计算地理数据范围 + * @param {dataArray} data 地理坐标数据 + * @return {Array} extent + */ +export function extent(data) { + const extent = [ Infinity, Infinity, -Infinity, -Infinity ]; + data.forEach(item => { + const { coordinates } = item; + if (Array.isArray(coordinates[0])) { + coordinates.forEach(coord => { + if (extent[0] > coord[0]) extent[0] = coord[0]; + if (extent[1] > coord[1]) extent[1] = coord[1]; + if (extent[2] < coord[0]) extent[2] = coord[0]; + if (extent[3] < coord[1]) extent[3] = coord[1]; + }); + } else { + if (extent[0] > coordinates[0]) extent[0] = coordinates[0]; + if (extent[1] > coordinates[1]) extent[1] = coordinates[1]; + if (extent[2] < coordinates[0]) extent[2] = coordinates[0]; + if (extent[3] < coordinates[1]) extent[3] = coordinates[1]; + } + }); + return extent; +}