Hi
this is my code with some web based map services that are temporary:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>3d</title>
<link rel="stylesheet" href="http://js.arcgis.com/4.6/esri/css/main.css">
<script src="http://js.arcgis.com/4.6/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#layerToggle {
top: 20px;
right: 20px;
position: absolute;
z-index: 99;
background-color: white;
border-radius: 8px;
padding: 10px;
opacity: 0.75;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 74px;
}
</style>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/TileLayer",
"esri/layers/ElevationLayer",
"esri/layers/BaseElevationLayer",
"esri/widgets/Search",
"esri/layers/FeatureLayer",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
],
function(
Map, SceneView, TileLayer, ElevationLayer, BaseElevationLayer, Search, FeatureLayer, dom, on
) {
var ExaggeratedElevationLayer = BaseElevationLayer.createSubclass({
properties: {
exaggeration: 2.5
},
// The load() method is called when the layer is added to the map
// prior to it being rendered in the view.
load: function() {
this._elevation = new ElevationLayer({
url: "http://localhost:6080/arcgis/rest/services/dem_denver/ImageServer"
});
// wait for the elevation layer to load before resolving load()
this.addResolvingPromise(this._elevation.load());
},
// Fetches the tile(s) visible in the view
fetchTile: function(level, row, col) {
// calls fetchTile() on the elevationlayer for the tiles
// visible in the view
return this._elevation.fetchTile(level, row, col)
.then(function(data) {
var exaggeration = this.exaggeration;
// `data` is an object that contains the
// the width of the tile in pixels,
// the height of the tile in pixels,
// and the values of each pixel
data.values.forEach(function(value, index, values) {
// each value represents an elevation sample for the
// given pixel position in the tile. Multiply this
// by the exaggeration value
values[index] = value * exaggeration;
});
return data;
}.bind(this));
}
});
/*****************************************************************
* Create two TileLayer instances. One pointing to a
* cached map service depicting U.S. male population and the other
* pointing to a layer of roads and highways.
*****************************************************************/
var transportationLyr = new TileLayer({
url: "http://localhost:6080/arcgis/rest/services/hill_denver2/MapServer",
// This property can be used to uniquely identify the layer
id: "streets",
visible: false
});
var housingLyr = new TileLayer({
url: "http://localhost:6080/arcgis/rest/services/hill_denver/MapServer",
id: "ny-housing",
opacity: 0.3
});
/*****************************************************************
* Layers may be added to the map in the map's constructor
*****************************************************************/
var map = new Map({
ground: {
layers: [
new ExaggeratedElevationLayer()
]
}
});
/*****************************************************************
* Or they may be added to the map using map.add()
*****************************************************************/
map.add(transportationLyr);
var view = new SceneView({
container: "viewDiv",
map: map
});
map.add(housingLyr);
/*****************************************************************
* The map handles the layers' data while the view and layer views
* take care of renderering the layers
*****************************************************************/
view.on("layerview-create", function(event) {
if (event.layer.id === "ny-housing") {
// Explore the properties of the population layer's layer view here
console.log("LayerView for male population created!", event.layerView);
}
if (event.layer.id === "streets") {
// Explore the properties of the transportation layer's layer view here
// Explore the properties of the transportation layer's layer view here
console.log("LayerView for streets created!", event.layerView);
}
});
/*****************************************************************
* Layers are promises that resolve when loaded, or when all their
* properties may be accessed. Once the population layer has loaded,
* the view will animate to it's initial extent.
*****************************************************************/
view.when(function() {
housingLyr.when(function() {
view.goTo(housingLyr.fullExtent);
});
});
var streetsLyrToggle = dom.byId("streetsLyr");
/*****************************************************************
* The visible property on the layer can be used to toggle the
* layer's visibility in the view. When the visibility is turned off
* the layer is still part of the map, which means you can access
* its properties and perform analysis even though it isn't visible.
*******************************************************************/
on(streetsLyrToggle, "change", function() {
transportationLyr.visible = streetsLyrToggle.checked;
});
var search = new Search({
sources: [{
featureLayer: new FeatureLayer("http://localhost:6080/arcgis/rest/services/city_denver/FeatureServer/0", {
outFields: ["*"],
}),
outFields: ["name","town"],
displayField: "name",
searchFields: ["name"],
name: "name",
placeholder: "example: denver",
exactMatch: false,
zoomScale:10000,
maxResults:6,
maxSuggestions:6,
autoNavigate: true,
enableSuggestions: true
}],
view: view
}, "search");
search.startup();
view.ui.add(searchWidget, {
position: "top-right"
});
});
</script>
</head>
<body>
<div id="search" style="direction:rtl"></div>
<div id="viewDiv"></div>
<span id="layerToggle">
<input type="checkbox" id="streetsLyr"> new base map
</span>
</body>
</html>
