<?php
/*主界面*/
/*基本的配置文件*/
include("config.php");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title> 3D MAP</title>
<?php include(PATH . '/header.inc.php');?>
<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;
}
</style>
<script >
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/TileLayer", // Require the TileLayer module
"dojo/dom", // require dojo/dom for getting the DOM element
"dojo/on", // require dojo/on for listening to events on the DOM
"dojo/domReady!"
], function(Map, SceneView, TileLayer, dom, on) {
var transportationLyr = new TileLayer({
url: "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",
id: "streets",
opacity: 0.7
});
var housingLyr = new TileLayer({
url: "https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer",
id: "ny-housing"
});
var map = new Map({
basemap: "oceans", // streets,satellite, hybrid, topo, gray, dark-gray, oceans, osm, national-geographic
ground: "world-elevation",
layers: [housingLyr] // layers can be added as an array to the map's constructor
});
map.layers.add(transportationLyr); //Add the transportation layer to the map using map.layers.add().
var view = new SceneView({
container: "viewDiv", // Reference to the DOM node that will contain the view
map: map // References the map object created in step 3
});
// Create a variable referencing the checkbox node
var streetsLyrToggle = dom.byId("streetsLyr");
// Listen to the onchange event for the checkbox
on(streetsLyrToggle, "change", function(){
// When the checkbox is checked (true), set the layer's visibility to true
transportationLyr.visible = streetsLyrToggle.checked;
});
// This event fires each time a layer's LayerView is created for the
// specified view instance
view.on("layerview-create", function(event) {
if (event.layer.id === "ny-housing") {
// Explore the properties of the housing layer's layer view here
console.log("LayerView for New York housing density created!", event.layerView);
}
if (event.layer.id === "streets") {
// Explore the properties of the transportation layer's layer view here
console.log("LayerView for streets created!", event.layerView);
}
});
// When the layer's promise resolves, animate the view to the layer's fullExtent
housingLyr.when(function() {
view.goTo(housingLyr.fullExtent);
});
});
</script>
</head>
<body >
<div id="viewDiv"></div>
<span id="layerToggle">
<input type="checkbox" id="streetsLyr" checked> Transportation
</span>
</body>
</html>
ArcGIS API for JS v4.6 调用Esri在线地图和图层例子（2D和3D）
需积分: 50 76 浏览量
2018-03-11
19:36:42
上传
评论
收藏 5KB RAR 举报
apps.rar （6个子文件） 
apps 
LayersFor3D.php 3KB config.php 189B header.inc.php 1KB Layers.php 3KB map.php 974B 3Dmap.php 987B资源评论
