基于Vue+Openlayer实现动态加载geojson的方法_vue.js

来源:脚本之家  责任编辑:小易  

加载1个或多个要素

<template>
  <div id="map" style="width: 100vw; height: 100vh"></div>
</template>
<script>
import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import XYZ from "ol/source/XYZ";
import { Map, View, Feature, ol } from "ol";
import { Style, Stroke, Fill } from "ol/style";
import { Polygon, MultiPolygon } from "ol/geom";
 
import areaGeo from "@/assets/chengdu.json";
 
export default {
  data() {
    return {
      map: {},
      areaLayer: {},
    };
  },
  mounted() {
    this.initMap(); //初始化地图方法
    this.addArea(areaGeo); //添加区域图层方法
    this.pointMove();
    this.getFeatureByClick();
  },
  methods: {
    pointMove() {
      // 设置鼠标划过矢量要素的样式
      this.map.on("pointermove", (e) => {
        const isHover = this.map.hasFeatureAtPixel(e.pixel);
        this.map.getTargetElement().style.cursor = isHover ? "pointer" : "";
      });
    },
    getFeatureByClick() {
      this.map.on("click", (e) => {
        let features = this.map.getFeaturesAtPixel(e.pixel);
        this.map.getView().fit(features[0].getGeometry(), {
          duration: 1500,
          padding: [100, 100, 100, 100],
        });
      });
    },
    /**
     * 设置区域
     */
    addArea(geo = {}) {
      if (Object.keys(geo).length == 0 && geo.features.length == 0) return;
 
      // 设置图层
      this.areaLayer = new VectorLayer({
        source: new VectorSource({
          features: [],
        }),
      });
      // 添加图层
      this.map.addLayer(this.areaLayer);
 
      let features = geo.features;
 
      for (let i in features) {
        let areaFeature = {};
 
        if (features[i].geometry.type == "MultiPolygon") {
          areaFeature = new Feature({
            geometry: new MultiPolygon(features[i].geometry.coordinates),
          });
        } else if (features[i].geometry.type == "Polygon") {
          areaFeature = new Feature({
            geometry: new Polygon(features[i].geometry.coordinates),
          });
        }
        areaFeature.setStyle(
          new Style({
            fill: new Fill({ color: "#4e98f444" }),
            stroke: new Stroke({
              width: 3,
              color: [71, 137, 227, 1],
            }),
          })
        );
        areaFeature.setProperties(features[i].properties);
        this.areaLayer.getSource().addFeature(areaFeature);
      }
    },
    /**
     * 初始化地图
     */
    initMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
            }),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [103, 31],
          zoom: 7,
        }),
      });
    },
  },
};
</script>

到此这篇关于Vue+Openlayer动态加载geojson的文章就介绍到这了,更多相关Vue Openlayer加载geojson内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

您可能感兴趣的文章:vue集成openlayers加载geojson并实现点击弹窗教程vue-openlayers实现地图坐标弹框效果Vue+Openlayers自定义轨迹动画vue使用openlayers实现移动点动画

  • 本文相关:
  • 深入浅析vue全局环境变量和模式
  • 使用form-create动态生成vue自定义组件和嵌套表单组件
  • 在vue中添加echarts图表的基本使用教程
  • vue input控件通过value绑定动态属性及修饰符的方法
  • vue中如何动态绑定图片,vue中通过data返回图片路径的方法
  • 详解vue-loader在项目中是如何配置的
  • vue中v-model指令与.sync修饰符的区别详解
  • vue实现简单计算器
  • 详解vue前后台数据交互vue-resource文档
  • vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
  • 基于VUE移动音乐WEBAPP跨域请求失败的解决方法
  • 基于vue循环列表时点击跳转页面的方法
  • 基于vue-router 多级路由redirect 重定向的问题
  • 基于vue的下拉刷新指令和滚动刷新指令
  • 基于Vue的iview组件,表格多选事件,on-select的返回值怎么接收...
  • 基于 Vue 的树形选择组件的示例代码
  • 基于vue的短信验证码倒计时demo
  • 基于vue.js路由参数的实例讲解——简单易懂
  • 基于Vue2.0+ElementUI实现表格翻页功能
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.jsreact其它首页javascriptjavascript类库vue集成openlayers加载geojson并实现点击弹窗教程vue-openlayers实现地图坐标弹框效果vue+openlayers自定义轨迹动画vue使用openlayers实现移动点动画深入浅析vue全局环境变量和模式使用form-create动态生成vue自定义组件和嵌套表单组件在vue中添加echarts图表的基本使用教程vue input控件通过value绑定动态属性及修饰符的方法vue中如何动态绑定图片,vue中通过data返回图片路径的方法详解vue-loader在项目中是如何配置的vue中v-model指令与.sync修饰符的区别详解vue实现简单计算器详解vue前后台数据交互vue-resource文档vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)vue引用js文件的多种方式(推荐)详解vue 路由跳转四种方式 (带参vue项目刷新当前页面的三种方法vue之父子组件间通信实例讲解(prvue跳转页面的几种方法(推荐)vue props用法详解(小结)vue元素的隐藏和显示(v-show指令vue实现文件上传功能简单理解vue中props属性element-ui中select组件绑定值改详解vue-cli3使用详解vue 换肤方案验证nginx配置域名后的二级目录访问不同项目的在vue中使用express-mock搭建mock服务的方.netcore+vue 实现压缩文件下载功能vue中使用vee-validate表单验证的方法axios的拦截请求与响应方法vue.js一个文件对应一个组件实践实现vuex与组件data之间的数据同步更新方vue实现扫码功能
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved