创建局部场景
这个示例显示了怎样创建一个局部场景并添加到 SceneView 。这个示例加载了两个图层，一个图层描绘了堪萨斯州的石油和天然气井，另一个图层显示了附近的发生过地震的位置。这些图层渲染在地面以及地面以下。
你可以导航到底图以下，观察石油和天然气井的位置和深度以及附近的地震点的确切的位置。为了看到地面以下的要素，你必须翻转场景。翻转场景的操作方式是按住鼠标右键前后拖动。
SceneView 的 viewingMode 属性决定了场景显示为局部还是地球。clipingArea 属性决定了局部场景的范围。
constranints 属性决定了用户是否能看到地面以下。
程序完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Create a local scene - 4.5</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#homeDiv {
left: 15px;
top: 130px;
z-index: 35;
position: absolute;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/FeatureLayer",
"esri/widgets/Home",
"dojo/domReady!"
], function(Map, SceneView, FeatureLayer, Home) {
var wellsUrl =
"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/HarperSumnerOGWells/FeatureServer/0";
var quakesUrl =
"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/ks_earthquakes_since_2000/FeatureServer/0";
// 场景的范围
var kansasExtent = {
xmax: -10834217,
xmin: -10932882,
ymax: 4493918,
ymin: 4432667,
spatialReference: {
wkid: 3857
}
};
/********************************************************
* 用于显示石油和天然气信息的弹窗模板
*******************************************************/
var wellsTemplate = {
title: "WELL",
content: "<b>API No.:</b> {API_NUMBER}<br>" +
"<b>Lease: </b> {LEASE}<br>" +
"<b>Operator: </b> {CURR_OPERATOR} km<br>" +
"<b>Drilled: </b> {SPUD}<br>" +
"<b>Completed: </b> {COMPLETION}<br>" +
"<b>Status: </b> {STATUS2}<br>" +
"<b>Depth: </b> {DEPTH} meters<br>",
fieldInfos: [{
fieldName: "SPUD",
format: {
dateFormat: "short-date"
}
}, {
fieldName: "COMPLETION",
format: {
dateFormat: "short-date"
}
}, {
fieldName: "DEPTH",
format: {
places: 0,
digitSeparator: true
}
}]
};
/*********************************************************
* 渲染器 用于对地面上的石油和天然气井进行符号化
*********************************************************/
var wellsSurfaceRenderer = {
type: "simple",
symbol: {
type: "point-3d",
symbolLayers: [{
type: "icon",
material: {
color: "#785226"
},
resource: {
primitive: "x"
},
size: 4
}]
}
};
/**************************************************
* 渲染器 用于对地下的石油和天然气井进行符号化
**************************************************/
var startDate = new Date("Thu Jul 25 2013 00:00:00 GMT-0700 (PDT)");
var endDate = new Date("Mon Nov 09 2015 00:01:40 GMT-0800 (PST)");
var wellsDepthRenderer = {
type: "simple",
symbol: {
type: "point-3d",
symbolLayers: [{
type: "object",
resource: {
primitive: "cylinder" //图元：圆筒
},
anchor: "top",
width: 50
}]
},
visualVariables: [{
type: "size",
field: "DEPTH",
axis: "height",
valueUnit: "feet"
}, {
type: "size",
axis: "width",
useSymbolValue: true // sets the width to 50m
}, {
type: "color",
field: "SPUD",
stops: [{
value: startDate.valueOf(),
color: "white"
}, {
value: endDate.valueOf(),
color: "red"
}]
}]
};
/**************************************************
* 描绘油气井的图层
**************************************************/
// 描绘地面以下的油气井的图层
var wellsLyr = new FeatureLayer({
url: wellsUrl,
definitionExpression: "Status = 'CBM' OR Status = 'EOR' OR Status = 'GAS' OR Status = 'INJ' OR Status = 'O&G' OR Status = 'OIL' OR Status = 'SWD'",
outFields: ["*"],
popupTemplate: wellsTemplate,
renderer: wellsDepthRenderer,
// 防止圆筒冲出地面
elevationInfo: {
mode: "relative-to-ground",
offset: -100
}
});
// 描绘地面上的油气井的图层
var wellsSurfaceLyr = new FeatureLayer({
url: wellsUrl,
definitionExpression: "Status = 'CBM' OR Status = 'EDR' OR Status = 'GAS' OR Status = 'INJ' OR Status = 'O&G' OR Status = 'OIL' OR Status = 'SWD'",
outFields: ["*"],
popupTemplate: wellsTemplate,
renderer: wellsSurfaceRenderer,
elevationInfo: {
mode: "on-the-ground"
}
});
/********************************************************
* 渲染器 ：用于对地面以下的地震点进行符号化
*
* 地震点被符号化为球
*
* 球的大小表示地震级数
* 颜色表示地震发生的日期. T
*
* 颜色越白，地震发生时间越远；颜色越红，地震发生时间越近
*******************************************************/
var quakesRenderer = {
type: "simple",
symbol: {
type: "point-3d",
symbolLayers: [{
type: "object",
resource: {
primitive: "sphere" //图元：球
}
}]
},
visualVariables: [{
type: "color",
field: "date_evt",
stops: [{
value: startDate.valueOf(),
color: "white"
}, {
value: endDate.valueOf(),
color: "red"
}]
}, {
type: "size",
field: "mag",
axis: "all",
stops: [
{
value: 2,
size: 100
},
{
value: 5,
size: 2000
}]
}]
};
/********************************************************
* 渲染器 ： 用于对地面以上的地震点进行符号化
*******************************************************/
// 地震点将符号化为圆形
var surfaceSym = {
type: "point-3d",
symbolLayers: [{
type: "icon",
material: {
color: [179, 75, 75]
},
resource: {
primitive: "circle"
}
}]
};
// 符号大小取决于地震级数
var quakesSurfaceRenderer = {
type: "simple",
symbol: surfaceSym,
visualVariables: [{
type: "size",
field: "mag",
axis: "all",
stops: [
{
value: 2,
size: 3
},
{
value: 5,
size: 50
}]
}]
};
/********************************************************
* 弹窗模板，用于显示地震要素
*******************************************************/
var quakeTemplate = {
title: "{place}",
content: "<b>Date and time:</b> {date_evt}<br>" +
"<b>Magnitude (0-10): </b> {mag}<br>" +
"<b>Depth: </b> {depth} km<br>",
fieldInfos: [{
fieldName: "date_evt",
format: {
dateFormat: "short-date-short-time"
}
}],
actions: [{
id: "find-wells",
title: "Nearby wells",
className: "esri-icon-notice-round"
}]
};
/********************************************************
* 创建描绘地震的图层 (一个地上的，一个地下的).
*******************************************************/
// 定义一个图层来绘制地震在地面以下的确切位置。
var quakesDepthLyr = new FeatureLayer({
url: quakesUrl,
// 只显示 2 级及以上地震
definitionExpression: "mag >= 2",
outFields: ["*"],
renderer: quakesRenderer,
popupTemplate: quakeTemplate,
returnZ: true,
elevationInfo: {
mode: "relative-to-ground"
}
});
// 定义一个描绘地震地表位置的图层
var quakesSurfaceLyr = new FeatureLayer({
url: quakesUrl,
definitionExpression: "mag >= 2",
outFields: ["*"],
renderer: quakesSurfaceRenderer,
popupTemplate: quakeTemplate,
opacity: 0.6,
elevationInfo: {
mode: "on-the-ground"
}
});
var map = new Map({
basemap: "topo",
layers: [quakesDepthLyr, quakesSurfaceLyr, wellsLyr,
wellsSurfaceLyr
]
});
/********************************************************************
* 创建一个局部场景
*
* 创建局部场景必须设置 viewingMode 为 "local"
* 为了定义一个小的局部区域，需要设置 clippingArea 属性
*
* 禁用 constraints 的 collision 属性将允许用户查看地面以下
********************************************************************/
var view = new SceneView({
container: "viewDiv",
map: map,
viewingMode: "local",
clippingArea: kansasExtent,
extent: kansasExtent,
constraints: {
collision: {
enabled: false
},
tilt: {
max: 179.99
}
},
// 关闭大气和星星设置
environment: {
atmosphere: null,
starsEnabled: false
}
});
/********************************************************
* 设置行为：返回地震点 10 km 范围内的油气井数量
*******************************************************/
// 默认参数 ：用于选择单击位置 10 km 范围内的油气井
var wellsBufferParams = {
spatialRelationship: "esriSpatialRelIntersects",
distance: 10,
units: "kilometers",
where: "Status = 'CBM' OR Status = 'EDR' OR Status = 'GAS' OR Status = 'INJ' OR Status = 'O&G' OR Status = 'OIL' OR Status = 'SWD'"
};
view.popup.on("trigger-action", function(event) {
if (event.action.id === "find-wells") {
wellsBufferParams.geometry = view.popup.selectedFeature.geometry;
wellsLyr.queryFeatureCount(wellsBufferParams).then(function(
response) {
var results = "<b>" + response +
"</b> active wells are within 10 km of this earthquake.";
view.popup.content = results;
}).otherwise(
function(err) {
console.log("action failed: ", err);
});
} else {
return;
}
});
// 设置 Home 按钮，用于使场景恢复到初始视图
var homeBtn = new Home({
view: view
}, "homeDiv");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="homeDiv"></div>
</body>
</html>
程序运行效果：
沙箱地址：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=scene-local
（完）