-1
Нужно руководствоваться здесь, у меня есть две рабочие карты esri js, которые я хочу объединить, чтобы иметь два разных всплывающих окна. Если бы мы/мы могли каким-то образом выяснить способ добавления количества парков в всплывающее окно переписи, которое будет работать, а не беспокоиться о двух всплывающих окнах. Но я предпочел бы иметь информацию о группах переписи, а также о парках плюс количество парков в одной группе переписей в демографическом всплывающем окне. Поэтому я добавлю работу, которую я сделал, чтобы создать две рабочие карты, а затем опубликовать проделанную работу, пытаясь объединить их, которые не работают. Любая помощь будет очень высоко ценится.Esri Javascript API переписная информация всплывающие окна и парки всплывающие окна одна карта
Этот первый пример - парки в округе Пирс, штат Вашингтон, с всплывающим окном с подробностями парка.
http://students.washington.edu/sbuffor/infowindow_w_parkname.html
Второй код для переписных групп с информацией Демографические для одной и той же области.
http://students.washington.edu/sbuffor/census_vs_parks.html
И последнее, но, конечно, не в последнюю очередь это моя попытка объединения двух частей. Это включает в себя добавление всех разных требовательных заявлений и функций от обоих и большинства кода от каждого с дублированными фрагментами. Я пробовал перемещать вещи вокруг, чтобы нанести на карту визуализацию карты без везения. Я хочу сохранить locatebutton и панель поиска, которые используются для поиска адресов в этом, а также для добавления функциональности.
http://students.washington.edu/sbuffor/combined_census_parks.html
<!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>
Пожалуйста, не стесняйтесь, дайте мне знать, если вам нужна дополнительная информация. Я по-прежнему новичок в этом и узнал тонну от помощи, которая предоставляется здесь, поэтому я очень рад сделать это с помощью этого примера.
Пересечено по адресу http://gis.stackexchange.com/questions/173015/arcgis-api-for-javascript-census-info-popup-and-parks-popup-one-map – PolyGeo