Angular项目中,基于esriLoader+iframe实现不同页面调用3.x与4.x ArcGIS JS API

场景：

现在有个项目同时涉及二维、三维地图功能，明确要求使用ArcGIS 平台。目前ArcGIS API For JS有两个系列3.x和4.x，3.x只能实现二维功能，4.x主要支持三维功能，同时也支持部分二维功能，但4.x并不能完全覆盖3系列二维功能，而且接口名称方法都有变化。官网上说是如果涉及到三维功能，必须使用4.x系列。现在来看的话，4.x版本肯定得用，另外一方面由于之前项目均是基于3.x系列API，对它都有感情了，而且做了一些封装，再加上工期太紧，实在是没有时间再用4系列重写一遍，能不能同时用两套API，把二三维功能分开。

现在面临的问题是，这边前端框架采用Angular，Angular本身就是一个单页面的，你在一个页面里面通过esri-loader引入两套api ，本身就不可能，就算是把esri-loader.js源码给改了，加载了两套API，当使用require加载模块时，他还是分不清加载哪个系列的。

问题分析：

既想要两套API，又想用Angular框架，问题关键点就是在解决Angular单页面上，经过别人指点，建议通过iframe嵌入一个页面，不过这个页面就是纯html页面了，Angular里面的组件啥的就都用不了了。先试了一试。

测试效果图:

代码：

三维页面是通过irfame嵌入进来的

3d.html

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><title>Webview</title>
</head>
<link rel="stylesheet" href="http://localhost/arcgis_js_v410_api/arcgis_js_api/library/4.10/esri/css/main.css">
<script src="http://localhost/arcgis_js_v410_api/arcgis_js_api/library/4.10/init.js" data-esri-loader="loaded"></script><body><!--<app-map></app-map>--><div id="viewDiv" style="width: 700px; height: 500px"></div><script>require(["esri/Map","esri/views/SceneView"], function (Map, SceneView) {var map = new Map({basemap: "streets",ground: "world-elevation"});var view = new SceneView({container: "viewDiv",     // Reference to the scene div created in step 5map: map,                 // Reference to the map object created before the scenescale: 50000000,          // Sets the initial scale to 1:50,000,000center: [-101.17, 21.78]  // Sets the center point of view with lon/lat});});</script>
</body></html>

左侧菜单2

menu2.component.html

<div><iframe id="iframe3D" [src]="iframe" frameborder="0" style="width: 100%;height: 500px"></iframe>
</div>

menu2.component.ts

import { Component, OnInit } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';@Component({selector: 'app-menu2',templateUrl: './menu2.component.html',
})
export class Menu2Component implements OnInit {iframe: SafeResourceUrl;constructor(public sanitizer: DomSanitizer) { }ngOnInit() {let src = "assets/test.html";this.iframe = this.sanitizer.bypassSecurityTrustResourceUrl(src);}request(){}}

左侧菜单1

menu1.component.html

<app-map></app-map>

组件map

map.component.html

<div id="viewDiv" style="width: 700px; height: 500px"></div>

map.component.ts

import { Component, OnInit } from '@angular/core';
import { loadModules, loadCss } from 'esri-loader';
import  esriLoader  from 'esri-loader';@Component({selector: 'app-map',templateUrl: './map.component.html',//styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {constructor() { }ngOnInit() {const options = {url: 'http://localhost/arcgis_js_v410_api/arcgis_js_api/library/4.10/init.js'};loadCss('http://localhost/arcgis_js_v410_api/arcgis_js_api/library/4.10/esri/css/main.css');//esriLoader.loadScript(options);loadModules(['esri/views/MapView', 'esri/WebMap'],options).then(([MapView, WebMap]) => {// then we load a web map from an idvar webmap = new WebMap({portalItem: { // autocasts as new PortalItem()id: 'f2e9b762544945f390ca4ac3671cfa72'}});// and we show that map in a container w/ id #viewDivvar view = new MapView({map: webmap,container: 'viewDiv'});}).catch(err => {// handle any errorsconsole.error(err);});}}