superMap添加marker及连线
最终效果如下:
前期初始地图渲染:
//创建地图控件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及连线相关推荐
- SuperMap iClient for javaScript 动态线绘制(模拟飞机飞行)
作者:程溯 使用方法:SuperMap.Geometry.Point(x, y) SuperMap.Feature.Vector 实现动态线绘制模拟飞机飞行效果 使用 iClient 示范代码中的bu ...
- word样式基准_「word技巧」简单的排版技巧—给word文档添加各种样式边框线
一直在说排版,但一篇word文档到底怎么排版才好看?这涉及到很多方面的技巧. 不过,有时候,一个很简单或是不起眼的小动作,有可能就会让整个word文档显得高大上起来. 比如说,给文档随意添加个边框线, ...
- android textView 替文字添加下划线 删除线
android textView 替文字添加下划线 删除线 方法1: tv=(TextView)findViewById(R.id.tv); tv.getPaint().setFlags(Paint. ...
- android高德marker添加点击,高德地图上添加marker,给每一个marker添加点击事件。...
高德地图上添加marker,给每一个marker添加点击事件. 高德地图上添加marker,给每一个marker添加点击事件.javascript var watch = [] $.ajax({ ty ...
- 手把手教你实现百度基础地图+定位功能+设置中心点+添加Marker
配置环境 1.获取AppKey 1.创建应用地址:http://lbsyun.baidu.com/apiconsole/key 2.创建应用: 3.获取SHA1值,首先cmd打开dos窗口 4.cd ...
- html地图添加marker,谷歌地图 API 开发之添加标记
创建地图之后,基本上都需要标记位置的,就是那个圆点.然后参考谷歌的API,找了许久,网址: https://developers.google.com... 代码如下: Accessing argum ...
- leaflet添加marker出现偏移,修正方法-icon
不使用自定义icon 不使用icon属性,使用leaflet通用实例的默认图标,不发生偏移. 使用自定义icon 我们在使用leaflet给地图添加marker时自定义了marker的icon属性. ...
- 给丢失maker的脑电数据添加marker
给丢失marker的脑电数据补上marker,亡羊补牢虽未晚,防患未然更可贵,建议大家做实验之前还是要好好测试程序,不要出现数据采完了才发现没有marker的情况,示例代码演示的是一个等距离间隔的ma ...
- C# Excel 生成图表,添加趋势线、误差线
Excel图表能够将数据可视化,在图表中另行添加趋势线和误差线,可对数据进行进一步的数据分析和统计的可视化处理.Excel中的趋势线可用于趋势预测/回归分析,共6中类型:指数(X),线性(L),对数( ...
最新文章
- LeetCode简单题之反转字符串
- 【LeetCode】142 - Linked List Cycle II
- 运营类产品:用户行为的影响因子是什么?
- zookeeper是做什么用的_做橱柜用什么门板好 选对很关键
- 原来还有这样一个东西,重来不知道过-linux ,ulimit
- SpringBoot中的响应式web应用
- YOLT遥感图像检测算法详解
- OpenCV中cvResize函数图象放缩
- 等保2.0安全管理制度对比_一手资料!等保2.0云计算安全与风险评估
- CF248E Piglet's Birthday(概率dp)
- 深入浅出 eBPF: (Linux/Kernel/XDP/BCC/BPFTrace/Cillium)
- hdu 1698 Just a Hook 线段树区间更新
- python代码编辑器、最好_这十大文本/代码编辑器最好用
- java多线程总结一:线程的两种创建方式及比较
- 事务和异常易出现的错误
- `Shell`高级编程 Day02 —— Shell脚本初步入门
- setting-mirrorO以及下载jar包流程简介
- Intellij idea使用eclipse的java代码格式化文件
- dns 劫持是什么意思,DNS劫持有啥解决办法?
- 无所遁形——快把你的口罩戴上(口罩识别)
热门文章
- 微信小程序 RTMP 音视频 通话 ffmpeg_音视频常见问题分析和解决:HLS切片丢帧引起的视频卡顿问题排查...
- md5会重复吗_自媒体平台视频重复审查机制,如何避免自己做的视频和别人的重复...
- android 获取蓝牙设备id_不需要任何权限获得Android设备的唯一ID
- 切面是异步还是同步操作‘_【 .NET Core 3.0 】框架之十 || AOP 切面思想
- 什么是对象的消息_SpringBoot+RabbitMQ方式收发消息,一文带你体验
- php 加密cer_php 生成RSA非对称加密用的证书-cer-pfx文件
- java soap envelope_如何在SOAP请求中关闭Envelope和Body
- oracle 查询spid,查看数据库session的sid来查杀对应系统进程号spid
- java泛型(三)、通配符的使用
- (1)hibenrate入门例子