Conscience tutorial! After reading the second, I understand the things about making physical maps

This tutorial is written by the designer "Zang Dian" of the VED team of Yizhiwei, please do not steal it.

If the foundation is not solid, the earth will shake and the mountains will shake. In order to help friends more solidly grasp realistic map making, we specially launched a live course on realistic map making at **"July 26th at 3:00 pm"**. Please pay attention to the video account [EasyV Digital Twin], and you can make an appointment This course is over!

Tutorial spoilers are coming! QGIS realistic map production effect display

Brief description of the process

This tutorial obtains the required geographical data (data including satellite map, json of Zhejiang Province, json of cities in the province, road network and water system) through local upload and online download in QGIS, and through standardized operation, in QGIS Save the desired data clipping as a PDF vector file. Data alignment and style design are performed on the vector data in AI and PS, and finally the finished design draft is imported into the EasyV digital twin visualization platform to complete the construction and configuration of the map components and the closure of the interaction.

(If you want to get the resources involved in the tutorial, you can get it by replying "Map Data" in the message column of **Official Account [EasyV Digital Twin]**!)

**Tool preparation: **QGIS3.30.3, PS2022, AI2022, EasyV visualization platform and EasyMap geographic data service website

Dry time

1. Data acquisition

1.1 Satellite image data

Open QGIS (version 3.30.3) and right-click XYZ Tiles to create a new connection, enter the name and URL, and click OK.

In the networked state, drag the placed data into the canvas to get a world satellite map. The mouse wheel can be zoomed, and the left button can be dragged.

1.2 Data of Zhejiang Province

First, you need to download two copies of Zhejiang Province data. Enter the EasyMap map data service webpage (map.easyv.cloud), highlight Zhejiang Province, and download a copy of the data not including the city and a copy including the city. Drag and drop the JSON data that does not include the city directly into the canvas, and you can get a solid-color boundary data of Zhejiang Province.

There is a slight offset between the Zhejiang Province JSON downloaded from EasyMap and the satellite map, and the position of the JSON data needs to be corrected (skip if there is no requirement for data accuracy). First, open the toolbox in the data processing of the top menu, and then search for [Correct Geometry] in the toolbox, double-click to open it and set the input layer to Zhejiang Province, and then click Run to get a corrected data.

Next, correct the position of the repaired data. Open the plug-in manager, search and install the GeoHey Toolbox plug-in, and you can find it in the toolbox on the right after installation.

Double-click GCJ02 to WGS in the plug-in, select the input layer as the data that has just been corrected, and run. It was found that a new layer was generated, and this layer was perfectly aligned with the satellite image.

1.3 Define the scope

Our goal is to focus on Zhejiang Province, supplemented by a piece of data from surrounding provinces. At this time, we need to frame a boundary, and all the data will be obtained within the range of the frame, so that the data will be perfectly aligned when exporting, eliminating the need for manual alignment.

1. Create a new [shape file layer]

2. Enter the file name, and set the geometry type to [polygon]

3. Enter edit mode, activate【Add Polygon Feature】tool

4. Right-click menu bar panel

5. Check【Shape Digitizing Toolbar】

6. Enter the drop-down menu of creating a rectangle and activate the [Create a rectangle with the center] mode

After activating the tool, click the center point of Zhejiang Province with the left mouse button, move the mouse to create a rectangular area, and try to make the area a square (if you know how to create a square, welcome to communicate in the comment area), after confirming the area, click the right button, and the pop-up Click [OK] directly in the element attribute pop-up window.

After obtaining the boundary layer, double-click the layer to edit, reduce the transparency to facilitate the observation and operation of the underlying data (or only keep the boundary stroke).

1.4 Data export

In the menu bar, click [Project] - [Export] - [Export map as PDF file] to export the pdf file, select the bounding box from the layer calculation in the range, and record the resolution at this time, which will be used later in PS. Then click Export.

ps: If you want a higher resolution, you can scroll the wheel in the canvas to zoom in on the satellite image (decrease the scale value) and export it, and the resolution will increase accordingly.

1.5 Import AI and PS

Open the exported PDF with AI, and after selecting all the satellite images, export the satellite images as SVG (to prevent white edges at the seam after importing into PS in other formats).

Create a canvas in PS with the same resolution as QGIS export, and then import satellite SVG to fill the canvas.

Return AI to group all map data.

Then select the bounding box and map data ctrl+c, go back to PS and perform ctrl+v, after selecting the imported layer, you can see that both the bounding box and the map data have been imported into PS in the form of layers, and zoom in on both After the canvas is full (the bounding box is used to assist the alignment of the data), delete the bounding box layer, and right-click to merge all the data, and the map data is still in the vector state. At the same time, an auxiliary line is placed with Zhejiang Province as the boundary.

Import the railway data in QGIS, and then export a separate railway network data with Zhejiang Province as the calculation range, directly drag the exported pdf into AI, save it in AI format, import the AI ​​file into PS, open it as a smart object and select [ page】.

Zoom the layer to fill the auxiliary line, because when we export the railway data, we use the Zhejiang data as the boundary, so the railway data and others are accurately aligned at this time. Then double-click the [Road] smart layer to return to AI directly.

In the prompt box that pops up from AI, select [Discard Changes]. After that, if we modify and save the AI ​​file, PS will update it synchronously. Delete the white background in AI and save it, and return to PS to see that the road network background has been removed.

At this time, press and hold ctrl + left click on the thumbnail of the Zhejiang Province layer to create a selection area, then select the [Road] layer to add a mask, and the road network will be clipped to Zhejiang Province. Similarly, we can import water data.

Next, we get the boundary lines between the cities, drag the data of Zhejiang Province including the sub-regions downloaded just now into QGIS, and then export it to a separate pdf. When importing AI, disable coloring, change the stroke style to dotted line, save it in AI format and import it into PS. You can adjust the stroke thickness in AI later, and PS will automatically synchronize.

2. Style making

2.1 Satellite color processing

The map style produced this time focuses on the presence of prominent points and lines, so that it can be organically integrated with realistic satellite images to achieve a style between cartoon and realism.

First, adjust the style of the underlying satellite image. Here I want a bluish dark gray as the background color, and the dark color can better highlight the highlighted color. Perform operations such as removing color, increasing contrast, darkening the scene, and giving blue color.

2.2 Zhejiang province base map processing

Activate the Zhejiang Province constituency (ctrl + left click on the thumbnail of the Zhejiang Province layer to create a constituency), then select the satellite image layer, ctrl + j to copy a satellite image of Zhejiang, and convert it into a smart object, adjust the curve Make it brighter, and add shadows at the end to add depth.

Let’s add styles for the Zhejiang border (here is a small pit: when adding styles, pay attention to adding them to the shape layer, do not add them directly to the satellite image, because the satellite image has now added a smart filter-curve, which will add it to us style has an effect).

[Stroke]
Number of layers : *3;

**Colors:** Outer layer #9bd8f1; middle layer #9dc5df~#ffffff; inner layer #3ea4d9.

**Thoughts:**Firstly, the stroke of the middle layer uses a bright white to light blue gradient, which is the brightest part of the whole picture, in order to better separate it from the background and emphasize the existence of lines The inner and outer layers of thicker auxiliary strokes are used to make a transition, which can better blend with the background and reduce the sense of fragmentation, and the thick strokes with rounded corners can enhance the tone of the cartoon and reduce the irregular shape bands on the edges of the data Gives a sense of sharpness.

【gradient】

Color: #269efa~none

**Idea:** Here, a blue gradient is superimposed on the surface of the satellite image, in order to strengthen the blue tone of the satellite image, and at the same time help the stroke to appear better. This gradient is very weak, from the bottom to the top, and the transparency transitions from 11% to 0%. The blue here should not be too much, otherwise it will cover the gray tone background. I want to keep the gray tone because high saturation colors will be used when superimposing other data later, and gray can better set off these colors.


Finally, add a gray color to the city boundary line. The presence of the boundary line here does not need to be too strong. It can be expressed with a light gray dotted line. It will not appear cluttered when stacked with other data, and it can enhance the design theme of points and lines. .

2.3 Decoration data processing

Adjust the style of road and water.

【Road】: #f4ff77

[Water]: #6adbfc

Idea: In order to cater to the overall cold design style, the road chose a cooler yellow, and the water chose light blue. These two colors are highly saturated candy colors, which can be clearly distinguished from the background.

Lu added an [Outer Glow], because the thin lines of bright colors directly superimposed on the dark background will be very jumpy, and it will be awkward if the two do not interact, so an Outer Glow transition is used here;

An [inner shadow] is added to the water to simulate the river channel, which visually has a height difference and increases the sense of space.


Finally, the superposition of green wave dots【#3cff98】.

The data here was originally intended to be expressed by green land or cities, but the area of ​​the green land is too large, which affects the hue of the entire picture, so some areas are lightened with masks.

2.4 Atmosphere Design

The next step is to process the sea surface. Here, for the convenience of processing, directly use a pen or magnetic lasso to outline the selection area of ​​the land and add a mask. Then use a pen to draw multiple layers of contour lines, and the color transitions from light to dark.

Add details, add the provincial boundaries of the surrounding provinces, and then superimpose oblique lines and grid patterns on the lower layer of the satellite map of Zhejiang Province, and finally add a small icon and city name. The text can be added with a thicker, downward-shifted shadow , to pull out the hierarchy.

Finally, make all the layers into a group, superimpose the mask, and use the gradient tool to draw a radial circle from white to black on the mask, the purpose is to cover the edges smoothly. Finally, add a solid color background under the group and adjust the color.

3. Platform construction

How can the completed map be applied in actual work scenarios? Programmers please help achieve? NO! We can use EasyV to build the map we want, and we can also overlay visual data and animation effects on the map. If you want to have it, ask your boss to buy it for you too!

3.1 Upload design draft

Create a new application and enter edit mode.

Select Component-Map-3D Boundary Map V2 in the top navigation to create a 3D map component (we are going to make a flat map here, the reason why we choose 3D Boundary Map is because it has the function of scene management and can save multiple Shots from different angles, it will be very convenient when doing scene switching animations later). Fill the canvas with components, delete redundant subcomponents, and delete custom map data.

Click the subcomponent [picture] to enter the subcomponent editing panel, and upload the finished design draft. Note that the size of the picture should not exceed 5MB, and the transparency is the largest.

After uploading the picture, I found that the picture did not blend with the background of the canvas. Click outside the canvas to call out [Page Setup] on the right, and adjust the page background color to the mask color of the design draft.

3.2 Dynamic configuration

Add some dynamic decorations to the map.

**Operation:**Enter the picture subcomponent, and upload a png that can be rotated circularly. Animation Type - [Default Type]; Rotation Axis - [Y Axis]; Speed ​​- [0.1]. Then create a new picture, upload the png of the cloud, set the animation type - [custom type], here is a key frame function similar to AE, we set the cloud to be displaced from left to right, and the transparency is from 0 to 100 and then to 0. Can.

3.3 Lens configuration

Next, we make the transition effect of drilling down. Enter the scene manager, adjust a default scene lens (rotate with the left mouse button, drag with the right mouse button, zoom with the mouse wheel), name and save the lens after finding the angle you want, and then save a lens that is close to the ground, so that you can see from a high altitude When the default angle of view is switched to the ground-mounted lens, there will be a swooping effect. I used a picture of Jiangsu on the lower-level page here, so the ground lens is locked to Jiangsu, and after saving the lens, exit the scene manager in the upper left corner.

3.4 Signage and Interaction

Add [Signage] subcomponent, design and upload the built style, adjust the text style at the same time, and finally enter the coordinates in the data.

The following interactive configuration.

**Interaction ideas:** After clicking on the sign of Jiangsu, the perspective dives to the ground. When zooming in to a certain distance, the top map gradually disappears, and the bottom map lens slowly zooms in. The two are properly connected. Adding clouds in the middle of the animation can not only make the animation connection more complete, but also increase the immersive visual experience.

**Operation:**Enter the interaction panel of the [Signage] subcomponent, create a new custom event, event type - [mouse click], change the condition field name and value, when the value is "Jiangsu Port Domain", the Interactive responsiveness, which allows for personalized interactive customization of each signage.

**Action 1:** New Action 1; Action-[Scene Switching]; Scene Name-[Scene 2].

**Action 2: **Action-[Hide], the purpose is to gradually hide the upper layer map components when the perspective dives, and display the lower layer Jiangsu map components.

In the same way, make a map of Jiangsu. When the map of Zhejiang is hidden, Jiangsu will gradually appear. Pay attention to setting the delay playback for the display action of Jiangsu, and finally pull the camera of Jiangsu from far to near high altitude.

Finally, a cloud png is placed outside the canvas as an aid for the transition animation. The animation is that the cloud moves from the right side of the canvas to the left side of the canvas. The final effect is shown in the video at the top of the article.

This is the end of today's sharing. I believe that the friends must have gained a lot from the production of realistic maps. Don't worry if you haven't learned it. We will take everyone to make it together in the live broadcast room at 3 pm next Wednesday . Everyone, remember to practice it with hands-on practice. If you have any questions, you can communicate in the comment area. The editor will reply you as soon as possible after seeing it~