ArcGis API JS 4.X本地化部署与地图的基础使用
准备工作
首先下载ArcGIS API for JavaScript4.x，这里下载的是4.19。
官方下载地址：https://developers.arcgis.com/downloads/
arcgis_js_v419_api：这个是ArcGIS的Api网站，部署后，我们可以引用这个网站里的JS，然后实现地图的使用。
arcgis_js_v419_sdk：这个是ArcGIS的Api的SDK网站，里面详细介绍各个JS类的使用方式的软件开发帮助文档（因为官网经常打不开，所以部署这个API的SDK网站很有用）
arcgis_js_v419_api解压后如下图。
开始安装
在arcgis_js_api文件下找到Init.js和dojo.js两个文件。
然后，替换Init.js和dojo.js里的[HOSTNAME_AND_PATH_TO_JSAPI]为localhost:419/arcgis_js_api/javascript/4.19/或192.168.1.100:419/arcgis_js_api/javascript/4.19/
PS1：局域网使用则替换为IP模式——192.168.1.100:419/arcgis_js_api/javascript/4.19/
PS2：这里的使用的端口号是419，因为我之后建网站也使用419端口。
PS3：如果搜索不到[HOSTNAME_AND_PATH_TO_JSAPI]，就搜索HOSTNAME_AND_PATH_TO_JSAPI，但替换时要记得把[]删掉。
PS：注意，源文件中的是协议是HTTPS，这里我们改为http，不然的话，我们还得建一个带证书的网站。
替换后地址如下：
baseUrl:"http://192.168.1.100:419/arcgis_js_api/javascript/4.19/dojo"
然后IIS新建网站，网站名称arcgis_js_api，物理路径选择arcgis_js_v419_api，端口419。
然后顺序运行下面三个网址
http://192.168.1.100:419/arcgis_js_api/javascript/4.19/init.js
http://192.168.1.100:419/arcgis_js_api/javascript/4.19/dojo/dojo.js
http://192.168.1.100:419/arcgis_js_api/javascript/4.19/esri/themes/light/main.css
如下图，则网站启动成功。
然后启用网站的目录浏览。
然后进行网站跨域配置，点击HTTP响应头。
配置头名称及值
Access-Control-Allow-Origin 值:*
Access-Control-Allow-Methods 值:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers 值:Content-Type
然后添加字体类型，因为本地API会下载一些字体文件。
点击MIME类型。
添加如下类型：
.ttf application/octet-stream
.wasm application/wasm
.woff application/font-woff
.woff2 application/font-woff2
.wsv application/octet-stream
如下图：
如果已经存在了MIME类型配置，则需要修改，如下图.woff类型默认配置是font/x-woff，我们需要修改未application/font-woff 。
配置完成后，重启IIS，重启网站，清空浏览器缓存，然后我们的本地JS就可用了。
地图使用
想使用ArcGIS API for JavaScript4.x，我们得现有一个地图服务才行，我们可以安装一个Arcgis Server。
Arcgis Server安装完成后，会提供一个默认的Map服务地址http://192.168.1.100:6080/arcgis/rest/services/SampleWorldCities/MapServer
然后，我们新建一个网站，然后新建一个网页—MapLocal，然后编写如下代码：
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebArcGis_JS4</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="http://192.168.1.100:419/arcgis_js_api/javascript/4.19/esri/themes/light/main.css">
<script src="http://192.168.1.100:419/arcgis_js_api/javascript/4.19/init.js"></script>
<script>
require(["esri/config",
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/Basemap",
"esri/layers/Layer"
], function (
esriConfig,
Map,
MapView,
MapImageLayer,
Basemap,
Layer) {
var baseUrl = "http://192.168.1.100:6080/arcgis/rest/services/SampleWorldCities/MapServer";
esriConfig.apiKey = "YOUR_API_KEY";
let layer = new MapImageLayer({
url: baseUrl
});
const map = new Map({
container: "map-container",
basemap: new Basemap({ baseLayers: [layer] }),
logo: false, //不显示Esri的logo
});
const view = new MapView({
map: map,
center: [125.04658531829789, 41.978062677899004],
zoom: 13, // Zoom level
container: "viewDiv" // Div的Id
});
//监听单击事件
view.on("click", function (event) {
console.log(event);
console.log("x:" + event.mapPoint.x);
console.log("y:" + event.mapPoint.y);
console.log("longitude:" + event.mapPoint.longitude);
console.log("latitude:" + event.mapPoint.latitude);
});
//监听比例尺编号
var handle = view.watch("scale", function (newValue, oldValue, propertyName, target) {
console.log(propertyName + " changed from " + oldValue + " to " + newValue);
});
//移除监听
//handle.remove();
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
运行如下图：
----------------------------------------------------------------------------------------------------
到此，ArcGis API JS 4.X本地化部署与地图的基础使用，就讲完成。
----------------------------------------------------------------------------------------------------
注：此文章为原创，任何形式的转载都请联系作者获得授权并注明出处！
若您觉得这篇文章还不错，请点击下方的【推荐】，非常感谢！
https://www.cnblogs.com/kiba/p/15064109.html
ArcGis API JS 4.X本地化部署与地图的基础使用的更多相关文章
- ArcGIS API for Silverlight之配准JPG图片地图文字倾斜解决方案
原文:ArcGIS API for Silverlight之配准JPG图片地图文字倾斜解决方案 根据实际JPG图片进行配准后,发布的地图,利用ArcGIS API for Silverlight在网页 ...
- ArcGIS API for JavaScript根据两个点坐标在地图上画线
ArcGIS API for JavaScript根据两个点坐标在地图上画线比如说a(xxxx,xxxxx),b(xxxx,xxxxx).利用这两个点画一条线 var polyline = new e ...
- ArcGis API for JavaScript学习——离线部署API
ArcGis API for JavaScript开发笔记——离线部署API 以3.18版API为例: 在加载图图前引用GIS服务是必须的.有两种方法,一是在线引用,而是离线部署引用. 在线引用: & ...
- arcgis api for javascript 学习（六） 地图打印
1.本文应用arcgis api for javascript对发布的动态地图进行打印,打印的为PDF格式,打印出来如图: 2.需要特别注意的是:我们在运行代码前,需要打开PrintingTools, ...
- arcgis api for javascript 学习（四） 地图的基本操作
1.文章讲解的为地图的平移.放大.缩小.前视图.后视图以及全景视图的基本功能操作 2.主要用到的是arcgis api for javascript中Navigation的用法,代码如下: <! ...
- ArcGIS api for javascript——图形-增加图形到地图
描述 本例展示了如何使用Draw工具栏在地图上描绘许多种类的几何体.ArcGIS JavaScript API包含工具栏. 工具栏不是一个在页面上自动地可见的用户界面组件.相反,工具栏是一个助手类,可 ...
- ArcGIS api for javascript——使用图层定义显示地图
描述 本例展示如何使用图层定义来限制显示在地图上的图层信息.为了了解本例做了什么,看看用于这个地图的ESRI_Census_USA服务的服务目录页是有帮助的.检查地图中的图层列表.现在注意这行代码限制 ...
- ArcGIS api for javascript——用缓存区查询地图
描述 本例展示了如何在另外一个任务里使用一个任务的结果.单击地图查看被单击的点的1公里范围内的缓存(如果需要可以修改这个默认的缓存距离).也可以看缓存区的这些点的人口普查街区信息.单击一个点查看更多的 ...
- arcgis api 4.x for js 离线部署
在我的GIS之家群里,经常遇到 webgis 开发新手们提问 arcgis api for js 如何本地离线部署,而不是直接调用在线的,因为在线模式依赖互联网以及网速环境因素,受到的限制影响比较大. ...
随机推荐
- python_selenium 之logging模块入门及调用实战
一.logging模块是什么? 是Python内置的标准模块,主要用于输出运行日志 二.日志的作用 日志是代码的必要组成部分 记录日志能显示程序当前运行状态 出问题后定位当时问题 三.python日志 ...
- Configuration problem: Unable to locate Spring NamespaceHandler for XML schema namespace [http://dubbo.apache.org/schema/dubbo]
dubbo的官方文档写的真好, http://dubbo.apache.org/zh-cn/docs/2.7/user/dependencies/ 在使用dubbo过程中的问题, 和解决 org.sp ...
- 重新整理 mysql 基础篇————— 事务隔离级别[四]
前言 简单介绍一下事务隔离的基本 正文 Read Uncommitted(未提交读) 这个就是读未提交.就是说在事务未提交的时候,其他事务也可以读取到未提交的数据. 这里举一个例子,还是前一篇的例子. ...
- CSS3-过渡、动画、2D与3D
过渡 过渡属性transition,可适用于大部分属性间变化的过渡,例如长度的.宽度和透明度等等. 语法: transition: property duration timing-function ...
- 【逆向实战】恶意勒索软件分析_披着羊皮的狼_被注入恶意代码的apk
/文章作者:Kali_MG1937 QQ:3496925334 CNBLOG博客号:ALDYS4/ 今天逛某论坛的时候发现了一篇求助贴 有意思,好久没分析过恶意软件了 今天就拿它来练练手 反编译工具 ...
- 身为一枚优秀的程序员必备的基于Redis的分布式锁和Redlock算法
1 前言 今天开始来和大家一起学习一下Redis实际应用篇,会写几个Redis的常见应用. 在我看来Redis最为典型的应用就是作为分布式缓存系统,其他的一些应用本质上并不是杀手锏功能,是基于Redi ...
- 「10.28」Dove 打扑克(链表)·Cicada 与排序(概率)·Cicada 拿衣服(各种数据结构)
A. Dove 打扑克 考场思考半天线段树树状数组,没有什么想法 打完暴力后突然想到此题用链表实现会很快. 因为只有$n$堆,所以设最多有$x$个不同的堆数,那么$x\times (x-1)/2==n ...
- VRRP协议与原理
VRRP协议与原理 目录: 一.VRRP协议概述 1.1.VRRP协议 1.2.单网关和多网关的缺陷 1.3.VRRP基本概述 二.VRRP工作原理 2.1.VRRP主备份备份工作工程 2.2.VRR ...
- qemu-ga windows下的安装及监控开发
windows安装qemu-ga 虚拟机配置里添加virtio serial端口 #virsh edit instance-name devices里添加下面这段配置, 1 <channel t ...
- 7、解决windows10家庭版无法远程连接服务器的问题
(1)方法一: 升级windows10为专业版,因为win10家庭版没有组策略: (2)方法二:通过远程命令: 同时按住"win+r"键调出"运行",在方框内输 ...