Vue+Openlayer动态加载geojson

喜欢ヅ旅行 2022-09-09 13:48 272阅读 0赞

# 加载1个或多个要素 #

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16][]

<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: "#08305d5b" }),
                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>

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/219a64e3f7c74221a9669acd5b816167.png