一文让你彻底掌握ArcGisJS地图管理的秘密
使用ArcGis开发地图
引用ArcGisJS
使用ArcGisJS开发地图，首先需要引入ArcGis的Js文件和CSS文件，引入方式有两种，一种是官网JS引用，一种是本地JS引用。如下：
官网JS引用
<link rel="stylesheet"
href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.20/"></script>
本地JS引用
<link rel="stylesheet" href="http://192.168.1.28:419/arcgis_js_api/javascript/4.19/esri/themes/light/main.css">
<script src="http://192.168.1.28:419/arcgis_js_api/javascript/4.19/init.js"></script>
require内置对象
require是ArcGisJS开发的起点，类似于C#中的引入命名空间的using，不同的是require引入的都是js文件，每个js文件都是一个大的js类。
require有两个参数，第一个参数接收js文件地址，第二个参数输出一个函数，函数的参数返回引入js文件的js类，类顺序与上面引入js文件的顺序的一致。
代码如下：
<script>
require(["esri/config",
"esri/Map",
"esri/views/MapView",
"esri/Basemap",
"esri/layers/Layer"
], function (
esriConfig,
Map,
MapView,
Basemap,
Layer) {
//使用地图对象
}
);
</script>
下面我们看一个ArcGisJS本地部署的网站下的esri文件夹的结构。
如图所示，我们上面使用"esri/config"字符串引入的js文件就是esri文件夹下的config.js文件。
地图开发
基础开发
地图开发主要是在require的输出函数中做的，具体开发逻辑是使用Map类创建地图，使用View类绑定div元素，然后将Map地图对象赋值到View类中，实现地图在div中展示。
Map类与View类各有两个子类， WebMap，MapView对应二维地图，SceneMap，SceneView对应三维地图。
编写代码展示地图
<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="https://js.arcgis.com/4.20/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.20/"></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) {
esriConfig.apiKey = "YOUR_API_KEY"; let layer = new MapImageLayer({
url: "http://192.168.1.2:6080/arcgis/rest/services/SampleWorldCities/MapServer"
});
const map = new Map({
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
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
如上代码所示，我们先定义了一个layer图层，并指定地图url（地址来自于ArcGisServer发布），然后定义了一个Map对象，将定义好的图层定义为底图（地图有很多个图层组成，最下面的图层为底图），Map对象初始化时接受basemap参数，其值为图层对象，含义为设置底图图层。
然后定义个view对象，初始化接受两个主要参数，一个是map，一个是container，map赋值我们上面定义的map对象，container指向一个div的id。
最后，我们再body中定义一个div取名viewDiv。
然后我们运行，界面如下：
监听事件
基础地图使用编写完后，我们编写一个监听事件，代码如下：
//监听单击事件
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);
});
我们使用view对象的on函数，实现了一个点击事件的监听，界面效果如下：
监视属性
ArcGis里除了监听，还支持监视，下面我们使用watch函数监视scale（比例尺）属性。
var handle = view.watch("scale", function (newValue, oldValue, propertyName, target) {
console.log(propertyName + " changed from " + oldValue + " to " + newValue);
});
小部件
ArcGis还提供丰富的小部件，比如比例尺，坐标，指南针等，我们只需要引入对应的js类，就可以使用这些小部件了。
小部件使用代码如下：
<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="https://js.arcgis.com/4.20/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.20/"></script>
<script>
require(["esri/config",
"esri/Map",
"esri/WebMap",
"esri/views/MapView",
"esri/widgets/Feature",
"esri/Graphic",
"esri/tasks/support/Query",
"esri/widgets/FeatureTable",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/layers/MapImageLayer",
"esri/layers/BaseDynamicLayer",
"esri/Basemap",
"esri/layers/TileLayer",
"esri/layers/ImageryLayer",
"esri/widgets/Home",
"esri/layers/support/Field",
"esri/geometry/Point",
"esri/widgets/LayerList",
"esri/widgets/Swipe",
"esri/widgets/AreaMeasurement2D",
"esri/widgets/DistanceMeasurement2D",
"esri/widgets/BasemapLayerList",
"esri/widgets/Bookmarks",
"esri/widgets/Expand",
"esri/widgets/Compass",
"esri/widgets/CoordinateConversion",
"esri/widgets/Fullscreen",
"esri/widgets/ScaleBar",
"esri/widgets/Print"
], function
(esriConfig,
Map,
WebMap,
MapView,
Feature,
Graphic,
Query,
FeatureTable,
FeatureLayer,
GraphicsLayer,
MapImageLayer,
BaseDynamicLayer,
Basemap,
TileLayer,
ImageryLayer,
Home,
Field,
Point,
LayerList,
Swipe,
AreaMeasurement2D,
DistanceMeasurement2D,
BasemapLayerList,
Bookmarks,
Expand,
Compass,
CoordinateConversion,
Fullscreen,
ScaleBar,
) {
var baseUrl = "http://192.168.1.21:6080/arcgis/rest/services/SampleWorldCities/MapServer"; let layer = new MapImageLayer({
url: baseUrl
});
const map = new Map({
basemap: new Basemap({ baseLayers: [layer] }),
logo: false, //不显示Esri的logo
});
const view = new MapView({
map: map,
center: [125.04658531829789, 41.978062677899004],
zoom: 3, // Zoom level
container: "viewDiv" // Div的Id
});
//==============坐标小部件
var ccWidget = new CoordinateConversion({
view: view
});
view.ui.add(ccWidget, "bottom-left");
//===============比例尺小部件
let scaleBar = new ScaleBar({
view: view,
style: "ruler"
});
view.ui.add(scaleBar, {
position: "bottom-left"
});
//===============指南针小部件
var compassWidget = new Compass({
view: view
});
view.ui.add(compassWidget, "bottom-right");
//===============图层小部件
let basemapLayerList = new BasemapLayerList({
basemapTitle: "图层列表",
view: view
});
var basemapLayerListExpand = new Expand({
view: view,
content: basemapLayerList,
expandTooltip: "图层",
expanded: false
});
view.ui.add(basemapLayerListExpand, "top-left");
//===============主页小部件
let homeWidget = new Home({
view: view
});
view.ui.add(homeWidget, "top-left");
//===============全屏小部件
fullscreen = new Fullscreen({
view: view
});
view.ui.add(fullscreen, "top-left");
//===============书签小部件
const bookmarks = new Bookmarks({
view: view,
editingEnabled: true
});
const bkExpand = new Expand({
view: view,
content: bookmarks,
expandTooltip: "书签",
expanded: false
});
view.ui.add(bkExpand, "top-left");
//===============测量小部件
let distanceWidget = new DistanceMeasurement2D({
view: view
});
var distanceExpand = new Expand({
view: view,
content: distanceWidget,
expandTooltip: "距离测量",
expanded: false
});
view.ui.add(distanceExpand, "top-left");
let areaWidget = new AreaMeasurement2D({
view: view
});
var areaExpand = new Expand({
view: view,
content: areaWidget,
expandTooltip: "面积测量",
expanded: false
});
view.ui.add(areaExpand, "top-left");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
效果图如下：
属性图层
属性图层的类是FeatureLayer，FeatureLayer类有三个比较重要的属性source（数据源），fields（图层中可用字段），popupTemplate（点击弹出模板）。
正确为这三个属性赋值后，我们就可以实现在地图上画两个图形（这里画圆点），并且点击图形弹出图形的属性。
代码如下：
var baseUrl = "http://192.168.50.28:6080/arcgis/rest/services/SampleWorldCities/MapServer";
let layer = new MapImageLayer({
url: baseUrl
});
const map = new Map({
basemap: new Basemap({ baseLayers: [layer] }),
logo: false, //不显示Esri的logo
});
let featuresSource = [
{
geometry: {
type: "point",
x: 61.94658531829789,
y: 41.978062677899004
},
attributes: {
ObjectID: 1,
Name: "Kiba",
MsgTime: Date.now(),
Msg: "Hello Kiba"
}
},
{
geometry: {
type: "point",
latitude: 41.04658531829789,
longitude: 60.978062677899004
},
attributes: {
ObjectID: 2,
Name: "Kiba518",
MsgTime: Date.now(),
Msg: "Hello Kiba518"
}
}
];
// 弹出框设置
const popupTemplate = {
"title": "数据信息",
"content": "<b>Id:</b> {ObjectID}<br><b>姓名:</b> {Name}<br><b>时间:</b> {MsgTime}<br><b>消息:</b> {Msg}"
}
let layer1 = new FeatureLayer({
source: featuresSource,
objectIdField: "ObjectID",//唯一标识字段
fields://定义图层中可用字段 name字段名 alias别名 type类型
[{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
}, {
name: "Name",
alias: "Name",
type: "string"
},
{
name: "MsgTime",
alias: "MsgTime",
type: "date"
},
{
name: "Msg",
alias: "Msg",
type: "string"
}],
popupTemplate: popupTemplate
});
map.add(layer1);
const view = new MapView({
map: map,
center: [65.04658531829789, 41.978062677899004],
zoom: 13, // Zoom level
container: "viewDiv" // Div的Id
});
实现结果如下：
结语
到此ArcGis实现地图管理就介绍完了。
PS：很多公司把会给会GIS开发的程序员更高的工资。
----------------------------------------------------------------------------------------------------
到此，到此JArcGisJS地图管理就已经介绍完了。
代码已经传到Github上了，欢迎大家下载。
Github地址： https://github.com/kiba518/ArcGisWebJs
----------------------------------------------------------------------------------------------------
注：此文章为原创，任何形式的转载都请联系作者获得授权并注明出处！
若您觉得这篇文章还不错，请点击下方的【推荐】，非常感谢！
https://www.cnblogs.com/kiba/p/15133225.html
一文让你彻底掌握ArcGisJS地图管理的秘密的更多相关文章
- 一文读懂UGC：互联网上的生态秘密
转载自近乎: UGC(User- Generated Content)用户原创生产内容,它是相对于PGC(Professionally-produced Content)专业生产内容的一种内容来源,简 ...
- 分布式文档存储数据库之MongoDB索引管理
前文我们聊到了MongoDB的简介.安装和对collection的CRUD操作,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13941797.html:今天我 ...
- 通用权限管理系统接口文档V4.2 版本之角色管理功能介绍
角色功能维护界面:可实现添加.修改.删除角色,向角色添加或删除人员,角色具有哪些菜单的管理功能.
- UE4高级功能--初探超大无缝地图的实现LevelStream
转自:http://blog.csdn.net/u011707076/article/details/44903223 LevelStream 实现超大无缝地图--官方文档学习 The Level S ...
- Android 百度地图 SDK v3.0.0 （四） 引入离线地图功能
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37758097 一直觉得地图应用支持离线地图很重要啊,我等移动2G屌丝,流量不易, ...
- [转]Net Framework引路蜂地图开发示例
From:http://www.2cto.com/kf/201207/140421.html 引路蜂地图也提供对.Net Framework平台的支持,可以开发桌面地图应用,由于Mono C#的跨平台 ...
- Android高效率编码-第三方SDK详解系列(一)——百度地图，绘制，覆盖物，导航，定位，细腻分解！
Android高效率编码-第三方SDK详解系列(一)--百度地图,绘制,覆盖物,导航,定位,细腻分解! 这是一个系列,但是我也不确定具体会更新多少期,最近很忙,主要还是效率的问题,所以一些有效的东西还 ...
- 微信小程序地图之逆地理编码
首先说一下,我微信自带map的api中并没有相关接口可调用.文中的方法建立于高德地图.(顺便吐槽,微信开发文档相比支付宝家的显得好烂!) 最近做项目用到地图定位相关的需求,为了搞定需求看了下相关的文档 ...
- Xamarin.Forms 调用 腾讯地图SDK
Xamarin.Forms研究了好一段时间了,最近一直在学习中,想尝试一下调用其他的SDK,就如腾讯地图SDK(申请容易). 完成此次项目得感谢以下链接: http://www.cnblogs.com ...
随机推荐
- Docker Swarm介绍
1 什么是swarmSwarm是Docker公司推出的docker集群管理平台,它将一群Docker主机变成了一台单一的虚拟Docker主机.Swarm使用标准的Docker API接口,因此,任何支 ...
- Springboot集成RabbitMQ之MessageConvert源码解析
问题 最近在使用RabbitMq时遇到了一个问题,明明是转换成json发送到mq中的数据,消费者接收到的却是一串数字也就是byte数组,但是使用mq可视化页面查看数据却是正常的,之前在使用过程中从未遇 ...
- 【转载】Nginx多服务绑定80端口及映射域名
多服务绑定80端口及映射域名 说明:业务需要配置的样例模板,如需深入了解,请查看官方文档 1.Nginx配置文件nginx.conf(可拆分多台机器部署) worker_processes 1; e ...
- php加密压缩文件
前言 近几日,用爬虫采集的了一些数据,存放到硬盘中,随着数据量越来越多,所以想上传到网盘当中,可是不加下密又觉得不放心, 所以开始用PHP的zip模块进行压缩加密. 开始 $zipArc = new ...
- 基于Vue/React项目的移动端适配方案
本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-re ...
- 嵌入式Linux会议LinuxCon欧洲的时间表公布
From: http://linuxgizmos.com/embedded-linux-conference-and-linuxcon-europe-schedules-posted/ Linux基金 ...
- Outlook配置163邮箱
一.在163邮箱设置处设置POP3/SMTP/IMAP 二.开启客户端授权码 三.打开Outlook,选择手动设置 选择POP/IMAP 密码是上文中的授权码 点击其它设置,勾选以下选项 点击完成即可
- C++泛型编程-举例
就是C++里面说的函数模板和类模板,我们以前写C语言的时候,不同的类型参数,可能要写不同的函数. C++的模板出现之后,就可以实现函数模板,函数模板可以接纳不同的类型,然后这些类型都可以调用同一个函数 ...
- 谷粒学院-2-mybatisplus
一.参考文档 官网:http://mp.baomidou.com/ 参考教程:http://mp.baomidou.com/guide/ MyBatis-Plus(简称 MP)是一个 MyBatis ...
- 队列Queue：任务间的消息读写，安排起来~
摘要:本文通过分析鸿蒙轻内核队列模块的源码,掌握队列使用上的差异. 本文分享自华为云社区<鸿蒙轻内核M核源码分析系列十三 消息队列Queue>,作者:zhushy . 队列(Queue)是 ...