From 85f9fae68d78c2981be9a8cb3fefbd4119e00808 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Wed, 18 Dec 2019 14:32:11 +0800 Subject: [PATCH] docs: add layer docs --- docs/api/layer/layer.zh.md | 190 ++++++++++++++---- .../core/src/services/config/ConfigService.ts | 2 +- .../renderer/passes/PixelPickingPass.ts | 7 +- stories/Layers/components/Point.tsx | 28 ++- 4 files changed, 187 insertions(+), 40 deletions(-) diff --git a/docs/api/layer/layer.zh.md b/docs/api/layer/layer.zh.md index 5b2be78088..bf4a3519bd 100644 --- a/docs/api/layer/layer.zh.md +++ b/docs/api/layer/layer.zh.md @@ -40,23 +40,7 @@ new Layer(option) 图层显示最大缩放等级 （0-18）   {number}  default 18 -## 鼠标事件 - -⚠️ beta 版当前不支持，正式版会支持 - -```javascript -layer.on('click', (ev) => {}); // 鼠标左键点击图层事件 -layer.on('dblclick', (ev) => {}); // 鼠标左键双击图层事件 -layer.on('mousemove', (ev) => {}); // 鼠标在图层上移动时触发 -layer.on('mouseover', (ev) => {}); // 鼠标移入图层要素内时触发 -layer.on('mouseout', (ev) => {}); // 鼠标移出图层要素时触发 -layer.on('mouseup', (ev) => {}); // 鼠标在图层上单击抬起时触发 -layer.on('mousedown', (ev) => {}); // 鼠标在图层上单击按下时触发 -layer.on('mouseleave', (ev) => {}); // 鼠标离开图层要素 -layer.on('rightclick', (ev) => {}); // 鼠标右键图层要素 -``` - -## 方法 +# 方法 ### source @@ -101,8 +85,6 @@ layer.source(data, { }); ``` -### - ### scale cscle('field', scaleConfig) @@ -121,21 +103,15 @@ cscle('field', scaleConfig) } ``` +## 视觉编码方法 + +可视化编码是将数据转换为可视形式的过程，L7 目前支持形状，大小，颜色 3 种视觉通过，你可以指定数据字段，为不同要素设置不同的图形属性。 + ### size -将数据值映射到图形的大小上的方法。 +将数据值映射到图形的大小上的方法,具体 size 的表示具体意义可以查看对应图层的文档 -**注意：** - -不同图层的 size 的含义有所差别： - -- point 图形的 size 影响点的半径大小和高度； - -- line, arc, path 中的 size 影响线的粗细,和高度； - -- polygon size 影响的是高度 - -```javascript +``` pointLayer.size(10); // 常量 pointLayer.size('type'); // 使用字段映射到大小 pointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值 @@ -265,24 +241,51 @@ layer.color('gender*age', (gender, age) => { ### style -用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放 - -- fill +全局设置图形显示属性 - opacity   设置透明度 -- stroke 线填充颜色 +- stroke 线填充颜色 仅点图层支持 -- strokeWidth 线的宽度 +- strokeWidth 线的宽度 仅点图层支持 ```javascript layer.style({ - fill: 'red', opacity: 0.8, stroke: 'white', }); ``` +## 图层更新方法 + +如果已经添加了图层，需要修改图层显示样式可以再次调用图形映射方法，然后调用 `scene.render()`更新渲染即可 + +### 样式更新 + +```javascript +layer.color('blue'); +layer.size(10); +layer.style({}); +scene.render(); +``` + +### setData + +更新 Source 数据 + +参数: + +- data 数据 +- option 默认和初始配置项一致，如果数据格式相同可不设置 + +调用 setData 方法会自动更新图层渲染 + +```javascript +layer.setData(data); +``` + +## 图层控制方法 + ### show 图层显示 @@ -299,6 +302,16 @@ layer.show(); layer.hide(); ``` +### isVisable + +图层是否可见 + +return `true | false` + +### setIndex + +设置图层绘制顺序 + ### fitBounds 缩放到图层范围 @@ -306,3 +319,106 @@ layer.hide(); ```javascript layer.fitBounds(); ``` + +### setMinZoom + +### setMaxZoom + +## 图层交互方法 + +### active + +开启或者关闭 mousehover 元素高亮效果 + +### setActive + +根据元素 ID 设置指定元素 hover 高亮 + +### select + +开启或者关闭 mouseclick 元素选中高亮效果 + +### setSelect + +根据元素 ID 设置指定元素 click 选中 高亮 + +## 鼠标事件 + +鼠标事件回调参数 target + +```typescript +``` + +- x: number 鼠标  在地图位置 x 坐标 +- y: number 鼠标  在地图位置 y 坐标 +- type: string 鼠标事件类型 +- lngLat: ILngLat {lng:number, lat: number }; 鼠标所在位置经纬度 +- feature: any; 数据选中的地理要素信息 +- featureId: number | null; 数据选中的地理要素的 ID + +### click + +点击事件 + +### mousemove + +鼠标移动事件 + +### mouseout + +鼠标移除 + +### mouseup + +鼠标按下 + +### mousedown + +鼠标向下 + +### contextmenu + +鼠标右键 + +### unclick + +点击未拾取到元素 + +### unmousemove + +鼠标移动未拾取到元素 + +### unmouseup + +鼠标抬起未拾取到元素 + +### unmousedown + +鼠标按下未拾取到元素 + +### uncontextmenu + +鼠标右键位拾取到元素 + +### unpick + +所有鼠标事件未拾取到 + +使用示例 + +```javascript +layer.on('click', (ev) => {}); // 鼠标左键点击图层事件 +layer.on('mousemove', (ev) => {}); // 鼠标在图层上移动时触发 +layer.on('mouseout', (ev) => {}); // 鼠标移出图层要素时触发 +layer.on('mouseup', (ev) => {}); // 鼠标在图层上单击抬起时触发 +layer.on('mousedown', (ev) => {}); // 鼠标在图层上单击按下时触发 +layer.on('contextmenu', (ev) => {}); // 图层要素点击右键菜单 + +// 鼠标在图层外的事件 +layer.on('unclick', (ev) => {}); // 图层外点击 +layer.on('unmousemove', (ev) => {}); // 图层外移动 +layer.on('unmouseup', (ev) => {}); // 图层外鼠标抬起 +layer.on('unmousedown', (ev) => {}); // 图层外单击按下时触发 +layer.on('uncontextmenu', (ev) => {}); // 图层外点击右键 +layer.on('unpick', (ev) => {}); // 图层外的操作的所有事件 +``` diff --git a/packages/core/src/services/config/ConfigService.ts b/packages/core/src/services/config/ConfigService.ts index 2f607ee31a..cb1db914a9 100644 --- a/packages/core/src/services/config/ConfigService.ts +++ b/packages/core/src/services/config/ConfigService.ts @@ -59,7 +59,7 @@ const defaultLayerConfig: Partial = { enableSelect: false, highlightColor: 'red', selectColor: 'blue', - enableTAA: false, + enableTAA: true, jitterScale: 1, enableLighting: false, }; diff --git a/packages/core/src/services/renderer/passes/PixelPickingPass.ts b/packages/core/src/services/renderer/passes/PixelPickingPass.ts index 7f0421ee39..83419a005a 100644 --- a/packages/core/src/services/renderer/passes/PixelPickingPass.ts +++ b/packages/core/src/services/renderer/passes/PixelPickingPass.ts @@ -185,10 +185,15 @@ export default class PixelPickingPass< x, y, lngLat, - type: this.layer.getCurrentPickId() === null ? 'unpick' : 'mouseout', + type: + this.layer.getCurrentPickId() === null ? 'un' + type : 'mouseout', featureId: null, feature: null, }; + this.triggerHoverOnLayer({ + ...target, + type: 'unpick', + }); this.triggerHoverOnLayer(target); this.layer.setCurrentPickId(null); } diff --git a/stories/Layers/components/Point.tsx b/stories/Layers/components/Point.tsx index dc8998259c..d8404f77ca 100644 --- a/stories/Layers/components/Point.tsx +++ b/stories/Layers/components/Point.tsx @@ -44,7 +44,33 @@ export default class Point3D extends React.Component { scene.addLayer(pointLayer); pointLayer.on('mousemove', (e) => { const id = e.featureId; - console.log(id); + console.log(e.type); + pointLayer.setActive(id); + }); + pointLayer.on('mousedown', (e) => { + const id = e.featureId; + console.log(e.type); + pointLayer.setActive(id); + }); + pointLayer.on('mouseup', (e) => { + const id = e.featureId; + console.log(e.type); + pointLayer.setActive(id); + }); + pointLayer.on('click', (e) => { + const id = e.featureId; + console.log(e.type); + pointLayer.setActive(id); + }); + + pointLayer.on('contextmenu', (e) => { + const id = e.featureId; + console.log(e.type); + pointLayer.setActive(id); + }); + pointLayer.on('unpick', (e) => { + const id = e.featureId; + console.log(e.type); pointLayer.setActive(id); });