Shulou(Shulou.com)06/01 Report--

How to achieve 2-D map switching based on openlayers and cesium, many novices are not very clear about this. In order to help you solve this problem, the following editor will explain it in detail. People with this need can come and learn. I hope you can get something.

This paper introduces how to realize the two-dimensional and three-dimensional switching of map in the ordinary 2d gis project. There are many 2D map engines in the market, such as openlayers, leaflet and so on. At present, the popular open source scheme of 3D map is cesium, which is a map engine based on webGL.

Scene requirement

All right, let me get the picture straight and figure out the requirements:

1. Openlayers loads the map

2. Cesium loads 3D map

3. Realize the switch between 2D and 3D maps.

4. Implement the above functions on the vue framework.

Step 1: load the map with openlayers

Skipped here, although simple, but for the front-end students who have not come into contact with gis, there is still a threshold for entry. Since it is to achieve the above requirements, it should be the person who wants to do the gis project. Since you are working on the gis project, it should not be difficult to load the map on ol. There are many examples on the official website, so we will skip it here.

Or give a sample code:

Import 'ol/ol.css'

Import Map from 'ol/Map'

Import OSM from 'ol/source/OSM'

Import TileLayer from 'ol/layer/Tile'

Import View from 'ol/View'

Var olmap = new Map ({

Layers: [

New TileLayer ({

Source: new OSM ()

})]

Target: 'map'

View: new View ({

Center: [0, 0]

Zoom: 2

})

});

Load 3D map with cesium

Loading 3D maps on cesium is also a hassle for students in the gis industry, not to mention implementing it on the vue framework.

Taking vuecli3 as an example, quoting cesium actually takes only a few steps:

Install the vue-cli-plugin-cesium plug-in / / npm

Npm install-save-dev vue-cli-plugin-cesium

/ / yarn

Yarn add vue-cli-plugin-cesium

Used directly in vue components

Once installed, you can directly new out and use it, because it has been bound to the vue instance

Export default {

Name: ""

Mounted () {

Var viewer = new Cesium.Viewer ("cesiumContainer")

}

}

Third, switch between 2D and 3D maps and install the olcs plug-in.

This is a plug-in for switching between openlayers and cesium. Move the details to the official website.

Npm I-- save olcs

Realize the switch between 2D and 3D import OLCesium from 'olcs/OLCesium.js'

Const ol3d = new OLCesium ({map: ol2dMap}); / / ol2dMap is a map object bound by openlayers

Ol3d.setEnabled (true)

It is important to note that the ol2dMap in the above code is a map object bound by openlayers, which is understood by all students in the industry. Combined with the previous ol example, it is that olmap object.

Fourth, pay attention to the main points

If there is such a need: originally a 2D map has a vector map, such as a thematic map, and then switch to a 3D map, I still want to be able to see that thematic map on the 3D map.

Now after switching to three-dimensional, the effect is there, the plane becomes three-dimensional earth, the problem is that the previous thematic map can not be seen! The reason is that after switching to 3D, the 2D map is overlaid. The solution is to switch to 3D, and then use the cesium engine to load the flat thematic map.

Cesium loads a flat map var ol3dLayers = ol3d.getCesiumScene (). ImageryLayers

/ / eslint-disable-next-line no-undef

Ol3dLayers.addImageryProvider (new Cesium.ArcGisMapServerImageryProvider ({

Url: 'http://**************/arcgis/rest/services/**/******/MapServer'

}))

The sample map above is an aricgis dynamic service

Finally, in the image above, let's take a look at the effect:

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.