{
	"type": "FeatureCollection",
	"name": "merged",
	"crs": { 
		"type": "name",
		"properties": { "name":"urn:ogc:def:crs:OGC:1.3:CRS84" } 
	},
	...

// contour
drawPath(geoData[4], {
    projection: geoProjectionLS,
    stroke: COLOR_CONTOURS,
    strokeWidth: 0.2,
    clipId: OUTTER_CLIP_FRAME_ID,
    // shadowId: SHADOW_FILTER_ID,
    mapRectId: MAIN_MAP_ID
});

const W = 708.7 //60cm
const H = 826.8 //70cm
const CM = 11.8 //300dpi下的1cm

const MARGIN = 3 * CM
const WIDTH = W - 2 * MARGIN
const HEIGHT = H - 2 * MARGIN

function drawFrame(clipId) {

    const g = svg.append("g").attr("id", MAIN_MAP_ID + '-frame')
    g.append("clipPath")
        .attr("id", clipId)
        .append("rect")
        .attr("x", MARGIN)
        .attr("y", MARGIN)
        .attr("width", W - 2 * MARGIN)
        .attr("height", H - 2 * MARGIN)
    g.append("rect")
        .attr("x", MARGIN)
        .attr("y", MARGIN)
        .attr("width", W - 2 * MARGIN)
        .attr("height", H - 2 * MARGIN)
        .attr('fill', COLOR_INNER_BACKGROUND);
}

var promises = [];

DATA_FILES.forEach(function (url) {
    promises.push(d3.json(url))
});

Promise.all(promises).then(function (values) {
    //do something with the data values
});

var geoProjectionLS = d3.geoMercator()
          .fitExtent([[3 * MARGIN, 3 * MARGIN], [WIDTH, HEIGHT]], land);
//or
var geoProjectionLS = d3.geoMercator()
          .clipExtent([[MARGIN, MARGIN], [WIDTH, HEIGHT]], land);

const SCALE = 6587 // for print just increase this
const CENTER = [101.02, 26.53] // [lon,lat]

var geoProjectionLS = d3.geoMercator()
    .scale(SCALE * 1.5)
    .center(CENTER)
    .translate([WIDTH * 0.5, HEIGHT * 0.5])

  var geoGenerator = d3.geoPath(projection);

function drawMap(
  geoData,
  {
    width,
    height,
    marginTop = 1,
    marginLeft = 1,
    marginBottom = 1,
    marginRight = 1,
    padding = 30,
    projection = d3.geoIdentity().reflectY(true),
    fill = "none",
    stroke = "black",
    strokeWidth = 0.75,
    strokeLinejoin = "round",
    clipId = "none",
    mapRectId = "none",
    shadowId = "none",
    debug = false,
  } = {}
) {
  var geoGenerator = d3.geoPath(projection);
  var mapRect = d3.select("svg").append("g").attr("id", mapRectId);

  const canvas = mapRect.append("g").attr("class", "features");

  if (debug) {
    canvas
      .append("rect")
      .attr("fill", "none")
      .attr("stroke", "#f0f")
      .attr("x", marginLeft)
      .attr("y", marginTop)
      .attr("width", width - (marginLeft + marginRight))
      .attr("height", height - (marginTop + marginBottom));
    canvas
      .append("rect")
      .attr("fill", "none")
      .attr("stroke", "#f0f")
      .attr("x", marginLeft + padding)
      .attr("y", marginTop + padding)
      .attr("width", width - (marginLeft + marginRight + 2 * padding))
      .attr("height", height - (marginTop + marginBottom + 2 * padding));
  }

  canvas
    .append("path")
    .datum(geoData)
    .attr("clip-path", "url(#" + clipId + ")")
    .attr("filter", "url(#" + shadowId + ")")
    .attr("fill", fill)
    .attr("stroke", stroke)
    .attr("stroke-width", strokeWidth)
    .attr("stroke-linejoin", strokeLinejoin)
    .attr("d", geoGenerator);

  return Object.assign(mapRect, {
    props: {
      projection,
      width,
      height,
      marginTop,
      marginLeft,
      marginBottom,
      marginRight,
      padding,
      geoData,
      clipId,
      mapRectId,
    },
  });
}

// lake
drawPath(geoData[1], {
    projection: geoProjectionLS,
    stroke: COLOR_WATER,
    strokeWidth: 0.5,
    clipId: OUTTER_CLIP_FRAME_ID,
    shadowId: SHADOW_FILTER_ID, //湖有阴影
    mapRectId: MAIN_MAP_ID,
})

// river
drawPath(geoData[2], {
    projection: geoProjectionLS,
    stroke: COLOR_WATER,
    strokeWidth: 0.5,
    clipId: OUTTER_CLIP_FRAME_ID,//河没有阴影
    mapRectId: MAIN_MAP_ID,
})

const MULI_FRAME_WIDTH = 20 * CM;
const MULI_FRAME_HEIGHT = 22 * CM;
const MULI_FRAME_MARGIN = 2 * CM;

const DEGREE_STEP_MULI = [0.5, 0.5]
const GRATICULE_INNER_PRECISION = 0.4

const CENTER_MULI = [101.03, 29.85] // [lon,lat]

const INNER_CLIP_FRAME_ID = 'id-inner-clip-frame'
const MULI_MAP_ID = 'id-muli-map'

var geoProjectionMuLi = d3.geoMercator()
    .scale(SCALE * 1.8)
    .center(CENTER_MULI)
    .translate([WIDTH * 0.22, HEIGHT * 0.24])
//for better control we use projection above instead of fitExtent
// .fitExtent([[3 * MARGIN, 3 * MARGIN], [WIDTH, HEIGHT]], land)

function drawBiGraticules(
  mapRect,
  {
    step = [1, 1],
    graticulePrecision = 2.5,
    stroke = "#999",
    minorStrokeWidth = 0.15,
    minorOpacity = 0.4,
    majorStrokeWidth = 0.25,
    majorOpacity = 0.6,
    debug = false,
  } = {}
) {
  const {
    projection,
    marginTop,
    marginRight,
    marginLeft,
    marginBottom,
    height,
    width,
    padding,
    mapRectId,
    clipId,
  } = mapRect.props;

  var graticuleRect = d3
    .select("svg")
    .append("g")
    .attr("id", mapRectId + "-graticule-rect");

  var geoGenerator = d3.geoPath().projection(projection);

  // Thinner lines at half the step intervals
  var graticulesMinor = d3
    .geoGraticule()
    .step([step[0] / 2, step[1] / 2])
    .precision(graticulePrecision)();

  graticuleRect
    .append("g")
    .attr("class", "graticules")
    .append("path")
    .attr("class", "minor-graticules")
    .attr("class", "graticule")
    .attr("clip-path", "url(#" + clipId + ")")
    .attr("stroke", stroke)
    .attr("fill", "none")
    .attr("stroke-width", minorStrokeWidth)
    .attr("opacity", minorOpacity)
    .attr("d", geoGenerator(graticulesMinor));

  // Thicker lines at step intervals
  var graticulesMajor = d3
    .geoGraticule()
    .step(step)
    .precision(graticulePrecision)();

  graticuleRect
    .append("g")
    .attr("class", "graticules")
    .append("path")
    .attr("class", "major-graticules")
    .attr("clip-path", "url(#" + clipId + ")")
    .attr("stroke", stroke)
    .attr("fill", "none")
    .attr("stroke-width", majorStrokeWidth)
    .attr("opacity", majorOpacity)
    .attr("d", geoGenerator(graticulesMajor));
}

function viewportAsGeo({
  projection,
  width,
  height,
  marginTop = 0,
  marginRight = 0,
  marginLeft = 0,
  marginBottom = 0,
  precision = 2.5,
} = {}) {
  const p1 = [marginLeft, marginTop];
  const p2 = [width - marginRight, marginTop];
  const p3 = [width - marginRight, height - marginBottom];
  const p4 = [marginLeft, height - marginBottom];

  const vertices = [p1, p2, p3, p4, p1];
  const viewportSize = Math.min(
    width - marginRight - marginLeft,
    height - marginTop - marginBottom
  );
  const parts = Math.floor(viewportSize / precision);

  let lines = pairUp(vertices);

  lines = lines
    .flatMap(([p1, p2]) => partitionLine(...p1, ...p2, parts))
    .map((l) => l[0]);

  lines = [...lines, p1];
  return {
    type: "Polygon",
    coordinates: [lines.map((p) => projection.invert(p))],
  };
}

...

d.type === "longitude" ? formatLongitude(d[0]) : formatLatitude(d[1])
...

function formatLongitude(x) {
  return x < 0 ? formatDigtalToDMS(x) + "W" : formatDigtalToDMS(x) + "E";
}

function formatLatitude(x) {
  return x < 0 ? formatDigtalToDMS(x) + "S" : formatDigtalToDMS(x) + "N";
}

function formatDigtalToDMS(x) {
  deg = 0 | (x < 0 ? (x = -x) : x);
  min = 0 | (((x += 1e-9) % 1) * 60);
  sec = (0 | (((x * 60) % 1) * 6000)) / 100;
  return deg + "°" + min + "'" + sec + '"';
}