User defined dotting style and message box on Baidu map

Time:2020-11-20

User defined dot style and message map on Baidu map
The results are as follows:
User defined dotting style and message box on Baidu map

thinking

At first, I wanted to modify the infoview style, but I found it very difficult. So I considered to directly overlay the custom map and canvas map on the map through the marker.

Because the content with messages is changeable, you need to use canvas before each dot, take the cutaway provided by UI as the background of canvas, then fill the data as text on the canvas, and finally return a canvasnew BMap.IconCreate an icon instance, and finallymap.addOverlay(Icon)Cover the map

The specific codes are as follows:
Create a canvas and draw pictures and text on the canvas
`

/**
 * 
 * @param file 
 * @param name 
 * @param value 
 *File background image
 *Name value displays the text and value
 */
export const canvasPngAddTxt = (file: any, name: string, value: string) => {
  const cvs: any = document.createElement('canvas')
  const ctx: any = cvs.getContext('2d')
  cvs.width = 260
  cvs.height = 70

  const imgWidth = cvs.width
  const imgHeight = cvs.height

  ctx.rect(0, 0, imgWidth, imgHeight)
  ctx.fillStyle = 'rgba(255,255,255,0)';
  ctx.fill()
  const img = new Image()
  img.src = file
  img.crossOrigin = 'Anonumous'
  img.onload = () => {
    ctx.drawImage(img, 0, 0, cvs.width, cvs.height, 0, 0, cvs.width, cvs.height)
    ctx.font = '18px bold sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillStyle = '#fff';
    const left = cvs.width*0.78;
    const top = cvs.height*0.066;
    ctx.fillText ('react building ', 52, 37);
    ctx.fillText('90%', 125, 37);
  }
  return cvs
}

`

Dot on Baidu map, using custom images and maps created by canvas
`

function markPoint(BMap: any, cardText: any) {
    const pt = new BMap.Point(
      buildingPoints[0][0],
      buildingPoints[0][1],
    );
    //Custom canvas chart
    const cardIconLeft = new BMap.Icon(
        cardText,
        new BMap.Size(170, 120),
        {  
            anchor: new  BMap.Size (170, 43) // anchor makes the lower right corner of the rectangle face the vertex  
        }
    )
    //Point
    const circleIcon = new BMap.Icon(
        CircleIcon,
        new BMap.Size(30, 30),
    );
    const marker = new BMap.Marker(pt, { icon: circleIcon });
    const markerCard = new BMap.Marker(pt, { icon: cardIconLeft });
    map.addOverlay (marker); // custom dot
    map.addOverlay (markercard); // self defined canvas graph
    });
  }

`

`

//Create a map
useEffect(() => {
    initGLMap();
    setBuildingPoints([
      [120.232549, 30.230392],
      [120.232549, 30.230492],
    ]);
  }, []);
  
  //Map management
 useEffect(() => {
    const infoCardImg = createCardTextImg()
    markPoint(BMapGL, infoCardImg);
  }, [buildingPoints, map]);

`