在d3 API版本4中，GeoStream不能赋值给'GeoRawProjection‘类型的参数

Question

在d3.geo API 3中，它具有像leaflet一样将地理位置坐标投影到地图上的功能。

例如，版本3中的代码如下所示

var transform = d3.geo.transform({point: self.projectPoint});
          self._path = d3.geo.path().projection(transform);

projectPoint: function(x, y) {
      var point = MELBPARKING.Map.map.latLngToLayerPoint(new L.LatLng(y, x));
      this.stream.point(point.x, point.y);
    }

现在我使用angular2框架构建了小叶地图来投影D3.js中的坐标，D3.js的API是建立在the version 4之上的。

export {default as geoTransform} from "./src/transform";
export {default as geoProjection, projectionMutator as geoProjectionMutator} from "./src/projection/index";

在我的angular2项目中，我使用d3.js和leaflet.js构建了一个小叶地图组件，如下所示

import * as L from 'leaflet';
import * as d3 from 'd3';
import {geoTransform,geoProjection} from "d3-geo";

export class MapsComponent implements OnInit {
   map;
   _path ;

   ngOnInit(){
      console.log('init map');
      this.map = L.map('mapid', {
      center: L.latLng(38, 15),
      zoom: 5,
      });
      this.map.setView(L.latLng(-37.81108500, 144.96269970), 18);
      var self = this;
      var transform = geoTransform({point: self.projectPoint})
      console.log(transform);
      self._path = geoProjection(transform);
   }

   projectPoint(x, y) {
       var point = this.map.latLngToLayerPoint(new L.LatLng(y,x));
       this.map.stream.point(point.x, point.y);
   }
}

然而，该项目遇到了如下错误

    ERROR in /maps.component.ts (87,32): Argument of type '{ stream(s: 
GeoStream): { point: (x: any, y: any) => void; } & GeoStream; }' is not
 assignable to parameter of type 'GeoRawProjection'.

    Type '{ stream(s: GeoStream): { point: (x: any, y: any) => void; } &
 GeoStream; }' provides no match for the signature '(lambda: number, phi: 
number): [number, number]'.

出了什么问题？

Answer 1

将您的转换作为第一个参数传递给d3.geoPath，而不是d3.geoProjection。根据path.projection，此参数可以是任何投影流(这对于缩放和平移等平面变换很有用)，而不仅仅是球形d3.geoProjection实例。