@geovisapp/geovis-mapbox-js

v2.0.9

Published

7 days ago

mapbox-gl的扩展功能-气象-风场

Downloads

328

0High
0Medium
0Low

chuhaoming

geovis-app

快速上手

通过CDN引入

注意： mapbox-gl版本必须>=3.4.0

html 部分

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>geovis-mapbox-sdk</title>
    <link rel="stylesheet" href="node_modules/mapbox-gl/dist/mapbox-gl.css">
    <script src="node_modules/mapbox-gl/dist/mapbox-gl.js"></script>
     <script type="text/javascript" src="./@geovisapp/geovis-mapbox-js/index.iife.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
  
      html,
      body,
      #app {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script>

mapboxgl.accessToken =
  'pk.eyJ1IjoidHVzaGFyLWZ1ZWxidWRkeSIsImEiOiJjbGIzYml6OWswY3EzM3dweDA1am82OGhqIn0.dQ99KMNUXLKu6MXi1VlwxA';
const map = new mapboxgl.Map({
  container: 'app',
  zoom: 1,
  center: [-75.789, 41.874],
  style: 'mapbox://styles/mapbox/light-v10',
  projection: 'globe'
});

const colors = [
  [-50, '#84027E'],
  [-40, '#92008D'],
  [-30, '#D800FF'],
  [-20, '#0013FF'],
  [-15, '#0079FF'],
  [-5, '#01CDF5'],
  [-0, '#03E0AC'],
  [5, '#03C246'],
  [15, '#CEF400'],
  [25, '#DB7815'],
  [35, '#981200'],
  [45, '#5B0043'],
  [50, '#50003B'],
];


//添加一张红黑图气象
// const TemperatureMapOptions = {
//   map: map,
//   images: [`https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/ec/202409/0208/tmp_2024090402404d3dfa2ec797ff5d.webp`],
//   id: 'TemperatureMap',
//   configs: [
//     { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.0, "lonmax": 180.0, "latmax": 85.051128 }
//   ],
//   colorStartValue: -50,
//   colorValueInterval: 100,
//   colors: colors,
//   currentTime: 0,
// };
// addWeatherLayer(TemperatureMapOptions);


//添加多张图红黑图气象并加入动画
const MultiImageTemperatureMapOptions= {
  map: map,
  images: [`https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_2024062109a9e2e4f1b7fb33c650.png`,
    `https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_20240621101b30f93a581a85a527.png`,
    `https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_20240621114c06d5eae80a69a981.png`,
    `https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_20240621128dbd5aeb0e26e21677.png`,
    `https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_20240621131b4b36e18c53a2439a.png`,
    `https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_2024062109a9e2e4f1b7fb33c650.png`,
    `https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_20240621101b30f93a581a85a527.png`,
    `https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_20240621114c06d5eae80a69a981.png`,
    `https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_20240621128dbd5aeb0e26e21677.png`,
    `https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_20240621131b4b36e18c53a2439a.png`],
  id: 'TemperatureMap',
  configs: [
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 },
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 },
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 },
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 },
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 },
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 },
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 },
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 },
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 },
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 }],
  colorStartValue: -50,
  colorValueInterval: 100,
  visibleValue: -50,
  // maxvisibleValue: 50,
  duration: 5,
  colors: colors,
  currentTime: 0,
};
let weatherLayer = GeovisApp.addWeatherLayer(MultiImageTemperatureMapOptions);
console.log(weatherLayer)
  weatherLayer.startAnimation();



const windOption = {
  map: map,
  id: 'wind',
  colors: [
    [-50, '#84027E'],
    [-40, '#92008D'],
    [-30, '#D800FF'],
    [-20, '#0013FF'],
    [-15, '#0079FF'],
    [-5, '#01CDF5'],
    [-0, '#03E0AC'],
    [5, '#03C246'],
    [15, '#CEF400'],
    [25, '#DB7815'],
    [35, '#981200'],
    [45, '#5B0043'],
    [50, '#50003B'],
  ],
  renderingMode: '3d',
  image: 'https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202407/1614/wind_spd_10_20240716162460f309f56519ac68.webp',
  config:
    { "min": 0.005158405431429486, "max": 31.311535958490598, "width": 1601, "height": 1597, "lonmin": -180, "latmin": -85, "lonmax": 180, "latmax": 85, "umin": -30.89267333984375, "umax": 23.25732666015625, "vmin": -21.20558837890625, "vmax": 20.33441162109375 }
  // colorStartValue:70,
  // pointSize:4,
  //colorValueInterval:5,
}

GeovisApp.addWindImageLayer(windOption);
  </script>
</html>

通过 npm 安装

npm i [email protected] @geovisapp/geovis-mapbox-js

   import mapboxgl, { Map } from 'mapbox-gl';
import "mapbox-gl/dist/mapbox-gl.css"
import { addWindImageLayer, addWeatherLayer, WindMapLayerOptions, TemperatureMapLayerOptions } from '@geovisapp/geovis-mapbox-js';
    mapboxgl.accessToken =
  'pk.eyJ1IjoidHVzaGFyLWZ1ZWxidWRkeSIsImEiOiJjbGIzYml6OWswY3EzM3dweDA1am82OGhqIn0.dQ99KMNUXLKu6MXi1VlwxA';
const map = new Map({
  container: 'app',
  zoom: 1,
  center: [-75.789, 41.874],
  style: 'mapbox://styles/mapbox/light-v10',
  projection: 'globe'
});

const colors: [number, string][] = [
  [-50, '#84027E'],
  [-40, '#92008D'],
  [-30, '#D800FF'],
  [-20, '#0013FF'],
  [-15, '#0079FF'],
  [-5, '#01CDF5'],
  [-0, '#03E0AC'],
  [5, '#03C246'],
  [15, '#CEF400'],
  [25, '#DB7815'],
  [35, '#981200'],
  [45, '#5B0043'],
  [50, '#50003B'],
];

//添加一张红黑图气象

// const TemperatureMapOptions: TemperatureMapLayerOptions = {
//   map: map,
//   images: [`https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/ec/202409/0208/tmp_2024090402404d3dfa2ec797ff5d.webp`],
//   id: 'TemperatureMap',
//   configs: [
//     { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.0, "lonmax": 180.0, "latmax": 85.051128 }
//   ],
//   colorStartValue: -50,
//   colorValueInterval: 100,
//   colors: colors,
//   currentTime: 0,
  // maxvisibleValue: 50,
// };

//const temperatureMapLayer = addWeatherLayer(TemperatureMapOptions);
//获取颜色值对应的温度值或者其他参数值
// map.on('click', function (e) {
//   console.log(e)
//   const x = e.point.x
//   const y = e.point.y
//   const gl = map.painter.context.gl;
//   const pixels = new Uint8Array(4);
//   gl.readPixels(x, gl.drawingBufferHeight - y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
//   // console.log(`rgba(${pixels[0]}, ${pixels[1]}, ${pixels[2]}, ${pixels[3]})`);
//   const temp1=getTemperatureFromColor( [pixels[0], pixels[1], pixels[2], pixels[3]], temperatureMapLayer.colorToTemperatureMap)
//   console.log(x,y,temp1);
// })
//添加多张图红黑图气象并加入动画
const MultiImageTemperatureMapOptions: TemperatureMapLayerOptions = {
  map: map,
  images: [`https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_2024062109a9e2e4f1b7fb33c650.png`,
    `https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_20240621101b30f93a581a85a527.png`,
    `https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_20240621114c06d5eae80a69a981.png`,
    `https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_20240621128dbd5aeb0e26e21677.png`,
    `https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_20240621131b4b36e18c53a2439a.png`,
    `https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_2024062109a9e2e4f1b7fb33c650.png`,
    `https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_20240621101b30f93a581a85a527.png`,
    `https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_20240621114c06d5eae80a69a981.png`,
    `https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_20240621128dbd5aeb0e26e21677.png`,
    `https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202406/2102/tmp_20240621131b4b36e18c53a2439a.png`],
  id: 'TemperatureMap',
  configs: [
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 },
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 },
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 },
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 },
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 },
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 },
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 },
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 },
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 },
    { "min": -76.16989687644012, "max": 39.52540191098425, "width": 1603, "height": 1597, "lonmin": -180.0, "latmin": -85.051128, "lonmax": 179.75, "latmax": 85.051128 }],
  colorStartValue: -50,
  colorValueInterval: 100,
  visibleValue: -50,
  maxvisibleValue: 50,
  duration: 5,
  colors: colors,
  currentTime: 0,
};
let weatherLayer = addWeatherLayer(MultiImageTemperatureMapOptions);
console.log(weatherLayer)
  weatherLayer.startAnimation();



const windOption: WindMapLayerOptions = {
  map: map,
  id: 'wind',
  colors: [
    [-50, '#84027E'],
    [-40, '#92008D'],
    [-30, '#D800FF'],
    [-20, '#0013FF'],
    [-15, '#0079FF'],
    [-5, '#01CDF5'],
    [-0, '#03E0AC'],
    [5, '#03C246'],
    [15, '#CEF400'],
    [25, '#DB7815'],
    [35, '#981200'],
    [45, '#5B0043'],
    [50, '#50003B'],
  ],
  renderingMode: '3d',
  image: 'https://io-qos.geovisearth.com/getfile/35/visual/vucloud/sev/gfs/202407/1614/wind_spd_10_20240716162460f309f56519ac68.webp',
  config:
    { "min": 0.005158405431429486, "max": 31.311535958490598, "width": 1601, "height": 1597, "lonmin": -180, "latmin": -85, "lonmax": 180, "latmax": 85, "umin": -30.89267333984375, "umax": 23.25732666015625, "vmin": -21.20558837890625, "vmax": 20.33441162109375 }
  // colorStartValue:70,
    // pointSize:4,
  //colorValueInterval:5,
}

const wind = addWindImageLayer(windOption);
// setTimeout(() => {
//   // wind.fadeOpacity = 0.1; //粒子轨迹在每帧上衰减的速度   范围//0.1-0.99
//   wind.speedFactor = 20;
//   // wind.pointSize = 2;//粒子大小
//   // wind.dropRate = 0.01; // 粒子移动到随机位置的频率   范围//0-0.1
//   // wind.dropRateBump = 0.02; // 相对于单个粒子速度的下降速率增加 范围//0-0.2
// }, 5000);

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

快速上手

通过CDN引入

html 部分

通过 npm 安装