使用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,
Print
) {

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地图管理的秘密的更多相关文章

  1. 一文读懂UGC:互联网上的生态秘密

    转载自近乎: UGC(User- Generated Content)用户原创生产内容,它是相对于PGC(Professionally-produced Content)专业生产内容的一种内容来源,简 ...

  2. 分布式文档存储数据库之MongoDB索引管理

    前文我们聊到了MongoDB的简介.安装和对collection的CRUD操作,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13941797.html:今天我 ...

  3. 通用权限管理系统接口文档V4.2 版本之角色管理功能介绍

    角色功能维护界面:可实现添加.修改.删除角色,向角色添加或删除人员,角色具有哪些菜单的管理功能.

  4. UE4高级功能--初探超大无缝地图的实现LevelStream

    转自:http://blog.csdn.net/u011707076/article/details/44903223 LevelStream 实现超大无缝地图--官方文档学习 The Level S ...

  5. Android 百度地图 SDK v3.0.0 (四) 引入离线地图功能

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37758097 一直觉得地图应用支持离线地图很重要啊,我等移动2G屌丝,流量不易, ...

  6. [转]Net Framework引路蜂地图开发示例

    From:http://www.2cto.com/kf/201207/140421.html 引路蜂地图也提供对.Net Framework平台的支持,可以开发桌面地图应用,由于Mono C#的跨平台 ...

  7. Android高效率编码-第三方SDK详解系列(一)——百度地图,绘制,覆盖物,导航,定位,细腻分解!

    Android高效率编码-第三方SDK详解系列(一)--百度地图,绘制,覆盖物,导航,定位,细腻分解! 这是一个系列,但是我也不确定具体会更新多少期,最近很忙,主要还是效率的问题,所以一些有效的东西还 ...

  8. 微信小程序地图之逆地理编码

    首先说一下,我微信自带map的api中并没有相关接口可调用.文中的方法建立于高德地图.(顺便吐槽,微信开发文档相比支付宝家的显得好烂!) 最近做项目用到地图定位相关的需求,为了搞定需求看了下相关的文档 ...

  9. Xamarin.Forms 调用 腾讯地图SDK

    Xamarin.Forms研究了好一段时间了,最近一直在学习中,想尝试一下调用其他的SDK,就如腾讯地图SDK(申请容易). 完成此次项目得感谢以下链接: http://www.cnblogs.com ...

随机推荐

  1. Docker Swarm介绍

    1 什么是swarmSwarm是Docker公司推出的docker集群管理平台,它将一群Docker主机变成了一台单一的虚拟Docker主机.Swarm使用标准的Docker API接口,因此,任何支 ...

  2. Springboot集成RabbitMQ之MessageConvert源码解析

    问题 最近在使用RabbitMq时遇到了一个问题,明明是转换成json发送到mq中的数据,消费者接收到的却是一串数字也就是byte数组,但是使用mq可视化页面查看数据却是正常的,之前在使用过程中从未遇 ...

  3. 【转载】Nginx多服务绑定80端口及映射域名

    多服务绑定80端口及映射域名 说明:业务需要配置的样例模板,如需深入了解,请查看官方文档 1.Nginx配置文件nginx.conf(可拆分多台机器部署) worker_processes  1; e ...

  4. php加密压缩文件

    前言 近几日,用爬虫采集的了一些数据,存放到硬盘中,随着数据量越来越多,所以想上传到网盘当中,可是不加下密又觉得不放心, 所以开始用PHP的zip模块进行压缩加密. 开始 $zipArc = new ...

  5. 基于Vue/React项目的移动端适配方案

    本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-re ...

  6. 嵌入式Linux会议LinuxCon欧洲的时间表公布

    From: http://linuxgizmos.com/embedded-linux-conference-and-linuxcon-europe-schedules-posted/ Linux基金 ...

  7. Outlook配置163邮箱

    一.在163邮箱设置处设置POP3/SMTP/IMAP 二.开启客户端授权码 三.打开Outlook,选择手动设置 选择POP/IMAP 密码是上文中的授权码 点击其它设置,勾选以下选项 点击完成即可

  8. C++泛型编程-举例

    就是C++里面说的函数模板和类模板,我们以前写C语言的时候,不同的类型参数,可能要写不同的函数. C++的模板出现之后,就可以实现函数模板,函数模板可以接纳不同的类型,然后这些类型都可以调用同一个函数 ...

  9. 谷粒学院-2-mybatisplus

    一.参考文档 官网:http://mp.baomidou.com/ 参考教程:http://mp.baomidou.com/guide/ MyBatis-Plus(简称 MP)是一个 MyBatis ...

  10. 队列Queue:任务间的消息读写,安排起来~

    摘要:本文通过分析鸿蒙轻内核队列模块的源码,掌握队列使用上的差异. 本文分享自华为云社区<鸿蒙轻内核M核源码分析系列十三 消息队列Queue>,作者:zhushy . 队列(Queue)是 ...