javascript
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);});}}?
總結
以上是生活随笔為你收集整理的Angular项目中,基于esriLoader+iframe实现不同页面调用3.x与4.x ArcGIS JS API的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： localhost访问IIS资源突然不好
- 下一篇： ArcGIS JS先添加动态图层，再添加