一文让你彻底掌握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 ...
随机推荐
- AcWing 1282. 搜索关键词
给定n个长度不超过50的由小写英文字母组成的单词,以及一篇长为m的文章. 请问,有多少个单词在文章中出现了. #include<bits/stdc++.h> using namespace ...
- 学习django的日子
bilibii这个网站是个学习者网站,里面有很多学习视频
- docker搭建数据库高可用方案PXC
前言 本方案主要目的是学习, 该方案不太合适于企业项目 是什么? 白话点, 是个提供了必要环境的虚拟机(类似于java的导入部分包一样和c++的头文件差不多), 所以它比普通的VMWare或者Virt ...
- 重启outlook的bat脚本
@echo off :openie echo -------------closeing outlook---------- taskkill /f /t /im OUTLOOK.exe echo - ...
- MindSpore模型精度调优实战：常用的定位精度调试调优思路
摘要:在模型的开发过程中,精度达不到预期常常让人头疼.为了帮助用户解决模型调试调优的问题,我们为MindSpore量身定做了可视化调试调优组件:MindInsight. 本文分享自华为云社区<技 ...
- 网站图片无缝兼容 WebP/AVIF
前言 WebP 格式发布已有十余年,但不少站点至今仍未使用,只为兼顾极少数低版本浏览器.至于去年发布的 AVIF 格式,使用的站点就更少了. 然而图片往往是流量大户,与其费尽心机优化脚本体积,可能还不 ...
- C#版Nebula客户端编译
一.需求背景 从Nebula的Github上可以发现,Nebula为以下语言提供了客户端SDK: nebula-cpp nebula-java nebula-go nebula-python nebu ...
- Automation Framework Design 自动化框架设计思想
从2007年到2017年,十年内自动化测试工具层出不穷,各种工具在运用一段时间之后,各个公司都会有测试架构师对于目前的自动化测试工具进行框架定制设计. 从惠普2007年GDCC推出的的WebDrivi ...
- 深度学习之逻辑回归的实现 -- sigmoid
1 什么是逻辑回归 1.1逻辑回归与线性回归的区别: 线性回归预测的是一个连续的值,不论是单变量还是多变量(比如多层感知器),他都返回的是一个连续的值,放在图中就是条连续的曲线,他常用来表示的数学方法 ...
- HTML5-CSS(四)
一.CSS3 渐变效果 (1)CSS3 提供了 linear-gradient 属性实现背景颜色的渐变功能.首先,我们先看一下它的样式表,如下: //两个必须参数background-image: l ...