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

fix(pick):mousemove

This commit is contained in:
李正学 2018-10-31 18:01:56 +08:00
parent df35bb7dff
commit 6fc36a6ec6
9 changed files with 91 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
demos/03_choropleths_polygon.html
View File

@ -6,6 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="geometry" content="diagram"> <meta name="geometry" content="diagram">
<link rel="stylesheet" href="./assets/common.css"> <link rel="stylesheet" href="./assets/common.css">
<link rel="stylesheet" href="./assets/info.css">
<title>hexagon demo</title> <title>hexagon demo</title>
<style> <style>
@ -14,8 +15,15 @@
</head> </head>
<body> <body>
<div id = 'gui' style="position:absolute;top:0px;right:0px;z-index:2;"></div>
<div id="map"></div> <div id="map"></div>
<div id ="info" class ="tooltip">
</div>
<div class='info-panel top-right'>
<h4>全国各地市空气质量指数</h4>
<p>城市：<span id="city" class="lnglat"></span></p>
<p>AQI<span id="aqi" class="lnglat"></span></p>
<div>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script> <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/jquery-3.2.1.min.js"></script>
<script src="./assets/dat.gui.min.js"></script> <script src="./assets/dat.gui.min.js"></script>
@ -33,7 +41,7 @@ window.scene = scene;
scene.on('load', () => { scene.on('load', () => {
$.getJSON('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json', city => { $.getJSON('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json', city => {
citylayer = scene.PolygonLayer() const citylayer = scene.PolygonLayer()
.source(city) .source(city)
.color('pm2_5_24h', [ '#002466', '#0D408C', '#105CB3', '#1A76C7', '#2894E0', '#3CB4F0', '#65CEF7', '#98E3FA', '#CFF6FF', '#E8FCFF' ]) .color('pm2_5_24h', [ '#002466', '#0D408C', '#105CB3', '#1A76C7', '#2894E0', '#3CB4F0', '#65CEF7', '#98E3FA', '#CFF6FF', '#E8FCFF' ])
.shape('fill') .shape('fill')
@ -42,6 +50,10 @@ scene.on('load', () => {
opacity: 1 opacity: 1
}) })
.render(); .render();
citylayer.on('move',(e)=>{
$("#info").css({'left': e.pixel.x,'top':e.pixel.y});
$("#info").html(`<p>${e.feature.properties.area || e.feature.properties.name }<span">${e.feature.properties.aqi || 0}</span></p>`);
})
}); });
}); });

40
demos/assets/info.css Normal file
View File

@ -0,0 +1,40 @@
.top-right{
right: 10px;
position:absolute;
}
.bottom-right{
right: 0;
bottom: 10px;
position:absolute;
}
.info-panel {
width: 250px;
background: #fff;
box-shadow: 0 0 4px rgba(0,0,0,.15);
margin: 24px;
padding: 12px 24px;
outline: none;
z-index: 10;
}
.info-panel h4 {
font-size: 1em;
font-weight: 500;
margin: 8px 0;
}
.tooltip {
position:absolute;
pointer-events: none;
transition: opacity .2s;
padding: 4px;
background: rgba(0,0,0,.8);
color: #fff;
max-width: 300px;
font-size: 10px;
z-index: 9;
}
.tooltip p {
padding: 0;
margin: 0;
}

3
src/core/engine/index.js
View File

@ -28,10 +28,9 @@ export default class Engine extends EventEmitter {
} }
run() { run() {
this.engineID = requestAnimationFrame(() => {
this.update(); this.update();
this.engineID = requestAnimationFrame(this.run.bind(this)); this.engineID = requestAnimationFrame(this.run.bind(this));
});
} }
stop() { stop() {
cancelAnimationFrame(this.engineID); cancelAnimationFrame(this.engineID);

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

@ -52,8 +52,7 @@ class Picking {
this._mouseUpHandler = this._onMouseUp.bind(this); this._mouseUpHandler = this._onMouseUp.bind(this);
this._world._container.addEventListener('mouseup', this._mouseUpHandler, false); this._world._container.addEventListener('mouseup', this._mouseUpHandler, false);
this._world._container.addEventListener('mousemove', this._mouseUpHandler, false);
// this._world.on('move', this._onWorldMove, this);
} }
_onMouseUp(event) { _onMouseUp(event) {

19
src/core/layer.js
View File

@ -415,9 +415,21 @@ 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', (point2d, point3d, intersects) => { this.scene.on('pick', (e) => {
// Re-emit click event from the layer // Re-emit click event from the layer
this.emit('click', this, point2d, point3d, intersects); const { featureId, point2d, point3d, intersects } = e;
if(intersects.length === 0)
return;
const source = this.layerSource.get('data');
const feature = source.features[featureId];
const lnglat = this.scene.containerToLngLat(point2d);
const target = {
feature,
pixel:point2d,
lnglat:{lng:lnglat.lng,lat:lnglat.lat}
}
this.emit('click', target);
this.emit('move', target);
}); });
} }
/** /**
@ -535,7 +547,8 @@ export default class Layer extends Base {
colorAttr.needsUpdate =true colorAttr.needsUpdate =true
}); });
} }
destroy() { despose() {
this.destroy();
if(this._object3D && this._object3D.children){ if(this._object3D && this._object3D.children){
let child; let child;
for(let i =0;i<this._object3D.children.length;i++){ for(let i =0;i<this._object3D.children.length;i++){

4
src/core/scene.js
View File

@ -5,7 +5,7 @@ import Base from './base';
import LoadImage from './image'; import LoadImage from './image';
import Utils from '../util'; import Utils from '../util';
import { MapProvider } from '../map/provider'; import { MapProvider } from '../map/provider';
import AMap from '../map/AMap'; import GaodeMap from '../map/gaodeMap';
import Global from '../global'; import Global from '../global';
export default class Scene extends Base { export default class Scene extends Base {
getDefaultCfg() { getDefaultCfg() {
@ -32,7 +32,7 @@ export default class Scene extends Base {
const Map = new MapProvider(this.mapContainer, this._attrs); const Map = new MapProvider(this.mapContainer, this._attrs);
Map.on('mapLoad', () => { Map.on('mapLoad', () => {
this._initEngine(Map.renderDom); this._initEngine(Map.renderDom);
const sceneMap = new AMap(Map.map); const sceneMap = new GaodeMap(Map.map);
// eslint-disable-next-line // eslint-disable-next-line
Utils.assign(this.__proto__, sceneMap.__proto__); Utils.assign(this.__proto__, sceneMap.__proto__);
this.map = Map.map; this.map = Map.map;

14
src/geo/project.js
View File

@ -15,4 +15,18 @@ export function aProjectFlat(lnglat) {
y = scale * (c * y + d) - 106744817; y = scale * (c * y + d) - 106744817;
return { x, y }; return { x, y };
} }
export function world2LngLat(x, y) {
const scale = 256 << 20;
let d = Math.PI / 180;
const a = 0.5 / Math.PI,
b = 0.5,
c = -0.5 / Math.PI;
d = 0.5;
x = ((x + 215440491) / scale - b) / a;
y = ((y + 106744817) / scale - d) / c;
y = (Math.atan(Math.pow(Math.E,y)) - (Math.PI / 4)) *2;
const lat = y /d;
const lng = x / d;
return [lng,lat];
}

4
src/layer/polygonLayer.js
View File

@ -24,9 +24,7 @@ export default class PolygonLayer extends Layer {
}); });
const { attributes } = buffer; const { attributes } = buffer;
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3)); geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
// geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4)); geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1)); geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
this.geometry = geometry; this.geometry = geometry;
@ -38,13 +36,11 @@ export default class PolygonLayer extends Layer {
u_opacity: 1.0 u_opacity: 1.0
}); });
geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3)); geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3));
// geometry.addAttribute('faceUv', new THREE.Float32BufferAttribute(attributes.faceUv, 2));
polygonMesh = new THREE.Mesh(geometry, material); polygonMesh = new THREE.Mesh(geometry, material);
} }
this.add(polygonMesh); this.add(polygonMesh);
this.update(); this.update();
return this; return this;
} }
update() { update() {

5
src/map/AMap.js → src/map/gaodeMap.js
View File

@ -1,4 +1,4 @@
export default class AMap { export default class GaodeMap {
constructor(map) { constructor(map) {
this.map = map; this.map = map;
} }
@ -55,7 +55,8 @@ export default class AMap {
} }
containerToLngLat(pixel) { containerToLngLat(pixel) {
return this.map.containerToLngLat(pixel); const ll = new AMap.Pixel(pixel.x,pixel.y);
return this.map.containerToLngLat(ll);
} }
setMapStyle(style) { setMapStyle(style) {
return this.map.setMapStyle(style); return this.map.setMapStyle(style);