<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>echarts和ArcGIS JS API结合</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css"/>
<style>
body {
margin: 0 !important;
padding: 0 !important;
background-color: #000000;
font-family: "Microsoft YaHei" !important;
}
#mapview {
position: absolute;
width: 100%;
height: 100%;
}
.esri-view .esri-view-surface--inset-outline:focus::after {
outline: auto 0px Highlight !important;
outline: auto 0px -webkit-focus-ring-color !important;
}
</style>
<script src="https://js.arcgis.com/4.14/"></script>
<script src="/js/require.min.js" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script>
var g_token = "{!! $token !!}";
require(
["esri/Map", "esri/views/MapView", "esri/Basemap", "esri/layers/TileLayer", "esri/identity/IdentityManager",
"esri/Graphic",
"dojo/domReady!"],
function (Map, MapView, Basemap, TileLayer, esriId, Graphic) {
var serverString = "https://mapserver.nyncw.sh.gov.cn/OneMapServer/rest/services/tianditu_2021_new/MapServer";
// serverInfo.tokenServiceUrl = "https://mapserver.nyncw.sh.gov.cn/RemoteTokenServer";
// This is called when the promise resolves
var tokenValue = g_token;
//注册Token，注册之后，在Portal里的所有资源，只要该用户由权限访问，就可以直接使用，之前的所有安全服务请求都将会把token值作为参数发送到服务器端
esriId.registerToken({server: serverString, token: tokenValue});
let url = "https://mapserver.nyncw.sh.gov.cn/OneMapServer/rest/services/tianditu_2021_new/MapServer";
let url2 = "https://mapserver.nyncw.sh.gov.cn/OneMapServer/rest/services/tianditu_zhuji_2021/MapServer";
let url3 = "https://mapserver.nyncw.sh.gov.cn/OneMapServer/rest/services/ShanghaiZoneBoundary/MapServer";
var basemap = new Basemap({ //此处自定义一张暗夜色的底图，并没有用JS API自带的底图
baseLayers: [
new TileLayer({
url: url,
}),
new TileLayer({
url: url2,
}),
/*new TileLayer({
url: url3,
})*/
],
title: "basemap",
id: "basemap"
});
var map = new Map({
basemap: basemap
});
//添加图片修饰点
var lineSymbol = {
type: "picture-marker", // autocasts as new PictureMarkerSymbol()
url: "/test_oss.png",
width: "64px",
height: "64px"
};
let lnglat_list = [
[121.314747, 30.884032],
[121.601351, 31.615139],
[121.112708, 31.165208],
[121.545069, 31.207746],
[121.247222, 31.390443],
];
var polylineGraphic_list = [];
for (var i in lnglat_list) {
let point = {
type: "point",
x: lnglat_list[i][0],
y: lnglat_list[i][1],
};
// Create an object for storing attributes related to the line
var lineAtt = {//定义弹窗的表头
car_info: "Keystone Pipeline",
car_code: "TransCanada",
car_num: "12131321",
user: "arsi"
};
let locusAction = {//自定义的操作
title: "车辆运行轨迹",
id: "locus"
};
var template = {//弹窗的内容模板
// autocasts as new PopupTemplate()
title: "车辆信息",
content: [
{
type: "fields", // FieldsContentElement
fieldInfos: [
{
fieldName: "car_info",
visible: true,
label: "车辆信息"
},
{
fieldName: "car_code",
visible: true,
label: "车牌号"
},
{
fieldName: "car_num",
visible: true,
label: "车辆编号",
format: {
places: 0,
digitSeparator: true
}
},
{
fieldName: "user",
visible: true,
label: "用户名"
}
]
}
],
actions: [locusAction]
};
let polylineGraphic = new Graphic({//绘制点
geometry: point,
symbol: lineSymbol,
attributes: lineAtt,
popupTemplate: template
});
polylineGraphic_list.push(polylineGraphic);
}
var mapview = new MapView({
container: "mapview",
map: map,
zoom: 1,
center: [121.47371, 31.230355],
});
mapview.graphics.addMany(polylineGraphic_list);
function locusThis() {//上面自定义的操作点击后的执行函数
mapview.popup.open({
title: "时间选择",
content: "1111"
});
//template.content.push();
//mapview.graphics.polylineGraphic.popupTemplate = template;
}
/*mapview.popup.on("trigger-action", function (event) {//设置点击操作触发条件
console.log(event);
if (event.action.id === "locus") {
locusThis();
}
});*/
})
;
</script>
</head>
<body>
<div id="mapview"></div>
</body>
</html>