@geovisapp/geovis-mapbox-js

v1.0.1

Published

2 months ago

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

Downloads

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 src="/@geovisapp/geovis-mapbox-js/index.umd.cjs"></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,
  duration: 5,
  colors: colors,
  currentTime: 0,
};
let weatherLayer = GeovisApp.addWeatherLayer(MultiImageTemperatureMapOptions);
console.log(weatherLayer)
  weatherLayer.startAnimation((e) => {
    console.log(e, 'sssssssss')
  });



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,
  //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,
// };
// addWeatherLayer(TemperatureMapOptions);


//添加多张图红黑图气象并加入动画
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,
  duration: 5,
  colors: colors,
  currentTime: 0,
};
let weatherLayer = addWeatherLayer(MultiImageTemperatureMapOptions);
console.log(weatherLayer)
  weatherLayer.startAnimation((e) => {
    console.log(e, 'sssssssss')
  });



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,
  //colorValueInterval:5,
}

addWindImageLayer(windOption);

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

快速上手

通过CDN引入

html 部分

通过 npm 安装