ArcGIS API for JavaScript 开发笔记

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() {// 加载最新版本 CSSloadCss()// 加载指定版本 CSSloadCss('3.28')// 加载内网部署的 CSSloadCss('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 的编译器

5、sass-loader 安装

sass-loader 依赖于 node-sass

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

6、浏览器窗口尺寸

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

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

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

对于 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-rowfit stripestyle="width: 3750px;"><el-table-columnheader-align="center"width="60"align="center"prop="No"label="序号"/><el-table-columnheader-align="center"align="center"prop="canal_name"label="渠道名称"/><el-table-columnheader-align="center"align="center"prop="block_number"width="150"label="建设桩号"/><el-table-columnheader-align="center"align="center"prop="bottom_width"label="底宽"/><el-table-columnheader-align="center"align="center"prop="canal_deepth"label="渠深"/><el-table-columnheader-align="center"align="center"prop="vertical_mountain"label="纵坡"/><el-table-columnheader-align="center"align="center"prop="inner_mountain"label="内坡"/><el-table-columnheader-align="center"align="center"prop="outer_mountain"label="外坡"/><el-table-columnheader-align="center"align="center"prop="flow_volumn"label="流量"/><el-table-columnheader-align="center"align="center"prop="flow_speed"label="流速"/><el-table-columnheader-align="center"align="center"prop="design_class"label="设计岸别"/><el-table-columnheader-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.Dataif (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 = fileNamelink.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、下载文件

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

<a href="img/city.jpg" download="city.jpg"><button>导出<button>
</a>

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

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 = urllink.setAttribute('download', fileName)document.body.appendChild(link)link.click()document.body.removeChild(link)              // 下载完成移除元素window.URL.revokeObjectURL(url)              // 释放 Blob 对象}})
}

ArcGIS API for JavaScript 开发笔记相关推荐

ArcGIS API for javascript开发笔记（五）——GP服务调用之GP模型的发布及使用详解...
感谢一路走来默默陪伴和支持的你~~~ ----------------欢迎来访,拒绝转载---------------- 关于GP模型的制作请点我! 一.GP发布 ArcGIS Desktop可以作为 ...
ArcGIS API for javascript开发笔记 —— 地图打印
前段时间的一个项目用到了地图的打印功能.当时遇到了一个GraphicLayer中TextSymbol汉字打印乱码和文字在地图中过大的问题, 后来经过分析发现,汉字乱码是中文字体的原因,文字太大是由于D ...
图解ArcGIS API for JavaScript开发环境搭建
ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3.9,它提供了更为丰富而又强大的功能. 本篇经验向大家介绍其本地部署及简单的第一个地图应用程 ...
webgis从基础到开发实践_ArcGIS API For Javascript 开发笔记（四）
二.应用篇 1.应用部署部署也就意味着一个 DEMO 或者系统即将完工,也意味着系统即将上线,相对来说Javascript 应用的部署不是很复杂,但是这是有前提的,要对部署中的一些概念有所了解,比如 ...
Arcgis api for javascript学习笔记(3.2X版本)-初步尝试
Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...
13 ArcGIS API for JavaScript开发入门文档
写在前面这篇文章写在我用ArcGIS API for JavaScript(后面统称为"ArcGIS JS API")开发了两年项目后的某一天夜里.写这篇文章主要是两个目的吧,第 ...
ArcGIS API For JavaScript学习笔记
之前学习ArcGIS API For JavaScript的一些记录,有些是转载的,不过转载的自己有重新做过一遍,这里做个总结,方便后面来学习回顾. 1.ArcGIS API For JavaScri ...
ArcGIS API for JavaScript学习笔记（1）API本地部署
目录一.API下载二.启动IIS功能三.API离线部署四.验证离线部署 1.使用记事本创建名为test.html文件,并将其置于C:\inetpub\wwwroot\test文件夹下 2.在浏 ...
ArcGis API for JavaScript学习——加载地图
ArcGis API for JavaScript开发笔记--加载地图在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...

ArcGIS API for JavaScript 开发笔记

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

安装 esri-loader

引入 ArcGIS API for JavaScript 4.x

2、ArcGIS 小部件自定义位置

方式一：调用 ArcGIS API

方式二：调用 dojo

3、设置地图范围

4、PyCharm 导入 Arcpy 模块

5、sass-loader 安装

6、浏览器窗口尺寸

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

8、下载文件

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

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

ArcGIS API for JavaScript 开发笔记相关推荐

最新文章

热门文章