文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

加载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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯