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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM