您当前的位置:首页 > JavaScript API 触控版 > 开发指南

点线面

5.1 点线面图层

API用Careland.Layer表示地图上的点线面图层。它是点线面对象的容器,您可以设置图层的事件与表达,加入其中的点线面对象默认继承此图层的事件与表达。

可以自定义地添加和移除点线面图层。添加前需要实例一个点/线/面图层,注意实例后不可更改图层类型。如下面示例:

下面实例一个点图层

var pointlayer = new Careland.Layer("point","mypointlayer");

下面实例一个线图层

var linelayer = new Careland.Layer("polyline ","mylinelayer");

下面实例一个面图层

var gonlayer = new Careland.Layer("polygon ","mygonlayer");

5.2 添加和移除点线面图层

可以通过map.addLayer方法可向地图添加点线面图层,例如下面添加一个点图层。

map.addLayer(pointlayer);

可以通过map.removeLayer方法移除图层,例如下面移除名为mypointlayer图层。

map.removeLayer("mypointlayer");

5.3 点线面概述

我们把标注、矢量图形元素(包括:折线、圆形和多边形)统称为地图点线面对象。点线面对象归类为:点(包括:文本标注和图片标注)、线(包括:折线)、面(包括:圆形、矩形以及多边形)三种类型,分别归属于对应的点、线、面图层。点线面对象拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。

地图API提供了如下几种点线面对象:

点线面对象说明
Marker标注表示地图上的点,分为文本标注和图片标注,您可以同时自定义标注的文本内容和图片内容,另外您也可以通过设置点表达来控制其样式,默认继承所属点线面图层的表达。
Polyline表示地图上的折线,您可以通过设置线表达来控制其样式,默认继承所属点线面图层的表达。
Polygon表示地图上的多边形。多边形类似于闭合的折线,另外您也可以通过设置面表达来控制其样式,默认继承所属点线面图层的表达。
Circle表示地图上的圆形,您也可以通过设置面表达来控制其样式,默认继承所属点线面图层的表达。
Rectangle表示地图上的矩形,您也可以通过设置面表达来控制其样式,默认继承所属点线面图层的表达。

地图API提供了如下三种表达样式类:

表达样式类说明
PointStyle点表达表示标注的表达样式,可控制标注的图片路径、选中图片路径、文本样式等等。
LineStyle线表达表示折线的表达样式,可控制折线的类型、粗细、颜色样式等等。
PolyStyle面表达表示圆形和多边形的表达样式,可控制圆形或多边形的填充颜色、透明度、边框粗细样式等等。

可以使用Careland.Map.addLayer()方法向地图添加点线面图层,使用Careland.Map.removeLayer()方法移除点线面图层;使用Careland.Layer.add()方法向点线面图层添加点线面对象,使用Careland.Layer.remove()方法移除点线面对象。

下面的示例向地图添加了一个点图层,并设置了默认表达。

var pointlayer = new Careland.Layer("point","mypointlayer1"); // 创建ID为mypointlayer1的点图层
pointlayer.setStyle(new Careland.PointStyle({ // 创建点表达样式
  src:"images/ico_1411.gif", // 正常状态图标
  borderSize:0, // 图标边框
  offsetX:-4,offsetY:-4, // 设置图片偏移
  selectedSrc:"images /ico_1201.gif" // 选中状态图标
}));
map.addLayer (pointlayer); // 将点图层添加到地图中

5.4 点标注

点标注表示地图上的点。API提供了点表达类来控制标注样式。Careland.Marker的构造函数的参数为type(类型,取值范围为:text和image,分别代表文本标注和图标标注)和id(标注唯一标识)。 注意:当您使用自定义图标时,标注的地理坐标点将位于标注所用图标的左上角位置,您可通过PointStyle的offsetX和offsetY属性修改标注位置。

下面的示例向地图中心点添加了一个标注,并使用点表达设置标注样式。

var point = new Careland.Point(410942332,81392068);
var marker = new Careland.Marker("image","mypoint1"); // 创建标注
var pointstyle = new Careland.PointStyle({ // 创建点表达样式
  src:"images/ico_1411.gif", // 正常状态图标
  borderSize:0, // 图标边框
  offsetX:-4,offsetY:-4, // 设置图片偏移
  selectedSrc:"images /ico_1201.gif" // 选中状态图标
});
marker.setStyle(pointstyle); // 赋点表达样式
marker.setPoint(point); // 赋坐标位置
pointlayer.add (marker); // 将标注添加到点图层中

标注添加后,在实际应用中你也可以动态修改它的属性。

如下示例将改变上例标注的位置。

var obj = pointlayer.getItemById("mypoint1"); //根据标注ID获取图层中的对象
var pointNew = new Careland.Point(410941332,81392068);
obj.setPoint(pointNew);

监听标注的事件,机制同地图事件一样。

如给标注添加单击事件:

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

5.5 折线

Careland.Polyline对象表示地图上的折线。它包含一组点,并将这些点连接起来形成折线。

折线在地图上绘制为一系列直线段。可以自定义这些线段的颜色和粗细。颜色可以是十六进制数字形式(比如:#ff0000)或者是颜色关键字(比如:red)。

以下代码段会在两点之间创建6像素宽的蓝色折线

var linelayer = new Careland.Layer("polyline","mypolylinelayer1"); // 创建线图层
linelayer.setStyle(new Careland.LineStyle({// 创建线表达样式
  color:"blue",// 线的颜色
  size:6,// 线的粗细
  type:"solid"// 线的类型(solid实线,dot虚线)
}));
var polyline = new Careland.Polyline("mypolyline1");// 创建折线
polyline.setPoints([// 赋坐标点
new Careland.Point(410842332,81398068),
new Careland.Point(410962332,81387068)
]);
linelayer.add(polyline);// 将折线添加到线图层中
map.addLayer (linelayer);// 将线图层添加到地图中

5.6 圆形

Careland.Circle对象表示地图上的圆形。它由一个矩形外框来确定圆形的形状,也支持中心点和半径来确定圆形。

以下代码段会绘制一个填充色为蓝色且边线为2像素的椭圆:

var polygonlayer = new Careland.Layer("polygon","mypolygonlayer1"); // 创建面图层
polygonlayer.setStyle(new Careland.PolyStyle({// 创建面表达样式
  fillColor:"#0000ff", // 填充色
  outlineColor: 2 //边线
}));
var circle = new Careland.Circle("mycircle1");// 创建圆形
circle.setRect(new Careland.Bounds(// 矩形外框确定一个圆形
  new Careland.Point(410002332,81392068),
  new Careland.Point(410802332,80392068)
));
polygonlayer.add(circle);// 将圆形添加到面图层中
map.addLayer (polygonlayer);// 将面图层添加到地图中

以下代码段会绘制一个填充色为红色且半透明的正圆:

var circle = new Careland.Circle("mycircle2");// 创建圆形
circle.setStyle(new Careland.PolyStyle({// 赋表达样式
  fillColor:"# ff0000",// 填充色
  opacity:50// 透明度
}));
// 绘制中心点为410002332,81392068,半径为1千米的圆
circle.setRect({center: new Careland.Point(410002332,81392068), radius:1000});
polygonlayer.add(circle);// 将圆形添加到面图层中

5.7 多边形

Careland.Polygon对象表示地图上的多边形。它包含一组点,并将这些点闭合连接起来形成多边形。

以下代码段会绘制一个填充色为蓝色的多边形(续用创建圆的面图层layer):

var polygon= new Careland.Polygon("mypoly1"); // 创建多边形
polygon.setPoints([ // 赋坐标点
  new Careland.Point(410002332,81392068),
  new Careland.Point(410802332,81392068),
  new Careland.Point(410802332,80392068),
  new Careland.Point(410202332,80792068),
  new Careland.Point(410002332,81392068)
]);
polygonlayer.add(polygon);// 将多边形添加到面图层中

5.8 矩形

Careland.Rectangle对象表示地图上的矩形。创建地图上的矩形是基于创建Careland.Bounds矩形区域的外边框上描述出来的。

下面示例创建一个地图上的矩形:

var p1=new Careland.Point(410648628,81435618); //左上角坐标
var p2=new Careland.Point(410884079,81365449); //右下角坐标
var bounds = new Careland.Bounds(p1, p2) //创建矩形区域
var rect1= new Careland.Rectangle ("myrect1"); // 创建矩形
rect1.setRect(bounds); //设置矩形的矩形边框
polygonlayer.add(rect1); // 将矩形添加到面图层中

  • Copyright©2012-2021 careland All Right Reserved
  • 深圳市凯立德科技股份有限公司 版权所有
  • 备案号: 粤ICP备05072496号-10