前言
Arcgis是一个地理系统的平台，可用来进行数据数据展示或二次开发。这里我们所使用的是Arcgis对于JavaScript的api，也就是web端的api进行开发。我们使用的版本是3.21，这个版本包含了完整的2D地图的api。如果想对3D地图进行开发，可以使用4.4版本的api。在这个demo中，我们要完成如下的几个功能:
- 基本地图展示
- 搜索功能
- 图形绘制
- 图形点击显示详情
- 图形删除
在本篇博客的结尾可以看到本例的下载链接。
先来看程序的截图:
首先是页面打开时:
接下来是使用搜索功能时：
绘制的图形：
左键点击图形产生popup：
在右键点击图形的时候弹出删除按钮：
代码
接下来是程序的完整代码。除了引入arcGIS包之外，也引入了jquery包，jqeury在本例中并非必需，主要是用于后面实例的开发。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Arcgis Demo</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
<style>
html, body, #map {
height: 100%; width: 100%; margin: 0; padding: 0;
}
#search {
z-index: 20;
margin: auto;
height: 95px;
width: 400px;
margin: auto;
position: absolute;
top: 20px;
left: 0;
right: 0;
}
#info {
top: 200px;
color: #444;
height: auto;
font-family: arial;
left: 16px;
margin: 2px;
padding: 3px;
position: absolute;
width: 40px;
z-index: 40;
border: solid 1px #666;
border-radius: 4px;
background-color: #fff;
}
html, body, #mapDiv {
padding:0;
margin:0;
height:100%;
}
#info button {
background-color: white;
padding: 2px;
text-align: center;
margin: 4px 4px;
cursor: pointer;
border-radius: 4px;
width: 30px;
border: 1px solid
}
#info button:hover {
padding: 2px;
text-align: center;
margin: 4px 4px;
cursor: pointer;
border-radius: 4px;
width: 30px;
border: 1px solid #1e90ff;
color: #1e90ff;
}
</style>
<script src="https://js.arcgis.com/3.21/"></script>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
var map, tb, ctxMenuForGraphics;
var selected;
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/_base/connect",
"esri/dijit/BasemapToggle",
"esri/toolbars/draw",
"esri/geometry/Polygon",
"esri/geometry/Polyline",
"esri/dijit/Search",
"dijit/registry",
"esri/dijit/Scalebar",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/PictureFillSymbol",
"esri/symbols/CartographicLineSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/geometry/Extent",
"esri/SpatialReference",
"esri/geometry/Point",
"esri/geometry/mathUtils",
"esri/geometry/ScreenPoint",
"esri/toolbars/edit",
"dijit/Menu",
"dijit/MenuItem",
"dijit/MenuSeparator",
"esri/graphic",
"esri/layers/GraphicsLayer",
"esri/Color",
"esri/dijit/Popup",
"esri/dijit/PopupTemplate",
"esri/InfoTemplate",
"esri/symbols/SimpleLineSymbol",
"dojo/dom-construct",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
], function(
Map, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
connect, BasemapToggle, Draw, Polygon, Polyline, Search, registry, Scalebar, SimpleMarkerSymbol, SimpleFillSymbol,
PictureFillSymbol, CartographicLineSymbol, PictureMarkerSymbol,
Extent, SpatialReference, Point, mathUtils, ScreenPoint, Edit, Menu, MenuItem, MenuSeparator,
Graphic, GraphicsLayer, Color, Popup, PopupTemplate, InfoTemplate, SimpleLineSymbol, domConstruct,
dom, on, domAttr
) {
//创建popup弹出层
var popup = new Popup(null, domConstruct.create("div"));
//地图
map = new Map("map", {
center: [121.47003707885744, 31.24853148977224],
zoom: 7,
infoWindow: popup,
extent: new Extent(-122.68,45.53,-122.45,45.60, new SpatialReference({ wkid:4326 }))
});
//添加地图图层
var mapServiceURL = "https://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
map.addLayer(new ArcGISTiledMapServiceLayer(mapServiceURL));
//初始化比例尺
var scalebar = new Scalebar({
map: map,
attachTo: "bottom-left",
scalebarUnit: "dual",
});
//显示比例尺
scalebar.show();
//创建图层
var gl = new GraphicsLayer({ id: "draw" });
map.addLayer(gl);
map.on("load", initToolbar);
createGraphicsMenu();
//创建右键菜单
function createGraphicsMenu() {
ctxMenuForGraphics = new Menu({});
ctxMenuForGraphics.addChild(new MenuItem({
label: "删除",
onClick: function () {
gl.remove(selected)
}
}));
//当鼠标在gl图层的图形上方时绑定该图形的点击事件
gl.on("mouse-over", function(evt) {
selected = evt.graphic;
ctxMenuForGraphics.bindDomNode(evt.graphic.getDojoShape().getNode());
});
//当鼠标移出gl图层的图形上方时取消绑定该图形的点击事件
gl.on("mouse-out", function(evt) {
ctxMenuForGraphics.unBindDomNode(evt.graphic.getDojoShape().getNode());
});
}
//启动右键菜单
ctxMenuForGraphics.startup();
//点击地图响应
map.on("click", function(e) {
//点击空白处隐藏popup
if(e.graphic == undefined){
popup.hide();
}
});
//搜索框
var search = new Search({
map: map,
graphicsLayer: gl,
}, "search");
search.startup();
//弹出框信息
gl.on("click", function(e) {
var detailInfo = '图形: ' + e.graphic.geometry.cache.geoShape + '<br>'
popup.setTitle('图形信息');
popup.setContent(detailInfo);
popup.show(e.mapPoint);
});
//用来展示点的symbol
var markerSymbol = new SimpleMarkerSymbol();
markerSymbol.setColor(new Color("#00FFFF"));
// 用来展示线的symbol
var lineSymbol = new CartographicLineSymbol(
CartographicLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 2,
CartographicLineSymbol.CAP_ROUND,
CartographicLineSymbol.JOIN_MITER, 5
);
//用来展示面的symbol
var fillSymbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color('#000'),
1
),
new Color([255, 0, 0, 0.1])
);
//初始化工具栏
function initToolbar() {
tb = new Draw(map);
tb.on("draw-end", addGraphic);
on(dom.byId("info"), "click", function(evt) {
if ( evt.target.id === "info" ) {
return;
}
var tool = evt.target.id.toLowerCase();
map.disableMapNavigation();
tb.activate(tool);
});
}
//添加图形
function addGraphic(evt) {
tb.deactivate();
map.enableMapNavigation();
var symbol;
if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
symbol = markerSymbol;
} else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
symbol = lineSymbol;
}
else {
symbol = fillSymbol;
}
evt.geometry.setCacheValue("geoShape", evt.geometry.type);
gl.add(new Graphic(evt.geometry, symbol));
}
});
</script>
</head>
<body class="claro" style="font-size: 0.75em;">
<div id="info">
<div align="center">绘制</div>
<button id="Multipoint"><image id="Multipoint" src = "../images/point.png"></image></button>
<button id="Line"><image id="Line" src = "../images/line.png"></image></button>
<button id="Polyline"><image id="Polyline" src = "../images/line_chart.png"></image></button>
<button id="FreehandPolyline"><image id="FreehandPolyline" src = "../images/draw.png"></image></button>
<button id="Triangle"><image id="Triangle" src = "../images/triangle.png"></image></button>
<button id="Extent"><image id="Extent" src = "../images/rectangle.png"></image></button>
<button id="Circle"><image id="Circle" src = "../images/circle.png"></image></button>
<button id="Ellipse"><image id="Ellipse" src = "../images/ellipse.png"></image></button>
<button id="Polygon"><image id="Polygon" src = "../images/polygon.png"></image></button>
<button id="FreehandPolygon"><image id="FreehandPolygon" src = "../images/free_polygon.png"></image></button>
</div>
<div id="search"></div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
</div>
</body>
</html>简单的说一下流程：首先创建popup实例，接着创建map实例，将map的弹出层指定为刚创建的popup实例。然后创建地图图层和绘制图层，将地图图层和绘制图层加入到map实例中去。在地图载入时初始化绘制工具栏和右键菜单，并且把工具栏和右键菜单的事件与绘图的图层绑定，这样之后对图形的绘制和删除都会在绘制的图层上进行。接着初始化搜索框即可。
具体的函数说明都写到注释里了。
结束语
本例中基本都是对arcGIS api的调用，也是一些基本的操作。本例中的代码已经上传至我的github。下载完成后解压，并使用浏览器打开html文件夹下的ArcgisDemo.html即可查看效果。如果对代码有疑问，可以在博客下留言。