这个在官网示例中，当页面比例缩小时选择框会自动下移，这样不利于页面的整齐美观，我用flex属性把这些选择框做成收缩盒，无论页面比例怎么改变，他们的位置是不变的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>SceneView - goTo() - 4.6</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
<script src="https://js.arcgis.com/4.6/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
display: flex
}
#optionsDiv {
position: absolute;
bottom: 17px;
width: 100%;
padding: 20px 0;
z-index: 1;
text-align: center;
display: flex;
flex: 1;
}
button {
background: white;
padding: 7px;
border: 1px solid #005e95;
font-size: 0.9em;
margin: 5px;
color: #005e95;
font-family: "Avenir Next W01", "Arial", sans-serif;
flex: 1;
}
button:hover {
background: #005e95;
color: white;
cursor: pointer;
}
</style>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"dojo/query",
"dojo/on",
"dojo/domReady!"
],
function(
Map, SceneView, query, on
) {
var map = new Map({
basemap: "dark-gray"
});
var view = new SceneView({
container: "viewDiv",
map: map,
zoom: 3
});
function shiftCamera(deg) {
var camera = view.camera.clone();
camera.position.longitude += deg;
return camera;
}
on(dojo.query("#default"), "click", function() {
// Don't set any animation options for a default camera flight
view.goTo(shiftCamera(60));
});
on(dojo.query("#linearSlow"), "click", function() {
view.goTo(shiftCamera(60),
// Animation options for a slow linear camera flight
{
speedFactor: 0.1,
easing: "linear"
});
});
on(dojo.query("#linearFast"), "click", function() {
view.goTo(shiftCamera(60),
{
speedFactor: 6,
easing: "linear"
});
});
on(dojo.query("#expoIncrease"), "click", function() {
view.goTo(shiftCamera(60),
{
duration: 4000,
easing: "in-expo"
});
});
on(dojo.query("#fixedDuration"), "click", function() {
view.goTo(shiftCamera(30), {
duration: 10000,
maxDuration: 10000
});
});
// Define your own function for the easing option
function customEasing(t) {
return 1 - Math.abs(Math.sin(-1.7 + t * 4.5 * Math.PI)) * Math.pow(
0.5, t * 10);
}
on(dojo.query("#bounceBerlin"), "click", function() {
view.goTo({
position: {
x: 13.40,
y: 52.52,
z: 700000,
spatialReference: {
wkid: 4326
}
},
heading: 0,
tilt: 0
}, {
speedFactor: 0.3,
easing: customEasing
});
});
});
</script>
</head>
<body>
<div id="optionsDiv">
<button id="default">Default flight</button>
<button id="linearSlow">Linear slow flight</button>
<button id="linearFast">Linear fast flight</button>
<button id="expoIncrease">Exponentially increasing speed flight</button>
<button id="fixedDuration">10 seconds flight</button>
<button id="bounceBerlin">Bounce to Berlin</button>
</div>
<div id="viewDiv"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale = 1.0, initial-scale=1.0, user-scalable = no">
<title>Intro to Graphics - 4.6</title>
<link rel="stylesheet" href="/arcgis_js_api/4.6/esri/css/main.css">
<script src="/arcgis_js_api/4.6/dojo/dojo.js"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"dojo/domReady!"
],function(Map, MapView, Graphic){
var map = new Map({
basemap: "hybrid"
});
var view = new MapView({
map: map,
container: "viewDiv",
zoom: 3//视图的缩放
});
var polyline = {
type: "polyline",
paths: [
[-111.30, 52.68],
[-98, 49.5],
[-93.94, 29.89]
]
}
var polylineSymbol = {
type: "simple-line",
color: "skyblue",
width: "5px"
}
var polylineAtt = {
Name: "Keystone Pipeline",
Owner: "TransCanada",
Length: "3,578km"
}
var polylineTemplate = {
title: "{Name}" ,
content: [{
type: "fields",
fieldInfos: [{
fieldName: "Name"
}, {
fieldName: "Owner"
}, {
fieldName: "Length",
}]
}]
}
var polylineGraphic = new Graphic({
geometry: polyline,
symbol: polylineSymbol,
attributes: polylineAtt,
popupTemplate: polylineTemplate
});
var polygon = {
type: "polygon",
rings: [
[-64.78, 32.3],
[-66.07, 18.45],
[-80.21, 25.78],
[-64.78, 32.3]
]
}
var polygonSymbol = {
type: "simple-fill",
color:"orange",
style: "solid",
outline: {
color: "white",
width: "2px"
}
}
var polygonGraphic = {
geometry: polygon,
symbol: polygonSymbol,
}
var point = {
type: "point",
latitude: 41.73,
longitude: -49.97
}
var pointSymbol = {
type: "simple-marker",
color: "blue",
outline: {
color: "white",
width: "0.5px"
}
}
var pointGraphic = {
geometry: point,
symbol: pointSymbol,
}
view.graphics.addMany([polylineGraphic, polygonGraphic, pointGraphic]);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximun-scalie = 1.0, initial-scale=1.0, user-scalable = no">
<title>Add Graphics to a SceneView - 4.6</title>
<link rel="stylesheet" href="/arcgis_js_api/4.6/esri/css/main.css">
<script src="/arcgis_js_api/4.6/dojo/dojo.js"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"dojo/domReady!"
],function(Map, SceneView, GraphicsLayer, Graphic){
var map = new Map ({
basemap: "hybrid"
});
var view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: {
x: -0.17746710975334712,
y: 51.44543992422466,
z: 1266.7049653716385
},
tilt: 82.95536300536367,
heading: 0.34445102566290225,
}
});
var graphicslayer = new GraphicsLayer ();
map.add(graphicslayer);
//在MapView中point用XY或者经纬度表示，在SceneView中point用xyz表示
var point = {
type: "point",
x: -0.178,
y: 51.48791,
z: 1010
}
//在SceneView中，依旧可以是用MapView的Symbol表达方式。
markerSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: [226, 119, 40],
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 2
}
};
var pointgraphic = {
geometry: point,
symbol: markerSymbol
}
var polyline = {
type: "polyline",
paths: [
[-0.178, 51.48791, 0],
[-0.178, 51.48791, 1000]
]
};
var lineSymbol = {
type: "simple-line",
color: [226, 119, 40],
width: 4
}
var polylinegraphic = new Graphic({
geometry: polyline,
symbol: lineSymbol
});
var polygon = {
type: "polygon",
rings: [
[-0.184, 51.48391, 400],
[-0.184, 51.49091, 500],
[-0.172, 51.49091, 500],
[-0.172, 51.48391, 400],
[-0.184, 51.48391, 400]
]
}
fillSymbol = {
type: "simple-fill",
color: [226, 119, 40],
style: "solid",
outline: {
color: "white",
width: "4px"
}
}
var polygongraphic = {
geometry: polygon,
symbol: fillSymbol
}
graphicslayer.addMany([pointgraphic,polygongraphic,polylinegraphic])
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple popup elements - 4.6</title>
<link rel="stylesheet" href="/arcgis_js_api/4.6/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="/arcgis_js_api/4.6/esri/css/main.css">
<script src="/arcgis_js_api/4.6/dojo/dojo.js"></script>
<style>
html, body, #viewDiv{
padding: 0px;
margin: 0px;
height: 100%;
width: 100%
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"dojo/domReady!"
],function(Map, MapView, FeatureLayer){
var map = new Map({
basemap: "hybrid"
});
var view = new MapView({
map: map,
container: "viewDiv",
center: [-118.399400711028, 34.08713590709093],
zoom: 17,
popup: {
dockEnabled: true,
dockOptions: {
buttonEnabled: false,
breakPoint: false
}
}
});
var layer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0",
popupTemplate: {
title: "Beverly Hills trees by block",
//注意语法：content官网标注为object[],理解为对象数组。
content: [{
type: "fields",
fieldInfos: [{
fieldName: "Point_Count",
format: {
places: 0,
digitSeparator: true
},
//label与fieldName的区别.如果没有设置label，则fieldName出现在表的第一列。
label: "Count of Points",
visible: "false"
},{
fieldName: "relationships/0/Point_Count_COMMON",
format: {
places: 0,
digitSeparator: true
},
label: "Sum of species tree count",
visible: "true",
//定义统计的类型，如果没有这个属性，无法加载出popupTemplate
statisticType: "sum"
},{
fieldName: "relationships/0/COMMON",
label: "Common Name",
visible: "false"
},{
fieldName: "BLOCKCE10",
visible: true,
label: "Block"
}]
},{
type: "text",
//注意：
taxt: "There are {Point_Count} trees within census block {BLOCKCE10}"
},{
type: "media",
mediaInfos: [{
title: "<b>Count by type</b>",
type: "pie-chart",
//饼状图的说明文字
caption: "",
value: {
theme: "MiamiNice",
fields: ["relationships/0/Point_Count_COMMON"],
tooltipField: "",
////它可以表示数字、字符串和对象是“无值”的。normalizeField是字符串
normalizeField: null,
tooltipField: "relationships/0/COMMON"
}
},{
title: "<b>Welcome to Beverly Hills</b>",
type: "image",
value: {
sourceURL: "https://www.beverlyhills.org/cbhfiles/storage/files/13203374121770673849/122707_039r_final.jpg"
}
},{
title: "<b>Palm tree lined street</b>",
type: "image",
value: {
sourceURL: "https://cdn.loc.gov/service/pnp/highsm/21600/21679r.jpg"
}
}]
},{
type: "attachments"
}]
},
outFields: ["*"]
});
map.add(layer)
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximun-scale=1.0, initial-scale=1.0, user-scalable=no">
<title>Popup Actions - 4.6</title>
<link rel="stylesheet" href="/arcgis_js_api/4.6/esri/css/main.css">
<script src="/arcgis_js_api/4.6/dojo/dojo.js"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/geometry/geometryEngine",
"dojo/domReady!"
],function(Map, MapView, FeatureLayer, geometryEngine){
var map = new Map({
basemap: "gray"
});
var view = new MapView({
map: map,
container: "viewDiv",
center: [-117.08, 34.10],
zoom: 12
});
var measureAction = {
title: "Measure Length",
id: "measure-this",
image: 'http://syy-arcgis.oss-cn-beijing.aliyuncs.com/Measure_Distance16.png'
};
var template = {
title: "Trail run",
content: "{Name}",
//注意语法： actions是数组
actions: [measureAction]
};
var featurelayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0",
popupTemplate: template,
outFields: ["*"]
});
map.add(featurelayer);
function measureLength(){
//注意：如何确定选中的图形
var geom = view.popup.selectedFeature.geometry;
console.log(view.popup);
console.log(view.popup.selectedFeature);
console.log(view.popup.selectedFeature.geometry);
//如果只打印popup，显示popup未被定义。popup没有声明
//console.log(popup);
console.log(view.popup.selectedFeature.attributes);
console.log(view.popup.selectedFeature.attributes.name);
var distance = geometryEngine.geodesicLength(geom, "miles");
distance = parseFloat( Math.round(distance * 100)/100).toFixed(2);
view.popup.content = view.popup.selectedFeature.attributes.name +
"<div style='background-color:DarkGray;color:white'>" + distance +
" miles.</div>";
}
view.popup.on("trigger-action", function(event){
if(event.id = "measure-this"){
measureLength()
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0, initial-scalable=1.0, user-scalable=no">
<title>Custom popup actions per feature attribute - 4.6</title>
<link rel="stylesheet" href="/arcgis_js_api/4.6/esri/css/main.css">
<script src="/arcgis_js_api/4.6/dojo/dojo.js"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"dojo/domReady!"
],function(Map, MapView, FeatureLayer){
var map = new Map({
basemap: "streets-navigation-vector"
});
var view = new MapView({
map: map,
container: "viewDiv",
center: [-101.94981250000075, 41.20977753557709],
zoom: 5
});
var featurelayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/OpenBeerDatabase/FeatureServer/0",
outFields: ["*"],
definitionExpression: "country = 'United States'",
popupTemplate: {
//为什么title的属性值带有{},而fieldName却没有。
//一是因为每一个geometry弹出窗口的title都不一样，而且每一个弹出窗口的表格中第一列都是一样的。
//尽管fieldName代表了label属性，但是还是应该注意他们的区别。
title: "{name}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "name"
},{
fieldName: "address1",
label: "address"
},{
fieldName: "city"
},{
fieldName: "state"
},{
fieldName: "phone"
},{
fieldName: "website"
}]
}],
actions: [{
title: "Brewery Info",
image: "https://developers.arcgis.com/javascript/latest/sample-code/popup-custom-action/live/beer.png",
id: "find-brewery"
}]
}
});
map.add(featurelayer);
view.when(function(){
//当把数据渲染到用户界面时，就一直在观察元素是否发生变化，如果变化就会触发change事件
view.popup.watch("selectedFeature", function(graphic){
if(graphic){
//打印graphic，就会发现每一次点击啤酒杯图形，就会打印一次。
console.log(graphic);
graphic.popupTemplate.actions.items[0].visible =
graphic.attributes.website ? true : false;
}
});
});
view.when(function(){
var popup = view.popup;
popup.viewModel.on("trigger-action", function(event){
if(event.action.id === "find-brewery"){
console.log(1);
var attributes = popup.viewModel.selectedFeature.attributes;
var info = attributes.website;
if(info){
//打开新的窗口
window.open(info.trim());
}
}
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<title>Popup dock positions - 4.6</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.6/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="/arcgis_js_api/4.6/esri/css/main.css">
<script src="/arcgis_js_api/4.6/dojo/dojo.js"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%
}
.docking-control{
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
padding: 10px;
font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #fffe;
color: #323232;
width: 250px;
height: 80px;
text-align: center;
box-sizing: border-box;
margin: -40px 0 0 -125px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.docking-control label{
margin: 0 0 10px 0;
/*因为label默认的display是inline,没有宽度和高度，无法设置padding*/
display: inline-block;
font-weight: bold;
font-size: 16px;
padding: 0px;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/WebMap",
"dojo/dom",
"dojo/on",
"dojo/domReady"
],function(Map, MapView, WebMap, dom, on){
var webmap = new WebMap ({
portalItem: {
id: "3af548bac6054938b615d08104197ba0"
}
});
var view = new MapView({
map: webmap,
container: "viewDiv",
popup: {
dockEnabled: true,
dockOptions: {
buttonEnabled: false,
breakpoint: false
}
}
});
popup = view.popup
view.when(function(){
var centerpoint = view.center.clone();
//显示视图是就出现popup，并且设置它的标题、内容、位置。
popup.open({
title: "Popup dock positions",
content: "Use the control in the center of the map to change the location where the popup will dock.",
location: centerpoint
});
//watch方法:监视一个对象的某个属性是否发生变化,在该属性变化时立即触发指定的回调函数.
popup.watch("currentDockPosition", function(value){
popup.visible = true
});
var selectNode = dom.byId("dockPositionControl");
//为什么用change事件，而不用click。这里的change事件表达的是如果选择的元素改变，就调用function（e）
//如果使用click事件，那么每一个选项都要绑定点击事件。
on(selectNode, "change" ,function(e){
//change事件传给回掉函数的e是个对象，可打印查看。
console.log(e);
popup.set("dockOptions", {
//为什么要设置？
breakpoint: false,
buttonEnabled: false,
position: e.target.value,
});
});
});
});
</script>
</head>
<body>
<div id="viewDiv">
<div class="docking-control">
<label for="dockPositionControl">Popup Dock Position</label>
<select id="dockPositionControl">
<option selected value="auto">Auto</option>
<option value="top-left">Top Left</option>
<option value="top-right">Top Right</option>
<option value="top-center">Top Center</option>
<option value="bottom-left">Bottom Left</option>
<option value="bottom-right">Bottom Right</option>
<option value="bottom-center">Bottom Center</option>
</select>
</div>
</div>
</body>
</html>