Loca 的核心控制类，可以控制光源、视角变换、图层渲染等。

// 创建地图
var map = new AMap.Map('map', {
    showLabel: false,
    viewMode: '3D',
    pitch: 50,
    zoom: 12, //初始化地图层级
    center: [121.496534, 31.243335] //初始化地图中心点
});
// 创建loca
var loca = new Loca.Container({
    map: map,
});

// 设置光源（老版用法），已废弃，不推荐使用
loca.ambLight = {...};
loca.dirLight = {...};
loca.pointLight = {...};

// 设置光源（推荐用法），支持添加多个光源
// 环境光
new Loca.AmbientLight({
  intensity: 0.8, // 环境光强度，建议值: 0～1
  color: '#fff', // 环境光颜色
}, loca);
// 平行光
new Loca.DirectionalLight({
  intensity: 0.5, // 光照强度，建议值: 0～1
  color: 'rgb(255,255,255)', // 平行光颜色
  target: [0, 0, 0], // 光射向的目标位置
  position: [0, -1, 1], // 坐标位置
}, loca);
// 点光
new Loca.PointLight({
  color: 'rgb(255,255,255)', // 点光颜色
  position: [121.50741577148439, 31.236288641793006, 1000], // 点光的位置
  intensity: 4, // 光照强度
  // 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
  distance: 10000,
}, loca);

// 创建各种图层
todo: ...

// 帧的启动和停止代表地图在每一帧是否会触发渲染，如果你想拥有图层动画、镜头动画等动画效果，需要启动帧。
// 它会占用一部分 GPU 资源，但是一般来说可以忽略不计。
// 启动帧
loca.animate.start();
// 暂停帧
loca.animate.pause();
// 停止帧
loca.animate.stop();

环境光，对于可以接受光照的图层（PolygonLayer 等）会增加环境光的影响。环境光只能有一个，多余的会被忽略。

const ambLight = new Loca.AmbientLight({
  intensity: 0.8, // 环境光强度，建议值: 0～1
  color: '#fff', // 环境光颜色
});
// 通过 loca.addLight 添加环境光（环境光只能有一个，多余的会被忽略）
loca.addLight(ambLight)
// 通过 loca.removeLight 移除环境光
loca.removeLight(ambLight)

平行光，对于可以接受光照的图层（PolygonLayer 等）会增加平行光的影响。平行光一般用来模拟太阳的光照。 它的方向由 position 射向 target。position和target的坐标是一个位置加 z 值（单位米）高度决定。比如: [1, 1, 1000] 代表x:1, y:1, 高度1000米。 如果模拟一个从正南方向的平行光，可以设置target: [0,0,0], position: [0,-1,0]

const dirLight = new Loca.DirectionalLight({
  intensity: 0.5, // 光照强度，建议值: 0～1
  color: 'rgb(255,255,255)', // 平行光颜色
  target: [0, 0, 0], // 光射向的目标位置
  position: [0, -1, 1], // 坐标位置
});
// 通过 loca.addLight 添加平行光
loca.addLight(dirLight)
// 通过 loca.removeLight 移除平行光
loca.removeLight(dirLight)

点光，对于可以接受光照的图层（PolygonLayer 等）会增加点光的影响。点光源通常用来突出展示场景中的某些物体。 它的位置和平行光不太一样，x和y是地图上的经纬度位置，z是高度米，比如北京上空一万米的位置放一个点光源：position: [116.39079, 39.90624, 10000]。 光照的distance代表光能照射的最远距离是多少。

const pointLight = new Loca.PointLight({
  color: 'rgb(255,255,255)', // 点光颜色
  position: [121.50741577148439, 31.236288641793006, 1000], // 点光的位置
  intensity: 4, // 光照强度
  // 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
  distance: 10000,
});
// 通过 loca.addLight 添加点光
loca.addLight(pointLight)
// 通过 loca.removeLight 移除点光
loca.removeLight(pointLight)

视角控制器。不需要使用者主动创建。它的实例和 loca 一起初始化，会在 loca.viewControl 属性上挂载，如果使用的话，请直接使用 loca 实例上的 viewControl 属性。

loca.viewControl.addAnimates({}, () => {
    // 动画结束后的回调，可以继续添加下一个动画转场
    loca.viewControl.addAnimates(...)
});

loca.viewControl.addAnimates([{
    // 地图中心点动画
    center: {
        value: [106, 28], // 动画终点的经纬度
        control: [[113, 45.5], [107, 36.5]], // 过渡中的轨迹控制点，地图上的经纬度
        timing: [0.42, 0, 0.4, 1], // 动画时间控制点
        duration: 2000, // 过渡时间，毫秒（ms）
    },
    // 俯仰角动画
    pitch: {
        value: 40, // 动画终点的俯仰角度
        control: [[0.3, 25], [0.4, 40]], // 控制器，x是0～1的起始区间，y是pitch值
        timing: [0, 0, 1, 1], // 这个值是线性过渡
        duration: 2000,
    },
    // 缩放等级动画
    zoom: {
        value: 5.8, // 动画终点的地图缩放等级
        control: [[0.4, 5.7], [0.6, 5.7]], // 控制器，x是0～1的起始区间，y是zoom值
        timing: [0.42, 0, 0.4, 1],
        duration: 2000,
    },
    // 旋转动画
    rotation: {
        value: 30, // 动画终点的地图旋转角度
        control: [[0.4, 10], [0.6, 40]], // 控制器，x是0～1的起始区间，y是rotation值
        timing: [0.42, 0, 0.4, 1],
        duration: 2000,
    }
}], () => {
    // 动画执行结束
});

loca.viewControl.addTrackAnimate({
    duration: 2000, // 完成时间，毫秒
    timing: [[0, 0], [1, 1]], // 动画速度控制器，使用贝塞尔曲线控制 [详细请看](https://cubic-bezier.com)
    path: [[lng, lat], [lng, lat], [lng, lat]...],
    rotationSpeed: 90, // 在拐弯处每秒旋转多少度
}, function() {
    // 动画完成的回调函数
});

loca.viewControl.clearAnimates();

loca.viewControl.pauseAnimate();

loca.viewControl.resumeAnimate();

geojson 格式的数据源，一个数据源可以给多个图层同时提供数据。一个geojson数据源可以同时拥有点、线、面的数据类型，每个图层绘制的时候会自动获取 合适的数据类型进行渲染。 关于 geojson 格式的数据说明可以访问：https://geojson.org/ 查看。

var geoSource = new Loca.GeoJSONSource({
    // data: {// geojson 对象},
    url: './example.geojson',
})

protocol-buffers(PBF) 格式的数据源，能够大幅压缩数据体积，有效减少数据传输时间。

目前仅支持基于 mapbox/geobuf 的 GeoJSON PBF 实现。

var geoSource = new Loca.GeoBufferSource({
    // data: ArrayBuffer,
    url: './example.pbf',
 })

基础图例，可以表达颜色和数值或者种类的映射关系。

var lengend = new Loca.Legend({
    loca: loca,
    title: {
        label: '图例',
        fontColor: '#fff',
        fontSize: '20px',
        fontWeight: 'bold',
        padding: '0 0 5px 0',
        margin: 0,
    },
    style: {
        backgroundColor: 'rgba(0,0,0,0.7)',
        fontSize: '14px',
        size: '16px',
        fontColor: '#fff',
        borderRadius: 0,
        position: 'absolute',
        left: '20px',
        bottom: '20px',
        padding: '10px 15px',
    },
    dataMap: [
        { label: '第一个', color: '#feedde' },
        { label: '第二个', color: '#fdbe85' },
        { label: '第三个', color: '#fd8d3c' },
        { label: '第四个', color: '#e6550d' },
        { label: '第五个', color: '#a63603' },
    ],
});

基础图层类，是一个抽象类，是其他图层的基础。有通用的方法和参数。

l.addAnimate({
    key: 'height', // 动画的属性 key
    value: [0, 1], // 动画的过渡值，范围是[0~1]之间，1 代表真实设定的值。
    duration: 2000, // 动画时长，单位毫秒
    easing: 'CircularOut', // 动画过渡函数，详情请看：https://redmed.github.io/chito/example/easing.html
    // startAt: 0, // 一个动画 duration 中，从哪个时间开始动画
    // yoyo: false, // 是否开启来回摆动
    // repeat: 1, // 动画重复次数，如果开启 yoyo 模式，那么 repeat 必须大于 1
    // random: true, // 是否开启随机执行动画，如果开启，图层中每个要素的动画开始的时间将随机延时，适合每个数据不同时间出现的效果
    // delay: 5000, // 随机动画延迟的时间段，每个要素的随机延迟将会在 delay 时间段内取值，单位毫秒，random为 true 时生效
    // transform: 1000, // 随机动画的动画执行时间，单位毫秒，random为 true 时生效
}, function(){});

圆点图层，拥有描边的原点，可以支持边缘模糊特效。 支持对每个圆点的半径、颜色、描边信息单独设置。

var layer = new Loca.PointLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    blend: 'lighter',  // 叠加高亮
})

layer.setStyle({
    radius: 20,
    blurWidth: 10,
});

图标图层

var layer = new Loca.IconLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
})

layer.setStyle({
    icon: 'https://a.amap.com/test_cms/static/kwt/yinhang3.png',
    iconSize: [20, 20],
    rotation: 90,
    opacity: 0.8,
    unit: 'px', // 像素单位
    offset: [10, 10], // 向右上方偏移 10 像素
});

标注图层，使用Loca数据源渲染JSAPI的标注图层（AMap.LabelsLayer）

var layer = new Loca.LabelsLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 120,
    visible: true,
    collision: true,
    allowCollision: true,
})

layer.setStyle({
    text: {
        content: (index, feat) => feat.properties.name,
    },
});

棱柱图层，使用点类型数据表达带有高度的立体棱柱，使用高度、颜色、半径等样式表达点数据的不同维度属性信息。支持动画、光照效果。

var layer = new Loca.PrismLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    acceptLight: true,
    visible: true,
})

layer.setStyle({
    radius: 20,
    sideNumber: 4,
    sideBottomColor: function(){
        return 'rgba(255,255,0,0.5)';
    },
    // 文字标注配置
    label: {
        text: {
          content: (index, feat) => feat.properties.name
        }
    },
});

垂直于大地表面的 Marker 图层，支持传入自定义 DOM 进行绘制。你可以使用它展示一些 和数据相关的文字、图片信息，而且它还支持永远朝向屏幕的特性，非常适合对文字类信息的展示。

var layer = new Loca.ZMarkerLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
})

layer.setStyle({
    content: function(index, feat) {
        return '<div><p style="color: #0ff; font-size: 30px;">' + feat.properties.name + '</p></div>'
    },
    size: [20, 20],
    rotation: 90,
    unit: 'px', // 像素单位
    alwaysFront: true, // 总是面向屏幕
    autitude: 100, // 海拔高度
});

线图层，支持设置描边和虚线。

var lineLayer = new Loca.LineLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    opacity: 1,
});

lineLayer.setStyle({
    // 除了 color 属性，其他的缺省属性将恢复默认值。
    color: 'rgba(255,255,255,0.7)',
});

链接线图层

var linkLayer = new Loca.LinkLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    opacity: 1,
})

linkLayer.setStyle({
    // 除了 color 属性，其他的缺省属性将恢复默认值。
    color: 'rgba(255,255,255,0.7)',
});

面图层，支持多边形、复杂多边形、带洞多边形的绘制。支持底面海拔高度和面的厚度效果。 并且还支持对每个多边形设置不同的个性化样式，而且性能依然很好。 我们还对重复设置图层样式进行了性能优化，保证在某些频繁切换面样式的情况下依然流畅。 当你的希望你的面有透明度效果，并且面和面直接有高度的压盖关系时，我们对渲染效果进行了优化。 能让你看到清晰的透明面！ 注意：在侧面进行贴图的时候，如果你希望图片在侧面进行重复贴图，那么必须要求贴图纹理的宽高大小一定是 2 的 n 次方。 例如：256x512、1024x1024 等

var polygonLayer = new Loca.PolygonLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    opacity: 1,
    cullface: 'back',
    acceptLight: true,
    shininess: 30,
    hasSide: true,
    depth: true,
})

polygonLayer.setStyle({
    // 除了下面设置的属性，其他的缺省属性将恢复默认值。
    topColor: 'rgba(255,255,255,0.7)',
    texture: './building.png',
    textureSize: [100, 50],
    height: function(index, data) {
        return data.properties.height;
    },
    // 文字标注配置
    label: {
        text: {
          content: (index, feat) => feat.properties.name
        }
    },
});

热力图，支持 3D 和不同颜色设置的聚合点数据显示。并且支持像素单位和米单位的热力聚合。 针对部分业务场景，还能够支持颜色边缘的模糊过渡和硬过渡效果。详细查看 difference 属性。

var heatmapLayer = new Loca.HeatMapLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    opacity: 1,
})

heatmapLayer.setStyle({
    // 除了 gradient 属性，其他的缺省属性将恢复默认值。
    gradient: {
         0.5: 'blue',
         0.65: 'rgb(117,211,248)',
         0.7: 'rgb(0, 255, 0)',
         0.9: '#ffea00',
         1.0: 'red',
     },
     opacity: [0, 1],
     unit: 'meter',
     height: 9000,
     radius: 5000,
     difference: false,
});

蜂窝网格图，将普通的点数据按照蜂窝网格划分成若干区域，每个蜂窝网格区域都会包含落在此区域内的点数据信息。 每个蜂窝网格格子支持单独设置自定义的高度信息、颜色信息。 要注意的是：我们认为所有蜂窝网格格子必须是唯一的大小（radius）和间隙（gap）。 我们还在带有高度的蜂窝网格中加入了可接受光照信息的属性：acceptLight。假如设置了光照并在图层中开启接受光照， 那么每个立体蜂窝网格将会有光照反射的效果。

var hexagonLayer = new Loca.HexagonLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    opacity: 1,
    cullface: 'back',
    acceptLight: true,
    depth: true,
    shininess: 30,
    hasSide: true,
})

hexagonLayer.setStyle({
    // 除了 topColor 属性，其他的缺省属性将恢复默认值。
    topColor: 'rgba(255,255,255,0.7)',
     // 文字标注配置
    label: {
        text: {
          content: (index, feat) => feat.properties.name
        }
    },
});

网格图，将普通的点数据按照网格划分成若干区域，每个网格区域都会包含落在此区域内的点数据信息。 每个网格格子支持单独设置自定义的高度信息、颜色信息。 要注意的是：我们认为所有网格格子必须是唯一的大小（radius）和间隙（gap）。 我们还在带有高度的网格中加入了可接受光照信息的属性：acceptLight。假如设置了光照并在图层中开启接受光照， 那么每个立体网格将会有光照反射的效果。

var gridLayer = new Loca.GridLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    opacity: 1,
    cullface: 'back',
    acceptLight: true,
    depth: true,
    shininess: 30,
    hasSide: true,
})

gridLayer.setStyle({
    // 除了 topColor 属性，其他的缺省属性将恢复默认值。
    topColor: 'rgba(255,255,255,0.7)',
    // 文字标注配置
    label: {
        text: {
          content: (index, feat) => feat.properties.name
        }
    },
});

大地面上的点，可展示三种类型：颜色圆、图标、动画图标

var scatter = new Loca.ScatterLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    opacity: 1,
});

scatter.setStyle({
    // 除了 color 属性，其他的缺省属性将恢复默认值。
    color: 'rgba(255,255,255,0.7)',
});

轨迹线图层，支持设置轨迹样式和轨迹点。

layer.setStyle({
   lineWidth: 2,
   headColor: '#A635DB',
   trailColor: '#7F3CFF',
   interval: 0.5,
   duration: 2000
})

连接飞线图层，可以支持弧度，宽度，过渡色等能力。 并且还支持脉冲动画，可以表达数据的朝向。

var linkLayer = new Loca.PulseLinkLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    opacity: 1,
    depth: true,
})

pulseLinkLayer.setStyle({
    unit: 'px',
    lineColors: 'rgba(255,255,255,0.7)',
    maxHeightScale: 0.5,
    speed: function(index, prop){
       return index * 10;
    }
});

激光图层，支持展示点类型数据的激光放射效果。

layer.setStyle({
   unit: 'px',
   height: 100,
   color: '#7F3CFF',
   lineWidth: 3,
   angle: 45,
   trailLength: 50,
   duration: 2000,
   interval: 0,
   delay: 1000,
   repeat: 3
})