maptalks - D3投影

D3投影

index.html

<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>瓦片图层与地理投影 - D3投影</title>
  <style type="text/css">
    html,body{margin:0px;height:100%;width:100%}
    .container{width:100%;height:100%}
  </style>
  <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
  <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
  <body>

    <div id="map" class="container">loading data...</div>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/topojson.v2.min.js"></script>

    <script>

      //Versor Dragging projection from D3
      //https://bl.ocks.org/mbostock/7ea1dde508cec6d2d95306f92642bc42
      var projection =  d3.geoOrthographic()
                          .scale(148)
                          .precision(.1);

      //convert to a maptalks projection object
      var proj = {
        project : function (c) {
          var pc = projection([c.x, c.y]);
          return new maptalks.Coordinate(pc[0], pc[1]);
        },
        unproject : function (pc) {
          var c = projection.invert([pc.x, (pc.y)]);
          if (!c || isNaN(c[0]) || isNaN(c[1])) {
            return null;
          }
          return new maptalks.Coordinate(c);
        }
      };

      var min = proj.project(new maptalks.Coordinate(-180, -90)),
        max = proj.project(new maptalks.Coordinate(180, 90)),
        fullExtent = {
          'top'   : max.y,
          'left'  : min.x,
          'right' : max.x,
          'bottom' : min.y
        };

      d3.json('world-50m.json', function (error, world) {
        if (error) throw error;
        //initialize map with a customized projection
        var map = new maptalks.Map('map', {
          center:     [0, 0],
          centerCross : true,
          zoom:  2,
          spatialReference:{
            'projection': proj,
            'resolutions': (function () {
              var resolutions = [];
              for (var i = 0; i < 10; i++) {
                resolutions[i] = 4 / Math.pow(2, i);
              }
              return resolutions;
            })(),
            'fullExtent': fullExtent
          }
        });
        var featureCollection = topojson.feature(world, world.objects.countries),
          geometries = maptalks.GeoJSON.toGeometry(featureCollection);
        var symbol = {
          'lineColor' : '#fff',
          'lineWidth' : 0.5,
          'polygonOpacity' : 1,
          'polygonFill'    : '#747474'
        };
        new maptalks.VectorLayer('v', geometries, { 'geometryEvents':false, 'enableSimplify':false })
          .forEach(function (geo) {
            geo.setSymbol(symbol);
          })
          .addTo(map);
      });

    </script>
  </body>
</html>

//Versor Dragging projection from D3
//https://bl.ocks.org/mbostock/7ea1dde508cec6d2d95306f92642bc42
var projection = d3.geoOrthographic()
  .scale(148)
  .precision(.1);

//convert to a maptalks projection object
var proj = {
  project: function(c) {
    var pc = projection([c.x, c.y]);
    return new maptalks.Coordinate(pc[0], pc[1]);
  },
  unproject: function(pc) {
    var c = projection.invert([pc.x, (pc.y)]);
    if (!c || isNaN(c[0]) || isNaN(c[1])) {
      return null;
    }
    return new maptalks.Coordinate(c);
  }
};

var min = proj.project(new maptalks.Coordinate(-180, -90)),
  max = proj.project(new maptalks.Coordinate(180, 90)),
  fullExtent = {
    'top': max.y,
    'left': min.x,
    'right': max.x,
    'bottom': min.y
  };

d3.json('world-50m.json', function(error, world) {
  if (error) throw error;
  //initialize map with a customized projection
  var map = new maptalks.Map('map', {
    center: [0, 0],
    centerCross: true,
    zoom: 2,
    spatialReference: {
      'projection': proj,
      'resolutions': (function() {
        var resolutions = [];
        for (var i = 0; i < 10; i++) {
          resolutions[i] = 4 / Math.pow(2, i);
        }
        return resolutions;
      })(),
      'fullExtent': fullExtent
    }
  });
  var featureCollection = topojson.feature(world, world.objects.countries),
    geometries = maptalks.GeoJSON.toGeometry(featureCollection);
  var symbol = {
    'lineColor': '#fff',
    'lineWidth': 0.5,
    'polygonOpacity': 1,
    'polygonFill': '#747474'
  };
  new maptalks.VectorLayer('v', geometries, {
    'geometryEvents': false,
    'enableSimplify': false
  })
    .forEach(function(geo) {
      geo.setSymbol(symbol);
    })
    .addTo(map);
});