所以，你已经确定了你需要把纬度/经度转换成笛卡尔坐标，也就是x和y坐标。
我的解决方案是canvas api，你可以在上面画出你想要的东西。
所以，这里开始了...希望它能有所帮助！
第一个
编辑：link可能有助于将经度/纬度转换为笛卡尔坐标
下面是一个使用背景图像的版本：

// make the canvas element and add it to the DOM
let canvas = document.createElement("canvas");
canvas.width = 360;
canvas.height = 180;
canvas.style.border = "1px solid black";
canvas.style.backgroundColor = "white";
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
// set the colour of the canvas background
canvas.style.backgroundColor = "#999";
canvas.width = 360; // 360deg
canvas.height = 180;
// declare var to hold our chart/background
let worldImg;
let loadImg = new Promise(() => {
  //Load an image
  worldImg = new Image();
  worldImg.addEventListener("load", loadHandler, false);
  worldImg.src =
    "https://stuartcodes.000webhostapp.com/pexels-pixabay-41949.png";
  console.log(worldImg);
});
//The loadHandler is called when the image has loaded
function loadHandler() {
  console.log("OK");
  // draw the image that we want as the background
  ctx.drawImage(worldImg, 0, 0);
  // then draw everything else
  // define your orgin lat'/long' = 0 at center for instance
  let oX = canvas.width / 2;
  let oY = canvas.height / 2;
  // let's plot the oX/oY axis
  //a. Set the line style options
  ctx.strokeStyle = "#fff";
  ctx.lineWidth = 0.5;
  //b. Draw the x axis line
  ctx.beginPath();
  ctx.moveTo(0, oY); // set start point of line
  ctx.lineTo(oX * 2, oY); // end point of line
  ctx.stroke(); // draw it
  //c. Draw the y axis line
  ctx.beginPath();
  ctx.moveTo(oX, 0); // set start point of line
  ctx.lineTo(oX, oY * 2); // end point of line
  ctx.stroke(); // draw it
  // plot your coords
  // I'm using the canvas api's rectangle method to
  // draw a rectangle of the point we want to plot
  // for convenience!
  // convenience vars for our plot point's width/height
  let ppW = 10,
    ppH = 10;
  // and then it's useful to to have the center points!
  let ppwCenter = ppW / 2,
    pphCenter = ppH / 2;
  //Set the line and fill style options
  ctx.strokeStyle = "black";
  ctx.lineWidth = 1;
  ctx.fillStyle = "rgba(128, 0, 0, 0.75)";
  //Draw the rectangle
  ctx.beginPath();
  ctx.rect(oX - ppwCenter, oY - pphCenter, ppW, ppH); // rect(x, y, width, height)
  ctx.stroke();
  ctx.fill();
  // plot another point in the middle of the top right quadrant
  //Set the line and fill style options
  ctx.strokeStyle = "black";
  ctx.lineWidth = 1;
  ctx.fillStyle = "rgba(0, 0, 255, 0.75)";
  // vars for your plot point coords, long/lat
  let x, y;
  // ****** Ploting With Decimal Degrees ****** \\
  //your plot points could be defined as oX +/- something
  // it's up to you to define the resolution of your graph
  x = oX * 0.5; // half of the quadrant's width
  y = oY * 0.5; // half of the quadrant's height
  //Draw the rectangle
  ctx.beginPath();
  ctx.rect(oX - ppwCenter + x, oY - pphCenter - y, 10, 10); // rect(x, y, width, height)
  ctx.stroke();
  ctx.fill();
  console.log(oX, x, y);
  // So if you have your long/lat coords in decimal degrees
  /*  https://www.latlong.net/degrees-minutes-seconds-to-decimal-degrees
  Decimal Degrees = degrees + (minutes/60) + (seconds/3600)
  DD = d + (min/60) + (sec/3600)
  */
  
  // you could simply plot
  x = 30.6789; // longitude in decimal deg
  // y = -1 * number is a correction for the canvas
  // so that negative numbers fall south of the equator
  y = -1 * 15.23456; // latitude in decimal deg
  //Set the line and fill style options
  ctx.strokeStyle = "black";
  ctx.lineWidth = 1;
  ctx.fillStyle = "rgba(255, 0, 255, 0.75)";
  //Draw the rectangle
  ctx.beginPath();
  ctx.rect(oX - ppwCenter + x, oY - pphCenter + y, 10, 10); // rect(x, y, width, height)
  ctx.stroke();
  ctx.fill();
}