載入1個或多個要素

<template>
  <div id="map" style="width: 100vw; height: 100vh"></div>
</template&gwww.cppcns.comt;
<script>
import "ol/ol.";
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,Vihttp://www.cppcns.com
 
ew,Feature,ol } from "ol";
import { Style,Stroke,Fill } from "ol/style";
import { Polygon,MultiPolygon } from "ol/geom";
 
import areaGeo from "@/assets/chengdu.on";
 
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],});
      });
    },/**
     * 設定區域
     */
    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>

到此這篇關於+Openlayer動態載入geojson的文章就介紹到這了,更多相關Vue Openlayer載入geojson內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！