- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在开发一个项目,尝试使用 JavaScript API 将 ArcGIS Online 中的要素图层添加到 Web map 应用程序,用户可以通过 HTML 复选框打开和关闭图层。图层导入正确,并在绕过复选框时显示,但我可以让它与复选框一起使用。我已经从 ArcGIS 示例等中破解了代码,所以这一定是我遗漏的一些小东西!
这是代码 - 基本上我想要的只是在恒定 basemap 之上打开和关闭的图层,基于用户勾选打开和关闭的复选框
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Select with feature layer</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<style>
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%;
}
#messages{
background-color: #fff;
box-shadow: 0 0 5px #888;
font-size: 1.1em;
max-width: 15em;
padding: 0.5em;
position: absolute;
right: 20px;
top: 20px;
z-index: 40;
}
</style>
<script src="http://js.arcgis.com/3.10/"></script>
<script>
var map;
require([
"esri/map", "esri/layers/FeatureLayer",
"esri/tasks/query", "esri/geometry/Circle",
"esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
"esri/config", "esri/Color", "dojo/dom", "dojo/domReady!", "dojo/on", "dojo/query", "dojo/domReady!", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ImageParameters",
], function (
Map, FeatureLayer,
Query, Circle,
Graphic, InfoTemplate, SimpleMarkerSymbol,
SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
esriConfig, Color, dom, on, query, ArcGISDynamicMapServiceLayer, ImageParameters
) {
// use a proxy page if a URL generated by this page is greater than 2000 characters
//
// this should not be needed as nearly all query & select functions are performed on the client
esriConfig.defaults.io.proxyUrl = "/proxy";
map = new Map("mapDiv", {
basemap: "streets",
center: [-120.303130, 36.542750],
zoom: 5,
slider: false
});
//add the census block points in on demand mode. Note that an info template has been defined so when
//selected features are clicked a popup window will appear displaying the content defined in the info template.
var Offices = new FeatureLayer("URL", {
infoTemplate: new InfoTemplate("Block: ${BLOCK}", "${*}"),
outFields: ["*"]
});
var Northridge = new FeatureLayer("URL", {
infoTemplate: new InfoTemplate("Block: ${BLOCK}", "${*}"),
outFields: ["*"]
});
var Associates = new FeatureLayer("URL", {
infoTemplate: new InfoTemplate("Block: ${BLOCK}", "${*}"),
outFields: ["*"]
});
// selection symbol used to draw the selected census block points within the buffer polygon
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
12,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_NULL,
new Color([247, 34, 101, 0.9]),
1
),
new Color([207, 34, 171, 0.5])
);
Offices.setSelectionSymbol(symbol);
//make unselected features invisible
var nullSymbol = new SimpleMarkerSymbol().setSize(10);
var RedCircle = new SimpleMarkerSymbol().setSize(8);
Offices.setRenderer(new SimpleRenderer(nullSymbol));
on(dom.byId("layer0CheckBox"), "change", updateLayerVisibility);
on(dom.byId("layer1CheckBox"), "change", updateLayerVisibility);
on(dom.byId("layer2CheckBox"), "change", updateLayerVisibility);
function updateLayerVisibility() {
var inputs = query(".list_item");
var inputCount = inputs.length;
//in this application layer 2 is always on.
visibleLayerIds = [2];
for (var i = 0; i < inputCount; i++) {
if (inputs[i].checked) {
visibleLayerIds.push(inputs[i].value);
}
}
if (visibleLayerIds.length === 0) {
visibleLayerIds.push(-1);
}
map.addLayers(visibleLayerIds);
}
});
</script>
</head>
<body>
<br />
<br />
Layer List : <span id="layer_list"><input type='checkbox' class='list_item' id='layer0CheckBox' value="Northridge" />Earthquake
<input type='checkbox' class='list_item' id='layer1CheckBox' value="Offices" />Offices
<input type='checkbox' class='list_item' id='layer2CheckBox' value="Associates" />Associates
</span><br />
<br />
<div id="mapDiv"></div>
</body>
</html>
最佳答案
很久以前就完成了
changeVLayerVisibility: function(names) {
Ext.Array.each(map.graphicsLayerIds, function(id) {
map.getLayer(id).setVisibility(names.indexOf(id) !== -1);
});
},
在此处查看示例:http://smart-tech-group.com/arcgismap/ map 相关逻辑存储在http://smart-tech-group.com/arcgismap/APP/view/ArcMapViewer.js中那时我是一个 js 新手,所以请随意争论我的代码风格;)
关于javascript - ArcGIS Javascript API - addLayers,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25999638/
我正在创建一个 map 框插件,该插件应在添加或删除图层时更新。有用于样式和源添加的事件,但没有用于图层的事件。 我当前的解决方案是在添加或删除插件内监听的层后以编程方式触发自定义事件,但这当然发生在
我正在开发一个项目,尝试使用 JavaScript API 将 ArcGIS Online 中的要素图层添加到 Web map 应用程序,用户可以通过 HTML 复选框打开和关闭图层。图层导入正确,并
Here API clustering error: "addLayer is not defined" 错误我正在调用函数 startClustering,但收到错误 map.addLayer 未定
我认为这意味着我缺少有关 javascript 中嵌套函数工作的一些基本知识,但我无法在传单 map 中添加或删除图层 using a click function .具体来说,我有一个传单 map
我在传单方面遇到问题。我尝试只添加一层,但传单添加了不止一层。 这是代码: var region_layer = L.geoJSON(layer); // Count layers console.l
我一直在研究一个 map 组件,该组件呈现从搜索中流入的结果点。我已经完成了大部分工作,直到我开始为 return 语句传递 Prop 。我正在使用我自己的组件,而不是 react-leaflet 的
我正在尝试向 leaflet.indoor 添加标记。我正在从 geoJson 文件获取数据。我不断收到此错误“Uncaught TypeError:无法读取未定义的属性'addLayer'” lea
我想编辑我在 mapbox 上使用 map.addLayer() 添加的多边形。 代码: map.addLayer({ 'id': 'maine'+id, 'type': 'fill'
我正在尝试使用 Leaflet 创建 map 并在 map 上显示标记。有人对我在 map 上显示标记时收到的以下错误有任何想法吗? 我可以启动页面的 map 加载: var map; var aja
我尝试显示传单 map ,其中包含多边形表面。有时,当刷新页面时,它会显示错误无法读取未定义的属性“addLayer” map 正在正确呈现。我不知道我哪里做错了,请指导我 componentDidU
我一直在使用 Mapbox GL JS 并在 basemap 上添加数据层。出于某种原因,即使数据叠加按预期显示,我仍然在请求的磁贴上收到 404 错误。我已经检查并仔细检查以确保我使用 this 获
我是一名优秀的程序员,十分优秀!