Praxis der Verwendung von SuperMap in Vue

Vorwort

Wie soll ich es sagen? Ich habe benommen einen Anruf entgegengenommen, benommen eine vorübergehende Aufgabe erhalten, benommen eine Geschäftsreise unternommen und ein paar Tage benommen mit SuperMap gearbeitet. SuperMap ist wirklich leistungsstark, aber es dauert eine gewisse Zeit, es zu erlernen, da seine Funktionen relativ leistungsstark sind und es so viele Funktionspunkte gibt, dass man nicht in kurzer Zeit mit der Entwicklung beginnen kann. Komm schon! Ich bin auch ein Neuling, aber nachdem ich lange daran herumgebastelt habe, möchte ich hier einige Methoden und Schritte zum Einführen von Hypergraph in ein Vue-Projekt erläutern, in der Hoffnung, einigen neuen Kollegen zu helfen, die es verwenden müssen, aber in Zukunft keine Orientierung haben. Nur als Referenz, nicht vertrauenswürdig.

Ressourcen zum Thema

Es mag zwar verhältnismäßig weniger Leute oder Gruppen geben, die es nutzen, sodass im Internet weniger Informationen vorhanden sind, es gibt aber dennoch einige Websites, die mit Ihnen geteilt werden müssen.

Offizielle SuperMap-Website: Shuttle Gate

SuperGraph-Fallstudie: Shuttle Gate

SuperGraph 3D: Shuttle-Gate

OpeaLayers: Shuttle-Tor

Auf diesen Websites finden Sie sicherlich die entsprechenden Informationen oder API-Schnittstellen, aber die auf der offiziellen Website angegebenen Fälle sind alle JS-Codes. Wenn Sie sie in einem Vue-Projekt verwenden müssen, müssen Sie möglicherweise den entsprechenden JS-Code in die Vue-Syntax konvertieren. Tatsächlich müssen Sie beim Konvertieren nicht die Bedeutung jeder Codezeile verstehen, da der Code in dem Fall keine spezifische Einführung hat. Wenn Sie es herausfinden möchten, müssen Sie die API einzeln abfragen, aber das ist eine riesige Aufgabe. Sie können es in Zukunft langsam lernen. Wenn Sie es eilig haben, müssen Sie nur die Codeblöcke verstehen.

Vue-Projekt führt zweidimensionalen Hypergraphen ein

Der nächste Schritt besteht darin, zweidimensionale Hypergraphen in das Vue-Projekt einzuführen.

Nehmen wir OpenLayers als Beispiel, Dokumentation.

Das Dokument stellt viele Möglichkeiten zum Importieren vor. Wenn es sich um ein Vue-Projekt handelt, verwenden Sie bitte die npm-Importmethode.

npm installiere @supermap/iclient-ol

Nach Abschluss der Installation befindet sich im Ordner node_modules ein Supermap-Ordner. Herzlichen Glückwunsch, die Installation war erfolgreich!

Nachdem die Installation abgeschlossen ist, fügen Sie die CSS-Datei in die Datei index.html ein.

<link href='https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css' rel='stylesheet' />

<link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' rel='stylesheet' />

Dann war es das auch schon, SuperMap wurde erfolgreich zum Projekt hinzugefügt.

Es gibt jedoch ein Problem, nämlich ob die ES6-Syntax des Projekts in ES5 konvertiert werden kann. Dies erfordert möglicherweise eine Konfiguration, da sonst spätere Projekte beim Laden von Daten mit Hypergraph Fehler melden.

Fügen Sie der Datei webpack.base.conf.js eine Supermap-Transformation hinzu.

{
   Test: /\.js$/,
   Lader: 'babel-loader',
   einschließen: [auflösen('src'), auflösen('test'), auflösen('node_modules/webpack-dev-server/client'), auflösen('node_modules/@supermap')]
},

Das sollte kein Problem sein. Zweidimensional ist relativ einfach. Nehmen wir ein einfaches Beispiel.

Hypergraph 2D-Gehäuse

Zitat

Stellen Sie zunächst einige Bibliotheken auf der Seite vor, die Hypergraph verwenden müssen.

  Karte aus „ol/Map“ importieren;
  Ansicht aus „ol/View“ importieren;
  importiere TileLayer aus „ol/layer/Tile“;
  importiere * als Steuerelement von „ol/control“;
  importiere { Logo, TileSuperMapRest } von '@supermap/iclient-ol';

Diese Bibliotheken werden gemäß der offiziellen Website-Dokumentation vorgestellt, d. h. der OpenLayers-API-Dokumentation.

Was die einzuführenden spezifischen Bibliotheken betrifft, können wir entsprechend unserem Bedarf einige Beispiele von der offiziellen Website kopieren und dann die entsprechenden in den Beispielen verwendeten Bibliotheken im OpenLayers-API-Dokument überprüfen.

Beispielsweise gibt es im Fall der offiziellen Website einen Codeabschnitt: var layer = new ol.layer.Tile Wenn wir nicht wissen, welche Bibliothek wir bei der Konvertierung in Vue einführen sollen, können wir dies bei opealayers überprüfen.

Es ähnelt dieser Prüfung.

HTML

Schreiben Sie als Nächstes ein HTML zur Anzeige der Karte.

<div id="Karte"></div>

TS

Dann kommt der TS-Code.

        var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
        diese.map = neue Map({
          Ziel: 'Karte',
          Steuerelemente: Steuerung.Standardeinstellungen({ AttributionOptions: { Collapsed: False } }).Erweitern([neues Logo()]),
          Ansicht: neue Ansicht({
            Mitte: [106,86, 39,71],
            // maxZoom: 18,
            // minZoom: 2,
            Zoom: 5,
            Projektion: 'EPSG:4326',
          })
        });
        var layer = neue Kachelebene({
          Quelle: neues TileSuperMapRest({
            URL: URL,
            wrapX: wahr
          }),
          Projektion: 'EPSG:4326'
        });
        diese.map.addLayer(Ebene);

Anschließend kann das zweidimensionale Bild normal angezeigt werden.

Wenn Sie andere Funktionen benötigen, können Sie auf der offiziellen Website die Fälle prüfen und sie direkt verwenden. Sie müssen jedoch den JS-Code in die Vue-Syntax konvertieren, ok!

Vue führt 3D-Supergraph ein

3D ist etwas schwieriger, Sie können das SuperMap 3D-Dokument zu Rate ziehen. Die offizielle Website verwendet js. Wenn Sie vue installieren möchten, benötigen Sie ein Paket, das Sie rechtzeitig herunterladen können.

Download-Speicherort des Pakets

Nach dem Herunterladen habe ich es in den statischen Ordner gelegt.

Importieren Sie dann die Dateien widgets.css, Cesium.js und zlib.min.js in index.html.

<link rel="stylesheet" href="./static/Cesium/Widgets/widgets.css" rel="externes nofollow" >
<script type="text/javascript" src="./static/Cesium/Cesium.js"></script>
<script type="text/javascript" src="./static/Cesium/Workers/zlib.min.js"></script>

Dann ist nichts weiter zu tun. Sie können direkt in die Schnittstelle schreiben, wo SuperMap 3D benötigt wird. Ebenso können Sie zum Testen auf die 3D-Fälle verweisen, die auf der offiziellen Website von SuperMap 3D bereitgestellt werden. Sie müssen den JS-Code in Vue-Code konvertieren.

Hier werde ich kurz einige Demos zur Einführung von Ebenen vorstellen. Zum Anzeigen der Karte wird noch ein Div benötigt. Ich habe vergessen zu sagen, dass Sie daran denken müssen, die Breite und Höhe dieses Div festzulegen, da es sonst möglicherweise nicht angezeigt wird. Denken Sie daran!

<div id="Karte" style="Breite: 100%;Höhe: 95%"></div>

Dann kommt der TS-Code. Dieser erfordert nicht die Einführung verschiedener Bibliotheken wie der zweidimensionale, sondern nur direkten Code.

Erstellen Sie einfach einen dreidimensionalen Globus

var viewer = neuer Cesium.Viewer('Karte')

Wenn diese Codezeile einen dreidimensionalen Globus anzeigen kann, bedeutet dies, dass die Einführung erfolgreich war und kein Problem vorliegt und wir mit der Entwicklung fortfahren können.

Dann werde ich den detaillierten Code nicht weitergeben, falls erforderlich, finden Sie die Konvertierung aus dem Fall.

Ich möchte Ihnen zeigen, wie Sie mehrere gängige Ebenen einführen. Tatsächlich wird auch auf der offiziellen Website darüber gesprochen. Ich habe sie alle getestet und werde sie Ihnen direkt zeigen.

Die erste Methode besteht darin, topografische Karten und Bilder zu importieren

Wenn ich beispielsweise GIS-Informationen zu einem bestimmten Ort in Peking importieren möchte, kann Baidu nur die zweidimensionale ebene Karte sehen und die Höhe nicht erkennen. Nachdem HyperMap jedoch die topografische Karte eingeführt hat, können Sie die Geländeinformationen, beispielsweise die Höhe, sehen. Zu diesem Zeitpunkt benötigen wir einen Link zum Gelände eines bestimmten Gebiets und einen Link zum Bild dieses Gebiets. Dann ist das Gelände unten und hat die Höhe, die die darauf liegende Bildkarte stützt. Ich glaube, ich verstehe, richtig? Der Code lautet wie folgt:

Geländekarte hinzufügen

var viewer = neuer Cesium.Viewer('map', {
    //Erstellen Sie eine Instanz des Geländedienstanbieters. Die URL ist der von SuperMap iServer terrainProvider veröffentlichte TIN-Geländedienst: new Cesium.CesiumTerrainProvider({
    url: 'http://localhost:8090/iserver/services/3D-DiXing/rest/realspace/datas/面积_Terrain', // Geländekarte laden, das ist der Link unter den Daten isSct: true, // Der Geländedienst kommt vom SuperMap iServer, daher muss isSct beim Veröffentlichen auf true gesetzt werden
    Unsichtbarkeit: wahr
  }),
});

Bildmaterial hinzufügen

// Darunterliegendes Bild hinzufügen var layer = new Cesium.SuperMapImageryProvider({
    url: 'http://localhost:8090/iserver/services/YingXiang/rest/maps/Image base map' //Image-Dienstadresse im Rest-Format});
var imgLayer = this.viewer.imageryLayers.addImageryProvider(Ebene)

Auf diese Weise werden Gelände und Bildmaterial geladen.

Dann können wir die Kameraposition bestimmen, also welchen Teil wir beim Laden sehen. Andernfalls sehen wir einen Globus und müssen hineinzoomen und ihn selbst finden.

//Definieren Sie einfach den Blickwinkel der Kamera this.scene.camera.setView({
  Ziel: Cesium.Cartesian3.fromDegrees(108.19, 40.39, 1000000)
});

Dann laden Sie einfach die erste Karte.

S3M-Ebene wird geladen

Hier werden alle S3M-Ebenen in diesem Dateiverzeichnis geladen. Sie können bei Bedarf nur einige davon laden. Weitere Informationen finden Sie in der offiziellen Dokumentation.

//Füge die Fluss-S3M-Ebene hinzu. Durch Öffnen werden alle Ebeneninformationen unter dem Dateipfad in die Karte importiert. var promise = this.scene.open("http://localhost:8090/iserver/services/CJ/rest/CJ");
Cäsium.wenn.alles([Versprechen], Funktion (Ebenen) {
  let layer = that.scene.layers.find('Yangtze River') // Abfrage des Layers nach Namen. Dieser Name ist der Name, der der Layer-Verbindung entspricht, nicht der Name, den Sie sich selbst geben. layer.style3D.bottomAltitude = 1150 // Stellen Sie die Höhe des Layers auf der Karte ein. Stellen Sie sie nach Bedarf ein. this.viewer.zoomTo(layer); // Der Layer wird an der Modellposition positioniert })

Offizielle Erklärung:

MVT-Ebene hinzufügen

// Gras-MVT-Ebene hinzufügen this.mc = {
  URL: 'http://localhost:8090/iserver/services/CAODI/rest/maps/CD', //MVT-Dienstadresse CanvasWidth: 512,
  Name: 'Grassland', // Der Name der Ebene, nicht Ihr eigener, ist der Name der Ebene, die dieser Verbindung entspricht Viewer: that.viewer
}
dies.McMvtMap = diese.Szene.addVectorTilesMap(diese.mc);

Der obige Code vervollständigt das Hinzufügen der MVT-Schicht.

Dann gibt es eine Löschung

diese.Szene.entfernenVectorTilesMap(McMvtMap.name);

Das ist alles, es fehlt noch eine Codezeile, diese fügen wir am besten hinzu.

this.scene.globe.depthTestAgainstTerrain = falsch;

Dies ist das Ende dieses Artikels über die praktische Verwendung von SuperMap in Vue. Weitere relevante Inhalte zur Verwendung von SuperMap in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!