当前位置：服务支持 > 软件文章 > Angular项目中基于esriLoader + iframe实现不同页面调用3.x与4.x ArcGIS JS API

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

阅读数 19

场景：

现在有个项目同时涉及二维、三维地图功能，明确要求使用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 5        map: map,                 // Reference to the map object created before the scene        scale: 50000000,          // Sets the initial scale to 1:50,000,000        center: [-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 id        var webmap = new WebMap({          portalItem: { // autocasts as new PortalItem()            id: 'f2e9b762544945f390ca4ac3671cfa72'          }        });        // and we show that map in a container w/ id #viewDiv        var view = new MapView({          map: webmap,          container: 'viewDiv'        });      })      .catch(err => {        // handle any errors        console.error(err);      });  } }

免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删

返回上级列表