开发指南

我们把标记（包括：点标记和文本标记）、矢量图形元素（包括：圆点、折线、圆形、矩形和多边形）和窗口统称为地图覆盖物。地图API提供了如下几种覆盖物：

覆盖物	说明
Marker	点标记表示地图上的点，一般为Dom图片标注，您可以自定义标注的图片和Icon图标。
TextMarker	文本标记表示地图上的点，一般为Dom文本，您可以自定义标注的内容和文本样式。
CircleMarker	表示地图上的矢量点，您可以通过设置样式显示点的颜色和边线。
LabelMarker	表示地图上的矢量标记点，您可以通过设置标制的图片、样式等。
Polyline	表示地图上的折线，您可以通过设置样式显示线的颜色、样式、边线等。
Polygon	表示地图上的多边形。多边形类似于闭合的折线，您可以通过设置显示面的颜色、填充、边线等。
Circle	表示地图上的圆形，您可以通过设置显示面的颜色、填充、边线等。
Ellipse	表示地图上的椭圆，您可以通过设置显示面的颜色、填充、边线等。
Rectangle	表示地图上的矩形，您可以通过设置显示面的颜色、填充、边线等。
GeoJSON	表示GeoJSON集合数据，可以显示集合里的点、线、面数据，还可以设置显示点线面的多个样式。
Tube	表示地图上的管道数据，您可以通过设置管道线的样式，材质等。
Gltf	表示地图上的GLTF3D模型数据等。
InfoWindow	表示地图上的信息窗口，您可以通过设置显示的位置、内容、关闭图标等。

地图API提供了如下三种矢量覆盖物样式字段说明：

矢量覆盖物样式	说明
PointStyle	矢量标记点样式，可设置点样式的图片路径，大小等等。
PolylineStyle	矢量线样式，可控制折线的类型、粗细、颜色样式等等。
PolygonStyle	矢量面样式，可控制圆形、矩形或多边形的填充颜色、透明度、边框粗细样式等等。

可以使用KMap.Map.add()方法向地图添加覆盖物，使用KMap.Map.remove()方法移除覆盖物

可以添加一个带图标的点标记到地图上。如下面示例：
下面实例一个点图层

let marker = new KMap.Marker({
    position: new KMap.Point(114.02308, 22.53474,0),
    anchor: 'center',
    icon : KMap.SystemIcon.getPoiMarkerIcon()
});
map.add(marker);

可以添加一个文本注记的点标记到地图上，如下面示例：

let text = new KMap.TextMarker({
    position: new KMap.Point(114.023074,22.534746, 0),
    anchor: 'center',
    text: '我爱你中国',
    style: {
        background: '#cccccc',
        padding: '5px',
        color: '#ff0000',
        display: 'block'
    }
});
map.add(text);

可以添加一个矢量圆点注记的点标记到地图上，如下面示例：

let circleMarker = new KMap.CircleMarker({
    center: new KMap.Point(114.023074,22.534746),
    radius: 10
});
map.add(circleMarker);

标注添加后，在实际应用中你也可以动态修改它的属性。
如下示例将改变上例标注的样式。

circleMarker.setStyle({
    borderWidth: 1,
    borderColor: "#708090",
    fillColor: "#FFDEAD",
    posStyle: 0
});

监听标注的事件，机制同地图事件一样。
如给标注添加单击事件：

circleMarker.on("click", function (){
  alert("您点击了标注");
});

KMap.Polyline对象表示地图上的折线。它包含一组点，并将这些点连接起来形成折线。折线在地图上绘制为一系列直线段。可以通样样式定义线段的颜色、粗细和样。
以下代码段会在两点之间创建4像素宽的蓝色折线

let style ={
    strokeWidth: 4,
    strokeColor: "blue",
    strokeStyle: "solid"
};
let polyline = new KMap.Polyline({
    path: [
        new KMap.Point(114.01603644,22.53954737),
        new KMap.Point(114.03433966,22.54021754),
        new KMap.Point(114.01594351,22.52964581),
        new KMap.Point(114.03638402,22.5335904)
    ],
    style: style
});
map.add(polyline);

KMap.Circle对象表示地图上的圆形。它由中心点和半径来确定圆形。
以下代码段会绘制一个填充色为金色且边线为3像素边框为虚线的圆：

let circle = new KMap.Circle({
    center: new KMap.Point(114.023074,22.534746),
    radius: 1000,
    style: {
        borderStyle: 'dashed',
        borderDasharray: [10, 5],
        borderWidth: 3,
        borderColor: "#CD950CCC",
        fillColor: "#EEB422CC",
    }
});
map.add(circle);

以下代码段会绘制一个填充色为金色且边线为3像素边框为虚线的椭圆：

let ellipse = new KMap.Ellipse({
    center : new KMap.Point(114.023074,22.534746),
    radius : [1000,600],
    style : {
        borderStyle: 'dashed',
        borderDasharray : [10,5],
        borderWidth:5,
        borderColor:"#CD950CCC",
        fillColor: "#EEB422CC",
    }
});
map.add(ellipse);

KMap.Polygon对象表示地图上的多边形。它包含一组点，并将这些点闭合连接起来形成多边形。以下代码段会绘制一个填充色为绿色且边线为2像素边框为虚线的多边形：

let polygon = new KMap.Polygon({
    path: [
        new KMap.Point(114.02643481,22.54244415),
        new KMap.Point(114.03742479,22.53455732),
        new KMap.Point(114.02693351,22.52671132),
        new KMap.Point(114.01494302,22.53447281),
        new KMap.Point(114.0167148,22.54194104),
        new KMap.Point(114.02643481,22.54244415)
    ],
    style: {
        "fillColor": "#98FB98CC",
        "borderColor": "#228B22CC",
        "borderWidth": 2,
        "borderStyle": "dashed",
        "borderDasharray": [15, 5]
    }
});
map.add(polygon);

KMap.Rectangle对象表示地图上的矩形。创建地图上的矩形是基于创建KMap.Bounds矩形区域的外边框上描述出来的。
下面示例创建一个地图上的矩形：

let bounds = new KMap.Bounds(
    new KMap.Point(114.01226367,22.54357614),
    new KMap.Point(114.03610835,22.52813826)
);
let rectangle = new KMap.Rectangle({
    bounds : bounds,
    style : {
        borderStyle: 'solid',
        borderWidth:2,
        borderColor:"#FF3030CC",
        fillColor: "#FF8C69CC",
    }
});
map.add(rectangle);