| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228 |
- const options = {
- url: "/arcgisApi/4.7/init.js"
- };
- import _default,* as esriLoader from "esri-loader";
- import {getPersonTrack} from '../../../api/zhxxAPI.js'
- import {dateFormat} from '../../../utils/gw_date'
- var trackArr = [];
- var sttm,ettm;
- var contIntervalTime;
- export function getPerTrack(_self,item,obj){
- _self.mapObject.getLayers().forEach((val)=>{
- if(val){
- if(val.getProperties().id == 'ls_guijiPoint' || val.getProperties().id == 'ls_guijiPoint1'){
- _self.mapObject.removeLayer(val);
- }
- }
- });
- var ol = _self.$ol;
- var symbol_start = new ol.style.Style({
- image: new ol.style.Icon(({
- anchor: [0.5, 0.5],
- scale:1,
- src: '/src/views/zongHeXinXiOl/assets/xhstart.png'
- }))
- });
- var symbol_end = new ol.style.Style({
- image: new ol.style.Icon(({
- anchor: [0.5, 0.5],
- scale:1,
- src: '/src/views/zongHeXinXiOl/assets/xhend.png'
- }))
- });
- var symbolLine = new ol.style.Style({
- stroke:new ol.style.Stroke({
- color: '#ff0000',
- width: 3,
- lineCap:'round'
- })
- })
- // var symbolLine = {type: "simple-line",color: [ 255,0, 0, 1 ],width:"5px",style: "solid"};
- // var symbol_start = {
- // type: "picture-marker", // autocasts as new PictureMarkerSymbol()
- // url: "/src/views/zongHeXinXiOl/assets/xhstart.png",
- // width: "40px",
- // height: "40px"
- // };
- // var symbol_end = {
- // type: "picture-marker", // autocasts as new PictureMarkerSymbol()
- // url: "/src/views/zongHeXinXiOl/assets/xhend.png",
- // width: "40px",
- // height: "40px"
- // };
- var featuresPt = [];
- var gra,pt,symbol;
- trackArr = [];
- if(obj != 'track'){
- if(!sttm && !ettm){
- sttm = dateFormat(new Date());
- ettm = dateFormat(new Date(new Date().getTime() - 24*60*60*1000));
- }
- getPersonTrack(item.guid,sttm,ettm).then((res)=>{
- if(res.data){
- for(var i=res.data.length-1;i>=0;i--){
- if(res.data[i].latitude && res.data[i].longitude){
- trackArr.push([res.data[i].longitude,res.data[i].latitude]);
- }
- }
- }
- })
- }else{
- trackArr = item.pointList;
- if(trackArr.length==0){
- return;
- }
- // var ptStart = new Point(trackArr[0][0],trackArr[0][1]);
- var ptStart = new ol.geom.Point(ol.proj.transform([trackArr[0][0],trackArr[0][1]], "EPSG:4326", "EPSG:3857"))
- // var ptEnd = new Point(trackArr[trackArr.length-1][0],trackArr[trackArr.length-1][1]);
- var ptEnd = new ol.geom.Point(ol.proj.transform([trackArr[trackArr.length-1][0],trackArr[trackArr.length-1][1]], "EPSG:4326", "EPSG:3857"))
- var iconFeature = new ol.Feature({
- geometry: ptStart,
- name: '轨迹起点'
- });
- var iconFeature1 = new ol.Feature({
- geometry: ptEnd,
- name: '轨迹终点'
- });
- iconFeature.setStyle(symbol_start);
- iconFeature1.setStyle(symbol_end);
- featuresPt.push(iconFeature);
- featuresPt.push(iconFeature1);
- var vectorSource = new ol.source.Vector({
- features: featuresPt
- });
- var vectorLayer;
- _self.mapObject.getLayers().forEach((val)=>{
- if(val){
- if(val.getProperties().id == 'ls_guijiPoint'){
- vectorLayer = val;
- vectorLayer.getSource().getFeatures().push(vectorSource);
- }
- }
- });
- if(!vectorLayer){
- vectorLayer = new ol.layer.Vector({
- source: vectorSource,
- id:'ls_guijiPoint'
- });
- _self.mapObject.addLayer(vectorLayer);
- }
- }
- if(trackArr.length<0){
- _self.showInfo('track','暂无巡河轨迹信息!');
- }else{
- var symbol1 = new ol.style.Style({
- image: new ol.style.Circle({
- radius: 6,
- fill: new ol.style.Fill({
- color: 'red'
- })
- })
- });
- // var symbol = {
- // type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
- // style: "circle",
- // color: "red",
- // size: "5px", // pixels
- // outline: { // autocasts as new SimpleLineSymbol()
- // color: [ 255, 255, 0 ],
- // width: 0 // points
- // }
- // };
- var features1 = [];
- var vectorSource1;
- trackArr.forEach((item)=>{
- var pt = new ol.geom.Point(ol.proj.transform([item[0],item[1]], "EPSG:4326", "EPSG:3857"))
- // var pt = new Point(item[0],item[1]);
- // var gra = new Graphic({
- // geometry:pt,
- // symbol:symbol
- // });
- var iconFeature1 = new ol.Feature({
- geometry: pt,
- name: '轨迹点'
- });
- iconFeature1.setStyle(symbol1);
- features1.push(iconFeature1);
- vectorSource1 = new ol.source.Vector({
- features: features1
- });
-
- // trackGraphicLayer1.add(gra);
- })
- var vectorLayer1;
- _self.mapObject.getLayers().forEach((val)=>{
- if(val){
- if(val.getProperties().id == 'ls_guijiPoint1'){
- vectorLayer1 = val;
- vectorLayer1.getSource().getFeatures().push(vectorSource1);
- }
- }
- });
- if(!vectorLayer1){
- vectorLayer1 = new ol.layer.Vector({
- source: vectorSource1,
- id:'ls_guijiPoint1'
- });
- _self.mapObject.addLayer(vectorLayer1);
- }
- // var line = new Polyline({
- // paths: [trackArr],
- // spatialReference: { wkid: 4326 }
- // });
- // contIntervalTime = Math.round(5000/trackArr.length);
- // var hehuTempGra = new Graphic({
- // geometry:line,
- // symbol:symbolLine,
- // attributes:null
- // });
- // _self.viewObject.extent = hehuTempGra.geometry.extent;
- // var lod = Number(_self.viewObject.zoom);
- // var lod1 = Number(lod - 2);
- // _self.viewObject.goTo({
- // target:hehuTempGra,
- // zoom:lod1,
- // }).then(function(){
- // let realPathArray = trackArr;
- // console.log('realPathArray ');
- // realAnimateFun(realPathArray,0,_self);
- // });
- }
- // }).catch(err => {
- // console.error(err);
- // });
- }
- function realAnimateFun(pathsArray,startIndex,_self){
- console.log('realAnimateFun'+startIndex);
- let currentIndex = startIndex;
- let currentPaths = [];
- if(currentIndex+1>=pathsArray.length){
- return ;
- }
- currentPaths.push(pathsArray[currentIndex]);
- currentPaths.push(pathsArray[currentIndex+1]);
- esriLoader.dojoRequire(["esri/Graphic","esri/geometry/Point","esri/geometry/SpatialReference",
- "esri/layers/GraphicsLayer","esri/geometry/Polygon","esri/geometry/Polyline"
- ],(Graphic,Point,SpatialReference,GraphicsLayer,Polygon,Polyline)=>{
- var trackGraphicLayer = _self.mapObject.findLayerById("trackGraphicLayer");
- // trackGraphicLayer.removeAll();
- var symbolLine = {type: "simple-line",color: [ 255,0, 0, 1 ],width:"3px",style: "solid"};
- let line = new Polyline({
- paths: [currentPaths],
- spatialReference: { wkid: 4326 }
- });
- let hehuTempGra = new Graphic({
- geometry:line,
- symbol:symbolLine,
- attributes:null
- });
-
- trackGraphicLayer.add(hehuTempGra);
-
- });
- setTimeout(() => {
- realAnimateFun(pathsArray,currentIndex+1,_self);
- }, contIntervalTime);
- }
|