使用openlayers给地图添加内发光、外发光、内外阴影、三维立体效果、3D效果

原创 已于 2025-11-12 16:59:36 修改 · 3.3k 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#openlayers #canvas #地图 #三维立体 #3d地图

于 2024-08-14 21:00:00 首次发布

很多人用openlayers做地图时都很苦恼，做不了炫酷的效果，连阴影效果都不支持，其实，是可以的。

style大家用的多，但是很少有人知道style上有个参数叫renderer。它是一个函数，一共可以接收到两个参数，ctx上下文和图层用到的坐标数组coordinate

this.vectorLayer = new VectorLayer({
        source: source,
        style: new Style({
          renderer(coordinate, state) {
    

            }
        })
})

而canvas本身是支持阴影效果的，以下属性都是：

ctx.shadowOffsetY、ctx.shadowOffsetX、ctx.shadowBlur、ctx.shadowColor

所以，我们可以在renderer函数里拿到cavans的上下文自己给它添加阴影效果。

addOutlineShadow(ctx, option) {
      // 设置属性控制图形的外观
      ctx.fillStyle = option.fillStyle || "transparent";
      ctx.strokeStyle = option.strokeStyle || "transparent";
      ctx.lineWidth = option.lineWidth || 1;

      //  设置Y轴偏移量
      ctx.shadowOffsetY = option.shadowOffsetY || 20;
      //  设置X轴偏移量
      ctx.shadowOffsetX = option.shadowOffsetX || 2;
      //  设置模糊度
      ctx.shadowBlur = option.shadowBlur || 2;
      //  设置阴影颜色
      ctx.shadowColor = option.shadowColor || "#000";
      ctx.beginPath();
      let arr = option.coodArr || [];
      for (let i = 0; i < arr.length; i++) {
        const data = arr[i];
        if (i === 0) {
          ctx.moveTo(data[0], data[1]);
        } else {
          ctx.lineTo(data[0], data[1]);
        }
      }
      ctx.closePath();
      ctx.fill();
      ctx.stroke();
    },

可以堆叠好几层阴影，将他们换成不同的颜色，这样看着更立体些。

addRegionLayer() {
      let _this = this;
      const source = new VectorSource({
        url: "https://geo.datav.aliyun.com/areas_v3/bound/110000.json",
        format: new GeoJSON(),
      });
      this.vectorLayer = new VectorLayer({
        source: source,
        style: new Style({
          renderer(coordinate, state) {
            let arr = coordinate[0][0];
            const ctx = state.context;
            _this.addOutlineShadow(ctx, {
              fillStyle: "rgba(30, 60, 95,1)",
              shadowOffsetY: 30,
              shadowOffsetX: 2,
              shadowColor: "rgba(30, 60, 95,1)",
              strokeStyle: "rgba(30, 60, 95,1)",
              coodArr: arr,
            });
            _this.addOutlineShadow(ctx, {
              fillStyle: "transparent",
              shadowOffsetY: 20,
              shadowOffsetX: 2,
              shadowColor: "rgba( 56, 113, 139,1)",
              strokeStyle: "rgba(30, 60, 95,1)",
              coodArr: arr,
            });
            _this.addOutlineShadow(ctx, {
              fillStyle: "transparent",
              shadowOffsetY: 15,
              shadowOffsetX: 2,
              shadowColor: "rgba(255,255,255,1)",
              strokeStyle: "rgba(30, 60, 95,1)",
              shadowBlur: 10,
              coodArr: arr,
            });
            _this.addOutlineShadow(ctx, {
              fillStyle: "transparent",
              shadowOffsetY: 10,
              shadowOffsetX: 2,
              shadowColor: "rgba(83, 173, 214,1)",
              strokeStyle: "rgba(83, 173, 214,1)",
              coodArr: arr,
            });
            _this.addOutlineShadow(ctx, {
              fillStyle: "transparent",
              shadowOffsetY: 8,
              shadowOffsetX: 2,
              shadowColor: "rgba(255,255,255,1)",
              strokeStyle: "rgba(255,255,255,1)",
              shadowBlur: 10,
              coodArr: arr,
            });
            _this.addOutlineShadow(ctx, {
              fillStyle: "#fff",
              shadowOffsetY: 5,
              shadowOffsetX: 2,
              shadowColor: "rgba(70, 133, 171,1)",
              strokeStyle: "rgba(70, 133, 171,1)",
              shadowBlur: 10,
              coodArr: arr,
            });
            //白色
            _this.addOutlineShadow(ctx, {
              fillStyle: "rgba(70, 133, 171,1)",
              shadowOffsetY: 5,
              shadowOffsetX: 10,
              shadowColor: "rgba(255,255,255,1)",
              strokeStyle: "#50e3ff",
              shadowBlur: 15,
              coodArr: arr,
              lineWidth: 2,
            });
          },
        }),
      });
      this.map.addLayer(this.vectorLayer);
    },

事实上，这种方法不仅能绘制阴影，还可以绘制其他效果。

以上方法其实主要是为了做3d效果加阴影，可如果你只是简单的想加一点阴影效果，那么大可不必那么复杂，可以用下面这种：

给地图添加内阴影、外阴影效果，可以使用ol的扩展库ol-ext

npm i ol-ext

引入两个类Mask遮罩和Crop裁剪

import Mask from "ol-ext/filter/Mask";
import Crop from "ol-ext/filter/Crop.js";

Mask主要用来设置内阴影效果，外阴影则是由Crop设置。

addShadowByExt() {
      axios
        .get("https://geo.datav.aliyun.com/areas_v3/bound/110000.json")
        .then((res) => {
          // 将 GeoJSON 数据解析为 ol.Feature 对象
          const features = new GeoJSON().readFeatures(res.data);
          const source = new VectorSource({
            features: features,
          });
          let layer = new VectorLayer({
            source: source,
          });
          this.map.addLayer(layer);
          //内发光
          let mask = this.addMask({
            fillColor: "#CC92E6",
            shadowColor: "#ff0",
            feature: features[0],
            inner: true,
          });
          //设置裁切
          this.setLayerFilterCrop(layer, features[0]);
          layer.addFilter(mask);
        });
    },
    //添加Mask
    addMask(options) {
      return new Mask({
        feature: options.feature,
        wrapX: false,
        inner: options.inner || false,
        fill: new Fill({ color: options.fillColor }),
        shadowColor: options.shadowColor || "rgba(0,0,0,0.5)",
        shadowWidth: options.shadowWidth || 10,
        // shadowMapUnits:true,
      });
    },
    setLayerFilterCrop(layer, feature) {
      /**
       * 设置图层裁切
       */
      const crop = new Crop({
        feature: feature,
        inner: false,
        active: true,
        wrapX: true,
        shadowWidth: 10,
        shadowColor: "#000",
      });
      layer.addFilter(crop);
    },

两种方式的完整代码：

<template>
  <div class="box">
    <h1>给地图添加内发光、外发光、内外阴影、三维立体效果</h1>
    <div id="map"></div>
  </div>
</template>

<script>
import GeoJSON from "ol/format/GeoJSON.js";
import Map from "ol/Map.js";
import View from "ol/View.js";
import { OSM, Vector as VectorSource, XYZ } from "ol/source.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
import { Fill, Stroke, Text, Style } from "ol/style.js";
import { LineString, MultiPolygon, Point, Polygon } from "ol/geom.js";
import Mask from "ol-ext/filter/Mask";
import Crop from "ol-ext/filter/Crop.js";
import axios from "axios";
export default {
  name: "",
  components: {},
  data() {
    return {
      vectorLayer: null,
      map: null,
    };
  },
  computed: {},
  created() {},
  methods: {
    addShadowByExt() {
      axios
        .get("https://geo.datav.aliyun.com/areas_v3/bound/110000.json")
        .then((res) => {
          // 将 GeoJSON 数据解析为 ol.Feature 对象
          const features = new GeoJSON().readFeatures(res.data);
          const source = new VectorSource({
            features: features,
          });
          let layer = new VectorLayer({
            source: source,
          });
          this.map.addLayer(layer);
          //内发光
          let mask = this.addMask({
            fillColor: "#CC92E6",
            shadowColor: "#ff0",
            feature: features[0],
            inner: true,
          });
          //设置裁切
          this.setLayerFilterCrop(layer, features[0]);
          layer.addFilter(mask);
        });
    },
    //添加Mask
    addMask(options) {
      return new Mask({
        feature: options.feature,
        wrapX: false,
        inner: options.inner || false,
        fill: new Fill({ color: options.fillColor }),
        shadowColor: options.shadowColor || "rgba(0,0,0,0.5)",
        shadowWidth: options.shadowWidth || 10,
        // shadowMapUnits:true,
      });
    },
    setLayerFilterCrop(layer, feature) {
      /**
       * 设置图层裁切
       */
      const crop = new Crop({
        feature: feature,
        inner: false,
        active: true,
        wrapX: true,
        shadowWidth: 10,
        shadowColor: "#000",
      });
      layer.addFilter(crop);
    },
    addRegionLayer() {
      let _this = this;
      const source = new VectorSource({
        url: "https://geo.datav.aliyun.com/areas_v3/bound/110000.json",
        format: new GeoJSON(),
      });
      this.vectorLayer = new VectorLayer({
        source: source,
        style: new Style({
          renderer(coordinate, state) {
            let arr = coordinate[0][0];
            const ctx = state.context;
            _this.addOutlineShadow(ctx, {
              fillStyle: "rgba(30, 60, 95,1)",
              shadowOffsetY: 30,
              shadowOffsetX: 2,
              shadowColor: "rgba(30, 60, 95,1)",
              strokeStyle: "rgba(30, 60, 95,1)",
              coodArr: arr,
            });
            _this.addOutlineShadow(ctx, {
              fillStyle: "transparent",
              shadowOffsetY: 20,
              shadowOffsetX: 2,
              shadowColor: "rgba( 56, 113, 139,1)",
              strokeStyle: "rgba(30, 60, 95,1)",
              coodArr: arr,
            });
            _this.addOutlineShadow(ctx, {
              fillStyle: "transparent",
              shadowOffsetY: 15,
              shadowOffsetX: 2,
              shadowColor: "rgba(255,255,255,1)",
              strokeStyle: "rgba(30, 60, 95,1)",
              shadowBlur: 10,
              coodArr: arr,
            });
            _this.addOutlineShadow(ctx, {
              fillStyle: "transparent",
              shadowOffsetY: 10,
              shadowOffsetX: 2,
              shadowColor: "rgba(83, 173, 214,1)",
              strokeStyle: "rgba(83, 173, 214,1)",
              coodArr: arr,
            });
            _this.addOutlineShadow(ctx, {
              fillStyle: "transparent",
              shadowOffsetY: 8,
              shadowOffsetX: 2,
              shadowColor: "rgba(255,255,255,1)",
              strokeStyle: "rgba(255,255,255,1)",
              shadowBlur: 10,
              coodArr: arr,
            });
            _this.addOutlineShadow(ctx, {
              fillStyle: "#fff",
              shadowOffsetY: 5,
              shadowOffsetX: 2,
              shadowColor: "rgba(70, 133, 171,1)",
              strokeStyle: "rgba(70, 133, 171,1)",
              shadowBlur: 10,
              coodArr: arr,
            });
            //白色
            _this.addOutlineShadow(ctx, {
              fillStyle: "rgba(70, 133, 171,1)",
              shadowOffsetY: 5,
              shadowOffsetX: 10,
              shadowColor: "rgba(255,255,255,1)",
              strokeStyle: "#50e3ff",
              shadowBlur: 15,
              coodArr: arr,
              lineWidth: 2,
            });
          },
        }),
      });
      this.map.addLayer(this.vectorLayer);
    },

    addOutlineShadow(ctx, option) {
      // 设置属性控制图形的外观
      ctx.fillStyle = option.fillStyle || "transparent";
      ctx.strokeStyle = option.strokeStyle || "transparent";
      ctx.lineWidth = option.lineWidth || 1;

      //  设置Y轴偏移量
      ctx.shadowOffsetY = option.shadowOffsetY || 20;
      //  设置X轴偏移量
      ctx.shadowOffsetX = option.shadowOffsetX || 2;
      //  设置模糊度
      ctx.shadowBlur = option.shadowBlur || 2;
      //  设置阴影颜色
      ctx.shadowColor = option.shadowColor || "#000";
      ctx.beginPath();
      let arr = option.coodArr || [];
      for (let i = 0; i < arr.length; i++) {
        const data = arr[i];
        if (i === 0) {
          ctx.moveTo(data[0], data[1]);
        } else {
          ctx.lineTo(data[0], data[1]);
        }
      }
      ctx.closePath();
      ctx.fill();
      ctx.stroke();
    },
  },
  mounted() {
    const view = new View({
      projection: "EPSG:4326",
      center: [116.389, 39.903],
      zoom: 7,
    });
    this.map = new Map({
      layers: [],
      target: "map",
      view: view,
    });
    this.addRegionLayer();
    // this.addShadowByExt();
  },
};
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 500px;
}
.box {
  height: 100%;
}
</style>

卷新心菜
关注
openlayers 3d 地图 非三维 立体地图 行政区划裁剪 地图背景
qq_36287830的博客
07-17 3167
3d 行政区划 openlayers 地图背景 裁剪 主题
第四章：Vue3.0+Openlayers+Cesium 二三维地图比例尺制作
liyajun54的博客
05-24 1870
在上面的步骤中之所以大费周章的封装其一是为了让代码更加简洁，另外就是可以将一些能遇到的问题都统一整理到同一个模块中，如果产生异常也便于定位问题，那么我们通过给三维窗口添加class属性，我们可以对我们针对地图的样式进行统一的编写及管理。通过官方的代码不难看出，实际实现比例尺控件功能是非常的简单的，使用addControl加载比例尺控件就可以完成，不过样式并不是我们想要的，所以下面我们就来一起修改一下样式。在二三维地图中如果要使用统一的比例尺控件，那么必然是使用openlayers中比例尺控件。
042：vue+threeJS实现字体轮廓发光效果
最新发布
大剑师兰特的GIS世界
11-08 959
本文介绍了基于Vue2和Three.js实现字体轮廓发光效果的示例。关键技术点包括：使用标准材质创建3D文字作为内层，外层采用稍大的半透明发光材质实现轮廓效果，并添加更大半透明文字增强光晕扩散。示例提供了交互控制面板，可动态调整文字内容、颜色、发光强度及旋转状态。文中详细说明了Three.js场景初始化、字体加载、发光文字创建等核心实现方法，并附有完整代码，适合学习Three.js特效开发或商业项目借鉴。作者大剑师兰特为GIS领域高级前端工程师，专注于WebGL和可视化技术。
OpenLayers教程一：OpenLayers概述
热门推荐
不睡觉的怪叔叔的博客
05-30 10万+
目录 一、OpenLayers简介 二、OpenLayers的特征 三、OpenLayers的框架结构 一、OpenLayers简介 OpenLayers是一个用于开发WebGIS客户端的JavaScript包，最初基于BSD许可发行。 OpenLayers是一个开源的项目，其设计之意是为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，并具有灵活的扩展机...
openlayers（二）添加炫酷的3D效果并加上滤镜
的博客
03-08 4472
openlayers3D效果（伪3D效果）
实现openlayers-Cesium二三维联动效果的功能脚本1
11-21
该脚本能够实现openlayers-Cesium二三维联动效果的功能
使用openlayers的扩展插件实现矢量图层的3D渲染
qiaozi的博客
08-15 1万+
@使用openlayers的扩展插件实现矢量图层的3D展示 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，...
openlayers学习（一）仿3D效果地图
的博客
02-21 5039
openlayers仿3D效果
使用OpenLayers3 添加地图鼠标右键菜单
09-03
在OpenLayers 3中添加地图鼠标右键菜单是一项常见的需求，尤其对于开发具有交互性的GIS应用来说。这个功能使得用户可以通过鼠标右键点击地图来触发特定的操作或展示上下文相关的菜单选项。以下是如何实现这一功能的...
二三维离线地图演示系统 V1.0（for OpenLayers3）
11-15
【二三维离线地图演示系统 V1.0（for OpenLayers3）】 在现代WebGIS应用中，OpenLayers是一个非常流行的开源JavaScript库，用于在网页上显示和操作地图。这个项目，"二三维离线地图演示系统 V1.0（for OpenLayers3...
使用openlayers加载离线地图实例
10-06
在IT行业中，前端开发是构建Web应用程序的关键部分，而OpenLayers是一个流行的JavaScript库，用于创建交互式的、基于Web的地图应用。本实例将详细介绍如何利用OpenLayers加载离线地图，并通过mui将其打包成移动应用...
OpenLayers3实现地图显示功能
10-14
主要为大家详细介绍了OpenLayers3实现地图显示功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers很多特效demo
07-01
openlayers很多特效demo openlayers很多特效demo openlayers很多特效demo
threejs-map:在Threejs中嵌入Openlayers地图
05-29
threejs-map 在Threejs中嵌入Openlayers地图 快速开始 npm install npm run start 说明 实现了在Threejs场景中添加Openlayers地图 Openlayers地图元素作为Threejs的css3d对象置入scene 在平移、缩放、旋转操作时，保持该css3d对象在屏幕坐标的位置和大小不变，同时根据该css3d对象在Threejs world坐标中的位置计算Openlayers中地图的显示区域 最终效果等同于在Threejs的world中添加了一个地图图层
openlayers 可以实现3d地图效果吗_基于 HTML5 OpenLayers3 实现 GIS 电信资源管理系统...
weixin_39517560的博客
11-22 1141
前言通过结合 HTML5 和 OpenLayers 可以组合成非常棒的一个电信地图网络拓扑图的应用，形成的效果可以用来作为电信资源管理系统，美食定位分享软件，片区找房，绘制铁轨线路等等，各个领域都能够涉及的一款应用。虽然这个 Demo 是结合 OpenLayers3 的，其实还可推广到与 ArcGIS、百度地图以及 GoogleMap 等众多 GIS 地图引擎融合。demo 地址：OpenLaye...
RONOTE : 生成地图文件/GPS数据与人工地图位置坐标对应
woodgril的博客
07-27 2020
1
openLayers中实现面要素立体化效果
qiaozi的博客
12-11 3404
openLayers中实现面要素立体化效果一、面要素立体化的效果实现方法二、实现过程及效果展示三、总结 ** 一、面要素立体化的效果实现方法 ** 对于面要素，想要实现立体效果，之前写了一篇博客，添加阴影来实现立体化，但是可能在很多情况下，更加想要的是可以多面要素的边框进行不同颜色，不同线宽的样式设置，从而达到立体化的效果。此次所写的博客中正是利用了此种方式来实现立体化效果。 二、实现过程及效果展...
百度地图API : 自定义标注图标
达拉崩巴斑得贝迪卜多比鲁翁_
10-21 2611
通过Icon类可实现自定义标注的图标，下面示例通过参数MarkerOptions的icon属性进行设置， 也可以使用marker.setIcon()方法。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-sca
openlayers 可以实现3d地图效果吗_openlayers技巧之绘制带箭头的路线
weixin_39775127的博客
12-22 1257
这篇文章是一个技术伙伴写的，经过他授权，放到小专栏里面。效果图如下：Openlayers绘制带箭头的路线只用到了ol.FeatureStyleFunction，简单易懂，详细步骤及代码如下：第一步，创建线要素： var line_feature = new ol.Feature(); var line_geom=new ol.geom.LineString(paths); line...
OpenLayers 3扩展库：封装动态效果第三方工具集
在本文件中提到的“Extensions for OpenLayers 3 第三方拓展功能”，我们可以理解为是一系列已经封装好的、供OpenLayers 3使用的动态效果插件。这些插件是由第三方开发并维护的，用户可以直接引入到自己的OpenLayers...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值