Based on OpenLayers, Cesium to achieve two, three-dimensional map switching

This paper introduces how to realize two and three – dimensional map switching in general 2D GIS project. There are many TWO-DIMENSIONAL map engines on the market, such as OpenLayers, Leaflet and so on. Cesium, a popular open source solution for 3D maps, is itself a map engine based on webGL.

I wrote a summary earlier, which is based on vuecli2.0. Step by step, not a problem. If you’re building a project with Vuecli3, here’s an article about implementing cesium with Vuecli3. If you want to achieve two to three dimensional map switching, the difficulty is the map engine conversion, there is a plug-in to help achieve this work: ol-cesium.

Scene demand

Okay, let me stroke the scene to make sure I have the requirements:

1, OpenLayers load the map

Cesium loads 3d maps

3. Realize two, three dimensional map switching

4. Realize the above functions on vUE framework

Implementation steps

Load the map with OpenLayers

Skip it here, although simple, but there is a threshold for students who have not been exposed to GIS front-end. Since it is to realize the above requirements, it should be the person who will do GIS project. Since I am working on GIS project, this OL loading map should not be a difficulty. There are many examples on the official website, so I skip it here.

Here is an example code:

<template>
	<div id = "map"></div>
</template>
<script>
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,
}),
});
</script>
Copy the code

Cesium loading 3d map

Cesium loading 3d maps is also a hassle for gis students, let alone vUE framework implementation.

Using Vuecli3 as an example, cesium is actually referenced in a few steps:

Install vuE-cli-plugin-cesium plug-in

// npm
npm install --save-dev vue-cli-plugin-cesium

// yarn
yarn add vue-cli-plugin-cesium
Copy the code

Used directly in vUE components

Once installed, you can use new directly because it is already bound to the vue instance.

<template>
	<div id= "cesiumContainer">
    </div>
</template>
<script>
export default {
      name: "",
      mounted(){
         var viewer = new Cesium.Viewer("cesiumContainer")
      }
    }
</script>
Copy the code

Three, to achieve two, three-dimensional map switching

Install the OLCS plug-in

This plugin is used to switch Between OpenLayers and Cesium

npm i --save olcs
Copy the code

Realize two, three – dimensional switch

import OLCesium from 'olcs/OLCesium.js'; const ol3d = new OLCesium({map: ol2dMap}); // ol2dMap is the map object bound by OpenLayers ol3d.setenabled (true);Copy the code

It should be noted that ol2dMap in the above code is a map object bound to OpenLayers, which students in the industry know. Combined with the previous OL example, that is the OLmap object.

Four, pay attention to the main points

If there is such a requirement: originally a two-dimensional map has a vector map, such as a thematic map; Then I switch to the 3D map, and I still want to be able to see that monographs on the 3D map.

Now after switching to 3D, the effect is there, the plane changes to 3D earth, the problem is that the previous thematic map can not be seen! The reason is that switching to 3D overwrites the 2d map. The solution is to switch to 3D and load the planar thematic images with cesium engine.

Cesium loads plane map

var ol3dLayers = ol3d.getCesiumScene().imageryLayers;
        // eslint-disable-next-line no-undef
        ol3dLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
          url: 'http://**************/arcgis/rest/services/**/******/MapServer'
        }))
Copy the code

The example map above is an ArICGIS dynamic service;

Finally, here’s what it looks like:

References:

Blog.csdn.net/u010001043/…
Cesium.com/docs/cesium…
Mp.weixin.qq.com/s/3Of_xKhUO…