有人能提供一个集成MapTalks和anyone 9的工作示例吗？

Question

尝试将、Maptalk、和角集成在一起。但地图并没有被渲染。它显示和空的空间与地图超链接在左侧底部。我试着寻找一些教程，但找不到。

类型标

import { Component, OnInit} from '@angular/core';
import * as maptalks from 'maptalks';

@Component({
  selector: 'app-map-new',
  templateUrl: './map-new.component.html',
  styleUrls: ['./map-new.component.css']
})
export class MapNewComponent implements OnInit {
   map:any
  constructor() { }
  
  ngOnInit(): void {
  }
  
  ngAfterViewInit(){
    this.map = new maptalks.Map('canvas', {
      center: [-0.113049,51.498568],
      zoom: 14
    });
  }
}

<div class="map-container">
    <div #canvas class="container"></div>
</div>

CSS

.container{
    width: 75%;
    height: 75vh;
}

Answer 1

没什么考虑。

在你的主页上。将“id”添加到映射将呈现的div中。

添加到您的TS代码：

附加：@ViewChild('id_to_the_map') newMap: ElementRef；

在AfterViewInit上，您应该这样做：

this.map = new maptalks.Map('id_to_the_map', {
    center: [126.9780, 37.5665],
    renderer: 'canvas',
    zoom: 5,
    baseLayer: new maptalks.TileLayer('base', {
        urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        subdomains: ['a', 'b', 'c'],
        repeatWorld: false, // remove if you want          
    })
});