ARCGIS 地图服务的初步认识
ARCGIS包含地图全套服务主要还是给地图服务者自定义的空间，和可编码的更多种玩法百度地图，高德地图，只是能说是很基础的，不过在一般的场景下，百度和高德基本都是满足需求使用了。但是在一下高度自定义的地图中，自定义场景和显示内容等，这个时候 ARCGIS 就能满足需求了。我简单的说下我理解的入门知识官网首页:https://developers.arcgis.com/我简单的研究了一下 JS的API
·
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。最后出来的效果就是这样
这样去查询文档就比较方便了。
新增一个 leaflet 框架
在这里插入代码片<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<link rel="stylesheet" href="./leaflet/leaflet.css" />
<script src="./leaflet/leaflet.js"></script>
<script src="./leaflet/leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet@2.5.1/dist/esri-leaflet.js"
integrity="sha512-q7X96AASUF0hol5Ih7AeZpRF6smJS55lcvy+GLWzJfZN+31/BQ8cgNx2FGF+IQSA4z2jHwB20vml+drmooqzzQ=="
crossorigin=""></script>
<script src="./pro/proj4-compressed.js"></script>
<script src="./pro/proj4leaflet.js"></script>
<style>
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0;
}
.map {
height: 100%
}
</style>
</head>
<body>
<div id="mapid" class="map"></div>
<script>
// 可以查询 Leaflet 地图框架，百度都 有查询，直接使用
//https://blog.csdn.net/sgy86/article/details/78614435 API文档可以借鉴一下
var res=[
1.40625, // Level 0
0.703125, // Level 1
0.3515625, // Level 2
0.17578125, // Level 3
0.087890625, // Level 4
0.0439453125,
0.02197265625,
0.010986328125,
0.0054931640625,
0.00274658203125,
0.001373291015625,
0.0006866455078125,
0.00034332275390625,
0.000171661376953125,
8.58306884765625E-05,
4.29153442382813E-05,
2.14576721191406E-05,
1.07288360595703E-05,
5.36441802978516E-06,
2.68220901489258E-06,
1.34110450744629E-06
//6.7055225372315E-07
//3.3527612686157E-07
];
//坐标系
var crs = new L.Proj.CRS('SR-ORG:7408',
'+proj=longlat +ellps=GRS80 +no_defs',
{
resolutions: res,
origin: [-180,90]
}
);
var map = L.map('mapid', {
crs: crs,
/*fullscreenControl: {
pseudoFullscreen: false
},*/
//minZoom:1,
//maxZoom:20,
//zoomOffset:1
scrollWheelZoom:true,
});
var attrib = "© title标签";
//minZoom maxZoom 图片缩放，需要再找一个可以禁用缩放功能的API
//url 为底图服务
var basemap = new L.TileLayer("http://t.abcabc.gov.cn/a1123123123123/Tile/ArcGISREST/abcabc.gis/tile/{z}/{y}/{x}", {
tileSize: 256,
minZoom:12,
//maxZoom:18,
attribution: attrib
});
map.addLayer(basemap);
//添加图层,动态图层服务
var urldd = "https://abc.avc.gov.cn:8335/accc/dddd/12321ssfsdfsdf/ArcGIS/MapService/Catalog/2ws3.123sd.gis";
var dynamicLayer = L.esri.dynamicMapLayer({
url:urldd,
opacity: 0.8,
f:'xml'
});
//可选默认覆盖图层
//map.addLayer(dynamicLayer);
var myimage = L.icon({
iconUrl:'./leaflet/images/marker-icon.png', //图片url
iconSize:[30,50], //设置图片大小 宽度50.高度100
iconAnchor: [0,0], //设置定位点的位置。默认为中心 例子中以左上角为定位参考。相当于relative
popupAnchor:[50 ,0], //设置警示框位置 ，以iconAnchor的值进行定位。相当于absolute 例子中的警示框定位到有、右上角。
});
//地图打点
function addMarker(lan,lat,titler,content){
var marker = L.marker([lan, lat],{icon:myimage,title:titler,draggable:false,riseOnHover:true,}).addTo(map);
marker.bindPopup(content);
marker.on('mouseover',function (e){
marker.openPopup();
});
marker.on('mouseout',function (e){
marker.closePopup();
});
//marker.mouseover(function(){marker.openPopup()});
//marker.mouseout(function(){marker.closePopup()});
}
//从图层中获取图层中所有点的信息
L.esri.query({
url: urldd
}).where("1=1")
.run(function(error, result) {
console.log(result.features);
result.features.forEach(function(re) {
console.log(re.geometry.coordinates[0]);
console.log(re.geometry.coordinates[1]);
console.log(re.properties.NAME);
console.log(re.properties.Address);
console.log(re.properties.SerContent);
//后续处理result 为 geojson
addMarker(re.geometry.coordinates[1], re.geometry.coordinates[0],re.properties.NAME,"<div>"+re.properties.NAME+"<br>"+re.properties.Address+"<br>"+re.properties.SerContent+"</div>");
})
});
map.setView([30.24279, 120.14254], 4); //设置比例尺和中心点级别
map._layersMaxZoom=20;
map.on('click', function (e) {
alert("SMK96225—点击位置经纬度： " + e.latlng);
//var lat = e.latlng.lat;
//var lng = e.latlng.lng;
// map.setView([lat,lng], 20); //设置比例尺和中心点级别
});
// L.marker([30.24279, 120.14254],{icon:myimage,title:'景山',draggable:false,riseOnHover:true,}).addTo(map);
//L.marker([30.26218, 120.20245],{icon:myimage,title:'景山',draggable:false,riseOnHover:true,}).addTo(map).bindPopup("<div>1231231</div>").mouseover(function(){this.openPopup()}).mouseout(function(){this.closePopup()});
</script>
</body>
</html>
CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)