如何使用ArGIS api for javascript在地图右下角显示图例
我想在地图的右下角显示图例图标。单击图例按钮，我必须显示一些带有名称的符号，而不添加任何图层。你能给我推荐一些在地图上显示图例的示例程序或链接吗如何使用ArGIS api for javascript在地图右下角显示图例,javascript,arcgis-js-api,Javascript,Arcgis Js Api,我想在地图的右下角显示图例图标。单击图例按钮，我必须显示一些带有名称的符号，而不添加任何图层。你能给我推荐一些在地图上显示图例的示例程序或链接吗 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-sca
<!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>Predominant Crop Opacity</title>
<link rel="stylesheet" href="//js.arcgis.com/3.12/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="//js.arcgis.com/3.12/esri/css/esri.css" />
<style>
html, body, #map {
height: 100%;
margin: 0;
background-color: #000000;
}
.esriAttribution {
background: none;
color: #ffffff;
}
#info {
width: 14.0625em;
background-color: #000;
color: #fff;
position: absolute;
left: 0;
bottom: 0;
padding-left: 10px;
padding-top: 10px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
border-top-right-radius: 20px;
}
</style>
<script src="//js.arcgis.com/3.12/"></script>
<script>
var map;
require([
"dojo/_base/array",
"dojo/number",
"esri/Color", "esri/dijit/Legend",
"esri/geometry/Extent", "esri/InfoTemplate", "esri/layers/FeatureLayer",
"esri/map", "esri/renderers/UniqueValueRenderer",
"esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/domReady!"
], function (array, number, Color, Legend, Extent, InfoTemplate, FeatureLayer, Map, UniqueValueRenderer,
SimpleFillSymbol, SimpleLineSymbol){
map = new Map("map", {
minScale: 18489297,
maxScale: 1245436,
extent: new Extent({
"xmax": -7218373,
"xmin": -15045524,
"ymax": 7571201,
"ymin": 2160682,
"spatialReference": { "wkid": 102100}
})
});
// --------------------------------------------------------------------
// Custom function to format the numbers for crop values
// e.g., 126744 becomes 126,744
// --------------------------------------------------------------------
formatNumber = function (value, key, data){
return number.format(value, {places: 0, locale: "en-us"});
};
var featureLayerOptions = {
mode: FeatureLayer.MODE_AUTO,
outFields: ["M163_07", "M172_07", "M188_07", "M193_07", "M217_07", "COUNTY", "STATE", "AREA", "M086_07"],
infoTemplate: new InfoTemplate("${COUNTY}, ${STATE}",
"<b>Corn for grain:</b> ${M163_07:formatNumber}<br><b>All wheat for grain:</b> ${M172_07:formatNumber}<br><b>Upland cotton:</b> ${M188_07:formatNumber}<br><b>Soybeans for beans:</b> ${M193_07:formatNumber}<br><b>Vegetables:</b> ${M217_07:formatNumber}")
};
var featureLayer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/USA_County_Crops_2007/FeatureServer/0",
featureLayerOptions);
// --------------------------------------------------------------------
// Custom function to compute the crop that has the largest value
// in a particular count. Using a custom function with a renderer
// is a really powerful method of having control over symbology
// client-side, especially if you don't have control over the service.
// --------------------------------------------------------------------
var uniqueValueRenderer = new UniqueValueRenderer(createSymbol("#d9d9d9"), function (graphic){
var maxField = "Other";
var max = 0;
array.forEach(featureLayerOptions.outFields, function (field){
if (graphic.attributes[field] > max) {
maxField = field;
max = graphic.attributes[field];
}
});
return maxField;
});
// --------------------------------------------------------------------
// Helper function for creating symbols for the UniqueValueRenderer
// --------------------------------------------------------------------
function createSymbol(color){
return new SimpleFillSymbol()
.setColor(new Color(color))
.setOutline(
new SimpleLineSymbol().setColor(new Color("#999999")).setWidth(1)
);
}
uniqueValueRenderer.addValue({ value: "M217_07", symbol: createSymbol("#fd7f6f"), label: "Vegetables" });
uniqueValueRenderer.addValue({ value: "M188_07", symbol: createSymbol("#b2e061"), label: "Cotton" });
uniqueValueRenderer.addValue({ value: "M172_07", symbol: createSymbol("#bd7ebe"), label: "Wheat" });
uniqueValueRenderer.addValue({ value: "M193_07", symbol: createSymbol("#7eb0d5"), label: "Soybeans" });
uniqueValueRenderer.addValue({ value: "M163_07", symbol: createSymbol("#ffb55a"), label: "Corn" });
// --------------------------------------------------------------------
// Use the average data values to control opacity
// Field: M086_07
// Description: The acres of total cropland as a percentage of land area in acres.
//
// Standard Deviation: 28.9616022263796
// Average: 39.457298802092
// Standard Deviation -1: 10.495696576
// Standard Deviation +1: 68.418901028
//
// For more information about statistics: see the outStatistics
// parameter in the ArcGIS REST API Help.
// --------------------------------------------------------------------
uniqueValueRenderer.setOpacityInfo({
field: "M086_07",
stops: [
{ value: 10, opacity: 0 }, // -1 stddev, transparent
{ value: 39, opacity: 0.5 }, // average value, 50% transparent
{ value: 68, opacity: 1 } // +1 stddev, completely opaque
]
});
featureLayer.setRenderer(uniqueValueRenderer);
map.addLayer(featureLayer);
var legend = new Legend({
map: map,
layerInfos: [
{
layer: featureLayer,
title: "Acres harvested by type"
}
]
}, "legend");
legend.startup();
});
</script>
</head>
<body>
<div id="map"></div>
<div id="info">
<div id="legend"></div>
</div>
</body>
</html>
主要作物不透明度
html，body，#map{
身高：100%；
保证金：0；
背景色：#000000；
}
E.分配{
背景：无；
颜色：#ffffff；
}
#信息{
宽度：14.0625em；
背景色：#000；
颜色：#fff；
位置：绝对位置；
左：0；
底部：0；
左侧填充：10px；
填充顶部：10px；
字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线；
边框顶部：2个实心#ffffff；
右边框：2px实心#ffffff；
边框右上角半径：20px；
}
var映射；
要求([
“dojo/_基/阵列”，
“dojo/number”，
“esri/Color”、“esri/dijit/Legend”，
“esri/geometry/Extent”、“esri/InfoTemplate”、“esri/layers/FeatureLayer”，
“esri/map”、“esri/Renders/UniqueValueRenderer”，
“esri/symbols/SimpleFillSymbol”、“esri/symbols/SimpleLineSymbol”、“dojo/domReady！”
]，函数（数组、数字、颜色、图例、范围、信息模板、FeatureLayer、地图、UniqueValueRenderer、，
SimpleFillSymbol，SimpleLineSymbol）{
地图=新地图（“地图”{
明斯克：18489297，
最大刻度：1245436，
范围：新范围({
“xmax”：-7218373，
“xmin”：-15045524，
“ymax”：7571201，
“ymin”：2160682，
“空间参考”：{“wkid”：102100}
})
});
// --------------------------------------------------------------------
//自定义函数，用于设置裁剪值的数字格式
//例如，126744变为126744
// --------------------------------------------------------------------
formatNumber=函数（值、键、数据）{
返回number.format（值，{places:0，locale:“en-us”}）；
};
var FeatureLayerOperations={
模式：FeatureLayer.mode\u AUTO，
外场：[“M163_07”、“M172_07”、“M188_07”、“M193_07”、“M217_07”、“县”、“州”、“地区”、“M086_07”]，
infoTemplate:新的infoTemplate（${COUNTY}，${STATE}），
“谷物用玉米：${M163_07:formatNumber}
谷物用全麦：${M172_07:formatNumber}
陆地棉：${M188_07:formatNumber}
大豆：${M193_07:formatNumber}
蔬菜：${M217_07:formatNumber}”）
};
var featureLayer=new featureLayer（“//services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/USA\u country\u Crops\u 2007/FeatureServer/0”，
特征（分层）；
// --------------------------------------------------------------------
//用于计算具有最大值的裁剪的自定义函数
//在特定计数中。使用带有呈现器的自定义函数
//是控制符号学的一种非常有效的方法
//客户端，尤其是当您无法控制服务时。
// --------------------------------------------------------------------
var uniqueValueRenderer=新的uniqueValueRenderer（createSymbol（“#d9d9d9”），函数（图形）{
var maxField=“其他”；
var max=0；
array.forEach（功能层配置、外场、功能（场）{
if（图形属性[字段]>最大值）{
maxField=field；
max=图形属性[字段]；
}
});
返回maxField；
});
// --------------------------------------------------------------------
//用于为UniqueValueRenderer创建符号的辅助函数
// --------------------------------------------------------------------
函数createSymbol（颜色）{
返回新的SimpleFillSymbol（）
.setColor（新颜色（颜色））
.setOutline(
新SimpleLineSymbol（）.setColor（新颜色（“#999999”））.setWidth（1）
);
}
addValue（{value:“M217_07”，符号：createSymbol（#fd7f6f），标签：“蔬菜”}）；
addValue（{value:“M188_07”，符号：createSymbol（#b2e061），标签：“Cotton”}）；
addValue（{value:“M172_07”，符号：createSymbol（“#bd7ebe”），标签：“小麦”}）；
addValue（{value:“M193_07”，符号：createSymbol（#7eb0d5），标签：“Soybeans”}）；
addValue（{value:“M163_07”，符号：createSymbol（#ffb55a），标签：“Corn”}）；
// --------------------------------------------------------------------
//使用平均数据值控制不透明度
//字段：M086_07
//说明：总耕地的英亩数占土地面积的百分比（单位：英亩）。
//
//标准偏差：28.9616022263796
//平均数：39.457298802092
//标准偏差-1:10.495696576
//标准偏差+1:68.418901028
//
//有关统计信息的更多信息：请参见outStatistics
//ArcGIS REST API帮助中的参数。
// --------------------------------------------------------------------
uniqueValueRenderer.setOpacityInfo({
字段：“M086_07”，
停止：[
{值：10，不透明度：0}，//-1 stddev，透明
{值：39，不透明度：0.5}，//平均值，50%透明
{值：68，不透明度：1}/+1 stddev，完全不透明
]
});
setRenderer（uniqueValueRenderer）；
map.addLayer（featureLayer）；
变量图例=新图例({
地图：地图，
#legend {visibility:hidden;}
require(["dojo/dom", "dojo/dom-style", "dojo/on"], function(dom, domStyle, on){
dom.byId("legend_button").on("click", function(data) {
domStyle.set(dom.byId("legend"), "visibility", "visible");
});
});