问题遇到的现象和发生背景 :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: '© <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加载地图服务,太多地方不懂,希望朋友们给予一点帮助,万分感谢!