openlayers marker光晕扩散（光环扩散）（postrender事件和render方法）

已于 2024-06-26 17:38:44 修改
阅读量732 收藏 20
点赞数 22
分类专栏： openlayers vue 文章标签： 前端 vue javascript
于 2024-06-25 18:37:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56624286/article/details/139958134
版权

本篇介绍一下使用openlayersmarker光晕扩散（光环扩散）（postrender事件和render方法）

1 需求

  • marker光晕扩散（光环扩散）

2 分析

marker光晕扩散（光环扩散）使用postrender事件和render方法

3 知识点

即时渲染

  1. 解释：
    OpenLayers 的即时渲染功能允许用户在不先将几何图形添加到图层的情况下，直接在渲染事件中绘制样式化的几何图形。可以根据应用的需求，在渲染事件中动态地添加、修改或删除几何图形。
  2. 使用：
  • openLayers 提供了即时渲染 API，允许在渲染事件中直接绘制几何图形，如在postrender事件中，使用即时渲染 API 来绘制和更新几何图形。
  • 使用 getVectorContext 函数从渲染事件中获取渲染上下文。
  • 在这个渲染上下文中，使用 context.drawGeometry() 和 context.setStyle() 方法来绘制和设置样式的几何体。
  • 如果想在渲染过程中获取或处理即时渲染的几何图形，通常并不是直接“获取”，因为它们是作为渲染过程的一部分被绘制到 Canvas 上的
  • 如果需要更精细地控制几何图形的渲染，可以通过自定义图层的渲染函数来实现。这通常涉及到覆盖图层的 render 方法，并在其中使用 getVectorContext 来获取渲染上下文，并直接调用渲染上下文的方法来绘制几何图形。
  • 如果想要获取渲染后的几何图形在 Canvas 上的像素数据（例如，用于进一步分析或导出为图像），可以使用 Canvas 的 toDataURL 方法来获取包含渲染结果的图像数据。

4 实现

4.1 实现一（使用vectorContext）

<template>
  <div id="map" class="map"></div>
  <div class="toolbar">
    <el-button type="primary" @click="handleClick">{{ animationFlag ? '停止' : '开始' }}</el-button>
    <el-input v-model.number="duration"></el-input><span>持续时间</span>
  </div>
</template>

<script setup lang="ts">
import { Feature, Map, View } from 'ol';
import { LineString, Point } from 'ol/geom';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import { get } from 'ol/proj';
import { Vector as VectorSource, XYZ } from 'ol/source';
import { Circle, Fill, Icon, Stroke, Style } from 'ol/style';
import { easeOut } from 'ol/easing.js';
import { getVectorContext } from 'ol/render.js';
import iconSrc from '@/assets/image/truck.png';

const projection = get('EPSG:4326');

const layerTypeMap = {
  vector: ['vec', 'cva'], // [矢量底图, 矢量注记]
  image: ['img', 'cia'], // [影像底图, 影像注记]
  terrain: ['ter', 'cta'] // [地形晕渲, 地形注记]
};

const map = shallowRef();
const vectorLayer = shallowRef();
const source = shallowRef<VectorSource>(new VectorSource());
const animationFlag = ref(false);
const duration = ref(3000);
const start = ref(Date.now());

onMounted(() => {
  initMap('image');
  initFeature();
});

const initMap = (layerType = 'image') => {
  const key = '替换为天地图key';

  vectorLayer.value = new VectorLayer({
    source: source.value,
    style: new Style({
      image: new Icon({
        crossOrigin: 'anonymous',
        src: iconSrc,
        width: 30,
        height: 30
      })
    })
  });
  // c: 经纬度投影 w: 墨卡托投影
  const matrixSet = 'c';
  map.value = new Map({
    target: 'map',
    layers: [
      // 底图
      new TileLayer({
        source: new XYZ({
          url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap[layerType][0]}_${matrixSet}&tk=${key}&x={x}&y={y}&l={z}`,
          projection
        })
      }),
      // 注记
      new TileLayer({
        source: new XYZ({
          url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap[layerType][1]}_${matrixSet}&tk=${key}&x={x}&y={y}&l={z}`,
          projection
        })
      }),
      vectorLayer.value
    ],
    view: new View({
      center: [116.406393, 39.909006],
      projection: projection,
      zoom: 5,
      maxZoom: 17,
      minZoom: 1
    })
  });
};

const initFeature = () => {
  const coordinates = [
    [110, 30],
    [111, 31],
    [112, 32],
    [113, 33]
  ];
  coordinates.forEach(c => {
    const f = new Feature({
      geometry: new Point(c)
    });
    source.value.addFeature(f);
  });
};

const handleClick = () => {
  if (!animationFlag.value) {
    startAnimation();
  } else {
    stopAnimation();
  }
  animationFlag.value = !animationFlag.value;
};

const startAnimation = () => {
  start.value = Date.now();
  vectorLayer.value.on('postrender', flash);
  // 触发地图渲染
  vectorLayer.value.changed();
};
const flash = e => {
  const time = e.frameState.time;
  // 时间戳差（毫秒）
  const elapsedTime = time - start.value;
  if (elapsedTime >= duration.value) {
    stopAnimation();
    startAnimation();
    return;
  }
	// 获取用于绘制到事件画布的矢量上下文
  const vectorContext = getVectorContext(e);
  // elapsedRatio值0到1之间
  const elapsedRatio = elapsedTime / duration.value;
  const radius = easeOut(elapsedRatio) * 25 + 5;
  const opacity = easeOut(1 - elapsedRatio);

  const style = new Style({
    image: new Circle({
      radius: radius,
      stroke: new Stroke({
        color: 'rgba(255, 0, 0, ' + opacity + ')',
        width: 1 + opacity
      })
    })
  });

	// 首先调用setStyle()来设置呈现样式
  vectorContext.setStyle(style);
  const fea = source.value.getFeatures();
  fea.forEach(f => {
    const geo = f.getGeometry().clone();
    // 将几何体渲染到画布中
    vectorContext.drawGeometry(geo);
  });
  // 调用地图渲染
  map.value.render();
};

const stopAnimation = () => {
  vectorLayer.value.un('postrender', flash);
};
</script>
<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
}
.toolbar {
  position: absolute;
  top: 20px;
  left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  color:#FFF;
  .el-input {
    width: 100px;
    margin: 0 20px;
  }
}
</style>

4.2 实现二（不使用vectorContext，直接动态修改样式）

<template>
  <div id="map" class="map"></div>
  <div class="toolbar">
    <el-button type="primary" @click="handleClick">{{ animationFlag ? '停止' : '开始' }}</el-button>
    <el-input v-model.number="duration"></el-input><span>持续时间</span>
  </div>
</template>

<script setup lang="ts">
import { Feature, Map, View } from 'ol';
import { LineString, Point } from 'ol/geom';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import { get } from 'ol/proj';
import { Vector as VectorSource, XYZ } from 'ol/source';
import { Circle, Fill, Icon, Stroke, Style } from 'ol/style';
import { easeOut } from 'ol/easing.js';
import iconSrc from '@/assets/image/truck.png';

const projection = get('EPSG:4326');

const layerTypeMap = {
  vector: ['vec', 'cva'], // [矢量底图, 矢量注记]
  image: ['img', 'cia'], // [影像底图, 影像注记]
  terrain: ['ter', 'cta'] // [地形晕渲, 地形注记]
};

const map = shallowRef();
const vectorLayer = shallowRef();
const source = shallowRef<VectorSource>(new VectorSource());
const animationFlag = ref(false);
const duration = ref(3000);
const start = ref(Date.now());
const iconStyle = new Style({
  image: new Icon({
    crossOrigin: 'anonymous',
    src: iconSrc,
    width: 30,
    height: 30
  })
});

onMounted(() => {
  initMap('image');
  initFeature();
});

const initMap = (layerType = 'image') => {
  const key = '替换为天地图key';

  vectorLayer.value = new VectorLayer({
    source: source.value,
    style: iconStyle
  });
  // c: 经纬度投影 w: 墨卡托投影
  const matrixSet = 'c';
  map.value = new Map({
    target: 'map',
    layers: [
      // 底图
      new TileLayer({
        source: new XYZ({
          url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap[layerType][0]}_${matrixSet}&tk=${key}&x={x}&y={y}&l={z}`,
          projection
        })
      }),
      // 注记
      new TileLayer({
        source: new XYZ({
          url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap[layerType][1]}_${matrixSet}&tk=${key}&x={x}&y={y}&l={z}`,
          projection
        })
      }),
      vectorLayer.value
    ],
    view: new View({
      center: [116.406393, 39.909006],
      projection: projection,
      zoom: 5,
      maxZoom: 17,
      minZoom: 1
    })
  });
};

const initFeature = () => {
  const coordinates = [
    [110, 30],
    [111, 31],
    [112, 32],
    [113, 33]
  ];
  coordinates.forEach(c => {
    const f = new Feature({
      geometry: new Point(c)
    });
    source.value.addFeature(f);
  });
};

const handleClick = () => {
  if (!animationFlag.value) {
    startAnimation();
  } else {
    stopAnimation();
  }
  animationFlag.value = !animationFlag.value;
};

const startAnimation = () => {
  start.value = Date.now();
  vectorLayer.value.on('postrender', flash);
  // 触发地图渲染
  vectorLayer.value.changed();
};
const flash = e => {
  const time = e.frameState.time;
  // 时间戳差（毫秒）
  const elapsedTime = time - start.value;
  if (elapsedTime >= duration.value) {
    stopAnimation();
    startAnimation();
    return;
  }
  // elapsedRatio值0到1之间
  const elapsedRatio = elapsedTime / duration.value;
  const radius = easeOut(elapsedRatio) * 25 + 5;
  const opacity = easeOut(1 - elapsedRatio);

  const style = new Style({
    image: new Circle({
      radius: radius,
      stroke: new Stroke({
        color: 'rgba(255, 0, 0, ' + opacity + ')',
        width: 1 + opacity
      })
    })
  });

  const fea = source.value.getFeatures();
  fea.forEach(f => {
    f.setStyle([iconStyle, style]);
  });
  // 调用地图渲染
  map.value.render();
};

const stopAnimation = () => {
  const fea = source.value.getFeatures();
  fea.forEach(f => {
    f.setStyle(iconStyle);
  });
  vectorLayer.value.un('postrender', flash);
};
</script>
<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
}
.toolbar {
  position: absolute;
  top: 20px;
  left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  .el-input {
    width: 100px;
    margin: 0 20px;
  }
}
</style>

问题：

所有扩散频率都是一致的，过于呆板

分析：

频率一致主要是因为duration和start一样，只要为不同图标修改为不同值的即可

4.3 实现三（多个icon）

<template>
  <div id="map" class="map"></div>
  <div class="toolbar">
    <el-button type="primary" @click="handleClick">{{ animationFlag ? '停止' : '开始' }}</el-button>
  </div>
</template>

<script setup lang="ts">
import { Feature, Map, View } from 'ol';
import { LineString, Point } from 'ol/geom';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import { get } from 'ol/proj';
import { Vector as VectorSource, XYZ } from 'ol/source';
import { Circle, Fill, Icon, Stroke, Style } from 'ol/style';
import { easeOut } from 'ol/easing.js';
import { getVectorContext } from 'ol/render.js';
import iconSrc from '@/assets/image/truck.png';

const projection = get('EPSG:4326');

const layerTypeMap = {
  vector: ['vec', 'cva'], // [矢量底图, 矢量注记]
  image: ['img', 'cia'], // [影像底图, 影像注记]
  terrain: ['ter', 'cta'] // [地形晕渲, 地形注记]
};

const map = shallowRef();
const vectorLayer = shallowRef();
const source = shallowRef<VectorSource>(new VectorSource());
const animationFlag = ref(false);
const duration = ref([3000, 5000, 8000, 1000]);//可以加入随机值
const start = ref([0, 0, 0, 0]);

onMounted(() => {
  initMap('image');
  initFeature();
});

const initMap = (layerType = 'image') => {
  const key = '替换为天地图key';

  vectorLayer.value = new VectorLayer({
    source: source.value,
    style: new Style({
      image: new Icon({
        crossOrigin: 'anonymous',
        src: iconSrc,
        width: 30,
        height: 30
      })
    })
  });
  // c: 经纬度投影 w: 墨卡托投影
  const matrixSet = 'c';
  map.value = new Map({
    target: 'map',
    layers: [
      // 底图
      new TileLayer({
        source: new XYZ({
          url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap[layerType][0]}_${matrixSet}&tk=${key}&x={x}&y={y}&l={z}`,
          projection
        })
      }),
      // 注记
      new TileLayer({
        source: new XYZ({
          url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap[layerType][1]}_${matrixSet}&tk=${key}&x={x}&y={y}&l={z}`,
          projection
        })
      }),
      vectorLayer.value
    ],
    view: new View({
      center: [116.406393, 39.909006],
      projection: projection,
      zoom: 5,
      maxZoom: 17,
      minZoom: 1
    })
  });
};

const initFeature = () => {
  const coordinates = [
    [110, 30],
    [111, 31],
    [112, 32],
    [113, 33]
  ];
  coordinates.forEach(c => {
    const f = new Feature({
      geometry: new Point(c)
    });
    source.value.addFeature(f);
  });
};

const handleClick = () => {
  if (!animationFlag.value) {
    startAnimation();
  } else {
    stopAnimation();
  }
  animationFlag.value = !animationFlag.value;
};

const startAnimation = () => {
  start.value = start.value.map(i => Date.now());
  vectorLayer.value.on('postrender', flash);
  // 触发地图渲染
  vectorLayer.value.changed();
};
const flash = e => {
  const time = e.frameState.time;
  const fea = source.value.getFeatures();
  fea.forEach((f, idx) => {
  // 时间戳差（毫秒）
    let elapsedTime = time - start.value[idx];
    if (elapsedTime >= duration.value[idx]) {
      start.value[idx] = Date.now();
      elapsedTime = duration.value[idx];
    }
    const vectorContext = getVectorContext(e);
    // elapsedRatio值0到1之间
    const elapsedRatio = elapsedTime / duration.value[idx];
    const radius = easeOut(elapsedRatio) * 25 + 5;
    const opacity = easeOut(1 - elapsedRatio);

    const style = new Style({
      image: new Circle({
        radius: radius,
        stroke: new Stroke({
          color: 'rgba(255, 0, 0, ' + opacity + ')',
          width: 1 + opacity
        })
      })
    });
		// 将feature渲染到画布中。
    vectorContext.drawFeature(f.clone(), style);
  });
  // 调用地图渲染
  map.value.render();
};

const stopAnimation = () => {
  vectorLayer.value.un('postrender', flash);
};
</script>
<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
}
.toolbar {
  position: absolute;
  top: 20px;
  left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-input {
    width: 100px;
    margin: 0 20px;
  }
}
</style>

4.4 实现四（增加光晕）

<template>
  <div id="map" class="map"></div>
  <div class="toolbar">
    <el-button type="primary" @click="handleClick">{{ animationFlag ? '停止' : '开始' }}</el-button>
  </div>
</template>

<script setup lang="ts">
import { Feature, Map, View } from 'ol';
import { LineString, Point } from 'ol/geom';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import { get } from 'ol/proj';
import { Vector as VectorSource, XYZ } from 'ol/source';
import { Circle, Fill, Icon, Stroke, Style } from 'ol/style';
import { easeOut } from 'ol/easing.js';
import { getVectorContext } from 'ol/render.js';
import iconSrc from '@/assets/image/truck.png';

const projection = get('EPSG:4326');

const layerTypeMap = {
  vector: ['vec', 'cva'], // [矢量底图, 矢量注记]
  image: ['img', 'cia'], // [影像底图, 影像注记]
  terrain: ['ter', 'cta'] // [地形晕渲, 地形注记]
};

const map = shallowRef();
const vectorLayer = shallowRef();
const source = shallowRef<VectorSource>(new VectorSource());
const animationFlag = ref(false);
const duration = ref([3000, 5000, 8000, 1000]);
const start = ref([0, 0, 0, 0]);

onMounted(() => {
  initMap('image');
  initFeature();
});

const initMap = (layerType = 'image') => {
  const key = '替换为天地图key';

  vectorLayer.value = new VectorLayer({
    source: source.value,
    style: new Style({
      image: new Circle({
        radius: 0,
        fill: new Fill({
          color: 'rgba(228, 147, 87, 1)'
        }),
        stroke: new Stroke({
          color: 'rgba(255, 0, 0,1)',
          width: 1 
        })
      })
    })
  });
  // c: 经纬度投影 w: 墨卡托投影
  const matrixSet = 'c';
  map.value = new Map({
    target: 'map',
    layers: [
      // 底图
      new TileLayer({
        source: new XYZ({
          url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap[layerType][0]}_${matrixSet}&tk=${key}&x={x}&y={y}&l={z}`,
          projection
        })
      }),
      // 注记
      new TileLayer({
        source: new XYZ({
          url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap[layerType][1]}_${matrixSet}&tk=${key}&x={x}&y={y}&l={z}`,
          projection
        })
      }),
      vectorLayer.value,
      new VectorLayer({
        source: source.value,
        style: new Style({
          image: new Icon({
            crossOrigin: 'anonymous',
            src: iconSrc,
            width: 30,
            height: 30
          })
        })
      })
    ],
    view: new View({
      center: [116.406393, 39.909006],
      projection: projection,
      zoom: 5,
      maxZoom: 17,
      minZoom: 1
    })
  });
};

const initFeature = () => {
  const coordinates = [
    [110, 30],
    [111, 31],
    [112, 32],
    [113, 33]
  ];
  coordinates.forEach(c => {
    const f = new Feature({
      geometry: new Point(c)
    });
    source.value.addFeature(f);
  });
};

const handleClick = () => {
  if (!animationFlag.value) {
    startAnimation();
  } else {
    stopAnimation();
  }
  animationFlag.value = !animationFlag.value;
};

const startAnimation = () => {
  start.value = start.value.map(i => Date.now());
  vectorLayer.value.on('postrender', flash);
  // 触发地图渲染
  vectorLayer.value.changed();
};
const flash = e => {
  const time = e.frameState.time;
  const fea = source.value.getFeatures();
  fea.forEach((f, idx) => {
    // 时间戳差（毫秒）
    let elapsedTime = time - start.value[idx];
    if (elapsedTime >= duration.value[idx]) {
      start.value[idx] = Date.now();
      elapsedTime = duration.value[idx];
    }
    const vectorContext = getVectorContext(e);
    // elapsedRatio值0到1之间
    const elapsedRatio = elapsedTime / duration.value[idx];
    const radius = easeOut(elapsedRatio) * 25 + 5;
    const opacity = easeOut(1 - elapsedRatio);

    const style = new Style({
      image: new Circle({
        radius: radius,
        fill: new Fill({
          color: 'rgba(228, 147, 87, ' + opacity + ')'
        }),
        stroke: new Stroke({
          color: 'rgba(255, 0, 0, ' + opacity + ')',
          width: 1 + opacity
        })
      })
    });
    // 将feature渲染到画布中。
    vectorContext.drawFeature(f.clone(), style);
  });
  // 调用地图渲染
  map.value.render();
};

const stopAnimation = () => {
  vectorLayer.value.un('postrender', flash);
};
</script>
<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
}
.toolbar {
  position: absolute;
  top: 20px;
  left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-input {
    width: 100px;
    margin: 0 20px;
  }
}
</style>
无心使然云中漫步
关注
  • 22
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于openlayers4实现点的扩散效果
08-28
主要为大家详细介绍了基于openlayers4实现点的扩散效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue利用openlayers实现动态轨迹
sinat_40572875的博客
11-13 3156
事件触发一个函数，这个事件本来是地图渲染结束事件，但是它的回调函数中，小车的坐标位置一直在变，那就会不停地触发地图渲染，当然最终也会触发。gis初学者可能对openlayers（后面简称ol）不熟悉，这里暂时不介绍ol了，直接上代码，先体验下感觉。这段代码有点难理解，最好自己尝试体验下，比较难理解部分我都加上了注释。线路有了，车也有了，现在就到了激动人心的开车时刻了，接下来才是本文最核心的代码！这个上面的代码已经包括了，我这里列出来是为了让你更清晰，就是。同样的，这里的代码在上面也写过了，就是。
【openlayers系统学习】4.1渲染矢量瓦片、VectorTile 层
weixin_45213317的博客
05-24 935
学习如何使用OpenLayers的VectorTile图层加载矢量切片数据，并展示了一个简单的世界地图。
Openlayers实现点闪烁扩散效果
10-14
这两个动画通过不同的关键帧和延迟时间实现不同的闪烁频率和扩散效果。 为了在地图上实际展示这些动画点，你需要创建DOM元素（如`<div>`），并将其CSS类设置为`.point_animation`或`.css_animation`，然后将这个...
Openlayers实现扩散的动态点（水纹效果）
10-14
在给定的描述和代码中，我们看到如何使用OpenLayers实现一个动态扩散的点，也称为水纹效果。这种效果可以用于表示地图上的事件或危险源，通过动态扩散来吸引用户的注意力。 首先，我们需要引入OpenLayers的相关库，...
openlayers4实现点动态扩散
10-14
这种利用OpenLayers的`postcompose`事件实现动态扩散的方法相比传统的`window.setInterval()`，更具有性能优势，因为它只在地图需要更新时才执行，避免了不必要的渲染开销。这种方法使得点扩散更加流畅，更适合实时...
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 759
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
Webkit简介以及工作流程
读心悦
07-10 220
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
Haproxy搭建Web群集
wkysdhr的博客
07-08 894
Haproxy 是目前比较流行的一种群集调度工具，同类群集调度工具有很多，如LVS 和Nginx。相比较而言，LVS 性能最好，但是搭建相对复杂;Nginx的upstream模块支持群集功能，但是对群集节点健康检查功能不强，高并发性能没有 Haproxy好。
JS混淆基本类型和原理
朴拙科技的博客
07-06 723
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
​​ 翻页 上一页/下一页
szzlh123456789的博客
07-09 292
【代码】​​ 翻页 上一页/下一页。
音乐播放器
m0_73755059的博客
07-05 756
【代码】音乐播放器。
图片压缩代码和实际操作页面
英雄汉孑的博客
07-05 1047
轻盈视界，高清依旧 —— 智能图片压缩，大容量，小体积，精彩不打折
myeclipse开发ssm框架项目图书管理系统 mysql数据库web计算机毕业设计项目
qq_251836457的博客
07-07 1078
摘 要随着计算机的广泛应用，其逐步成为现代化的标志。图书馆的信息量也会越来越大，因此需要对图书信息、借书信息、还书信息等进行管理，及时了解各个环节中信息的变更，要对因此而产生的单据进行及时的处理，为了提高高校图书馆自动化的管理，能够更快速的满足用户的要求，提高各种工作的效率，现对其设计相应的系统，以达到上述的目的。随着科学技术的进步，计算机行业的迅速发展，计算机信息处理系统的引进已彻底改变了许多系统的管理方式。因此，开发一款高校图书管理系统是至关重要的。根据需求，确定系统采用JSP技术，JAVA作为编程语言
解决后端限制导致前端配置跨域仍请求失败报504的问题
weixin_43883615的博客
07-07 628
当然，并不是端口号一致就可以绕过跨域，还需要添加其他配置，比如前端请求需要发送带有application/vnd.api+json头部信息，这样服务器就就可以将 Access-Control-Allow-Headers 设置为 application/vnd.api+json，客户端在跨域请求中就包含这个头部信息。
逆向案例十一——华强北登录逆向
m0_57265868的博客
07-10 126
发现有三个参数进行了加密，分别是Password,UserName和Deviceld，再登录一次发现最后一个参数是固定的。这个参数没定义，就去页面源码中，找出这个参数。进入后发现折叠的代码，貌似是des(它自己在上面写的），直接复制。我这是格式化后隐藏了。PS：我之前说第三个参数deviceid是固定，其实是错的，它是由这个函数定义的。这是一个获取设备id的函数，每一台设备都不一样，但同一台设备这个参数是固定的。复制代码在pycharm中的js文件中，最后一个参数是加密的密钥。点击登录，找到登录包。
Vue3中生成本地pdf并下载
weixin_62328265的博客
07-07 430
Vue3使用html2pdf.js实现在项目中导出指定的表格数据,包含实现步骤,源码分析,注释讲解等内容
ctfshow-web入门-文件上传（web151-web160）
Welcome To Myon'Blog !
07-07 879
试了下前端只能传 png 后缀的将一句话木马改成 png 后缀，上传后用 burpsuite 抓包绕过前端检测后，改回 php 后缀，发包拿到 flag：ctfshow{e3bd0332-4d5f-4255-941f-a2e6095c4f17}我们还可以直接改它前端验证的代码：原本只支持上传 png 后缀的文件我们加一个 php 后缀进去，即可直接上传 php 后缀的文件。
v-bind指令——03
最新发布
爱敲代码的卡拉米的博客
07-10 242
单机 使用v-bind也可以让超链接的地址动态。">点击
openlayers扩散
09-07
Geoserver和OpenLayers是两个开源的地理信息系统软件。Geoserver是一个基于Java的服务器端软件，用于发布和管理地理空间数据，支持多种数据格式和协议。OpenLayers是一个基于JavaScript的客户端库，用于在Web浏览器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值