场景

Vue+Openlayers实现显示图片并分优先级多图层加载：

Vue+Openlayers实现显示图片并分优先级多图层加载_BADAO_LIUMANG_QIZHI的博客-CSDN博客

上面实现的效果如下

如果要实现地图缩放时图标等比例放大缩小，效果如下

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、首先在页面加载完之后，设置定时器进行一秒一次的渲染灯图层的数据。

    this.initMap();setInterval(() => {this.initLightData();}, 1000)},

这里是使用定时器的方式一秒执行一次的渲染灯图层的数据。

在真实业务中，这里可能是由后台推送的比如红绿灯的数据，然后进行定时的渲染灯图层的数据。

比如后台获取地图上所有红绿的信号，然后定时推送给前端，前端在收到数据后重新渲染灯的图层。

2、然后在渲染灯图层的方法中，获取当前地图的缩放等级，乘以一个比例，赋值给Style的image的

scale属性。

    initLightData(){this.lightLayer.getSource().clear();this.lightData.forEach((item, index) => {var feature = new Feature({geometry: new Point([Number(item.x), Number(item.y)]),});let url = "images/light.png";const zoom = this.map.getView().getZoom();let style = new Style({image: new Icon({scale: 0.15 * (zoom -13) ,src: url,anchor: [0.48, 0.52],}),});feature.setStyle(style);this.lightLayer.getSource().addFeature(feature);});},

这里的scale的比例算法根据实际要的效果进行调整，这里的0.15是自己所需要的比例。

3、完整代码


<template><div id="map" class="map"></div>
</template><script>
//导入基本模块
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { Point } from "ol/geom";
import Feature from "ol/Feature";
import { Icon,Style} from "ol/style";
//导入相关模块
import { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer'
import { TileWMS ,Vector as VectorSource } from 'ol/source'
export default {name: "olMapImageWMSMulLayers",data() {return {map: null, // map地图layer:null, //地图图层lightLayer:null, //灯图层houseLayer:null, //房子图层//红绿灯数据lightData:[{x:"987798.93778", y:"213885.81024"},{x:"987710.93778", y:"213810.81024"},],//房子数据houseData:[{x:"986610.93778", y:"213885.81024"},{x:"986510.93778", y:"213810.81024"},],};},mounted() {this.initMap();setInterval(() => {this.initLightData();}, 1000)},methods: {//初始化红绿灯数据initLightData(){this.lightLayer.getSource().clear();this.lightData.forEach((item, index) => {var feature = new Feature({geometry: new Point([Number(item.x), Number(item.y)]),});let url = "images/light.png";const zoom = this.map.getView().getZoom();let style = new Style({image: new Icon({scale: 0.15 * (zoom -13) ,src: url,anchor: [0.48, 0.52],}),});feature.setStyle(style);this.lightLayer.getSource().addFeature(feature);});},//初始化房子数据initHouseData(){this.houseLayer.getSource().clear();this.houseData.forEach((item, index) => {var feature = new Feature({geometry: new Point([Number(item.x), Number(item.y)]),});let url = "images/house.png";let style = new Style({image: new Icon({scale: 0.3,src: url,anchor: [0.48, 0.52],}),});feature.setStyle(style);this.houseLayer.getSource().addFeature(feature);});},initMap() {//地图图层this.layer = new TileLayer({source: new TileWMS({//不能设置为0，否则地图不展示。ratio: 1,url: "http://localhost:8000/geoserver/nyc/wms",params: {LAYERS: "nyc:nyc_roads",STYLES: "",VERSION: "1.1.1",tiled: true},serverType: "geoserver",}),});// 红绿灯的图层this.lightLayer = new VectorLayer({source: new VectorSource(),});//房子的图层this.houseLayer = new VectorLayer({source: new VectorSource(),});this.map = new Map({//地图容器IDtarget: "map",//引入地图layers: [this.layer,this.lightLayer,this.houseLayer],view: new View({//地图中心点center: [987777.93778, 213834.81024],zoom: 12,minZoom:6, // 地图缩放最小级别maxZoom:19,}),});this.initLightData();this.initHouseData();//获取点的监听方法设置this.onPoint()},//  获取点onPoint() {// 监听singleclick事件this.map.on('singleclick', function(e) {console.log(e.coordinate)})}},
};
</script><style scoped>
.map {width: 100%;height: 800px;
}
</style>

Vue+Openlayers实现地图缩放图标等比例缩放相关推荐

vue+openlayers在地图添加图标
参考帖子:https://blog.csdn.net/feiteyizu/article/details/81133845 有两种方式,介绍第二种,第一种太简单,,而且不能动态增加dom元素从而添加图 ...
Vue使用高德地图api实现热力图动态缩放
Vue使用高德地图api实现热力图动态缩放前言 1.引入高德js 2.显示基本的热力图 3.显示优化 4.Vue页面完整代码前言项目需要,根据积水数据的多少,在页面中进行展示,选用高德热力图ap ...
OpenLayers 3地图添加图标
OpenLayers 3地图添加图标一.overlay方式在地图添加图标 1.项目结构 2.map.html <!Doctype html> <html xmlns='http:/ ...
Vue+Openlayers实现地图上绘制线
场景 Vue+Openlayers实现显示图片并分优先级多图层加载: Vue+Openlayers实现显示图片并分优先级多图层加载_BADAO_LIUMANG_QIZHI的博客-CSDN博客上面是添 ...
Vue 使用echarts 地图自定义图标和修改图标样式，点击切换图标
效果图:如下注意事项: 1.使用echarts最好看官方文档,官方文档(链接如下) https://echarts.apache.org/examples/zh/index.html#chart-t ...
155：vue+openlayers 设置地图的反转色、复古色、灰度图、原始图
第155个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中设置地图的反转色.复古色.灰度,原始状态等.采用的是CSS filter的形式. 直接复制下面的 vue+ope ...
自定义Imageview控件实现多种手势操作（拖动、水平缩放、竖直缩放、等比例缩放、双击、长按）
项目中需要使用自定义控件的多种手势操作,之前在网上查阅资料的时候发现能找到的一般是只实现了其中的几种,这次就把我做的控件分享一下,人人为我,我为人人嘛,哈哈! 这个自定义控件实现的主要功能是控件的拖动 ...
SpringBoot+Vue+Openlayers实现地图上新增和编辑坐标并保存提交
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 Vue ...
vue+openlayers实现地图打点
前言 openlayers的使用一.使用步骤 1.引入库代码如下(示例):npm install ol import "ol/ol.css"; //样式 import Map ...

Vue+Openlayers实现地图缩放图标等比例缩放

场景

实现

Vue+Openlayers实现地图缩放图标等比例缩放相关推荐

最新文章

热门文章