首页 > 资讯 > 前端开发 > JavaScript >VueopenLayers实现图层数据切换与加载流程详解

234

分享到

VueopenLayers实现图层数据切换与加载流程详解

2024-04-02 19:04:59 234人浏览安东尼

摘要

目录openlayers介绍一、实现效果预览二、代码实现openlayers介绍 OpenLayers是一个用于开发WEBGIS客户端的javascript包。OpenLayers

openlayers介绍

OpenLayers是一个用于开发 WEBGIS客户端的javascript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加，在这一方面OpenLayers提供了非常多的选择。OpenLayers采用面向对象方式开发。

OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。

本篇文章介绍图层设置航标、港口码头、锚地停泊区数据的获取，以及以天地图作为底图添加到上航道图层上面；点击图层可以选择控制图层数据隐藏显示以及数据的处理。

技术应用：Vue + vant-ui + openlayers

一、实现效果预览

二、代码实现

1.图层设置：

<div class="coupon" @click="handleLayer">
              <img src="../../assets/img/layerIcon.png"/>
              <div class=" fontSize22 color3">图层设置</div>
</div>
<!-- 图层切换 -->
<van-popup v-model="showTabLayer" round position="bottom" :style="{width:'100%'}" closeable class="shipPopup">
        <div class=" color3 fontSize30 pl30 pt30 text-center fw600">功能设置</div>
        <div class=" color6 fontSize30 pl30 pt30">功能显示</div>
        <van-cell-group :border="0" class="mt20 pl30 pr30 mb20">
          <van-cell :title="item.title" :icon="item.icon" class="optionsCell" v-for="(item,index) in shipLayerList" :key="index">
            <template #default>
              <van-switch v-model="item.checked" size="18px" @change="handleChange(item)"/>
            </template>
          </van-cell>
        </van-cell-group>
</van-popup>

.coupon{
    position:absolute;
    right:30px;
    top:200px;
    z-index:111;
    background: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
    border-radius: .28rem;
    padding:0px 10px 10px;
    img{
      display: block;
      width: 70px;
      height: 70px;
    }  
  }

handleLayer(){
      	this.showTabLayer = !this.showTabLayer;
},

2.data定义图层显示列表数据shipLayerList：

shipLayerList:[
        {title:"航标",checked:true,icon:require("../../assets/img/hb.png"),name:"beaconsVectorLayer"},
        {title:"港口码头",checked:true,icon:require("../../assets/img/gk.png"),name:"portVectorLayer"},
        {title:"锚地",checked:true,icon:require("../../assets/img/md.png"),name:"anchorageVectorLayer"},
        {title:"停泊区",checked:true,icon:require("../../assets/img/tbq.png"),name:"zoneVectorLayer"}
]

3.mounted加载数据：

mounted(){
	this.initMap(); //加载地图，默认加载航道图层
    //this.getAllShip();//船舶数据图层数据
    this.getBeaconsData();//航标图层数据
    this.getPortData();//港口图层数据
}

这里主要讲航标、港口图层，其他的图层方法和数据获取类似。

let arr = this.map.getView().calculateExtent(this.map.getSize());//获取左下角和右上角经纬度

这里的方法是为了解决数据太多，要利用页面的对角经纬度显示获取可视区域的数据。后台根据传递的四个点的参数来获取数据。

4.methods中定义:

初始化方法

initMap(){
	//监听地图滑动，动态显示图层
	this.map.addEventListener("moveend", this.showView);
}

5.动态显示图层方法

    showView() {
      this.positionVector = true;
      this.map.removeLayer(this.positionVectorLayer);
      let zoom = this.map.getView().getZoom();
      console.log(zoom,"缩放")
      this.map.getLayers().getArray().forEach((item) => {
          // 航标
          if (item.get("name") == "beaconsVectorLayer") {
            this.shipLayerList.forEach((data) => {
              if (data.name == "beaconsVectorLayer" && !data.checked) {
                return;
              } else if (data.name == "beaconsVectorLayer" && data.checked) {
                if (zoom>13) {
                  item.setVisible(true);
                  this.getBeaconsData();
                } else {
                  item.setVisible(false);
                }
              }
            });
          }
          if (item.get("name") == "portVectorLayer") {
            // 港口
            this.shipLayerList.forEach((data) => {
              if (data.name == "portVectorLayer" && !data.checked) {
                return;
              } else if (data.name == "portVectorLayer" && data.checked) {
                if (zoom>13) {
                  item.setVisible(true);
                  this.getPortData();
                } else {
                  this.shopPopup = false;
                  item.setVisible(false);
                }
              }
            });
          }
        });
    },

6.手动调整图层，点击图层显示切换

    handleChange() {
      // this.showTabLayer = false;
      let zoom = this.map.getView().getZoom();
      var beaconsVectorLayer;
      var portVectorLayer;
      this.map.getLayers().getArray().forEach((data) => {
          // 航标
          if (data.get("name") == "beaconsVectorLayer") {
            beaconsVectorLayer = data;
          }
          // 港口
          if (data.get("name") == "portVectorLayer") {
            portVectorLayer = data;
          }
      });
      this.shipLayerList.forEach((item) => {
        if (item.name == "beaconsVectorLayer" && !item.checked) {
          beaconsVectorLayer.setVisible(false);
        } else if (item.name == "beaconsVectorLayer" && item.checked) {
          if (zoom > 13) {
            this.getBeaconsData();
            beaconsVectorLayer.setVisible(true);
          }
        } else if (item.name == "portVectorLayer" && !item.checked) {
          portVectorLayer.setVisible(false);
        } else if (item.name == "portVectorLayer" && item.checked) {
          if (zoom > 13) {
            this.getPortData();
            portVectorLayer.setVisible(true);
          }
        }
      });
    },

7.获取航标数据，获取港口数据是一样的操作，参照航标数据方法获取

    getBeaconsData(){
      let arr = this.map.getView().calculateExtent(this.map.getSize());//获取左下角和右上角经纬度
      let params = {
        leftLongitude: arr[0],
        leftLatitude: arr[1],
        rightLongitude: arr[2],
        rightLatitude: arr[3],
      }
      this.beaconsFeatures = [];
      this.beaconsMarker = [];
      homePageBeaconsData(params).then(res=>{
        if(res.code == 200){
          if(res.data.length > 0){
              this.beaconsFeatures = res.data;
              //定义是否存在，如果存在删除图层，防止图层数据重复
              if(this.beaconsVector){
                this.map.removeLayer(this.beaconsVectorLayer);
              }
              //添加需要的数据信息
              this.beaconsFeatures.map((item, index) => {
                  this.beaconsMarker.push(
                      new Feature({
                        geometry: new Point([item.longitude, item.latitude], "XY"),
                        name:item.name,
                        beaconsIcon:item.beaconsIcon,
                        beaconsType:item.beaconsType,
                        index: index
                      })
                  );
              });
              let beaconsIconStyles = [];
              //图标样式添加
              this.beaconsMarker.forEach(item => {
                    beaconsIconStyles.push(
                        new Style({
                          image: new Icon({
                            src: decodeURI(item.values_.beaconsIcon),
                            // scale: 0.6 * (this.zoom -13),
                            scale: 0.6
                          }),
                          //设置图标下方文字显示
                          // text: new Text({
                          //   text:item.values_.name,
                          //   font:"12px Microsoft YaHei",
                          //   offsetY:10,
                          //   textAlign:"center",
                          //   fill: new Fill({
                          //     color:"#000",
                          //   }),
                          //   stroke: new Stroke({
                          //     color:"#fff",
                          //     width: 3
                          //   })
                          // })
                        })
                    );   
              });
              let beaconsVectorSource = new SourceVec({
                features: this.beaconsMarker
              });
              this.beaconsVectorLayer = new LayerVec({
                name: "beaconsVectorLayer",//设置图层名字，方便获取到该图层
                source: beaconsVectorSource,
                //样式
                style: (feature)=> {
                  let iconStyle = beaconsIconStyles[feature.values_.index];
                  return [iconStyle];
                },
                zIndex: 10
              });
              //图层添加到地图上
              this.map.addLayer(this.beaconsVectorLayer);
              this.beaconsVector = true;
          }
        }
      })
    },

8.beforeDestroy中记得移除监听

beforeDestroy(){
	this.map.removeEventListener("moveend", this.showView);
}

到此这篇关于Vue openLayers实现图层数据切换与加载流程详解的文章就介绍到这了,更多相关Vue openLayers 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: VueopenLayers实现图层数据切换与加载流程详解

本文链接: https://www.lsjlt.com/news/167045.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布

VueopenLayers实现图层数据切换与加载流程详解

目录

openlayers介绍

一、实现效果预览

二、代码实现

本篇文章演示代码以及资料文档资料下载

VueopenLayers实现图层数据切换与加载流程详解

Android编程实现图片背景渐变切换与图层叠加效果

Android实现动态添加数据与堆叠折线图详解流程

Tensorflow加载模型实现图像分类识别流程详解

MySQLMaxCompute与AnalyticDB实现数据处理与转换过程详解

MySQL MaxCompute与AnalyticDB实现数据处理与转换过程详解

python sklearn与pandas实现缺失值数据预处理流程详解

微信小程序实现事件传参与数据同步流程详解

京东一面：post为什么会发送两次请求？???

鼠标划过时整行变色284607详解

鼠标划过时整行变色284415处理办法

TypeScript接口和类型的区别小结

细说JS数组遍历的一些细节及实现

深入浅出JavaScript前端中的设计模式

初学者如何快速搭建Express开发系统步骤详解

JavaScrip简单数据类型隐式转换的实现

前端Website sitemap.xml文件搜索引擎优化

vue使用Swiper踩坑解决避坑