Vue verwendet Openlayers zum Laden von Tiandi Map und Amap

 npm ich --save ol

 Vue verwendet Openlayers zum Laden von Tiandi Map und Amap <template>
  <div Klasse="Wrapper">
    <div>Weltkarte</div>
    <div Klasse="Karte" id="olMap"></div>
  </div>
</Vorlage>
<Skript>
importiere "ol/ol.css";
importieren {
  Kachel als Kachelebene } von „ol/layer“;
importiere XYZ aus „ol/source/XYZ“;
importieren {
  standardmäßig als Standardsteuerelemente } von „ol/control“;
importiere Karte aus „ol/Map.js“;
Importiere Ansicht aus „ol/View.js“;
Standard exportieren {
  Daten() {
   zurückkehren {
      Karte: null,
      Parser: null,
    };
  },
  montiert() {
    dies.initMap();
  },
  Methoden: {
    initMap() {
     const map = neue Map({
       Ziel: "olMap",
        Ansicht: neue Ansicht({
 
          Zentrum: [0, 0], // Mittelpunkt Breiten- und Längengrad Zoom: 4, // Layer-Skalierungsprojektion: "EPSG:4326",
        }),
        Steuerelemente: Standardsteuerelemente({
          Zoom: wahr,
          Zuordnung: falsch,
          drehen: falsch,
        }),
      });
      diese.map = Karte;
      // Karte hinzufügen let url = "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}";
      URL = `${
   url}&T=vec_c&tk=ersetzen Sie Ihren Schlüssel`;
      const Quelle = neues XYZ({
     URL: URL,
        Projektion: "EPSG:4326",
      });
      const tdtLayer = neue TileLayer({
        Quelle: Quelle,
      });
      diese.map.addLayer(tdtLayer);
      // Anmerkung hinzufügen url = "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}";
      URL = `${
   url}&T=cva_c&tk=ersetzen Sie Ihren Schlüssel`;
      const sourceCVA = neues XYZ({
        URL: URL,
        Projektion: "EPSG:4326",
      });
      const tdtcvaLayer = neue Kachelebene({
        Quelle: QuelleCVA,
      });
      diese.map.addLayer(tdtcvaLayer);
    },
  },
};
</Skript>
<Stilbereich>
.Karte {
  Breite: 100 %;
  Höhe: 100vh;
}
</Stil>

 <Vorlage>
  <div Klasse="Wrapper">
    <div>Eine Karte</div>
    <div id="Karte"></div>
  </div>
</Vorlage>
<Skript>
importieren {
 Karte,Ansicht,Feature} von 'ol'

importiere * als olProj von „ol/proj“
importieren {
 Punkt} von 'ol/geom'
importieren {
  Stil, Füllung, Strich, Kreis als sCircle } von „ol/style“;
//Ebene hinzufügen, Tilelayer aus „ol/layer/Tile“ importieren
importieren {
 Vektor als Vektorebene} aus „ol/layer“
importieren {
 XYZ,Vektor als Vektorquelle} von 'ol/source'
//Stildatei importieren import "ol/ol.css"
Standard exportieren {
  Daten() {
  zurückkehren {
    Karte:null
    }
  },
  montiert() {
  dies.init();
   setMarker();
  },
  Methoden: {
    init(){
       diese.map = neue Map({
         Ziel: 'Karte',
         Ebenen: [neue Kachelebene ({
           Quelle: neues XYZ({
               URL: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
           })
         })
         ],
        Ansicht:neue Ansicht({

            // Xi'an als Mittelpunkt der Karte nehmen // Die Methode olProj.fromLonLat wandelt Längen- und Breitengrad in entsprechende Koordinaten um: olProj.fromLonLat([108.945951, 34.465262]),
          Zoom: 2
        }),
       })
    },
    setzeMarker(){
        let _style = neuer Stil({
            Bild: neuer Kreis({
                Radius: 10,
                Strich:neuer Strich({
                    Farbe: "#fff",
                }),
                füllen: neue Füllung({
                    Farbe: '#3399CC',
                }),
            }),
        });
        let _feature = neues Feature({
 
            Geometrie: neuer Punkt (olProj.fromLonLat ([108.945951, 34.465262])),
        });
        _feature.setStyle(_style);
        let _marker = neue Vektorebene({

            Quelle: neue Vektorquelle ({
               Funktion:[_Funktion],
            }),
        });
        diese.map.addLayer(_marker);
    },
  },
}
</Skript>
<Stilbereich>
  #Karte{
      /* Bildschirmbreite und -höhe */
    Breite: 100vw;
    Höhe: 100vh;
  }
</Stil>