let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
container: "map", // 容器id
scene: {
gridHelper: { visible: true } // 是否显示坐标网格
},
camera: { // 相机设置
viewHelper: { enable: true, position: "leftBottom" } // 是否显示视角指示器
},
control: { leftButtonPan: true } // 设置为左键用于平移 (同时右键将用于旋转) 和地图2d使用习惯一样
})
let image = await vjmap3d.loadImage(env.assetsPath + "image/imgbg2.png");
let elements = [];
// 增加image做为底图
elements.push(new vjmap3d.render2d.Image({
style: {
x: 0,
y: 0,
image: image,
width: 270, // 像素宽，这里是图片像素宽高定的
height: 250 // 像素高，这里是图片像素宽高定的
}
}))
elements.push(new vjmap3d.render2d.Text({
style: {
x: 138,
y: 100,
text: "VJMAP",
fill: "#0ff",
font: '50px Arial',
verticalAlign: "middle",
align: "center",
}
}))
// 做为2d绘图渲染材质使用
let renderTexture = vjmap3d.createRender2dTexture({
autoCanvasSize: false, // 是否根据绘制的内容计算渲染的大小
sharedCanvas: true, // 是否为了提高效率共享一个canvas（仅在 autoCanvasSize:true 且未设 canvasWidth 时生效，此处不起作用）
canvasWidth: 270, // 像素宽，这里是根据底图的像素宽高定的
canvasHeight: 250, // 像素高，这里是根据底图的像素宽高定的
elements: elements,
});
let geoW = 2, geoH = 2;
let geom = new THREE.PlaneGeometry(geoW, geoH);
let mat = new THREE.MeshStandardMaterial({
map: renderTexture.texture()
})
let mesh = new THREE.Mesh(geom, mat);
mesh.position.set(0, 1, 0);
app.scene.add(mesh);
// 通过`canvas`使用（注意：下面 group.add 会把 elements 从上面纹理的 Group 中移走——一个元素只能属于一个 Group，实际两处都用请分别创建元素）
let canvas = document.createElement("canvas");
canvas.width = 270;
canvas.height = 250;
let render = vjmap3d.render2d.init(canvas);
let group = new vjmap3d.render2d.Group();
render.add(group);
for(let n = 0; n < elements.length; n++) {
group.add(elements[n])
}
let marker = new vjmap3d.Marker2D({
element: canvas,
anchor: "bottom"
})
marker.setPosition(-5, 0, 3);
marker.addTo(app);
## 基本用法
以创建圆为例, 建了一个圆心在 [100, 200] 位置，半径为 10 像素的圆:
```js
let el = new render2d.Circle({
shape: {
cx: 100,
cy: 200,
r: 10
},
style: {
fill: 'none',
stroke: '#F00'
}
});
```
### 修改图形元素属性
使用 元素的 attr(key, value) 的形式修改，如
```js
let circle = new render2d.Circle({
shape: {
cx: 100,
cy: 200,
r: 10
}
});
circle.attr('shape', {
r: 50 // 只更新 半径为50。cx、cy 将保持不变。
});
```
### 图形、组添加
```js
//添加分组
var group = new render2d.Group();
//添加图形
var rect = new render2d.Rect({
shape:{
x:0,
y:0,
width:100,
height:100
}
});
group.add(rect)
```
### 支持图形
`render2d` 封装了常用的图形，可以直接通过new render2d.xxx({})调用；并且开放了自定义图形方法，通过 `render2d.Path.extend` 拓展自己需要的图形（注意大写 `Path`；小写的 `render2d.path` 是 SVG 路径工具模块）。
- [Arc](https://vjmap.com/map3d/api/classes/render2d.Arc.html) 实心圆、半圆
- [BezierCurve](https://vjmap.com/map3d/api/classes/render2d.BezierCurve.html) 贝塞尔曲线
- [Circle](https://vjmap.com/map3d/api/classes/render2d.Circle.html) 实心圆、圆环
- [Image](https://vjmap.com/map3d/api/classes/render2d.Image.html)图片
- [Isogon](https://vjmap.com/map3d/api/classes/render2d.Isogon.html)正多边形
- [Line](https://vjmap.com/map3d/api/classes/render2d.Line.html)直线
- [Polygon](https://vjmap.com/map3d/api/classes/render2d.Polygon.html)多边形区域
- [Polyline](https://vjmap.com/map3d/api/classes/render2d.Polyline.html)多折线
- [Rect](https://vjmap.com/map3d/api/classes/render2d.Rect.html)矩形
- [Sector](https://vjmap.com/map3d/api/classes/render2d.Sector.html)扇形、空心扇形
- [Text](https://vjmap.com/map3d/api/classes/render2d.Text.html)文字
- [Ellipse](https://vjmap.com/map3d/api/classes/render2d.Ellipse.html)椭圆
- [Isogon](https://vjmap.com/map3d/api/classes/render2d.Isogon.html)等角多边形
- [Rose](https://vjmap.com/map3d/api/classes/render2d.Rose.html)玫瑰状
- [Star](https://vjmap.com/map3d/api/classes/render2d.Star.html)星星状
- [Droplet](https://vjmap.com/map3d/api/classes/render2d.Droplet.html)水滴状
- [Heart](https://vjmap.com/map3d/api/classes/render2d.Heart.html)心状
- [Ring](https://vjmap.com/map3d/api/classes/render2d.Ring.html)圆环
- [Trochoid](https://vjmap.com/map3d/api/classes/render2d.Trochoid.html)内外旋轮曲线
## 自定义图形
通过继承自[path](https://vjmap.com/map3d/api/classes/render2d.Path-1.html)，实现自定义图形的绘制
```js
var triangleSelf = render2d.Path.extend({
type: 'triangleSelf',
shape: {
x: 0,
y: 0,
width: 0,
height: 0
},
buildPath: function (ctx, shape) {
var x = shape.x;
var y = shape.y;
var height = shape.height;
var width = shape.width;
ctx.moveTo(x,y);
ctx.lineTo(x+width/2,y+height);
ctx.lineTo(x-width/2,y+height);
ctx.closePath();
}
})
//使用
var sf = new triangleSelf({
shape: {
x: 200,
y: 0,
width: 100,
height: 100
}
})
```
## 事件
通过el.on()绑定事件，el.off()取消绑定事件；**group也可绑定事件，触发分组内具体对象才会触发**
- 支持事件
`'click'、 'dblclick'、 'mousedown'、 'mouseup'、 'mousemove'、 'mouseover'、 'mouseout'、 'mousewheel'、 'contextmenu'`，以及拖拽族 `'drag'、 'dragstart'、 'dragend'、 'dragenter'、 'dragleave'、 'dragover'、 'drop'`（被拖动的元素需设 `draggable: true`）
## 动画
动画主要分成两种`animate`和`animateTo`；`animate`可以监测动画执行，可以在during中控制其他相关联动和一些处理，并可以对某些属性设定循环
### animateTo
```js
el.animateTo(target, cfg)
```
`cfg` 为 `ElementAnimateConfig` 配置对象：
| 名称 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| target | Object | \-- | 要动画到的目标属性 |
| cfg.duration | number | 500 | 动画时长，单位毫秒 |
| cfg.delay | number | 0 | 动画延迟执行的时长，单位毫秒 |
| cfg.easing | string | 'linear' | 缓动函数名称，支持的名称参见缓动函数 |
| cfg.done | Function | \-- | 动画执行完成后的回调函数 |
| cfg.during | Function | \-- | 每帧回调 `(percent) => void` |
| cfg.aborted | Function | \-- | 动画被中止时的回调 |
| cfg.force | boolean | false | 对于相同的属性，是否强制执行 |
| cfg.additive | boolean | false | 是否使用叠加动画 |
> 注意：`animateTo` 第二参是**配置对象**（`{duration, delay, easing, done, ...}`），不是旧版的位置参数 `(target, time, delay, easing, callback)`。
```js
let el = new render2d.Circle({
shape: {
cx: 100,
cy: 200,
r: 10
},
style: {
fill: 'none',
stroke: '#F00'
}
});
el.animateTo({
shape: {
r: 50 // shape 的键须是该图形已有的键（Circle 为 cx/cy/r），写 width 对圆无效
},
style: {
fill: 'red'
},
position: [10, 10]
}, {
duration: 100,
delay: 100,
easing: 'cubicOut',
done: function () {
// done
}
});
```
### animate
```js
el.animate('style', false)
.when(1000, {x: 10})
.delay(100)
.done(function () {
// Animation done
})
.during(function(){
})
.start()
```
## 对象的销毁
离开页面或者组件不使用时及时销毁，节约内存开销
复制代码
```js
let render = vjmap3d.render2d.init(canvas);
//
render.dispose()
```
## API文档
### render2d.init(dom, opts)
得到一个 render2d 的实例。
#### 参数
| 名称 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| dom | `HTMLElement` | | render2d 容器，在调用该方法时，应该已有宽度和高度。 |
| opts | `Object` | | 配置项 |
| opts.renderer | `string` | `'canvas'` | 渲染方式，支持：`'canvas'`、`'svg'` |
| opts.devicePixelRatio | `number` | 见描述 | 画布大小与容器大小之比，仅当 `renderer` 为 `'canvas'` 时有效。`dom` 为 `