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);

 

posted @ 2018-04-03 17:45  jiangze  阅读(3331)  评论(0编辑  收藏  举报