javascript - 在弹出模板的标题中添加 innerHTML (arcgis-js-api 4.xx)
问题描述
我试过像这样单独使用它：
myLayer.popupTemplate = { <--- have also tried defining this as popupShake
title: function(feature) {
let spl = document.createElement("span");
spl.className = "name_plc";
spl.innerHTML = "<span class='name_plc'></span>";
return spl;
}
};
我还尝试在 popuptemplate 调用中内联（例如内容部分，但即使文档声明它接受字符串和 OR函数，标题也不会运行）。
IE
let popupShake = {
outFields: ["*"],
"title": function (feature){ <------------- breaks popup, but content below works
let spl = document.createElement("span");
spl.className = "name_plc";
dlv.innerHTML = "<span class='name_plc'></span>";
return spl;
},
"content": function (feature){
let name_plc;
let dlv = document.createElement("div");
dlv.className = "popd";
dlv.innerHTML = `<b><span class='name_plc'></span></b><br>ID: <span class="ida">${feature.graphic.attributes.id}</span><br> URL: <a href="${feature.graphic.attributes.url}" target="_blank">View</a> <br> Updated: ${feature.graphic.attributes.updated} <br>Grid_value: ${feature.graphic.attributes.grid_value}<br> Event Time: ${feature.graphic.attributes.eventTime}`;
setTimeout(() => {
getName();
}, 20);
................
解决方案
如果您想要的只是简单地设置标题的样式，那么您可以做的是重新定义esri-popup__header-titlecss 类。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS API for JavaScript Hello World App</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.disclaimer {
font-size: 14px;
font-style: italic;
color: white;
background-color: black;
}
.esri-popup__header-title {
color: grey;
background-color: whitesmoke;
font-size: smaller;
font-weight: lighter;
font-style: italic;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
'esri/Map',
'esri/views/MapView',
'esri/layers/FeatureLayer'
], function (Map, MapView, FeatureLayer) {
let author = 'by @cabesuon';
const map = new Map({
basemap: 'streets-navigation-vector'
});
const view = new MapView({
container: 'viewDiv',
map: map,
zoom: 12,
center: {
latitude: 32.7353,
longitude: -117.1490
}
});
function toGraphic(lon, lat, ObjectID, title, addrs, url) {
return {
geometry: {
type: 'point',
longitude: lon,
latitude: lat
},
attributes: {
ObjectID,
title,
addrs,
url
}
}
}
const graphics = [
toGraphic(
-117.1560632,
32.727482,
1,
'Automotive Museum',
'2080 Pan American Plaza, San Diego, CA 92101, United States',
'http://sdautomuseum.org/'
),
toGraphic(
-117.1763293,
32.7136902,
2,
'USS Midway Museum',
'910 N Harbor Dr, San Diego, CA 92101, United States',
'http://www.midway.org/'
),
toGraphic(
-117.2284536,
32.7641112,
3,
'SeaWorld',
'500 Sea World Dr, San Diego, CA 92109, United States',
'https://seaworld.com/san-diego'
),
toGraphic(
-117.1557741,
32.7360032,
4,
'Zoo',
'2920 Zoo Dr, San Diego, CA 92101, United States',
'https://zoo.sandiegozoo.org/'
)
];
function popupContent (feature) {
const div = document.createElement('div');
div.innerHTML =
`Address: ${feature.graphic.attributes.addrs}<br>` +
`<a href='${feature.graphic.attributes.url}'>${feature.graphic.attributes.url}</a><br><br>` +
`<span class="disclaimer">${author}</span>`;
return div;
}
const layer = new FeatureLayer({
source: graphics,
fields: [
{
name: 'ObjectID',
alias: 'ObjectID',
type: 'oid'
}, {
name: 'title',
alias: 'title',
type: 'string'
}, {
name: 'addrs',
alias: 'addrs',
type: 'string'
}, {
name: 'url',
alias: 'url',
type: 'string'
}
],
objectIDField: ['ObjectID'],
geometryType: 'point',
renderer: {
type: 'simple',
symbol: {
type: 'text',
color: 'red',
text: '\ue61d',
font: {
size: 30,
family: 'CalciteWebCoreIcons'
}
}
},
popupTemplate: {
title: '{title}',
content: popupContent,
outFields: ['*']
}
});
map.add(layer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>如果你想完全自定义它，你可以随时使用 css 或/和 javascript 来改变它。
看下一个例子，这里我隐藏了重新定义esri-popup__headercss 样式的弹出窗口的标题，然后在内容中添加了一个简单的标题。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS API for JavaScript Hello World App</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.disclaimer {
font-size: 14px;
font-style: italic;
color: white;
background-color: black;
}
.esri-popup__header-title {
color: grey;
background-color: whitesmoke;
font-size: smaller;
font-weight: lighter;
font-style: italic;
}
.esri-popup__header {
display: none !important;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
'esri/Map',
'esri/views/MapView',
'esri/layers/FeatureLayer'
], function (Map, MapView, FeatureLayer) {
let author = 'by @cabesuon';
const map = new Map({
basemap: 'streets-navigation-vector'
});
const view = new MapView({
container: 'viewDiv',
map: map,
zoom: 12,
center: {
latitude: 32.7353,
longitude: -117.1490
}
});
function toGraphic(lon, lat, ObjectID, title, addrs, url) {
return {
geometry: {
type: 'point',
longitude: lon,
latitude: lat
},
attributes: {
ObjectID,
title,
addrs,
url
}
}
}
const graphics = [
toGraphic(
-117.1560632,
32.727482,
1,
'Automotive Museum',
'2080 Pan American Plaza, San Diego, CA 92101, United States',
'http://sdautomuseum.org/'
),
toGraphic(
-117.1763293,
32.7136902,
2,
'USS Midway Museum',
'910 N Harbor Dr, San Diego, CA 92101, United States',
'http://www.midway.org/'
),
toGraphic(
-117.2284536,
32.7641112,
3,
'SeaWorld',
'500 Sea World Dr, San Diego, CA 92109, United States',
'https://seaworld.com/san-diego'
),
toGraphic(
-117.1557741,
32.7360032,
4,
'Zoo',
'2920 Zoo Dr, San Diego, CA 92101, United States',
'https://zoo.sandiegozoo.org/'
)
];
function popupContent (feature) {
const div = document.createElement('div');
div.innerHTML =
`<h2 class="esri-popup__header-title">${feature.graphic.attributes.title}<h2/>` +
`Address: ${feature.graphic.attributes.addrs}<br>` +
`<a href='${feature.graphic.attributes.url}'>${feature.graphic.attributes.url}</a><br><br>` +
`<span class="disclaimer">${author}</span>`;
return div;
}
const layer = new FeatureLayer({
source: graphics,
fields: [
{
name: 'ObjectID',
alias: 'ObjectID',
type: 'oid'
}, {
name: 'title',
alias: 'title',
type: 'string'
}, {
name: 'addrs',
alias: 'addrs',
type: 'string'
}, {
name: 'url',
alias: 'url',
type: 'string'
}
],
objectIDField: ['ObjectID'],
geometryType: 'point',
renderer: {
type: 'simple',
symbol: {
type: 'text',
color: 'red',
text: '\ue61d',
font: {
size: 30,
family: 'CalciteWebCoreIcons'
}
}
},
popupTemplate: {
title: '{title}',
content: popupContent,
outFields: ['*']
}
});
map.add(layer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>推荐阅读
- javascript - 如何将每个 td 数据属性的选定复选框表行获取到数组对象？
- sql - 多行算术组合成一行 - Oracle SQL
- javascript - 命令“npm run dev”失败
- javascript - 在 Javascript 中从 React Native 调用 Native Java 方法
- node.js - 如何使用 Electron 运行 tensorflow.js？
- java - 迭代所有 json 对象并替换值
- javascript - 从字符串调用导入的对象
- asp.net-core - 如何将全局元数据添加到 ASP.NET Core 日志记录？
- compiler-construction - 词法错误与解析错误
- reactjs - 在 React 中管理对话框的最佳方法