123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>易粮易运数据分析平台</title>
- <style>
- html,
- body,
- #map {
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- position: relative;
- }
- .title {
- background: black;
- color: white;
- text-align: center;
- font-size: 1.25rem;
- padding: 0.625rem;
- }
- .amap-marker {
- opacity: 0;
- }
- .amap-marker-label {
- background: rgba(125, 197, 255, 0.2);
- /* background:red; */
- z-index: 1158;
- border: 0px solid rgba(125, 197, 255, 0.2);
- color: #eee;
- padding: 40px;
- font-size: 12px;
- font-weight: 500;
- border-radius: 50%;
- }
- .progressBar {
- width: 50%;
- height: 25px;
- display: block;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- margin: auto;
- padding: 10px 10px 10px 10px;
- position: absolute;
- z-index: 2001;
- background: rgb(102, 102, 102);
- color: white;
- border-radius: 5px;
- }
- }
- </style>
- </head>
- <body>
- <div id="map"></div>
- <div id="progressBar" class="progressBar">地图数据加载中...</div>
- <script
- src="https://webapi.amap.com/maps?v=2.0&key=211dd6f989e719022aaf47ddb0659c47&plugin=AMap.Scale,AMap.ToolBar,AMap.Geocoder,AMap.Geolocation,Geolocation">
- </script>
- <script src="https://webapi.amap.com/loca?v=2.0.0&key=211dd6f989e719022aaf47ddb0659c47"></script>
- <script src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/jquery.min.js"></script>
- <script>
- var markerList = []
- var mapPointData = {}
- var mapLineData = {}
- var timer = ''
- var compId = getUrlParam("id")
- var seachMoth = getUrlParam("seachMoth")
- $.ajax({
- type: "GET",
- contentType: "application/json;charset=UTF-8",
- url: "https://api2.eliangeyun.com/biInfoController/selectBiInfo?compId=" + compId+ '&seachMoth=' + seachMoth,
- success: function(result) {
- console.log("result", result);
- $("#progressBar").hide();
- var listData = result.data[9];
- console.log('收到vue的数据:', listData);
- let _features1 = []
- let _features2 = []
- for (let i = 0; i < listData.biViewInfoList.length; i++) {
- let _data = listData.biViewInfoList[i]
- let _coordinates1 = []
- let _coordinates11 = []
- let _position1 = _data.endPlace ? _data.endPlace.split(',') : []
- _coordinates1.push(Number(_position1[1]))
- _coordinates1.push(Number(_position1[0]))
- let _obj1 = {
- "type": "Feature",
- "properties": {
- "type": i,
- },
- "geometry": {
- "type": "Point",
- "coordinates": _coordinates1
- }
- }
- let _position11 = _data.startPlace ? _data.startPlace.split(',') : []
- _coordinates11.push(Number(_position11[1]))
- _coordinates11.push(Number(_position11[0]))
- let _obj11 = {
- "type": "Feature",
- "properties": {
- "type": i,
- },
- "geometry": {
- "type": "Point",
- "coordinates": _coordinates11
- }
- }
- _features1.push(_obj1)
- _features1.push(_obj11)
- let _coordinates2 = []
- let _start = []
- let _end = []
- let _marker = {}
- let _positionStart = _data.startPlace ? _data.startPlace.split(',') : []
- _start.push(Number(_positionStart[1]))
- _start.push(Number(_positionStart[0]))
- let _positionEnd = _data.endPlace ? _data.endPlace.split(',') : []
- _end.push(Number(_positionEnd[1]))
- _end.push(Number(_positionEnd[0]))
- _coordinates2.push(_start)
- _coordinates2.push(_end)
- _marker.iconSrc = _start
- _marker.name = _data.name
- markerList.push(_marker)
- let _obj2 = {
- "type": "Feature",
- "properties": {
- },
- "geometry": {
- "type": "LineString",
- "coordinates": _coordinates2
- }
- }
- _features2.push(_obj2)
- }
- mapPointData = {
- "type": "FeatureCollection",
- "features": _features1
- }
- mapLineData = {
- "type": "FeatureCollection",
- "features": _features2
- }
- console.log("mapPointData", mapPointData)
- console.log("mapPointData", mapLineData)
- var map = new AMap.Map('map', {
- zoom: 3,
- showLabel: true,
- viewMode: '3D',
- pitch: 0, //地圖仰角
- center: [101.991, 35.346],
- mapStyle: 'amap://styles/c0ed286f357b7f4c7312476637a7ab04',
- buildingAnimation: false,
- showIndoorMap: false,
- });
- var loca = new Loca.Container({
- map,
- });
- for (let i = 0; i < markerList.length; i++) {
- // 构造点标记
- if (markerList[i].iconSrc[0] && markerList[i].iconSrc[1]) {
- var marker = new AMap.Marker({
- position: markerList[i].iconSrc,
- anchor: 'bottom-center',
- icon: new AMap.Icon({
- image: 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/db5971c17f0930e0d5ee08966e08129.png',
- size: new AMap.Size(20, 35), //图标所处区域大小
- imageSize: new AMap.Size(20, 35) //图标大小
- }),
- })
- map.add(marker);
- marker.setLabel({
- offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
- // content: "<div class = 'maker-item'>" + markerList[i].name +
- // "</div>", //设置文本标注内容
- content: "<div class = 'maker-item'></div>", //设置文本标注内容
- direction: 'center' //设置文本标注方位
- });
- }
- }
- // 定时刷新动画
- let _markerDom = document.getElementsByClassName('amap-marker')
- let _index = 0
- this.timer = setInterval(function() {
- _markerDom[_index].style.opacity = 1
- _markerDom[_index].style.transition = '2s'
- var elseLi = _markerDom;
- for (var i = 0; i < elseLi.length; i++) {
- if (elseLi[i] !== _markerDom[_index]) { //判断是否是ele节点,是否与触发事件的节点相同
- elseLi[i].style.opacity = 0
- _markerDom[_index].style.transition = '2s'
- }
- }
- _index++;
- if (_index == _markerDom.length) _index = 0
- }, 3000)
- // 呼吸点
- var scatter = new Loca.ScatterLayer({
- loca,
- zIndex: 10,
- opacity: 0.6,
- visible: true,
- zooms: [2, 22],
- });
- var pointGeo = new Loca.GeoJSONSource({
- // url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/pulselink-china-city-point.json',
- data: mapPointData
- });
- scatter.setSource(pointGeo);
- scatter.setStyle({
- unit: 'meter',
- size: [100000, 100000],
- borderWidth: 0,
- texture: 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/2399138c9ca1cb72f3e28a187c8914b.png',
- duration: 2000,
- animate: true,
- });
- loca.add(scatter);
- console.log(Loca)
- // 弧线
- var pulseLink = new Loca.PulseLinkLayer({
- // loca,
- zIndex: 10,
- opacity: 1,
- visible: true,
- zooms: [2, 22],
- depth: true,
- });
- var geo = new Loca.GeoJSONSource({
- // url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json',
- data: mapLineData
- });
- pulseLink.setSource(geo);
- pulseLink.setStyle({
- unit: 'meter',
- dash: [40000, 10000, 40000, 10000],
- lineWidth: function() {
- return [3000, 2000];
- },
- height: function(index, feat) {
- return feat.distance / 3 + 10;
- },
- // altitude: 1000,
- smoothSteps: 30,
- speed: function(index, prop) {
- return 1000 + Math.random() * 200000;
- },
- flowLength: 100000,
- lineColors: function(index, feat) {
- return ['rgba(1, 192, 160, 1)'];
- },
- maxHeightScale: 0.3, // 弧顶位置比例
- headColor: 'rgb(36, 131, 255)',
- trailColor: 'rgba(255, 255,0,0)',
- });
- loca.add(pulseLink);
- loca.animate.start();
- // 点击事件处理
- var clickInfo = new AMap.Marker({
- anchor: 'bottom-center',
- position: [116.396923, 39.918203, 0],
- });
- clickInfo.setMap(map);
- clickInfo.hide();
- map.on("click", function(e) {
- var feat = pulseLink.queryFeature(e.pixel.toArray());
- if (feat) {
- clickInfo.show();
- var props = feat.properties;
- clickInfo.setPosition(feat.coordinates[1]);
- clickInfo.setContent(
- '<div style="text-align: center; height: 20px; width: 150px; color:#fff; font-size: 14px;">' +
- '速率: ' + feat.properties['ratio'] +
- '</div>'
- );
- } else {
- clickInfo.hide();
- }
- });
- },
- //请求失败,包含具体的错误信息
- error: function(e) {
- console.log(e);
- console.log(e.status);
- console.log(e.responseText);
- }
- });
- function getUrlParam(name) {
- var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
- var r = window.location.search.substr(1).match(reg); //匹配目标参数
- if (r != null) return unescape(r[2]);
- return null; //返回参数值
- }
- </script>
- </body>
- </html>
|