Add Markers and Vector Features

Add Markers

Markers are most frequently used for online mapping, to mark point features. You can create a Marker and add it to a map as a layer.

  markerlayer = new  SuperMap.Layer.Markers("markerLayer");

Add Vector Features

A vector feature has properties including Geometry, Attributes, and Style to contain its graphical, attributive and style information.

You can create a vector feature using the Vector class and use the method map.addLayers([layer,vector]) to add it to a map.

    vector = new SuperMap.Layer.Vector("vector");

A vector feature should be defined and created by a type of geometry. In this sample, a point, line, rectangle and hexagon are created and added to a vector layer.

The code below demonstrates how to create a point, line, rectangle and hexagon.

var point= new SuperMap.Geometry.Point(0,0);
var pointVector = new SuperMap.Feature.Vector(point);{

var points2=[
    new SuperMap.Geometry.Point(0,29.4),
    new SuperMap.Geometry.Point(-50,39.4),
    new SuperMap.Geometry.Point(-30,19.4),
    new SuperMap.Geometry.Point(100,49.4)
var line1 =   new SuperMap.Geometry.LineString(points2);
var lineVector = new SuperMap.Feature.Vector(line1);{
} ;
var points2=[
    new SuperMap.Geometry.Point(-120,54.142),
    new SuperMap.Geometry.Point(-110,40),
    new SuperMap.Geometry.Point(-120,25.857),
    new SuperMap.Geometry.Point(-140,25.857),
    new SuperMap.Geometry.Point(-150,40),
    new SuperMap.Geometry.Point(-140,54.142)

        linearRings = new SuperMap.Geometry.LinearRing(points2),
        region = new SuperMap.Geometry.Polygon([linearRings]);
var polygonVector = new SuperMap.Feature.Vector(region);
// Rectangle
var x = -70;
var y = -30;
var w = 40;
var h = 30;
var rectangle = new SuperMap.Geometry.Rectangle(x, y, w, h);
var rectangleVector = new SuperMap.Feature.Vector(rectangle);

After you create a vector feature, you can use the method vector.addFeatures() to add it to a vector layer of a map.

// Add a feature
vector.addFeatures([pointVector,lineVector, polygonVector,rectangleVector]);

Online Demo and Code Editing

You can access the online source code and visualize the demo. You can also edit the source code and change the demo.