2022-05-14 高德地图 Loca2.0 PolygonLayer 学习

Loca2.0教程：https://lbs.amap.com/api/loca-v2/intro

PolygonLayer实例：https://lbs.amap.com/demo/loca-v2/demos/cat-pulselink/pulslink_bj

参考手册：https://lbs.amap.com/api/loca-v2/api#polygonlayer

核心代码：

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;
    }
});

更新图层样式，如果有的字段被缺省，那么它的值将会被重置为默认值。参数说明：options (PolygonStyle)

Name	Description
options.topColor `(String \| Function)` (default `'#fff'`)	面的顶面颜色
options.sideColor `(String \| Function)` (default `'#fff'`)	面的侧面颜色（已废弃）
options.sideTopColor `(String \| Function)` (default `'#fff'`)	面的侧面顶部的颜色
options.sideBottomColor `(String \| Function)` (default `'#fff'`)	面的侧面底部的颜色
options.altitude `(Number \| Function)` (default `0`)	海拔高度，也就是面的底面的高度。单位：米。支持动画过渡效果。
options.height `(Number \| Function)` (default `0`)	面的厚度。单位：米。支持动画过渡效果。
options.texture `(Canvas \| URL \| Image \| Base64)` (default `null`)	带有高度的时候，侧面的贴图纹理，目前仅支持侧面。如果需要纹理在侧面重复贴图，需要图片的宽高是 2 的 n 次方像素值。比如：256×256，64×1024
options.textureSize `([Number, Number] \| Function)` (default `[20,3]`)	一个纹理图片覆盖的大小，[宽度, 高度]，单位是米，默认是宽 20 米，高 3 米贴一张纹理，会重复贴图。

示例代码：

var map = new AMap.Map('map', {
    zoom: 5.29,
    // showLabel: false,
    viewMode: '3D',
    pitch: 48,
    center: [104.780269, 34.955403],
    mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
});

var loca = new Loca.Container({
    map,
});

// 呼吸点
var scatter = new Loca.ScatterLayer({
    loca,
    zIndex: 10,
    opacity: 0.6,
    visible: true,
    zooms: [2, 22],
});

var pointGeo = new Loca.GeoJSONSource({
    url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/pulselink-china-city-point.json',
});
scatter.setSource(pointGeo);
scatter.setStyle({
    unit: 'meter',
    size: [100000, 100000],
    borderWidth: 0,
    texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png',
    duration: 2000,
    animate: true,
});
loca.add(scatter);

// 弧线
var pulseLink = new Loca.PulseLinkLayer({
    // loca,
    zIndex: 10,
    opacity: 1,
    visible: true,
    zooms: [2, 22],
    depth: true,
});

var geo = new Loca.GeoJSONSource({
    url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json',
});

pulseLink.setSource(geo);
pulseLink.setStyle({
    unit: 'meter',
    dash: [40000, 0, 40000, 0],
    lineWidth: function () {
        return [20000, 1000];
    },
    height: function (index, feat) {
        return feat.distance / 3 + 10;
    },
    // altitude: 1000,
    smoothSteps: 30,
    speed: function (index, prop) {
        return 1000 + Math.random() * 200000;
    },
    flowLength: 100000,
    lineColors: function (index, feat) {
        return ['rgb(255,228,105)', 'rgb(255,164,105)', 'rgba(1, 34, 249,1)'];
    },
    maxHeightScale: 0.3, // 弧顶位置比例
    headColor: 'rgba(255, 255, 0, 1)',
    trailColor: 'rgba(255, 255,0,0)',
});
loca.add(pulseLink);
loca.animate.start();


// 点击事件处理
var clickInfo = new AMap.Marker({
    anchor: 'bottom-center',
    position: [116.396923, 39.918203, 0],
});
clickInfo.setMap(map);
clickInfo.hide();
map.on("click", function (e) {
    var feat = pulseLink.queryFeature(e.pixel.toArray());

    if (feat) {
        clickInfo.show();
        var props = feat.properties;
        clickInfo.setPosition(feat.coordinates[1]);
        clickInfo.setContent(
            '<div style="text-align: center; height: 20px; width: 150px; color:#fff; font-size: 14px;">' +
            '速率: ' + feat.properties['ratio'] +
            '</div>'
        );
    } else {
        clickInfo.hide();
    }
});

var dat = new Loca.Dat();
dat.addLayer(pulseLink);

pointGeo样例：

var pointGeo={
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "type": 0,
                "ratio": 0.0369,
                "lineWidthRatio": 1
            },
            "geometry": {
                "type": "Point",
                "coordinates": [115.482331, 38.867657]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "type": 1,
                "ratio": 0.035,
                "lineWidthRatio": 0.9447674418604651
            },
            "geometry": {
                "type": "Point",
                "coordinates": [117.190182, 39.125596]
            }
        }]}

geo代码格式：

var geo={
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "type": 0,
        "ratio": 0.0369,
        "lineWidthRatio": 1
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            116.405285,
            39.904989
          ],
          [
            115.482331,
            38.867657
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "type": 1,
        "ratio": 0.035,
        "lineWidthRatio": 0.9447674418604651
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            116.405285,
            39.904989
          ],
          [
            117.190182,
            39.125596
          ]
        ]
      }
    }]}

页面效果实例：

http://www.merot-sve.xyz/publicHtml/AmapStudy/20220513/PolygonLayer/yq20220513PolygonLayer.html

2022-05-14 高德地图 Loca2.0 PolygonLayer 学习

2条评论

回复 Merlot_Sve 取消回复