ArcGIS API for JavaScript 开发笔记

深碍√TFBOYSˉ_ 2023-01-10 14:58 223阅读 0赞

### 1、Vue.js 中引入 ArcGIS API for JavaScript 4.x ###

#### 安装 esri-loader ####

npm install --save esri-loader

#### 引入 ArcGIS API for JavaScript 4.x ####

import {  loadCss, loadModules } from 'esri-loader';
    
    // 加载指定版本
    const options = {  version: '3.28' };
    // 加载内网服务
    const options = {  url: `http://192.168.1.200:6080/arcgis/rest/services/SampleWorldCities/MapServer`}
    // 不加 options，默认加载最新的 ArcGIS JavaScript 包
    
    export default { 
      data() { 
        return { };
      },
      mounted() { 
      	// 加载最新版本 CSS
      	loadCss()
      	// 加载指定版本 CSS
      	loadCss('3.28')
      	// 加载内网部署的 CSS
      	loadCss('https://js.arcgis.com/4.18/esri/themes/light/main.css')
      	
        loadModules([
          'esri/Map',
          'esri/views/SceneView',
          'esri/layers/TileLayer',
          'esri/layers/SceneLayer'
        ], options)
          .then(([Map, SceneView, TileLayer, SceneLayer]) => { 
            const tiled = new TileLayer({ 
              url:
                'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer'
            });
            const building = new SceneLayer({ 
              url:
                'http://online.deqing.gov.cn/scenelayer/dq_wsc_bm02-20190801-scenelayer/bfba6bb4-f61c-47ba-9d04-751399cd18ca/layers/0'
            });
            let map = new Map({ 
              logo: false,
              ground: 'world-elevation',
              showAttribution: false,
              // layers: [tiled, building]
              layers: [tiled]
            });
    
            const view = new SceneView({ 
              container: 'viewDiv',
              map: map,
              scale: 5000,
              center: [119.929159, 30.574828]
            });
          })
          .catch(err => { 
            console.error(err);
          });
      }
    };

### 2、ArcGIS 小部件自定义位置 ###

#### 方式一：调用 ArcGIS API ####

默认小部件位置：

const legend = new Expand({ 
    	content: new Legend({ 
    		view: this.view,
    		map: this.map
    	}),
    	expanded: false,
    	view: this.view
    });
    this.view.ui.add(legend, 'bottom-right');

自定义小部件位置：  
官网示例：https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Expand.html\#container

// Create the HTML div element programmatically at runtime and set to the widget's container
    const basemapGallery = new BasemapGallery({ 
      view: view,
      container: document.createElement("div")
    });
    
    // Add the widget to the top-right corner of the view
    view.ui.add(basemapGallery, { 
      position: "top-right"
    });

// Specify an already-defined HTML div element in the widget's container
    const basemapGallery = new BasemapGallery({ 
      view: view,
      container: basemapGalleryDiv
    });
    
    // Add the widget to the top-right corner of the view
    view.ui.add(basemapGallery, { 
      position: "top-right"
    });
    
    // HTML markup
    <body>
      <div id="viewDiv"></div>
      <div id="basemapGalleryDiv"></div>
    </body>

// Specify the widget while adding to the view's UI
    const basemapGallery = new BasemapGallery({ 
      view: view
    });
    
    // Add the widget to the top-right corner of the view
    view.ui.add(basemapGallery, { 
      position: "top-right"
    });

#### 方式二：调用 dojo ####

<template>
    	<div class="search" id="search"></div>
    <template>
    <script> // 搜索功能 const search = new Search({ view: this.view, locationEnabled: false, // 去掉自带搜索内容 includeDefaultSources: false, // 去掉自带搜索源 allPlaceHolder: "请输入关键词", // 有两个搜索 sources 时可选择 sources: [{ layer: tiandituImageAnnotation, searchFields: ["Shape_Area"], exactMatch: false, outFields: ["*"], name: "城市", placeholder: "请输入城市名称", maxResults: 6, maxSuggestions: 6, suggestionsEnabled: true, minSuggestCharacters: 1, withinViewEnabled: true, resultSymbol: { type: "simple-marker", style: "circle", size: 12, color: "red" }, popupTemplate: { title: "详细信息", content: [{ type: "fields", fieldInfos: [ { fieldName: "Shape", label: "城市名称" }, { fieldName: "Shape_Area", label: "人口数量" } ] }] } }] }, dom.byId('search')); </script>
    <style> .search { position: absolute; top: 50px; right: 20px; } </style>

### 3、设置地图范围 ###

*  待服务加载完成后，设置视野范围到全图范围

layer.on('load', function () { 
    	var extent = map.getLayer(map.layerIds[0]).fullExtent;
    	extent.spatialReference = map.spatialReference;
    	map.setExtent(extent);
    });

### 4、PyCharm 导入 Arcpy 模块 ###

*  修改 PyCharm 的编译器为 ArcGIS Desktop 安装的 Python27 的编译器

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]  
![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][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3][]

### 5、sass-loader 安装 ###

*  sass-loader 依赖于 node-sass

npm install --save-dev sass-loader
    npm install --save-dev node-sass

### 6、浏览器窗口尺寸 ###

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）：

1.  对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度
    window.innerWidth - 浏览器窗口的内部宽度

1.  对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
    document.documentElement.clientWidth

或者

document.body.clientHeight
    document.body.clientWidth

代码示例：

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    
    var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

### 7、Element-UI 组件库中将 e-table 组件导出到 Excel 表格 ###

安装插件：

npm install file-saver xlsx --save

<template>
        <div v-show="isFaght && infoNo == 1" style="margin: 15px 30px; width: 3750px; height: 800px; overflow-y: scroll">
          <el-button v-if="isFaght && infoNo == 1" type="primary" size="small" style="position: absolute; top: 125px; right: 40px;" @click="downloadTable">表格下载</el-button>
          <el-card class="data-card" shadow="never">
            <el-row class="row-header-statistics">{
       {irr_name}}{
       {irr_domain=='全部灌域'?'':irr_domain}}{
       {startYear}}年{
       {endYear==startYear?'':`至${endYear}年`}}{
       {selectedContent}}表
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-table id="canalDetailInfoTable" v-show="detailTableData && detailTableData.length > 0" height="680" :data="detailTableData" :header-cell-class-name="tableHeaderCellClass" :cell-class-name="cellClass" highlight-current-row fit stripe style="width: 3750px;">
                    <el-table-column header-align="center" width="60" align="center" prop="No" label="序号" />
                    <el-table-column header-align="center" align="center" prop="canal_name" label="渠道名称" />
                    <el-table-column header-align="center" align="center" prop="block_number" width="150" label="建设桩号" />
                    <el-table-column header-align="center" align="center" prop="bottom_width" label="底宽" />
                    <el-table-column header-align="center" align="center" prop="canal_deepth" label="渠深" />
                    <el-table-column header-align="center" align="center" prop="vertical_mountain" label="纵坡" />
                    <el-table-column header-align="center" align="center" prop="inner_mountain" label="内坡" />
                    <el-table-column header-align="center" align="center" prop="outer_mountain" label="外坡" />
                    <el-table-column header-align="center" align="center" prop="flow_volumn" label="流量" />
                    <el-table-column header-align="center" align="center" prop="flow_speed" label="流速" />
                    <el-table-column header-align="center" align="center" prop="design_class" label="设计岸别" />
                    <el-table-column header-align="center" align="center" prop="canal_investment" label="投资金额" />
                    <el-table-column label="操作" header-align="center" align="center" width="160">
                      <template slot-scope="{row}">
                        <el-button type="primary" size="mini" @click="showMap(row)">
                          查看
                        </el-button>
                        <a href="../../assets/download/团结分干渠渡槽.jpg" download="团结分干渠渡槽.jpg">
                          <el-button type="primary" size="mini">
                            导出
                          </el-button>
                        </a>
                      </template>
                    </el-table-column>
                </el-table>
            </el-col>
          </el-row>
          </el-card>
          <div class="last-div" />
        </div>
    </template>
    <script> import FileSaver from 'file-saver' import XLSX from 'xlsx' export default { name: 'DataPage', data() { return { detailTableData: [] } }, methods: { loadTable2() { if (this.irr_domain === '全部灌域') { this.irr_domain_request = '1' } else { this.irr_domain_request = this.irr_domain } if (this.selectedLayer.indexOf('方案规划图') > -1 && this.infoNo == 1) { getCanalDetailInfo({ irr_name: this.irr_name, irr_domain: this.irr_domain_request, start_year: this.startYear, end_year: this.endYear }).then((res) => { console.log('ShowPage-getCanalDetailInfo-res: ', res) const datas = res.Data if (datas && datas.length > 0) { datas.forEach((data) => { this.detailTableData.push({ No: data.no, canal_name: data.name, block_number: data.stake_mark, irr_domain: data.irr_domain, bottom_width: data.bottom_width, canal_deepth: data.depth?data.depth.toFixed(2):data.depth, vertical_mountain: data.longitudinal_slpoe, inner_mountain: data.inside_slope?parseFloat(data.inside_slope).toFixed(2):data.inside_slope, outer_mountain: data.outside_slope?parseFloat(data.outside_slope).toFixed(2):data.outside_slope, flow_volumn: data.flow?data.flow.toFixed(2):data.flow, flow_speed: data.speed?data.speed.toFixed(2):data.speed, design_class: data.band, canal_investment: data.investment?data.investment.toFixed(2):data.investment, url: data.resourcesurl }); }) document.getElementById('canalDetailInfoTable').style.display = 'block' } else { document.getElementById('canalDetailInfoTable').style.display = 'none' } }) } else { document.getElementById('canalDetailInfoTable').style.display = 'none' } }, tableHeaderCellClass({ row, rowIndex}) { return 'tableHeaderCell' }, cellClass({ row, column, rowIndex, columnIndex}) { return 'tableCell' }, showMap(row) { const link = document.createElement('a') const arr = row.url.split("\\") const fileName = arr[arr.length - 1] link.style.display = 'none' link.target = '_blank' link.href = `http://${ row.url}` document.body.appendChild(link) link.click() document.body.removeChild(link) }, exportMap(row) { const link = document.createElement('a') const arr = row.url.split("\\") const fileName = arr[arr.length - 1] link.download = fileName link.style.display = 'none' link.target = '_blank' link.href = `http://${ row.url}` document.body.appendChild(link) link.click(); document.body.removeChild(link) }, downloadTable() { let wb = XLSX.utils.table_to_book(document.querySelector('#canalDetailInfoTable')); let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array'}); const tableTitle = this.irr_name + (this.irr_domain=='全部灌域'?'':this.irr_domain) + this.startYear + '年' + (this.endYear==this.startYear?'':'至' + this.endYear + '年') + this.selectedContent + '表' FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream'}), tableTitle + '.xlsx'); return wbout } } </script>

### 8、下载文件 ###

#### 方式一：前端直接下载，不调用后端接口 ####

#### 方式二：后端给出接口，将文件转成二进制数据流传给前端 ####

export function downFile(url, parameter) { 
    	return axios({ 
    		url: url,
    		params: parameter,
    		method: 'get',
    		responseType: 'blob'
    	})
    }

export function downloadFile(url, fileName, parameter) { 
    	return downFile(url, parameter).then((data) => { 
    		if(!data || data.size === 0) { 
    			Vue.prototype['$message'].warning('文件下载失败')
    			return
    		}
    		if(typeof window.navigator.msSaveBlob !== 'undefined') { 
    			window.navigator.msSaveBlob(new Blob([data]), fileName)
    		} else { 
    			let url = window.URL.createObjectURL(new Blob([data]))
    			let link = document.createElement('a')
    			link.style.display = 'none'
    			link.href = url
    			link.setAttribute('download', fileName)
    			document.body.appendChild(link)
    			link.click()
    			document.body.removeChild(link)				// 下载完成移除元素
    			window.URL.revokeObjectURL(url)				// 释放 Blob 对象
    		}
    	})
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/ff4d3f2d7f4f4393bb67d7a0957cb5de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/a6d6c6ce0e624741a6997b415a7fb66d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221119/85463217085f4c8d9dc0240d06464a70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221119/511b1c22da424ae9a309ba8fe77e9676.png