實現功能
哦，忘記説了，這是ArcGIS API 4.0版本下的操作，更炫酷，更絲滑的感覺。 說正經功能吧，我就是想看看popTemplete到底有多大的能力，然後就任性的在其中加載了圖層屬性和圖片信息。
相関代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<meta name="description" content="[PopupTemplate Function - 4.3]">
<title>PopupTemplate Function - 4.3
</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#title{
background-color:rgba(240,65,32,0.4);
border-radius:4px;
display:"block";
}
</style>
<script>
var populationChange;
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/Layer",
"dojo/dom",
"dojo/number",
"dojo/on",
"dojo/domReady!"
],
function(
Map, MapView, Layer,
dom, number, on
) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 7,
center: [-87, 34]
});
Layer.fromPortalItem({
portalItem: {
id: "e8f85b4982a24210b9c8aa20ba4e1bf7"
}
}).then(function(layer) {
map.add(layer);
var img="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1494037046&di=2cc42ad6c658ead3624b1cde09db0eac&src=http://www.zhiyinlady.com/d/file/yule/tuku/2016-11-28/smallc8a40348b6a7d7e9a2def3eec4aaf47c.jpg";
var popupTemplate = {
title: "<div id='title'>Population in {NAME}</div>",
content: "As of 2010, the population in this area was <b>{POP2010:NumberFormat}</b> " +
"and the density was <b>{POP10_SQMI:NumberFormat}</b> sq mi. " +
"As of 2013, the population here was <b>{POP2013:NumberFormat}</b> " +
"and the density was <b>{POP13_SQMI:NumberFormat}</b> sq mi. <br/> <br/>" +
"Percent change is {POP2013:populationChange}"+"<img src='" + img + "'>"
};
layer.popupTemplate = popupTemplate;
populationChange = function(value, key, data) {
var diff = data.POP2013 - data.POP2010;
var pctChange = (diff * 100) / data.POP2010;
var result = diff > 0 ? "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494047482825&di=430ef25b49e7a8eee75fdc7639e39db1&imgtype=0&src=http://pic.58pic.com/58pic/14/12/08/66h58PICBjM_1024.jpg" : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494047551834&di=3986daac30d2e903e67c8cd2ca05b53d&imgtype=0&src=http://pic.58pic.com/58pic/14/97/65/69458PICWaA_1024.jpg";
return "<img src='" + result + "'/>" +
"<span style='color: " +
(pctChange < 0 ? "red" : "green") + ";'>" +
number.format(pctChange, {
places: 3
}) +
"%</span>";
}
zoomOut();
});
function zoomOut() {
view.goTo({
center: view.center,
zoom: view.zoom + 2
});
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
實現的效果展示
上圖主要展示的是要素層的屬性信息
上圖展示的時要素圖層的popTemplete中可以添加任意的img等DOM元素。博主就小小的放鬆一下，放了一張美女圖片呀。哈哈~
其實它的功能還很多
是時候展現一波真正的技術了。放出博主的超神API
當然啦，要是有什麽不知道的呢，博主還是很樂意和你們一起玩的喲。
在GIS的沙场，传播有价值的东西!
博主的輸入法爲什麽變成繁體了，好奇怪。
