场景

Vue中使用Openlayers加载Geoserver发布的TileWMS：

Vue中使用Openlayers加载Geoserver发布的TileWMS_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面的基础上实现加载地图显示，如果要在地图上添加图片图层显示效果如下

注：

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

实现

1、跟上面的博客相比，导入的模块增多

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'

2、这里要在原先地图图层的基础上，再加两个图层分别为灯图层和房子图层。

声明图层对象和灯图层以及房子图层的坐标数据。

  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:"987610.93778", y:"213885.81024"},{x:"987510.93778", y:"213810.81024"},],};},

3、页面加载完成后调用初始化地图的方法

  mounted() {this.initMap();},

在初始化地图的方法中

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()},

在这里先声明两个图层lightLayer和houseLayer，然后最后调用给这两个图层加载数据的方法。

4、这里决定图层上下优先级顺序的是

layers: [this.layer,this.lightLayer,this.houseLayer],

越往左，图层越在底层，当三个图层重合时，从上往下依次看到的是房子图层、灯图层、地图图层

5、然后调用加载图层坐标数据的方法

方法initLightData

    //初始化灯数据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";let style = new Style({image: new Icon({scale: 0.15 ,src: url,anchor: [0.48, 0.52],}),});feature.setStyle(style);this.lightLayer.getSource().addFeature(feature);});},

方法initHouseData

    //初始化房子数据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);});},

6、完整代码


<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:"987610.93778", y:"213885.81024"},{x:"987510.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 ,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实现显示图片并分优先级多图层加载相关推荐

android listview 只加载显示的图片大小,Android ListView只加载当前屏幕内的图片（解决list滑动时加载卡顿）...
最近在做ListView分页显示,其中包括图片和文字(先下载解析文字内容,再异步加载图片)发现每次点击下一页后,文字内容加载完毕,马上向下滑动,由于这时后台在用线程池异步下载图片,我每页有20条,也 ...
为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...
图片较多时要提高网页加载速度
1.图片懒加载将图片src先赋值为一张默认图片,当用户滚动滚动条到可视区域图片的时候,再去加载后续真正的图片如果用户只对第一张图片感兴趣,那剩余的图片请求就可以节省了. 懒加载(LazyLoad) ...
图片在xml文件中直接加载.9文件
图片在xml文件中直接加载.9文件,可能会因为图片压缩的缘故产生锯齿,如果使用 ImageView imageview = (ImageView) view .findViewById(R.id.in ...
图片太大，导致页面加载过慢的处理方法
整合博客:https://blog.csdn.net/wsyzxss/article/details/73480436 与 http://yujiangshui.com/three-html5-fe ...
分图层加载CAD数据
#region 分图层加载CAD数据 private void btnAddCADByLayer_Click(object sender, EventArgs e) {IWorkspaceFactor ...
native react 图片多选_React Native中加载图片的各种姿势
初使用Image,由于在React Native中图片资源来源丰富,刚开始我也是一脸懵逼,在几番尝试以后,终于了然加载项目目录图片在项目目录中新建一个Directory,命名img,拷贝一张名为' ...
088：vue+openlayers实时显示单个卫星的位置及轨迹（示例代码）
第088个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers项目中计算并显示卫星的轨迹. 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果: 注 ...
132：vue+openlayers: 设置显示图层的层级数zIndex （示例代码）
第132个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中设置显示层级数zIndex.每一个图层都像一张纸似的,叠加在一起,上面的层级数zIndex值高,下面的层级数小. ...

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

场景

实现

Vue+Openlayers实现显示图片并分优先级多图层加载相关推荐

最新文章

热门文章