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

When I was writing a project, I had to embed a map in the home page and show the 3D effect. I could draw borders and regions, show labels and click labels. Because of the high requirements for customization and styling, simply using Echarts is no longer enough. Therefore, we used the API of Amap in the project to achieve the effect as shown below.

The introduction of AMap

First we need to introduce AMap: using the 

<body>
  <script src="Https://webapi.amap.com/maps?v=1.4.15&key= gold maps API Key value & plugin = AMap. MouseTool, AMap. The Geocoder, AMap. DistrictSearch"></script>
  <noscript>
    <strong>
      We're sorry but <%= htmlWebpackPlugin.options.title %>
      doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
</body>
Copy the code

MouseTool, AMap.Geocoder and AMap.DistrictSearch are all AMap tools that we can import as needed. Among them

  • AMap MouseTool is
  • AMap Geocoder is
  • AMap DistrictSearch is

Initialize the map

We need to have an HTML element container, and if we have a UI design style, we need to ask the UI for a style ID. Here we use the amap.map () constructor to generate AMap instance:

      const map = new AMap.Map('map_box', {
        / / style ID
        mapStyle: `amap://styles/The ${ID} style`.center: [116.275034.40.095882].viewMode: '3D'.resizeEnable: true.rotateEnable: true.pitchEnable: true.zoom: 16.pitch: 45.layers: [
          // Block layer
          new AMap.Buildings({
            zooms: [2.20].zIndex: 11.heightFactor: 2// 2 times the default height, effective in 3D]}}));// Save the Map instance in data
      this.gxMap = map;
      
      // Only when the Map instance life cycle is complete can it be hung at marker points and areas
      map.on('complete'.() = > {
        this.drawBigBounds();
        this.drawText(); // Display listed companies by default
      });
Copy the code

Mount marker points and regions

We can see that after initializing the Map instance, we call the drawBigBounds() and drawText() methods in the complete life cycle of the Map instance. Before this, we need to obtain the latitude and longitude coordinates of the marked point and the coordinate array of the region. The coordinate data structure can be as follows:

You can also usenew AMap.LngLat(item.lng, item.lat)The traversal coordinate data method is used.

  1. We first draw the map area
    // Administrative area
    drawBigBounds() {
      // Generate polygon- region one
      formatPhaseOneArr.forEach((item, index) = > {
        const phaseOnePolygon = new AMap.Polygon({
          strokeWeight: 2.path: item,
          fillOpacity: 0.fillColor: 'rgba(137, 116, 70, 1)'.strokeColor: '#38C8F5'.strokeOpacity: 1 - 0.2 * index
        });
        this.gxMap.add(phaseOnePolygon);
      });
    }
Copy the code

New amap.polygon () is literally the method to draw the area, where we set the area color and transparency, and the border width color and transparency. As shown in the picture at the beginning, since the area style of UI design is the same as 3D fence, I used multiple generation area, set the background color of the area to transparent, and set the border to gradient to achieve.

  1. Draw marker points
          list.forEach(item= > {
            const companyName = item.company_name;
            const longitude = item.lnglat[0];
            const latitude = item.lnglat[1];
            const dom = `
            <div style="" class="company-marker-content">
              <div class="content-container">
                <div class="content-text-bg"></div>
                <p class="content-text">${companyName}</p>
              </div>
              <div class="marker-line"></div>
              <div class="marker-circle outer">
                <div class="marker-circle inner"></div>
              </div>
            </div>`;
            const marker = new AMap.Marker({
              position: new AMap.LngLat(longitude, latitude),
              content: dom, // Add the Icon URL
              title: companyName,
              anchor: 'bottom-center'.offset: new AMap.Pixel(0, -8)});this.markerArr.push(marker);
            marker.on('click'.() = > {
              that.openCompanyDetail(item.company_id);
            });
            this.gxMap.add(marker);
          });
          this.enterpriseData[index].marker = this.markerArr; // Store marker for remove(there should be better solution)
Copy the code

We used the new amap.marker () constructor to traverse the point data, and then added the Marker instance to the Map instance. It should be noted that we saved the Marker instance in the array, so that when we changed the data by switching options on the Map, You can remove the previous data using the remove() method of the Map instance.

At the end

This completes the ability of AMap to generate maps and add markers and regions.