Skip to content

Instantly share code, notes, and snippets.

@JeffJacobson

JeffJacobson/index.html

Created June 21, 2022 15:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JeffJacobson/368e8f16c8706432628cee0c47f1f0e3 to your computer and use it in GitHub Desktop.
Save JeffJacobson/368e8f16c8706432628cee0c47f1f0e3 to your computer and use it in GitHub Desktop.
Download ZIP
MapImageLayer Clipping Sample
Raw
index.html
<html>
<head>
<link rel="stylesheet" href="min.css">
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<!--
ArcGIS API for JavaScript, https://js.arcgis.com
For more information about the layers-mapimagelayer sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/sample-code/layers-mapimagelayer/index.html
-->
<title>
Clipping Demo
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.22/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.22/"></script>
<script src="script.js"></script>
</head>
<body>
<div id="viewDiv"></div>
<div id="messageDiv"></div>
</body>
</html>
Raw
script.js
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/geometry/geometryEngine",
"esri/geometry/Polyline",
"esri/geometry/Polygon",
"esri/Graphic",
"esri/geometry/SpatialReference",
"esri/layers/GraphicsLayer"
],function (Map,MapView,MapImageLayer,geometryEngine,Polyline,Polygon,Graphic,SpatialReference,GraphicsLayer) {
//#region aray definitions
let mapGraphics = []
let closureLines = []
let bufferSymbols=[]
let bufferSymbolsLayer = new GraphicsLayer()
let messageBox = document.getElementById("messageDiv")
//#endregion
//#region zoom level/buffer size mapping
const bufferMap = [
{
zoomLevel: 6,
bufferSize: 40000,
visible: true
},
{
zoomLevel: 7,
bufferSize: 10000,
visible: false
},
{
zoomLevel: 8,
bufferSize: 12500,
visible: false
},
{
zoomLevel: 9,
bufferSize: 5000,
visible: false
},
{
zoomLevel: 10,
bufferSize: 4000,
visible: false
},
{
zoomLevel: 11,
bufferSize: 3250,
visible: false
},
]
//#endregion
//#region static symbol definitions
const polygonSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [0, 0, 0, 0],
outline: {
color: [255, 0, 0, 0.5],
width: 2
}
};
const lineSymbol = {
type: "simple-line", // autocasts as SimpleLineSymbol()
color: [226, 119, 40],
width: 2,
cap: "butt"
};
//#endregion
async function fetchJsonData(jsonUrl){
messageBox.innerHTML="fetching lines"
let response = await fetch(jsonUrl);
let json = await response.json();
return json;
}
//#region async fetch of closure line data
fetchJsonData("https://data.wsdot.wa.gov/travelcenter/Dev/CurrentRoadClosureLine.json").then((response)=>{
//#region reference graphics
//#region create closure lines
for(let i=0;i<response.features.length;i++){
let line = new Polyline({
paths: response.features[i].geometry.paths,
spatialReference: SpatialReference.WebMercator
})
let polylineGraphic = new Graphic({
geometry:line,
symbol: lineSymbol
});
closureLines.push(polylineGraphic)
}
let closureLinesLayer = new GraphicsLayer({
graphics: [...closureLines],
visible: true
})
let closureLineGeometries = closureLines.map((closureLine)=>{return closureLine.geometry})
//#endregion
//#region create containing polygon
let containingPolygon = new Polygon({
spatialReference: SpatialReference.WebMercator,
rings:
[
[
-13931998.871850241, 6307186.773851644
],
[
-12987205.690744698, 6307186.773851644
],
[
-12987205.690744698, 5700000.603400948
],
[
-13931998.871850241,5700000.603400948
],
[
-13931998.871850241, 6307186.773851644
]
]
})
let containingPolygonGraphic = new Graphic({
geometry: containingPolygon,
symbol: polygonSymbol
})
//#endregion
//#endregion
messageBox.innerHTML="creating buffers/layers"
const flowLayers = bufferMap.map((bufferConfig)=>{
const clippingMask = getClippingMask(bufferConfig.bufferSize)
const flowLayer = getflowLayer(clippingMask, bufferConfig)
messageBox.innerHTML=""
return flowLayer
})
messageBox.innerHTML=""
//#region Create buffers
function getflowLayer(clip, bufferConfig){
const Layer = new MapImageLayer({
customParameters: {
"zoomLevel":bufferConfig.zoomLevel,
"clipping":JSON.stringify(clip)
},
url: "https://utility.arcgis.com/usrsvcs/appservices/WvQqGbFhaYoQDtdL/rest/services/World/Traffic/MapServer",
sublayers: [
{
id: 6,
}
],
visible: bufferConfig.visible,
});
return Layer
}
//#endregion
//#region updateClippingMask
function getClippingMask(bufferSize){
messageBox.innerHTML="creating buffer"
let ptBuff = geometryEngine.buffer(closureLineGeometries, bufferSize, "feet",true);
ptBuff=geometryEngine.union(ptBuff)
ptBuff = geometryEngine.simplify(ptBuff)
/* bufferSymbols =new Graphic({
geometry: ptBuff,
symbol: polygonSymbol
})
bufferSymbolsLayer.removeAll()
bufferSymbolsLayer.graphics=bufferSymbols*/
const containingRings =
[[
[
-13931998.871850241, 6307186.773851644
],
[
-12987205.690744698, 6307186.773851644
],
[
-12987205.690744698, 5700000.603400948
],
[
-13931998.871850241,5700000.603400948
],
[
-13931998.871850241, 6307186.773851644
]
] ]
const clippingRings = containingRings.concat(ptBuff.rings)
return {
'geometryType': 'esriGeometryPolygon',
'geometry': {
'spatialReference': {
'wkid':+102100
},
'rings':clippingRings
}
}
}
//#endregion
var map = new Map({
basemap: "dark-gray-vector",
layers: [closureLinesLayer, ...flowLayers/*,bufferSymbolsLayer*/]
});
var view = new MapView({
container: "viewDiv",
map: map,
graphics: mapGraphics,
zoom: 6,
extent: {
xmin: -13936782.640036063,
ymin: 5686612.135141861,
xmax: -12945547.257233946,
ymax: 6321956.714248214,
spatialReference: {
wkid: 102100
}
}
})
view.watch('zoom',function(newScale){
if([11,10,9,8,7,6].includes(newScale)){
console.log(newScale)
map.layers.items.forEach(layer => {
if(layer.title=="Traffic"){
if(layer.customParameters.zoomLevel==newScale){
layer.visible=true
}
else{
layer.visible=false
}
}
});
}
})
});
//#endregion async fetch of closure line data
})
Raw
style.css
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: calc(100% - 8px);
width: 100%;
}
#messageDiv{
width:150px;
height:20px;
border:1pt solid black
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment