Practice of using SuperMap in Vue

Preface

How should I put it? I answered a phone call in a daze, received a temporary task in a daze, went on a business trip in a daze, and worked with SuperMap in a daze for a few days. SuperMap is really powerful, but it takes a certain amount of time to learn it, because its functions are relatively powerful, and there are so many functional points that it cannot be started developing in a short time. Come on! I am also a newbie, but after pushing it for a long time, I'd like to sort out some methods and steps of introducing hypergraph into vue project here, hoping to help some newbie colleagues who need to use it but have no direction in the future. For reference only, not to be trusted.

Related Materials

There may be relatively fewer people or groups using it, so there is less information on the Internet, but there are still a few websites that need to be shared with you.

SuperMap official website: Shuttle Gate

SuperGraph Case Study: Shuttle Gate

SuperGraph 3D: Shuttle Gate

OpeaLayers: Shuttle Gate

You can definitely find the corresponding information or API interfaces on these websites, but the cases given on the official website are all js codes. If you need to use it in a vue project, you may need to convert the corresponding js code into vue syntax. In fact, you don’t need to understand the meaning of each line of code when converting, because the code in the case does not have a specific introduction. If you want to figure it out, you need to query the api individually, but this is a huge task. You can study it slowly in the future. If you are in a hurry, you only need to understand the code blocks.

Vue project introduces two-dimensional hypergraph

The next step is to introduce two-dimensional hypergraphs into the Vue project.

Let's take OpenLayers as an example, documentation.

The document introduces many ways of importing. If it is a Vue project, please use the npm import method.

npm install @supermap/iclient-ol

After the installation is complete, there will be a supermap folder in the node_modules folder. Congratulations, the installation is successful!

After the installation is complete, introduce the CSS file in the index.html file.

<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' />

Then that's it, SuperMap is successfully added to the project.

But there is a problem, that is, whether the ES6 syntax of the project can be converted to ES5. This may require configuration, otherwise later projects will report errors when using Hypergraph to load data.

Add supermap transformation to webpack.base.conf.js file.

{
   test: /\.js$/,
   loader: 'babel-loader',
   include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'), resolve('node_modules/@supermap')]
},

This should be no problem. Two-dimensional is relatively simple. Let’s take a simple example.

Hypergraph 2D Case

Citation

First, introduce some libraries on the page that needs to use hypergraph.

  import Map from 'ol/Map';
  import View from 'ol/View';
  import TileLayer from 'ol/layer/Tile';
  import * as control from 'ol/control';
  import { Logo, TileSuperMapRest } from '@supermap/iclient-ol';

These libraries are introduced according to the official website documentation, that is, the OpenLayers API documentation.

As for what specific libraries to introduce, we can copy a few examples from the official website according to our needs, and then we can check the corresponding libraries used in the examples in the OpenLayers API document.

For example, there is a piece of code in the official website's case, var layer = new ol.layer.Tile When we don't know what library to introduce when converting to Vue, we can go to opealayers to check.

It’s similar to this check.

HTML

Next, write an HTML to display the map.

<div id="map"></div>

TS

Then comes the ts code.

        var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
        this.map = new Map({
          target: 'map',
          controls: control.defaults({ attributionOptions: { collapsed: false } }).extend([new Logo()]),
          view: new View({
            center: [106.86, 39.71],
            // maxZoom: 18,
            // minZoom: 2,
            zoom: 5,
            projection: 'EPSG:4326',
          })
        });
        var layer = new TileLayer({
          source: new TileSuperMapRest({
            url: url,
            wrapX: true
          }),
          projection: 'EPSG:4326'
        });
        this.map.addLayer(layer);

Then the two-dimensional image can be displayed normally.

If you need other functions, you can go to the official website to check the cases and use them directly, but you need to convert the js code into vue syntax, ok!

Vue introduces 3D super graph

3D is a little more difficult, you can refer to the SuperMap 3D document. The official website uses js. If you want to install vue, you need a package, which you can download in time.

Download location of the package

After downloading it, I put it in the static folder.

Then import the widgets.css, Cesium.js and zlib.min.js files into index.html.

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

Then there is nothing more to do. You can directly write in the interface where SuperMap 3D is needed. Similarly, you can refer to the 3D cases provided by SuperMap 3D official website for testing. You need to convert the js code into vue code.

Here, I will briefly introduce a few demos of introducing layers. A div is still needed to display the map. I forgot to say that you must remember to set the width and height of this div, otherwise it may not be displayed. Remember!

<div id="map" style="width: 100%;height:95%"></div>

Then comes the ts code. This does not require the introduction of various libraries like the two-dimensional one, just code directly.

Simply create a three-dimensional globe

var viewer = new Cesium.Viewer('map')

If this line of code can display a three-dimensional globe, it means that the introduction is successful and there is no problem, and we can continue to develop it.

Then I will not share the detailed code, if necessary, find the conversion from the case.

Let me share with you how to introduce several common layers. In fact, the official website also talks about it. I have tested them all, so I will show them to you directly.

The first method is to import topographic maps and images

For example, if I want to import GIS information of a certain place in Beijing, Baidu can only see the plane map, which is two-dimensional and cannot see the height. However, after HyperMap introduces the topographic map, you can see the terrain information, such as the height. At this time, we need a link to the terrain of a certain area, and a link to the image of this area. Then the terrain is below and has the height, which props up the image map laid on it. I think I understand, right? The code is as follows:

Add terrain map

var viewer = new Cesium.Viewer('map', {
    //Create an instance of the terrain service provider, the url is the TIN terrain service published by SuperMap iServer terrainProvider: new Cesium.CesiumTerrainProvider({
    url: 'http://localhost:8090/iserver/services/3D-DiXing/rest/realspace/datas/面积_Terrain', // Load terrain map, which is the link under datas isSct: true, // Terrain service comes from SuperMap iServer, so isSct needs to be set to true when publishing
    invisibility: true
  }),
});

Add imagery

// Add underlying image var layer = new Cesium.SuperMapImageryProvider({
    url: 'http://localhost:8090/iserver/services/YingXiang/rest/maps/Image base map' //image service address in rest format});
var imgLayer = this.viewer.imageryLayers.addImageryProvider(layer)

In this way, the terrain and imagery are loaded.

Then we can locate the camera position, that is, which part we will see when loading. Otherwise, we will see a globe and need to zoom in and find it ourselves.

//Simply define the camera's viewing angle this.scene.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(108.19, 40.39, 1000000)
});

Then just load the first map.

Loading S3M layer

This place loads all S3M layers in this file directory. You can load only some of them as needed. You can refer to the official documentation.

// Add the river S3M layer. Open will import all layer information under the file path into the map var promise = this.scene.open("http://localhost:8090/iserver/services/CJ/rest/CJ");
Cesium.when.all([promise], function (layers) {
  let layer = that.scene.layers.find('Yangtze River') // Query the layer by name. This name is the name corresponding to the layer connection, not the name you give yourself. layer.style3D.bottomAltitude = 1150 // Set the height of the layer on the map. Set it as needed. this.viewer.zoomTo(layer); // The layer is positioned to the model position })

Official explanation:

Adding MVT Layer

// Add grass MVT layer this.mc = {
  url: 'http://localhost:8090/iserver/services/CAODI/rest/maps/CD', //MVT service address canvasWidth: 512,
  name: 'Grassland', // The name of the layer, not your own, is the name of the layer corresponding to this connection viewer: that.viewer
}
this.McMvtMap = this.scene.addVectorTilesMap(this.mc);

The above code completes the addition of the MVT layer.

Then there is deletion

this.scene.removeVectorTilesMap(McMvtMap.name);

That's all, there's one more line of code, it's better to add it.

this.scene.globe.depthTestAgainstTerrain = false;

This is the end of this article about the practice of using SuperMap in Vue. For more relevant content about using SuperMap in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!