<\/HEAD>
gray<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript チュートリアル: マップにレイヤーを追加する<\/title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
<\/style>
<link rel="stylesheet" href="https:\/\/js.arcgis.com\/4.15\/esri\/themes\/light\/main.css">
<script src="https:\/\/js.arcgis.com\/4.15\/"><\/script><\/P>
<\/P>
<script>
require([
"esri\/Map",
"esri\/views\/MapView",
"esri\/widgets\/BasemapToggle",
"esri\/layers\/FeatureLayer",
"esri\/layers\/MapImageLayer",
"esri\/renderers\/ClassBreaksRenderer",
& nbsp ; & nbsp ; "esri\/symbols\/SimpleMarkerSymbol",
& nbsp ; nbsp ; nbsp ; nbsp ; nbsp ; nbsp ; nbsp ; nbsp ; "esri\/layers\/GraphicsLayer",
"esri\/tasks\/support\/Query",
"esri\/tasks\/QueryTask",
"esri\/geometry\/geometryEngine"
], function(Map,MapView,BasemapToggle,FeatureLayer,MapImageLayer,ClassBreaksRenderer,SimpleMarkerSymbol,GraphicsLayer,Query,QueryTask,geometryEngine) {
var map = new Map({
basemap: "gray"
});
<\/P>
var view = new MapView({
container: "viewDiv",
map: map,
center: [-100.000000,31.000000],
zoom: 13
});
var basemapToggle = new BasemapToggle({
view: view,
nextBasemap: "topo-vector"
});
view.ui.add(basemapToggle, "bottom-right");
<\/P>
var featureLayer = new FeatureLayer({
url: "https:\/\/services6.arcgis.com\/cmKWjJDTp7lPppjM\/arcgis\/rest\/services\/Zip\/FeatureServer\/0"
});
<\/P>
map.add(featureLayer);
featureLayer.when(function(){
view.extent=featureLayer.fullExtent;
});
var medianAgeLayer = new MapImageLayer({
url: "https:\/\/demographics9.arcgis.com\/arcgis\/rest\/services\/USA_Demographics_and_Boundaries_2019\/MapServer"
});
<\/P>
var cbrenderer = new ClassBreaksRenderer({
field: "Age"
});
<\/P>
cbrenderer.addClassBreakInfo({
minValue: 19,
maxValue: 40,
symbol: new SimpleMarkerSymbol({
style: "diamond",
color: "#9ACD32",
size: 10
})
});
<\/P>
cbrenderer.addClassBreakInfo({
minValue: 41,
maxValue: 52,
symbol: new SimpleMarkerSymbol({
style: "diamond",
color: [0,0,255,0.2],
size: 15
})
});
featureLayer.renderer = cbrenderer;
var graphicsLayer = new GraphicsLayer({
graphics: []
});
map.add(graphicsLayer);
var gCriteria01Geometry;
var gCriteria02Geometry;
function countPerZIPCode(inputLayer){
var q = featureLayer.createQuery();
q.outFields = ["ZIP"];
return inputLayer.queryFeatures(q).then(function(response){
var dict = {};
var zip;
response.features.forEach(function (item) {
zip = item.attributes.ZIP;
if (dict[zip] == undefined) {
dict[zip]= 1;
} else
{
dict[zip] = dict[zip] + 1;
}
});
return Object.keys(dict).reduce(function(key1,key2){
return dict[key1] > dict[key2] ? key1 : key2;
});
});
}
function bufferByDistance(sickestZIP){
var q = new Query();
q.where = "ID = '" + sickestZIP + "'";
q.returnGeometry = true;
var medianAgeQueryTask = new QueryTask({
url: "https:\/\/demographics9.arcgis.com\/arcgis\/rest\/services\/USA_Demographics_and_Boundaries_2019\/MapServer"
});
return medianAgeQueryTask.execute(q).then(function(response){
return response.features[0].geometry;
}).then(function(sickestZIPGeometry){
gCriteria01Geometry = geometryEngine.buffer(
sickestZIPGeometry,
& nbsp; 2,
& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;"miles"
& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp 
;
& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;displayMyPolygon(gCriteria01Geometry, "red");
& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;displayMyPolygon(sickestZIPGeometry, "green");
& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;
& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;});
& nb sp;; nb sp;; nb sp;
& nb sp;; nb sp;;
& nb sp;; nb sp;
& nb sp;; nb sp;; view.when(featureLayer.when()
& nb sp;; nb sp;; nb sp;; nb sp;; nb sp;; nb sp;.then(countPerZIPCode)
& nb sp;; nb sp;; nb sp;; nb sp;; nb sp;; nb sp;.then(bufferByDistance)
& nb sp;;;;;;;
& nb sp;;;;
& nb sp;;;; );
& nb sp;
& nb sp;;
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html><\/P><\/BODY><\/HTML>
