基于中科锐景的栅格数据瓦片服务,提供基于Openlayers的栅格数据瓦片图层

86 阅读1分钟

利用 @ruijingrs/ol-raster-tile-layer插件,参数配置www.npmjs.com/package/@ru…

import { RasterTileLayer } from '@ruijingrs/ol-raster-tile-layer';

const instance = new RasterTileLayer({
  type: 'PM25',
  agg: 'daily',
  time: '2023/01/01 00:00:00',
  token: 'token from ruijing',
  opacity: 0.88,
  clipGeoJsonUrl: '/geojson/450000.json',
  pickTrigger: 'hover',
  pickDataCallback: (value) => {
    if (value) {
      // do something with value
    }
  },
});

const { dataTileLayer, clipLayer } = instance;

new Map({
  layers: [tianditu, tiandituAn, dataTileLayer, clipLayer],
  target: 'map',
  view: new View({
    projection: 'EPSG:3857',
    center: fromLonLat([108, 23]),
    zoom: 7,
    minZoom: 4,
    maxZoom: 16,
  }),
});

@ruijingrs/ol-raster-tile-layer版本0.9.5, openLayer版本"ol": "^10.2.1", react+vite构建,但是 @ruijingrs/ol-raster-tile-layer 插件内部报错,编译时和线上会进行打包导致插件报错,所以将@ruijingrs/ol-raster-tile-layer,源码复制出来,放到外部引入,并将源码修改一下,下图是修改后的代码,报错原因:线上打包后会将函数名给重置导致找不到函数名,所以修改思路就是打包前就把函数名给改了,就好了,附上:第一张修改后的,第二张修改前的,主要修改 Raster 实例的 lib

image.png

image.png