This is the fourth day of my participation in the November Gwen Challenge. See details: The last Gwen Challenge 2021.

  • To tell you the truth, amap’s dark theme is really not appreciated. Let’s customize a dark theme.
  • Amap officially provides an online theme generation tool. Otherwise it would have been difficult to change the theme style and the result would have been something like this.

  • This article is just to show you how to customize the base style of Amap using the custom tools provided by Amap!
  • Custom map beauty has nothing to do with the author

The document

  • First let’s take a look at the documentation and have a look at the official documentation
  • Custom map theme address

Custom map themes

Select a custom theme template

  • It’s easy to understand how to style changes with that base map. Because you want to change the style, you can just pick one of them.
  • Of course if you want to changeThe dark themechooseDark theme templateBetter, and vice versa.

  • This article chooses the last one to customize and click Change.

Began to change

  • There are many options to modify the base image style, and it is easy to understand. Just to give you an overview
    • Area surface – The color of the map background
    • Road – road route colors such as national road provincial road, etc
    • Label – the location of a hospital or supermarket on a map
    • District name – province, city, district, etc. as shown on a map
    • District boundaries – province, city, district, etc. boundaries as shown on a map
    • Building fast environment —–

Change the base color

  • Regional surface
    • Land – 071733.
    • Water – 06375 – a
  • Administrative region name
    • Provincial and municipal districts. – 3E4BF7
    • City name – 2784FB

  • The change is probably so aesthetic feeling is limited, everybody big guy laughed at!!
  • The color scheme here is borrowed from the four-dimensional map and the new dark map address is here

The articles

  • Draw points, lines and surfaces using maps in VUE + MineMap
  • Openlayers Offline map
  • These two front-end download libraries are recommended for you
  • Vue3 JSX starts from scratch
  • Vue3.0 combat pits
  • Touch hands to configure global loading in the project
  • Vue + Element – UI Dynamic theme and website skin 2021, beta available!!
  • Vue implements site peels -CSS variables
  • Element-ui custom theme