leaflet加载arcgis地图服务

问题遇到的现象和发生背景 :angular项目中想要实现leaflet加载arcgis地图服务

问题相关代码：

import { Component, OnInit } from '@angular/core';
import { RouterModule, Router } from '@angular/router';
import * as L from 'leaflet';
import * as esri from 'esri-leaflet';
import 'leaflet.chinatmsproviders';
import { mapService } from 'esri-leaflet';

@Component({
  selector: 'app-two-dimensional',
  templateUrl: './two-dimensional.component.html',
  styleUrls: ['./two-dimensional.component.scss']
})
export class TwoDimensionalComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit(): void {

    // leaflet显示地图
    var map = L.map('leafletContainer').setView([39.736861245030326, 116.13991336098002], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.marker([39.736861245030326, 116.13991336098002]).addTo(map)
      .bindPopup('我在这儿！')
      .openPopup();

    // 加载地图服务
    esri.basemapLayer('Streets').addTo(map);
    esri.featureLayer({
      url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0'
    }).addTo(map);

运行结果及报错内容
运行结果如图：

我想要达到的结果：
第一次接触leaflet加载地图服务，太多地方不懂，希望朋友们给予一点帮助，万分感谢！

截图 里 404 marker图标 路径写错了吧