openlayers（二）添加炫酷的3D效果并加上滤镜-Toy模板网

这篇具有很好参考价值的文章主要介绍了openlayers（二）添加炫酷的3D效果并加上滤镜。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

先上效果图，可用于大屏展示的效果

openlayers 3d,openlayers,3d,javascript,开发语言
3D效果设计如下openlayers(一)添加3D图
注：偏移量需要根据实际的多边形大小来设置

在之前的基础上添加了阴影效果，并加上canvas滤镜

添加滤镜效果，专为一个图层添加滤镜

this.googleImgLayer = new TileLayer({
      className: 'stamen',
      source: new XYZ({
        // url: 'https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s,m&gl=&x={x}&y={y}&z={z}',
        url: 'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + OlMapConfig.tk,
        wrapX: false,
        crossOrigin: "anonymous",
        tileLoadFunction: function (imageTile: any, src: string) {
          // 使用滤镜 将白色修改为深色
          let img = new Image()
          // img.crossOrigin = ''
          // 设置图片不从缓存取，从缓存取可能会出现跨域，导致加载失败
          img.setAttribute('crossOrigin', 'anonymous')
          img.onload = function () {
            let canvas = document.createElement('canvas')
            let w = img.width
            let h = img.height
            canvas.width = w
            canvas.height = h
            let context: any = canvas.getContext('2d')
            context.filter = 'grayscale(98%) invert(100%) sepia(20%) hue-rotate(180deg) saturate(1600%) brightness(80%) contrast(90%)'
            // context.filter = 'sepia(100%)'
            context.drawImage(img, 0, 0, w, h, 0, 0, w, h)
            imageTile.getImage().src = canvas.toDataURL('image/png')
          }
          img.src = src
        },
      })
    })

添加阴影效果

//添加阴影的图层
    const highlightLayer: any = olMap.addHighlightLayer(level2Layer);
    highlightLayer.setZIndex(-1)
    // highlightLayer.setOpacity(0.5)
    level2Source.once('change', (evt: any) => {
      const source = evt.target;
      if (source.getState() === 'ready') {
        source.forEachFeature((f: any) => {
          highlightLayer.setStyle(() => {
              return new Style({
                fill: new Fill({color: (f.style && f.style.getFill) ? f.style.getFill().getColor() : 'rgba(255,255,255,1)'}),
                // stroke: new Stroke({color: 'rgba(255, 255, 255, 0.2)', width: 5})
              });
            }
          );
          highlightLayer.getSource().addFeature(f);
        })
      }
    })