Esri Javascript API普查信息弹出窗口和公园弹出窗口一张地图
这里需要一些指导，我有两个操作esri js映射，我想组合成两个不同的弹出窗口。如果我/我们能够找到一种方法，将公园的数量添加到普查弹出窗口中，这将起作用，而不必担心这两个弹出窗口。但我更希望在人口统计弹出窗口中有关于普查组以及公园的信息，以及一个普查区块组中公园的数量。因此，我将添加我为创建这两个工作地图所做的工作，然后发布我尝试将它们组合起来所做的工作，但这些工作不起作用。任何帮助都将不胜感激 第一个例子是华盛顿州皮尔斯县的公园，其中有一个带有公园详细信息的弹出窗口 第二个是具有同一地区人口统计信息的人口普查区块组代码 最后但并非最不重要的一点是，我试图将这两部分结合起来。这包括从这两个版本中添加所有不同的require语句和函数，并从每个版本中删除大部分重复的代码。我尝试过移动物体来映射贴图渲染，但没有成功。我想保留locatebutton和搜索栏，它们用于查找此文件中的地址，也用于添加功能Esri Javascript API普查信息弹出窗口和公园弹出窗口一张地图,javascript,api,dojo,esri,arcmap,Javascript,Api,Dojo,Esri,Arcmap,这里需要一些指导，我有两个操作esri js映射，我想组合成两个不同的弹出窗口。如果我/我们能够找到一种方法，将公园的数量添加到普查弹出窗口中，这将起作用，而不必担心这两个弹出窗口。但我更希望在人口统计弹出窗口中有关于普查组以及公园的信息，以及一个普查区块组中公园的数量。因此，我将添加我为创建这两个工作地图所做的工作，然后发布我尝试将它们组合起来所做的工作，但这些工作不起作用。任何帮助都将不胜感激 第一个例子是华盛顿州皮尔斯县的公园，其中有一个带有公园详细信息的弹出窗口 第二个是具有同一地区人
皮尔斯县人口普查信息和公园地图
html，body，#map{
填充：0；
保证金：0；
身高：100%；
宽度：100%；
}
esriScalebar先生{
填充：20px 20px；
}
.esriPopup.myTheme.titlePane，
.dj_ie7.esriPopup.myTheme.titlePane.title{
背景色：#899752；
颜色：#333333；
字体大小：粗体；
}
.esriPopup.myTheme.titlePane{
边框底部：1px实心#121310；
}
.esriPopup.myTheme a{
颜色：#d6e68a；
}
.esriPopup.myteme.pointer.top{
背景色：#899752；
}
.esriPopup.myteme.outerPointer、.esriPopup.myteme.pointer.bottom{
背景色：#4242；
}
.esriPopup.myTheme.contentPane，
.esriPopup.myTheme.actionsPane{
边框颜色：1px纯色#121310；
背景色：#4242；
颜色：#ffffff；
}
#ui esri dijit地理编码器{
顶部：20px；
左：70像素；
位置：绝对位置；
z指数：3；
}
.esriPopup.titlePane{
文本阴影：无；
}
.esriPopup.titleButton.next{
右：40px；
}
.esriPopup.titleButton.prev{
右：53px；
}
.人口统计信息内容{
填充顶部：10px；
}
.人口统计学{
显示：内联块；
宽度：8px；
}
.人口统计数字{
宽度：90px；
显示：内联块；
文本对齐：右对齐；
}
#定位按钮{
位置：绝对位置；
顶部：95px；
左：20px；
z指数：50；
}
var映射；
要求([
“esri/config”，
“esri/InfoTemplate”，
“esri/map”，
“esri/dijit/Popup”，
“esri/dijit/PopupTemplate”，
“esri/几何体/范围”，
“esri/layers/ArcGisDynamicMapsServiceLayer”，
“esri/图层/功能图层”，
“esri/layers/ArcGISTiledMapServiceLayer”，
“esri/symbols/SimpleFillSymbol”，
“esri/symbols/SimpleLineSymbol”，
“esri/tasks/GeometryService”，
“esri/任务/查询”，
“dojo/dom构造”，
“dojo/dom类”，
“dojo/parser”，
“esri/Color”，
“dojo/_base/lang”，
“dojo/date/locale”，
“esri/dijit/Geocoder”，
“esri/dijit/LocateButton”，
“dojo/domReady！”
],
作用(
esriConfig、信息模板、地图、弹出窗口、弹出模板、范围、ArcGisDynamicMapsServiceLayer、FeatureLayer、，
ArcGISTiledMapServiceLayer、SimpleFillSymbol、SimpleLineSymbol、，
GeometryService、查询、domConstruct、domClass、解析器、颜色、语言、语言环境、地理编码器、LocateButton
) {
parser.parse（）；
var sls=新单纯形符号（“实心”，新颜色（“#4444”），3）；
var sfs=新的SimpleFillSymbol（“实心”，sls，新颜色（[68,68,68,0.25]）；
var popup1=新的popup1({
填充符号：sfs，
lineSymbol:null，
markerSymbol:null
}，domConstruct.create（“div”）；
var popup=新弹出窗口({
fillSymbol：新的SimpleFillSymbol（SimpleFillSymbol.STYLE\u实体，
新SimpleLineSymbol（SimpleLineSymbol.STYLE_SOLID，
新颜色（[255,0,0]），2），新颜色（[255,255,0,0.25]））
}，domConstruct.create（“div”）；
add（popup.domNode，“myTheme”）；
地图=新地图（“地图”{
底图：“地形”，
中心：[-122.40247]，
缩放：10，
信息窗口：弹出窗口
});
var geocoder=新的地理编码器({
arcgisGeocoder：{
占位符：“搜索”
},
地图：地图
}“ui esri dijit地理编码器”）；
var_countyCensusInfoTemplate=新信息模板（）；
_countyCensusInfoTemplate.setTitle（“普查信息”）；
var_blockGroupInfoTemplate=新的InfoTemplate（）；
_blockGroupInfoTemplate.setTitle（“普查信息”）；
var_CensusInfo内容=
"" +
“${AGE_5_17:formatNumber}5-17岁的人
”+
“${AGE_18_21:formatNumber}18-21岁的人
”+
“${AGE\u 22\u 29:formatNumber}22-29岁的人
”+
“${AGE\u 30\u 39:formatNumber}30-39岁的人
”+
“${AGE_40_49:formatNumber}40-49岁的人
”+
“${AGE\u 50\u 64:formatNumber}50-64岁的人
”+
“${AGE_65_UP:formatNumber}65岁及以上的人”+
"";
_countyCensusInfoTemplate.setContent（“人口统计数据为：
${NAME}${STATE\u NAME:getCounty}，${STATE\u NAME}
”+\u censusInfoContent）；
_blockGroupInfoTemplate.setContent（“Tract:${Tract:formatNumber}区块组：${BLKGRP}
”+\u censusInfoContent的人口统计数据）；
var demographicsLayerURL=”http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
var人口统计学
<!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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="mobile-web-app-capable" content="yes">
<title>Pierce County Census Information and Parks Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esriScalebar {
padding: 20px 20px;
}
.esriPopup.myTheme .titlePane,
.dj_ie7 .esriPopup.myTheme .titlePane .title {
background-color: #899752;
color: #333333;
font-weight: bold;
}
.esriPopup.myTheme .titlePane {
border-bottom: 1px solid #121310;
}
.esriPopup.myTheme a {
color: #d6e68a;
}
.esriPopup.myTheme .pointer.top{
background-color:#899752;
}
.esriPopup.myTheme .outerPointer, .esriPopup.myTheme .pointer.bottom{
background-color:#424242;
}
.esriPopup.myTheme .contentPane,
.esriPopup.myTheme .actionsPane {
border-color: 1px solid #121310;
background-color: #424242;
color: #ffffff;
}
#ui-esri-dijit-geocoder {
top: 20px;
left: 70px;
position: absolute;
z-index: 3;
}
.esriPopup .titlePane {
text-shadow: none;
}
.esriPopup .titleButton.next {
right: 40px;
}
.esriPopup .titleButton.prev {
right: 53px;
}
.demographicInfoContent {
padding-top: 10px;
}
.demographicInnerSpacing {
display: inline-block;
width: 8px;
}
.demographicNumericPadding {
width: 90px;
display: inline-block;
text-align: right;
}
#LocateButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
</style>
<script src="https://js.arcgis.com/3.15/"></script>
<script>
var map;
require([
"esri/config",
"esri/InfoTemplate",
"esri/map",
"esri/dijit/Popup",
"esri/dijit/PopupTemplate",
"esri/geometry/Extent",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/GeometryService",
"esri/tasks/query",
"dojo/dom-construct",
"dojo/dom-class",
"dojo/parser",
"esri/Color",
"dojo/_base/lang",
"dojo/date/locale",
"esri/dijit/Geocoder",
"esri/dijit/LocateButton",
"dojo/domReady!"
],
function (
esriConfig, InfoTemplate, Map, Popup, PopupTemplate, Extent, ArcGISDynamicMapServiceLayer, FeatureLayer,
ArcGISTiledMapServiceLayer, SimpleFillSymbol, SimpleLineSymbol,
GeometryService, Query, domConstruct, domClass, parser, Color, lang, locale, Geocoder, LocateButton
) {
parser.parse();
var sls = new SimpleLineSymbol("solid", new Color("#444444"), 3);
var sfs = new SimpleFillSymbol("solid", sls, new Color([68, 68, 68, 0.25]));
var popup1 = new Popup1({
fillSymbol: sfs,
lineSymbol: null,
markerSymbol: null
}, domConstruct.create("div"));
var popup = new Popup({
fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))
}, domConstruct.create("div"));
domClass.add(popup.domNode, "myTheme");
map = new Map("map", {
basemap: "topo",
center: [-122.402, 47],
zoom: 10,
infoWindow: popup
});
var geocoder = new Geocoder({
arcgisGeocoder: {
placeholder: "Search "
},
map: map
}, "ui-esri-dijit-geocoder");
var _countyCensusInfoTemplate = new InfoTemplate();
_countyCensusInfoTemplate.setTitle("<b>Census Information</b>");
var _blockGroupInfoTemplate = new InfoTemplate();
_blockGroupInfoTemplate.setTitle("<b>Census Information</b>");
var _censusInfoContent =
"<div class=\"demographicInfoContent\">" +
"<div class='demographicNumericPadding'>${AGE_5_17:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 5 - 17<br>" +
"<div class='demographicNumericPadding'>${AGE_18_21:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 18 - 21<br>" +
"<div class='demographicNumericPadding'>${AGE_22_29:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 22 - 29<br>" +
"<div class='demographicNumericPadding'>${AGE_30_39:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 30 - 39<br>" +
"<div class='demographicNumericPadding'>${AGE_40_49:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 40 - 49<br>" +
"<div class='demographicNumericPadding'>${AGE_50_64:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 50 - 64<br>" +
"<div class='demographicNumericPadding'>${AGE_65_UP:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 65 and older" +
"</div>";
_countyCensusInfoTemplate.setContent("Demographics for:<br>${NAME} ${STATE_NAME:getCounty}, ${STATE_NAME}<br>" + _censusInfoContent);
_blockGroupInfoTemplate.setContent("Demographics for:<br>Tract: ${TRACT:formatNumber} Blockgroup: ${BLKGRP}<br>" + _censusInfoContent);
var demographicsLayerURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
var demographicsLayerOptions = {
"id": "demographicsLayer",
"opacity": 0.8,
"showAttribution": false
};
var demographicsLayer = new ArcGISDynamicMapServiceLayer(demographicsLayerURL, demographicsLayerOptions);
demographicsLayer.setInfoTemplates({
1: { infoTemplate: _blockGroupInfoTemplate },
2: { infoTemplate: _countyCensusInfoTemplate }
});
demographicsLayer.setVisibleLayers([1, 2]);
map.addLayer(demographicsLayer);
geocoder.startup();
var geoLocate = new LocateButton({
map: map,
highlightLocation: false
}, "LocateButton"
);
geoLocate.startup();
});
var formatNumber = function(value, key, data) {
var searchText = "" + value;
var formattedString = searchText.replace(/(\d)(?=(\d\d\d)+(?!\d))/gm, "$1,");
return formattedString;
};
var getCounty = function(value, key, data) {
if (value.toUpperCase() !== "LOUISIANA") {
return "County";
} else {
return "Parish";
}
};
map.on("click", function (event) {
var query = new Query();
query.geometry = pointToExtent(map, event.mapPoint, 10);
var deferred = featureLayer.selectFeatures(query,
FeatureLayer.SELECTION_NEW);
map.infoWindow.setFeatures([deferred]);
map.infoWindow.show(event.mapPoint);
});
var template = new InfoTemplate();
template.setContent(getTextContent);
var featureLayer = new FeatureLayer("https://services3.arcgis.com/J1Locv0GPOt6yBRR/ArcGIS/rest/services/Parks_polygons_Feb2012/FeatureServer/0",
{
outFields: ["*"],
infoTemplate: template
});
map.addLayer(featureLayer);
function getTextContent (graphic) {
var attributes = graphic.attributes;
var namepark =
attributes.ParkName
.replace('"', "")
.split("::")
.map(function (name) {
return lang.trim(name);
});
var parkdata = namepark[0];
var commonName = namepark[1];
var parks;
if (commonName) {
parks = "<b>" + commonName + "</b><br/>" +
"<i>" + parkdata + "</i>";
}
else {
parks = "<i>" + parkdata + "</i>";
}
return parks + "<br>" +
attributes.Owner + "<br>" +
attributes.ParkWebLin
}
function pointToExtent (map, point, toleranceInPixel) {
var pixelWidth = map.extent.getWidth() / map.width;
var toleranceInMapCoords = toleranceInPixel * pixelWidth;
return new Extent(point.x - toleranceInMapCoords,
point.y - toleranceInMapCoords,
point.x + toleranceInMapCoords,
point.y + toleranceInMapCoords,
map.spatialReference);
}
});
</script>
</head>
<body class="claro">
<div id="map">
<div id="LocateButton"></div>
</div>
<div id="ui-esri-dijit-geocoder"></div>
</body>
</html>