ARCGIS 地图服务的初步认识

2024-03-26 13:59:46

ARCGIS

包含地图全套服务
主要还是给地图服务者自定义的空间，和可编码的更多种玩法

百度地图，高德地图，只是能说是很基础的，不过在一般的场景下，百度和高德基本都是满足需求使用了。
但是在一下高度自定义的地图中，自定义场景和显示内容等，这个时候 ARCGIS 就能满足需求了。

我简单的说下我理解的入门知识

官网首页:https://developers.arcgis.com/

我简单的研究了一下 JS的API

1.版本

目前主要是 3.x 和 4.x 版本、 2个版本的语法不通用。很多的API都是不通用的。
这个地方是一个大坑。官网的文档都是最新的版本。如果想使用低版本，需要自己去下载低版本的API的SDK

想要下载API和SDK，一定需要登录
想要注册这个用户名，我用QQ邮箱试了，不行。公司邮箱也不行。说是被限制。
最后，使用网易的163 邮箱成功注册。

2. 文档

下载地址：https://developers.arcgis.com/downloads/apis-and-sdks?product=javascript

3. 配置

一个是离线的API文件，一个说明文档SDK。
这个文档下载下来不能直接使用
需要先修改一下配置
里面有一个 install.html。分windows系统和 linux 系统2中

简单的说，就是一个使用的时候JS文件的相对路径

这里面的一个核心JS文件就是 init.js
在这核心的init.js 文件里面需要配置一个 baseUrl .
官方的文档是需要你把这个API ，放在一个容器里面，例如nginx 容器。然后再去在代码里面引用。所以你看官网的样例，是使用了一个域名去替换这个baseUrl

我是改了一个相对路径，

4. 开发使用

先贴一份代码

<html>
<head>
<meta charset="utf-8">
<title>地图demo</title>
<!-- 引入arcgis for js  css文件-->
<link rel="stylesheet" type="text/css" href="./html/js/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="./html/js/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css" />
<!-- 引入arcgis for js api -->
<script type="text/javascript" src="./html/js/arcgis_js_api/library/3.9/3.9/init.js"></script>
<!-- 引入jquery -->
<script type="text/javascript" src="./html/js/Jquery/js/jquery.min.js"></script>


<style type="text/css">
/* 覆盖opengis字样 */
.esriControlsBR {
	display: none;
}
</style>
<script type="text/javascript">
$(function() {
		require([ "esri/map",
		"esri/layers/ArcGISTiledMapServiceLayer",
		"dojo/on",
		"esri/graphic",
		"esri/symbols/PictureMarkerSymbol",
		"esri/InfoTemplate",
		"esri/geometry/Point",
		"esri/geometry/Polyline",
		"esri/layers/GraphicsLayer",
		"esri/SpatialReference",
		"esri/symbols/SimpleLineSymbol",
		"esri/Color",
	],
		function(
		Map, 
		ArcGISTiledMapServiceLayer, 
		on,
		Graphic,
		PictureMarkerSymbol,
		InfoTemplate,
		Point,
		Polyline,
		GraphicsLayer,
		SpatialReference,
		SimpleLineSymbol,
		Color,
	) {
			//底图服务路径
			var url = "http://ip:port//map/server/RBLEND.gis";
		//  map  是对应html 的一个DIV的 ID
			var map = new Map("map", {
				center : [ 120.119, 30.280 ],
				zoom : 12,
				slider : true,
				sliderPosition : "top-left",
				logo : false,
				// 键盘导航
				isKeyboardNavigation : false,
			});
			//使用动态底图服务
			var basemap = new ArcGISTiledMapServiceLayer(url);
			map.addLayer(basemap);
			//添加地图单击事假的监听器
			on(map, "click", function(evt) {
				//console.log("地图单击事件：   ", evt);
				var temp = "经度：" + evt.mapPoint.x + " 纬度： " + evt.mapPoint.y;
				//console.log(temp);
				alert(temp);
			});

			//创建一个图层
			var graphicLayer = new GraphicsLayer();
            //把图层添加到地图上
            map.addLayer(graphicLayer);
		
		//创建一个标记点
			var point = new Point(120.14380909228326, 30.248376755714418,new SpatialReference({ wkid: 4326 }));
			var point1 = new Point(120.16539551043512,30.258247284889226,new SpatialReference({ wkid: 4326 }));
			var point2 = new Point(120.17054535174371,30.2239150094986,new SpatialReference({ wkid: 4326 }));
			
			
			
			//样式，一个图片点
			 var symbol = new  PictureMarkerSymbol("1.jpg", 25, 25);
			 //备注
			 var attr = { "address": "山东省淄博市张店区" };
			 //模板
			 var infoTemplate = new InfoTemplate("标题", "地址:${address}");
		     
		     //创建一个图像
			 var graphic = new Graphic(point,symbol,attr,infoTemplate);
			 var graphic1 = new Graphic(point1,symbol,attr,infoTemplate);
			 var graphic2 = new Graphic(point2,symbol,attr,infoTemplate);
			 
			 // 图层里面添加标记点
			graphicLayer.add(graphic);
			graphicLayer.add(graphic1);
			graphicLayer.add(graphic2);
			
			
			
			//创建一个带有经纬度的数据
			var polylineJson = {
				"paths":[[[120.14380909228326,30.248376755714418], 
				[120.1325860734593,30.23898026954621],
				[120.13973213458063,30.228421120643617],
				[120.13213611865045,30.22533121585846],
				[120.12110687518121,30.22812071323395],
				[120.0964305522442,30.23962202548981],
				[120.10329700732233,30.198079972267152]
				
				]],
				"spatialReference":{"wkid":4326}
			  };
			  
             // 构建一个线条
			var polyline = new Polyline(polylineJson);
			//创建线条的样式
			var polylineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH,new Color([255,0,0]),3);
		//构建一个 线条图像
			var graphicline = new Graphic(polyline,polylineSymbol);
			// 图层里面添加 线条
			graphicLayer.add(graphicline);
			
			
		});

	});
	
</script>


</head>
<body>
	<h2>这是一个arcgis for js 的 demo !</h2>
	<div style="border: 1px solid red; margin: 10px 20px 20px 20px; height: 550px;" id="map"></div>

</body>
</html>

再说一下代码中需要注意的地方

$(function() {
		require([ "esri/map",
		"esri/layers/ArcGISTiledMapServiceLayer",
		"dojo/on",
		"esri/graphic",
		"esri/symbols/PictureMarkerSymbol",
		"esri/InfoTemplate",
		"esri/geometry/Point",
		"esri/geometry/Polyline",
		"esri/layers/GraphicsLayer",
		"esri/SpatialReference",
		"esri/symbols/SimpleLineSymbol",
		"esri/Color",
	],
		function(
		Map, 
		ArcGISTiledMapServiceLayer, 
		on,
		Graphic,
		PictureMarkerSymbol,
		InfoTemplate,
		Point,
		Polyline,
		GraphicsLayer,
		SpatialReference,
		SimpleLineSymbol,
		Color,
	) {
		想要使用的住建，必须在require 中声明位置，然后在function 中引入
其中 声明中“"esri/layers/ArcGISTiledMapServiceLayer",”，其实是对应的API中的一个JS类。如下图

	}
	});

SDK 查询

下载下来的文档是一个包含了各种 js和 html 的包

我们可以把这个放在一个nginx 容器里面

然后直接在浏览器里面像浏览网页一样查询API。最后出来的效果就是这样

这样去查询文档就比较方便了。

码农公寓