SuperMap之轨迹

所用相关资源文件下载及链接等在文章的结尾（其他自行查找）。

实现效果：

JS引用：【主要JS的引用，报错不出效果，建议换个人推荐方式，只需引入一个js】

官网示例：
<script type="text/javascript" src="supermap/examples/js/include-web.js"></script>
<script type="text/javascript" src="supermap/dist/classic/include-classic.js"></script>

或者

注：js引用文件链接路径自行修改。不出效果多数情况是引用文件找不到，请修改正确的链接路径。

<div >    <div id='' style=" position: absolute;left: 440px;top: 10px;text-align: center;z-index: 999999"><button type="button" style="padding: 7px 10px;" class="btn btn-sm btn-success" onclick="initQuery()">初始化</button><!--<button type="button" class="btn btn-sm btn-success" onclick="clearFeatures()">全部清除</button>--><!--<button type="button" class="btn btn-sm btn-success" onclick="draw_plotLine()">生成路线</button>--></div><div id="map" style="border: 0px solid #3473b7;width: 100%;height: 100%;background:#fff;z-index: 0;padding: 0px!important;margin: 0px!important;"></div>
</div>

注：地图服务REST及坐标数据根据所需自行修改，参照官网示例。

坐标点可根据画点、画线事件来获取坐标点集合。具体画线，点，面及相关事件，下一篇博客见。

/*** 人员轨迹--轨迹查询** @author 极* @email mylecat@163.com*/
var host = window.isLocal ? window.server : "http://192.168.2.81:8091";
var map,mapUrl = host + "/iserver/services/map-JiaoTongDaXue/rest/maps/BJD";
var mapName="基础图层";
var mapRESTLayer;//地图图层对象
var mapCenterX = '116.33799';//地图中心点X坐标
var mapCenterY = '39.94879';//地图中心点Y坐标
var mapZoomLevel = 0;//地图展示等级，默认0var plottingLayer;
var plotUrl = host + "/iserver/services/plot-jingyong/rest/plot/";var vecotrLayer;//矢量图层对象
var vectorLayerName="矢量图层";var markerLayer;//标记图层对象
var markerLayerName="标记图层"
var ObjStyle,size,offset;
ObjStyle={fillColor: "blue",fillOpacity: 1,hoverFillColor: "white",hoverFillOpacity: 0.8,strokeColor: "red",strokeOpacity: 1,strokeWidth: 3,strokeLinecap: "round",strokeDashstyle: "solid",hoverStrokeColor: "red",hoverStrokeOpacity: 1,hoverStrokeWidth: 0.2,pointRadius: 6,hoverPointRadius: 1,hoverPointUnit: "%",pointerEvents: "visiblePainted",cursor: "inherit",fontColor: "#000000",labelAlign: "cm",labelOutlineColor: "white",labelOutlineWidth: 3
};
var animatorFeatures, animatorVector,
peoStyle ={externalGraphic: ctx+'superMap/libs/iclient8c/examples/images/walk.png',allowRotate: false,graphicWidth: 20,graphicHeight: 20,};
function init() {BrowserSupport();//验证浏览器是否支持map = new SuperMap.Map("map", {controls: [new SuperMap.Control.Navigation({dragPanOptions: {enableKinetic: true}}),new SuperMap.Control.Zoom(),new SuperMap.Control.ScaleLine()]});vecotrLayer = new SuperMap.Layer.Vector(vectorLayerName);markerLayer = new SuperMap.Layer.Markers(markerLayerName);plottingLayer = new SuperMap.Layer.PlottingLayer("渲染标号", plotUrl);plottingLayer.style = ObjStyle;mapRESTLayer = new SuperMap.Layer.TiledDynamicRESTLayer(mapName, mapUrl, null, {maxResolution: "auto",transparent: true,cacheEnabled: true});mapRESTLayer.events.on({"layerInitialized": addLayer});//初始化人物运动图层。animatorVector = new SuperMap.Layer.AnimatorVector("Peo", {}, {//设置速度为每帧播放0.003小时的数据speed: 0.003,//开始时间为0startTime: 0,});};//定义addLayer函数，触发 layerInitialized事件会调用此函数
function addLayer(){map.addLayers([mapRESTLayer, markerLayer, vecotrLayer,plottingLayer,animatorVector]);map.setCenter(new SuperMap.LonLat(116.34, 39.95), 0);//设置地图中心点，地图放大缩小等级var localDatas_1="116.3365804923,39.950188670303|116.33807098769,39.950471675757|116.33850492939,39.949132116607|116.34035389835,39.949471723152|116.34018409508,39.950075468121|116.34099537738,39.950207537333|116.34127838284,39.949622659394|116.34101424441,39.949603792364|116.34110857957,39.949245318789|116.34044823351,39.949169850668|116.34035389835,39.949452856122|116.33792005145,39.949018914425|116.33795778551,39.948849111153|116.33703330103,39.948717041941";var start= new Array;start.push('116.3365804923');start.push('39.950188670303');var end= new Array;end.push('116.33703330103');end.push('39.948717041941');draw_plotLine_ByPoint(start,end,datasToPointArray(localDatas_1));
}//数据解析，返回坐标点Array
function datasToPointArray(localDatas){var point_data = new Array();var points = new Array();var temp_Array = localDatas.split("|");for (var j = 0; j < temp_Array.length; j++) {var point = new Array();var t_x = temp_Array[j].split(",")[0];var t_y = temp_Array[j].split(",")[1];point.push(t_x);point.push(t_y);point_data.push(point);var sg_point = new SuperMap.Geometry.Point(t_x,t_y);points.push(sg_point);}return points;
}//点击生成线
function draw_plotLine() {clearFeatures();var data_line ="116.33051270782,39.949971610037|116.33215932565,39.950255509664|116.33247161524,39.949205081046|116.33335170408,39.949403810785|116.33312458438,39.950454239402|116.33397628326,39.950709749066|116.33383433345,39.95119237843";var start= new Array;start.push('116.33051270782');start.push('39.949971610037');var end= new Array;end.push('116.33383433345');end.push('39.95119237843');draw_plotLine_ByPoint( start,end,datasToPointArray(data_line));
}/*** 根据给定坐标点画轨迹线* @param startPoint 数组对象* @param endPoint 数组对象* @param points 数组对象*/
function draw_plotLine_ByPoint(startPoint,endPoint,points){clearFeatures();markerLayer = new SuperMap.Layer.Markers(markerLayerName);map.addLayers([markerLayer]);map.setCenter(new SuperMap.LonLat(startPoint[0],startPoint[1]), 0);markerLayer.addMarker(new SuperMap.Marker(new SuperMap.LonLat(startPoint[0],startPoint[1]), new SuperMap.Icon(ctx+'superMap/libs/iclient8c/examples/images/start_trans.png', new SuperMap.Size(21, 21), new SuperMap.Pixel(-(21 / 2), -21))));markerLayer.addMarker(new SuperMap.Marker(new SuperMap.LonLat(endPoint[0],endPoint[1]),  new SuperMap.Icon(ctx+'superMap/libs/iclient8c/examples/images/end_trans.png', new SuperMap.Size(21, 21), new SuperMap.Pixel(-(21 / 2), -21))));var line_feature = new SuperMap.Feature.Vector(new SuperMap.Geometry.LineString(points));line_feature.style = ObjStyle;vecotrLayer.addFeatures(line_feature);animatorFeatures = [];var featureComps = line_feature.geometry.components;for (var k = 0, len = featureComps.length; k < len; k++) {var peo = new SuperMap.Feature.Vector(featureComps[k].clone(),{FEATUREID: line_feature.id,TIME: k}, peoStyle);animatorFeatures.push(peo);}animatorVector.addFeatures(animatorFeatures);animatorVector.animator.setEndTime(featureComps.length-1);animatorVector.animator.start();
}/*** 全部图层清除*/
function clearFeatures() {vecotrLayer.removeAllFeatures();plottingLayer.removeAllFeatures();animatorVector.removeAllFeatures();markerLayer.destroy();
}/*** 初始化*/
function mapInit() {clearFeatures();map.destroy();init();
}/*** 不支持* canvas的浏览器不能运行* android 设备也不能运行*/
function BrowserSupport() {var broz = SuperMap.Util.getBrowser();if (!document.createElement('canvas').getContext) {widgets.alert.showAlert(resources.msg_supportCanvas, false);return;} else if (broz.device === 'android') {widgets.alert.showAlert(resources.msg_supportEquipment, false);return;}
}

下载：supermap官网、GIS-supermap技术资源中心、supermap-iclient8c-JavaScript-API、supermap-示范程序-（注意版本）

SuperMap之轨迹相关推荐

使用supermap实现轨迹动态回放功能
引入地图的方式详见另一篇文章在vue项目中使用supermap,基于 SuperMap iClient 8C(2017) for JavaScript,底图为天地图第一个节点做了单独的处理 < ...
supermap leaflet （二）运动点及轨迹
本篇文章用setInterval方法实现运动点及轨迹. 获取点位坐标组. var cord = [];for(var i = 0; i < 200; i++){cord[i] = [Math.r ...
SuperMap轨迹点数据模拟数据生成
跟车辆对接时,需要获取实时的坐标数据,在项目实施过程中车辆安装GPS需要一个过程,但这时候开发又不能等待GPS真实坐标的上传,只能先人工模拟造一些GPS位置轨迹数据,方便开发调试与演示汇报,本文章基于 ...
SuperMap GIS 10i AI GIS技术白皮书
随着人工智能技术的迅速发展,越来越多从事GIS研究或应用的组织开始积极投入到针对GIS与人工智能结合的技术创新工作当中.从技术发展的现状分析来看,人工智能技术能够为GIS提升多个方向的能力,包括: ...
SuperMap GIS三维插件使用QA
目录一.使用插件前,你需要知道支持哪些文件二.插件下载地址三.插件版本支持列表四.插件需要的许可及许可注意事项五.超图插件安装部署 1.3ds Max 2.Revit 3.Civil3D 4 ...
基于WebGl的火车运行轨迹展示
作者:Volare 前言随着目前可视化的发展,人们越来越愿意在三维的场景下浏览,因为这样不仅看的更加的清楚,也是更加的直观,在本片博客中,小编以从武汉疫情爆发前驶出的火车来为大家展示出火车轨迹. ( ...
SuperMap iPortal产品版本及模块介绍
SuperMap iPortal 提供了基础版.标准版.专业版和高级版四个版本,分别面向不同的应用类型,需要不同的运行许可. 上述不同的版本中,SuperMap iPortal 的门户功能一样,但允许 ...
SuperMap 三维GIS应用
SuperMap 三维GIS应用开发工具与关键技术:SuperMap软件.Visual Studio Code 作者:木林森撰写时间:2020年4月28日 SuperMap 三维GIS应用于智慧城 ...
SuperMap iMobile 8Cfor Android/iOS ——专业级移动GIS开发平台
SuperMap iMobile 8C是一款全新的移动GIS开发平台,具备专业.全面的移动GIS功能.支持基于Android和iOS操作系统的智能移动终端,可以快速开发在线和离线的移动GIS应用. 谁 ...
SuperMap中动画模型制作详解
概述随着时代的发展三维技术运用越来越广泛,应用行业也大有不同.应用于工业设计.城市规划.游戏.影视动画等方面. 在GIS领域中三维也成为了主流技术,在住宅的管理.管线的管理.消防领域有所应用.一般的 ...

SuperMap之轨迹

注：地图服务REST及坐标数据根据所需自行修改，参照官网示例。

SuperMap之轨迹相关推荐

最新文章

热门文章