m4-w-fast 1.1.0 → 1.1.1

package/README.md

@@ -1,9 +1,15 @@
 # m4文件绘图程序
 
-![img.png](img.png)
+[![npm version](https://img.shields.io/npm/v/m4-w-fast.svg)](https://www.npmjs.com/package/m4-w-fast)
+[![npm downloads (monthly)](https://img.shields.io/npm/dm/m4-w-fast.svg)](https://www.npmjs.com/package/m4-w-fast)
+
+[在线 demo](https://priestqing.github.io/m4-w-fast/)
+---
 ![img_1.png](img_1.png)
 
 ### 更新说明
+- v1.1.1
+  - 新增基于 `Leaflet` + `WebGPU` 的道路图层方案, 支持将 `LineString` / `MultiLineString` 道路 GeoJSON 按栅格值着色
 - v1.1.0
   - 正式启动主推 `leaflet canvas图层`方案
   - 现已支持`webgl2`, `webgpu`
@@ -64,8 +70,13 @@ npm i m4-w-fast
 # leaflet canvas图层
 - 理论上可以流畅的过滤数据或者放大不虚, 这可能是当前包体中显示最优的方案
 - 现已支持 webgl2, webgpu
+- UMD 使用 `M4WRasterOverlay`
 
 ```ts
+import { createRasterLeafletLayer, loadRasterGrid } from 'm4-w-fast/raster-overlay'
+
+//...
+
 const grid = await loadRasterGrid({
   type: 'tif',
   url: 'xxx'
@@ -102,7 +113,8 @@ const layer = createRasterLeafletLayer({
     maxValue: Number(maxInput.value)    // 过滤的最大值
   },
   opacity: 1,
-  renderMode: 'step',
+  colorMode: 'step', // 'step' | 'smooth'
+  sampleMode: 'interpolate', // 'interpolate' | 'cell'
   pane: 'raster-pane',
   tooltip: {
       enabled: true,
@@ -124,9 +136,67 @@ layer.on('raster:click', event => {
 
 ```
 
+# 道路 WebGPU 图层
+
+- 用于把道路 GeoJSON 叠加到 Leaflet 地图上, 并根据栅格数据采样值给道路着色
+- 当前道路示例建议使用 `rendererType: 'webgpu'`, 浏览器需要支持 `navigator.gpu`
+- 道路数据支持 `LineString` / `MultiLineString`
+- `grid` 和 `source` 二选一传入, `grid` 可以通过 `loadRasterGrid()` 预加载
+- 如果道路和栅格是 WGS84, 底图使用高德 GCJ-02, 设置 `coordinateTransform: 'wgs84-to-gcj02'`
+- UMD 使用 `M4WRoadOverlay`。
+
+```ts
+import * as L from 'leaflet'
+import { loadRasterGrid } from 'm4-w-fast/raster-overlay'
+import { createRoadLeafletLayer } from 'm4-w-fast/road-overlay'
+import type { RoadGeoJsonInput } from 'm4-w-fast/road-overlay'
+
+const map = L.map('map', {
+    center: [35.97, 103.75],
+    zoom: 11
+})
+
+map.createPane('road-pane')
+
+const roadPane = map.getPane('road-pane')
+
+if (roadPane) {
+    roadPane.style.zIndex = '400'
+}
+
+// 这里是你的道路 GeoJSON, 只支持 LineString / MultiLineString
+const roadsResponse = await fetch('/road.json')
+const roads = await roadsResponse.json() as RoadGeoJsonInput
+
+const grid = await loadRasterGrid({
+    type: 'micaps4',
+    url: '/2510270910.015'
+})
+
+const roadLayer = await createRoadLeafletLayer({
+    rendererType: 'webgpu',
+    coordinateTransform: 'wgs84-to-gcj02',
+    roads,
+    grid,
+    colorStops: legend,
+    colorRange: {
+        minValue: 0,
+        maxValue: 75
+    },
+    colorMode: 'step',
+    sampleMode: 'interpolate',
+    opacity: 1,
+    lineWidth: 8,
+    pane: 'road-pane'
+})
+
+roadLayer.addTo(map)
+```
+
 ---
 
 # geojson图层
+- UMD 使用 `M4WFast`
 
 2. 使用示例
 ```vue
@@ -202,6 +272,54 @@ read.setParams({
 ```
 
 ### 类型参照
+
+> RasterLeafletLayerCreateOptions
+
+| 参数 | 说明 | 类型 | 默认值 |
+|----|----|----|----|
+| `rendererType` | 渲染方式 | `'cpu' \| 'webgl' \| 'webgl2' \| 'webgpu'` | 必填 |
+| `grid` | 栅格数据, 可通过 `loadRasterGrid()` 获取 | `RasterGrid` | 必填 |
+| `colorStops` | 色标配置 | `{ min: number, max: number, color: string }[]` | 必填 |
+| `colorRange` | 当前显示的数据范围, 常用于滑块过滤 | `{ minValue: number, maxValue: number }` | 色标最小最大值 |
+| `opacity` | 图层透明度 | `number` | 渲染器默认值 |
+| `colorMode` | 颜色映射模式 | `'step' \| 'smooth'` | `'step'` |
+| `sampleMode` | 栅格采样模式 | `'interpolate' \| 'cell'` | `'interpolate'` |
+| `pane` | Leaflet pane 名称 | `string` | Leaflet 默认 overlayPane |
+| `tooltip` | 内置 tooltip 配置 | `RasterTooltipOptions` | 不启用 |
+| `onHover` | 鼠标移动查询回调 | `(result) => void` | 无 |
+| `onClick` | 鼠标点击查询回调 | `(result) => void` | 无 |
+
+> RasterLeafletLayer
+
+| 方法 | 说明 |
+|----|----|
+| `setParams(params)` | 使用参数方式更新栅格数据 |
+| `setSource(source)` | 使用 `tif` / `micaps4` / `params` 数据源更新栅格数据 |
+| `setGrid(grid)` | 直接更新栅格数据并重新上传纹理 |
+| `setColorStops(colorStops)` | 动态更新色标 |
+| `setColorRange(range)` | 动态更新显示值范围 |
+| `setColorMode(colorMode)` | 动态切换色标模式, 支持 `step` / `smooth` |
+| `setSampleMode(sampleMode)` | 动态切换采样模式, 支持 `interpolate` / `cell` |
+| `setOpacity(opacity)` | 动态设置图层透明度 |
+| `redraw()` | 手动重绘当前视口 |
+| `getCanvas()` | 获取当前图层 canvas, 可用于导出图片 |
+| `queryValueAt(point)` | 按统一 `x/y` 坐标查询栅格值 |
+| `queryValueAtLatLng(latLng)` | 按 Leaflet 经纬度查询栅格值 |
+
+---
+
+> RoadLeafletLayer
+
+| 方法 | 说明 |
+|----|----|
+| `redraw()` | 手动重绘道路图层 |
+| `setOpacity(opacity)` | 动态设置道路透明度 |
+| `setLineWidth(lineWidth)` | 动态设置道路线宽 |
+| `setColorMode(colorMode)` | 动态切换色标模式, 支持 `step` / `smooth` |
+| `setSampleMode(sampleMode)` | 动态切换采样模式, 支持 `interpolate` / `cell` |
+
+---
+
 > ReadConfig
 
 | 参数 | 说明 | 类型        | 默认值   |

package/dist/road-overlay/coordinateTransform.d.ts

@@ -0,0 +1 @@
+export declare const wgs84ToGcj02: (lng: number, lat: number) => [number, number];

package/dist/road-overlay/coordinateTransform.js

@@ -0,0 +1 @@
+(function(_0x857358,_0x4c4cf8){const _0x292284=_0x3884,_0x13627e=_0x857358();while(!![]){try{const _0x481ae7=-parseInt(_0x292284(0x1dd))/0x1+parseInt(_0x292284(0x1e0))/0x2*(parseInt(_0x292284(0x1e8))/0x3)+-parseInt(_0x292284(0x1de))/0x4+-parseInt(_0x292284(0x1dc))/0x5+-parseInt(_0x292284(0x1e1))/0x6*(parseInt(_0x292284(0x1e5))/0x7)+-parseInt(_0x292284(0x1df))/0x8+-parseInt(_0x292284(0x1e6))/0x9*(-parseInt(_0x292284(0x1db))/0xa);if(_0x481ae7===_0x4c4cf8)break;else _0x13627e['push'](_0x13627e['shift']());}catch(_0x285f5c){_0x13627e['push'](_0x13627e['shift']());}}}(_0x54b8,0x97e29));function _0x3884(_0x2ee51b,_0x307973){const _0x54b83f=_0x54b8();return _0x3884=function(_0x388467,_0xab08c4){_0x388467=_0x388467-0x1db;let _0x5e2999=_0x54b83f[_0x388467];return _0x5e2999;},_0x3884(_0x2ee51b,_0x307973);}function _0x54b8(){const _0xa38149=['160yoDxjO','500946UwURys','cos','sin','abs','35pVKVHF','126yTLRZk','sqrt','18777kONwWb','1457230CGSOiK','1886325cmXfZi','410901GyTGAy','442168KMWNkR','4820464PYOLgs'];_0x54b8=function(){return _0xa38149;};return _0x54b8();}const PI=Math['PI'],AXIS=0x615305,OFFSET=0.006693421622965943,isOutsideChina=(_0x541120,_0x449bfa)=>{return _0x541120<72.004||_0x541120>137.8347||_0x449bfa<0.8293||_0x449bfa>55.8271;},transformLat=(_0x3edb63,_0x110c46)=>{const _0x58f593=_0x3884;let _0x5e8ee9=-0x64+0x2*_0x3edb63+0x3*_0x110c46+0.2*_0x110c46*_0x110c46+0.1*_0x3edb63*_0x110c46+0.2*Math[_0x58f593(0x1e7)](Math['abs'](_0x3edb63));return _0x5e8ee9+=(0x14*Math[_0x58f593(0x1e3)](0x6*_0x3edb63*PI)+0x14*Math[_0x58f593(0x1e3)](0x2*_0x3edb63*PI))*0x2/0x3,_0x5e8ee9+=(0x14*Math[_0x58f593(0x1e3)](_0x110c46*PI)+0x28*Math[_0x58f593(0x1e3)](_0x110c46/0x3*PI))*0x2/0x3,_0x5e8ee9+=(0xa0*Math['sin'](_0x110c46/0xc*PI)+0x140*Math[_0x58f593(0x1e3)](_0x110c46*PI/0x1e))*0x2/0x3,_0x5e8ee9;},transformLng=(_0x61cf1f,_0x15fc5d)=>{const _0x2d73f2=_0x3884;let _0x53ebe3=0x12c+_0x61cf1f+0x2*_0x15fc5d+0.1*_0x61cf1f*_0x61cf1f+0.1*_0x61cf1f*_0x15fc5d+0.1*Math[_0x2d73f2(0x1e7)](Math[_0x2d73f2(0x1e4)](_0x61cf1f));return _0x53ebe3+=(0x14*Math[_0x2d73f2(0x1e3)](0x6*_0x61cf1f*PI)+0x14*Math['sin'](0x2*_0x61cf1f*PI))*0x2/0x3,_0x53ebe3+=(0x14*Math[_0x2d73f2(0x1e3)](_0x61cf1f*PI)+0x28*Math['sin'](_0x61cf1f/0x3*PI))*0x2/0x3,_0x53ebe3+=(0x96*Math[_0x2d73f2(0x1e3)](_0x61cf1f/0xc*PI)+0x12c*Math['sin'](_0x61cf1f/0x1e*PI))*0x2/0x3,_0x53ebe3;};export const wgs84ToGcj02=(_0x32fc93,_0x2726ef)=>{const _0x3e286a=_0x3884;if(isOutsideChina(_0x32fc93,_0x2726ef))return[_0x32fc93,_0x2726ef];let _0x3bcdd6=transformLat(_0x32fc93-0x69,_0x2726ef-0x23),_0xdc4aa2=transformLng(_0x32fc93-0x69,_0x2726ef-0x23);const _0x4bf915=_0x2726ef/0xb4*PI;let _0x3e3689=Math[_0x3e286a(0x1e3)](_0x4bf915);_0x3e3689=0x1-OFFSET*_0x3e3689*_0x3e3689;const _0x4d7c2c=Math[_0x3e286a(0x1e7)](_0x3e3689);return _0x3bcdd6=_0x3bcdd6*0xb4/(AXIS*(0x1-OFFSET)/(_0x3e3689*_0x4d7c2c)*PI),_0xdc4aa2=_0xdc4aa2*0xb4/(AXIS/_0x4d7c2c*Math[_0x3e286a(0x1e2)](_0x4bf915)*PI),[_0x32fc93+_0xdc4aa2,_0x2726ef+_0x3bcdd6];};