检查以下代码有无错误有无冗余:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebGIS的地图应用</title>
<!-- 在head部分增加引用esri提供的样式表 -->
<link rel="stylesheet" href="https://js.arcgis.com/3.45/esri/css/esri.css">
<!-- 增加一个script标签,在该标签中引入ArcGIS API for JavaScript,实现ArcGIS API for JavaScript的调用 -->
<script src="https://js.arcgis.com/3.45/init.js"></script>
<style>
/* 通过style标签来设置html body mapDiv的样式 */
html, body, #mapDiv {
padding: 0;/* 外边距 */
margin: 0;/* 内边距 */
width: 100%;/* 宽 */
height: 100%;/* 高 */
}
#legendDiv{
width:200px;
height:600px;
position:absolute !important;
top:200px;
left:10px;
}
</style>
<script>
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/dijit/Scalebar",
"esri/symbols/SimpleMarkerSymbol",
"esri/toolbars/draw",
"esri/graphic",
"esri/layers/GraphicsLayer",
"esri/Color",
"esri/layers/FeatureLayer",
"esri/InfoTemplate",
"esri/renderers/UniqueValueRenderer",
"esri/symbols/SimpleFillSymbol",
"esri/dijit/Legend"
],
function(
Map,
ArcGISDynamicMapServiceLayer,
Scalebar,
SimpleMarkerSymbol,
Draw,
Graphic,
GraphicsLayer,
Color,
FeatureLayer,
InfoTemplate,
UniqueValueRenderer,
SimpleFillSymbol,
Legend
) {
var map = new Map("mapDiv", {
center: [-95.625,39.243],// 经纬度中心点
zoom:2, // 缩放级数
basemap: "hybrid" // 混合底图类型
});
//添加比例尺
var scalebar = new Scalebar({
map: map,// 参考底图,必选项
attachTo: "bottom-left", // 指定比例尺在地图上的左下角
scalebarStyle:"line",// 比例尺类型,比例尺以线性显示
scalebarUnit: "english",// 比例尺单位
});
// 声明一个draw工具条
var toolBar = new Draw(map);
// 绑定激活绘图工具的函数
function activate_tool() {
// 根据class获取所有按钮
var btns = document.getElementsByClassName('btn-info');
console.log('btns',btns)
for(var i = 0; i < btns.length; ++ i) {
var type = btns[i].getAttribute('aria-label');
// 绘制点
if (type === "POINT") {
btns[i].onclick = function() {
toolBar.activate(Draw.POINT)
};
// 结束绘制
} else if (type === "disabledraw") {
btns[i].onclick = function() {
toolBar.deactivate();
}
}
}};
// 调用函数
activate_tool();
// 为声明的draw工具添加了一个draw-complete事件,绘图结束后将图形显示在地图上
toolBar.on("draw-complete", drawEndEvent)
function drawEndEvent(evt) {
var geometry=evt.geometry;
console.log("geometry",geometry)
var type=geometry.type;
console.log("type",type)
// 创建点符号
var pointSymbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_TRIANGLE,//点的形状
20,//点的大小
null,//轮廓线的样式
new Color([255,0,127,0.5])//点的颜色
);
// 添加图形到地图
var graphic=new Graphic(geometry,pointSymbol);
var graphicslayer=new GraphicsLayer();
graphicslayer.add(graphic);
map.addLayer(graphicslayer);
}
var featurelayer=new FeatureLayer('https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2',//必选参数
{
mode:FeatureLayer.MODE_SNAPSHOT,//指定构造要素图层时显示的模式
outFields:["*"],//指定返回的数据值,*表示返回所有值
infoTemplate:new InfoTemplate(" ", "${sub_region}"),
}
)
var defaultSymbol=new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
//声明独立值专题图
var renderer = new UniqueValueRenderer(
defaultSymbol, //默认符号
"sub_region"//渲染器用于匹配值的属性字段
);
//为独立值指定不同的符号
renderer.addValue("Pacific",new SimpleFillSymbol().setColor(new Color([255,0,0,0.5])))
renderer.addValue("Mtn",new SimpleFillSymbol().setColor(new Color([255,128,0,0.5])))
renderer.addValue("N Eng",new SimpleFillSymbol().setColor(new Color([255,255,0,0.5])))
renderer.addValue("S Atl",new SimpleFillSymbol().setColor(new Color([0,255,0,0.5])))
renderer.addValue("Mid Atl",new SimpleFillSymbol().setColor(new Color([0,255,255,0.5])))
renderer.addValue("E N Cen",new SimpleFillSymbol().setColor(new Color([0,0,255,0.5])))
renderer.addValue("W N Cen",new SimpleFillSymbol().setColor(new Color([128,0,128,0.5])))
renderer.addValue("E S Cen",new SimpleFillSymbol().setColor(new Color([75,0,130,0.5])))
renderer.addValue("W S Cen",new SimpleFillSymbol().setColor(new Color([138,43,226,0.5])))
//调用要素图层的setRenderer的方法,生成专题图
featurelayer.setRenderer(renderer)
//将要素图层添加到地图
map.addLayer(featurelayer)
//添加图例
var legend = new Legend({
map: map,
layerInfos:[{ //layerInfos是个对象,指定地图中要显示在图例中的图层的子集
layer:featurelayer, //添加到图例中的图层
title:"美国各区域分布图例" //指定图层标题
}]
}, "legendDiv");
legend.startup();
});
</script>
</head>
<body>
<button class='btn-info' aria-label="POINT">点</button>
<button class='btn-info' aria-label="disabledraw">结束绘制</button>
<div id="mapDiv"></div>
<div id="legendDiv"></div>
</body>
</html>
最新发布