JavaScript——ArcGIS的Web开发
近日关于ArcGIS的Web开发课程给出了以下任务:
1.在Web开发的过程中调用ArcGIS本地发布的地图服务;
2.增添导航栏和点击事件;
3.增添放大缩小控件;
首先添加网页的基础代码框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
添加BootStrapt的样式和ArcGIS的API(在<head></head>
里添加)
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
创建地图和视图(也是在<head></head>
里添加)
其中require是对各种模块的调用,除了Map,MapView模块,为了调用我们发布的地图服务,博主增添了FeatureLayer模块
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer"
], function(Map, MapView,FeatureLayer) {
var map = new Map({
basemap: "topo-vector" //这里是调用底图
});
//以下的MapView就是视图容器
var view = new MapView({
container: "viewDiv",
//这里表示容器的属性是viewDiv
//若想要修改整个页面的样式框架就可以修改这个viewDiv
map: map,//调用我们之前定义好的map底图
center: [118.08 ,24.48],//地图中心点的经纬度设置,这里设置到了厦门
zoom: 11//缩放级别为11级,若想修改视图范围可以对该值进行修改
});
//以下是创建一个对象来调用我们发布的地图服务
//url可以在ArcGIS Server Manager中查看
var featureLayer = new FeatureLayer({
url: " 你的地图服务URL"
});
map.add(featureLayer);//在底图的基础上添加我们发布的地图服务
});
效果图如下
添加导航栏,首先需要调用更多的BootStrapt样式(如上述来添加)
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
接着编写导航栏的相关代码(添加在<body></body>
里)
<button id="btnTest" type="button" class="btn btn-dark btn-sm" style="position:absolute; z-index: 1000; left:20%; top:1%; width:30px; height:30px;" onclick="doHide();">
<i class="fas fa-angle-double-right"></i>
</button>
<div id="divTest" class="btn-group btn-group-justified" style="display: none; position:absolute; z-index: 9999; left:23%; top:1%; width:80px; height:30px;">
<button type="button" class="btn btn-dark">Unused</button>
<button type="button" class="btn btn-dark">Unused</button>
<button type="button" class="btn btn-dark">Unused</button>
<button type="button" class="btn btn-dark">Unused</button>
<button type="button" class="btn btn-dark">Unused</button>
<div class="btn-group">
<button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown">Layers <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" style="background:black;">
<li>
<div class="checkedBoxDiv">
<input type="checkbox" class="layer" onclick="checkboxOnclick(this)">
<font color="white">MapServer</font>
</div>
</li>
<li><a href="#">#</a></li>
</ul>
</div>
</div>
效果图如下
最后设置导航栏的动态事件,包括点击箭头会对列表进行缩放,以及点击最后一栏的Layer会进行点击事件的响应。
function doHide(){
var oDiv = document.getElementById("divTest");
//上一行代码是通过id来对已经定义好的按钮组进行绑定
var oButton = document.getElementById("btnTest")
//上一行代码是通过id来对已经定义好的箭头按钮进行绑定
if (oDiv.style.display == "none"){
oDiv.style.display = "";//点击箭头,显示按钮组
}else {
oDiv.style.display = "none";//再次点击,隐藏按钮组
}
}
function checkboxOnclick(checkbox){ //设置onclick事件
if(checkbox.checked==true){
alert("勾选成功!");
}
else{
alert("取消勾选!");
}
}
最终效果如下图
附上最终代码:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS API for JavaScript Hello World App</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer"
], function(Map, MapView,FeatureLayer) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [118.08 ,24.48],
zoom: 11
});
var featureLayer = new FeatureLayer({
url: " http://localhost:6080/arcgis/rest/services/MyMapService/MapServer"
});
map.add(featureLayer);
});
function doHide(){
var oDiv = document.getElementById("divTest");
var oButton = document.getElementById("btnTest")
if (oDiv.style.display == "none"){
oDiv.style.display = "";
}else {
oDiv.style.display = "none";
}
}
function checkboxOnclick(checkbox){
if(checkbox.checked==true){
alert("勾选成功!");
}
else{
alert("取消勾选!");
}
}
</script>
</head>
<body>
<div id="viewDiv"></div>
<button id="btnTest" type="button" class="btn btn-dark btn-sm" style="position:absolute; z-index: 1000; left:20%; top:1%; width:30px; height:30px;" onclick="doHide();">
<i class="fas fa-angle-double-right"></i>
</button>
<div id="divTest" class="btn-group btn-group-justified" style="display: none; position:absolute; z-index: 9999; left:23%; top:1%; width:80px; height:30px;">
<button type="button" class="btn btn-dark">Unused</button>
<button type="button" class="btn btn-dark">Unused</button>
<button type="button" class="btn btn-dark">Unused</button>
<button type="button" class="btn btn-dark">Unused</button>
<button type="button" class="btn btn-dark">Unused</button>
<div class="btn-group">
<button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown">Layers <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" style="background:black;">
<li>
<div class="checkedBoxDiv">
<input type="checkbox" class="layer" onclick="checkboxOnclick(this)">
<font color="white">MapServer</font>
</div>
</li>
<li><a href="#">#</a></li>
</ul>
</div>
</div>
</body>
</html>