最终效果如下:

前期初始地图渲染:

//创建地图控件function init() {    map = new SuperMap.Map ("map");    //创建分块动态REST图层,该图层显示iserver 8C 服务发布的地图,    //其中"world"为图层名称,url图层的服务地址,{transparent: true}设置到url的可选参数    layer = new SuperMap.Layer.TiledDynamicRESTLayer("zonghe", url, null, {maxResolution:"auto"});    layer.events.on({"layerInitialized": addLayer});};//创建图层function addLayer() {    //将Layer图层加载到Map对象上    map.addLayer(layer);    //出图,map.setCenter函数显示地图    map.setCenter(new SuperMap.LonLat(23889.63, 27106.82), 1);};

一、创建marker方法:

1.首先从后台获取坐标数据(我获取的是平面坐标系);

2.通过new SuperMap.Layer.Markers("Markers")对象进行声明;

3.之后通过addMarker()方法添加坐标点;

4.最后通过addLayer()方法将marker添加到矢量图中

以下是完整代码:

  var marker = new SuperMap.Layer.Markers("Markers");

var size = new SuperMap.Size(21,25);//大小

  var offset = new SuperMap.Pixel(-(size.w/2),-size.h);//偏移量

  var icon = new SuperMap.Icon('./static/imgs/icon_position.png',size,offset);//marker图片

  map.addLayer(marker);

二、marker点连线方法:

1.首先利用new SuperMap.Layer.Vector()方法创建一个线图层;

2.之后利用new SuperMap.Geometry.LineString()方法创建线串;

3.利用new SuperMap.Feature.Vector()方法对线的颜色进行更改;

4.之后利用图层的addFeatures()方法将更改的样式加入到图层中;

5.最后将创建后的图层加入到底图中去;

以下是完整代码:

  var points = [];

  points.push(new SuperMap.Geometry.Point(233,66));//创建点

  points.push(new SuperMap.Geometry.Point(244,67));//创建点

  points.push(new SuperMap.Geometry.Point(233,66));//创建点

  var lineLayer = new SuperMap.Layer.Vector("lineLayer");//创建矢量图层

  var geometry = new SuperMap.Geometry.LineString(points);

  var style = {

    strokeColor:"red",

    strokeWidth:2,

    pointerEvent:"visiblePainted",

    fillColor:"#304BDE",

    fillOpacity:0.8

  };

  var feature = new SuperMap.Feature.Vector(geometry,null,style);

  lineLayer.addFeatures(feature,style);

  map.addLayer(lineLayer);

转载于:https://www.cnblogs.com/jiangze-blog/p/8709998.html

superMap添加marker及连线相关推荐

  1. SuperMap iClient for javaScript 动态线绘制(模拟飞机飞行)

    作者:程溯 使用方法:SuperMap.Geometry.Point(x, y) SuperMap.Feature.Vector 实现动态线绘制模拟飞机飞行效果 使用 iClient 示范代码中的bu ...

  2. word样式基准_「word技巧」简单的排版技巧—给word文档添加各种样式边框线

    一直在说排版,但一篇word文档到底怎么排版才好看?这涉及到很多方面的技巧. 不过,有时候,一个很简单或是不起眼的小动作,有可能就会让整个word文档显得高大上起来. 比如说,给文档随意添加个边框线, ...

  3. android textView 替文字添加下划线 删除线

    android textView 替文字添加下划线 删除线 方法1: tv=(TextView)findViewById(R.id.tv); tv.getPaint().setFlags(Paint. ...

  4. android高德marker添加点击,高德地图上添加marker,给每一个marker添加点击事件。...

    高德地图上添加marker,给每一个marker添加点击事件. 高德地图上添加marker,给每一个marker添加点击事件.javascript var watch = [] $.ajax({ ty ...

  5. 手把手教你实现百度基础地图+定位功能+设置中心点+添加Marker

    配置环境 1.获取AppKey 1.创建应用地址:http://lbsyun.baidu.com/apiconsole/key 2.创建应用: 3.获取SHA1值,首先cmd打开dos窗口 4.cd ...

  6. html地图添加marker,谷歌地图 API 开发之添加标记

    创建地图之后,基本上都需要标记位置的,就是那个圆点.然后参考谷歌的API,找了许久,网址: https://developers.google.com... 代码如下: Accessing argum ...

  7. leaflet添加marker出现偏移,修正方法-icon

    不使用自定义icon 不使用icon属性,使用leaflet通用实例的默认图标,不发生偏移. 使用自定义icon 我们在使用leaflet给地图添加marker时自定义了marker的icon属性. ...

  8. 给丢失maker的脑电数据添加marker

    给丢失marker的脑电数据补上marker,亡羊补牢虽未晚,防患未然更可贵,建议大家做实验之前还是要好好测试程序,不要出现数据采完了才发现没有marker的情况,示例代码演示的是一个等距离间隔的ma ...

  9. C# Excel 生成图表,添加趋势线、误差线

    Excel图表能够将数据可视化,在图表中另行添加趋势线和误差线,可对数据进行进一步的数据分析和统计的可视化处理.Excel中的趋势线可用于趋势预测/回归分析,共6中类型:指数(X),线性(L),对数( ...

最新文章

  1. LeetCode简单题之反转字符串
  2. 【LeetCode】142 - Linked List Cycle II
  3. 运营类产品:用户行为的影响因子是什么?
  4. zookeeper是做什么用的_做橱柜用什么门板好 选对很关键
  5. 原来还有这样一个东西,重来不知道过-linux ,ulimit
  6. SpringBoot中的响应式web应用
  7. YOLT遥感图像检测算法详解
  8. OpenCV中cvResize函数图象放缩
  9. 等保2.0安全管理制度对比_一手资料!等保2.0云计算安全与风险评估
  10. CF248E Piglet's Birthday(概率dp)
  11. 深入浅出 eBPF: (Linux/Kernel/XDP/BCC/BPFTrace/Cillium)
  12. hdu 1698 Just a Hook 线段树区间更新
  13. python代码编辑器、最好_这十大文本/代码编辑器最好用
  14. java多线程总结一:线程的两种创建方式及比较
  15. 事务和异常易出现的错误
  16. `Shell`高级编程 Day02 —— Shell脚本初步入门
  17. setting-mirrorO以及下载jar包流程简介
  18. Intellij idea使用eclipse的java代码格式化文件
  19. dns 劫持是什么意思,DNS劫持有啥解决办法?
  20. 无所遁形——快把你的口罩戴上(口罩识别)

热门文章

  1. 微信小程序 RTMP 音视频 通话 ffmpeg_音视频常见问题分析和解决:HLS切片丢帧引起的视频卡顿问题排查...
  2. md5会重复吗_自媒体平台视频重复审查机制,如何避免自己做的视频和别人的重复...
  3. android 获取蓝牙设备id_不需要任何权限获得Android设备的唯一ID
  4. 切面是异步还是同步操作‘_【 .NET Core 3.0 】框架之十 || AOP 切面思想
  5. 什么是对象的消息_SpringBoot+RabbitMQ方式收发消息,一文带你体验
  6. php 加密cer_php 生成RSA非对称加密用的证书-cer-pfx文件
  7. java soap envelope_如何在SOAP请求中关闭Envelope和Body
  8. oracle 查询spid,查看数据库session的sid来查杀对应系统进程号spid
  9. java泛型(三)、通配符的使用
  10. (1)hibenrate入门例子