ArcGIS API 离线字体库加载及跨域问题解决

一时失言乱红尘 2022-12-28 09:05 243阅读 0赞

*  需要加载 ArcGIS API 离线字体库的报错信息如下图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]

*  ArcGIS API 离线字体库下载地址：  
    https://pan.baidu.com/s/1XAeJgLG9isybQYhvfpaqVw  
    提取码：unc6  
    将下载的离线字体文件夹放到 IIS 目录下，本机目录为：C:\\inetpub\\wwwroot\\arcgis\_js\_api\\4.15\\arial-unicode-ms-regular\\simsun-regular。
 *  修改 map 调用的代码：

mounted() { 
    	this.mapWidth = (window.screen.width - 44)  + 'px'
    	this.mapHeight = (window.screen.height - 146) + 'px'
    	
    	setDefaultOptions({ url: 'http://localhost/arcgis_js_api/4.15/init.js'})
    	loadCss('http://localhost/arcgis_js_api/4.15/esri/themes/light/main.css')
    	loadModules([
    	    "esri/Map",
    	    "esri/views/MapView",
    	    "esri/layers/MapImageLayer",
    	    "esri/tasks/QueryTask",
    	    "esri/tasks/support/Query",
    	    "esri/config"
    	], {  css: true }).then(([Map, MapView, MapImageLayer, QueryTask, Query, esriConfig]) => { 
    	    esriConfig.fontsUrl = "http://127.0.0.1/arcgis_js_api/arial-unicode-ms-regular";
    	
    	    this.layer = new MapImageLayer({ 
    	        url: "http://localhost:6080/arcgis/rest/services//SampleWorldCities/MapServer"
    	    });
    	
    	    this.map = new Map({ 
    	        layers: [this.layer]
    	    });
    	
    	    this.view = new MapView({ 
    	        container: "mapDiv",
    	        map: this.map,
    	        ui: { 
    	            components: []
    	        }
    	    });
    }

*  在 IIS 上添加 MIME 类型  
    Win + R 打开运行，输入`inetmgr`，点击“添加MIME类型”，添加 .pbf 字体类型。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1][]

*  清空浏览器缓存，刷新页面，报错跨域问题如下图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2]

*  在 IIS 中添加 HTTP 响应标头：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4][]

*  离线部署的地图服务图层就可以显示出来了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/db8f5deba2814001b399fe98c8ab7bb0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/e5998fa23fb244c5b8a8f70e5f699b90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/533e6ca1515c4bc38ede7bc17b93ced0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/e2cae02bd10140cc89c1e0b658ac3da5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/cf2401ba03be4c8bbeb6c432804cdb7d.png