Mapv API ✍

Mapv API ✍

简介

DC-Mapv 是 DC-SDK 与百度 Mapv 融合的产品。主要用于在 3D 场景中展现大数据。

开始

<script src="libs/dc-sdk/dc.core.min.js"></script>
<script src="***/dc.mapv.min.js"></script>
<script src="libs/dc-sdk/plugins/dc.plugins.js"></script>
<link href="libs/dc-sdk/dc.core.min.css" />

:::danger JS 包的导入顺序不能随便， dc.core > dc.mapv > dc.plugins > DC.core :::

DC.MapvDataSet

example

let geoCoordMap = {
  上海: [121.4648, 31.2891],
  东莞: [113.8953, 22.901],
  东营: [118.7073, 37.5513],
  中山: [113.4229, 22.478],
  临汾: [111.4783, 36.1615]
}
let data = []
for (let key in geoCoordMap) {
  let geoCoord = geoCoordMap[key]
  data.push({
    geometry: {
      type: 'Point',
      coordinates: [
        geoCoord[0] - 2 + Math.random() * 4,
        geoCoord[1] - 2 + Math.random() * 4
      ]
    },
    count: 30 * Math.random()
  })
}
let dataset = new DC.MapvDataSet(data)

creation

constructor(data)

DC.MapvDataSet 构造函数
- 参数
  - {Array<Object>} data：数据数组，详情参考：DataSet
- 返回值：dataset

// 数据说明
{
  "geometry": {
    "type": "Point", // 类别，有：Point、Polygon、LineString
    "coordinates": [123, 23] // 坐标，线和面是二位数组
  },
  "count": 30, // 用于阈值计算
  "time": 100 * Math.random() // 步长 用于动画
}

DC.MapvLayer

数据可视化图层，继承于Layer

example

let options = {
  fillStyle: 'rgba(55, 50, 250, 0.8)',
  shadowColor: 'rgba(255, 250, 50, 1)',
  shadowBlur: 20,
  size: 40,
  globalAlpha: 0.5,
  label: {
    show: true,
    fillStyle: 'white'
  },
  animation: {
    type: 'time',
    stepsRange: {
      start: 0,
      end: 100
    },
    trails: 10,
    duration: 4
  },
  gradient: {
    0.25: 'rgb(0,0,255)',
    0.55: 'rgb(0,255,0)',
    0.85: 'yellow',
    1.0: 'rgb(255,0,0)'
  },
  draw: 'grid'
}
let layer = new DC.MapvLayer('layer', options)
viewer.addLayer(layer)

creation

constructor(id,options)

DC.MapvLayer 构造函数
- 参数
  - {Stiring} id：图层唯一标识
  - {Object} options：属性
- 返回值：mapvLayer

// 属性参数（可选）
{
  "fillStyle": "rgba(55, 50, 250, 0.8)", //颜色
  "shadowColor": "rgba(255, 250, 50, 1)", // 阴影颜色
  "shadowBlur": 20, // 阴影扩散
  "size": 40, // 点大小
  "globalAlpha": 0.5, //
  "globalCompositeOperation": "lighter",
  "label": {
    "show": true,
    "fillStyle": "white"
  }, // 文字
  "animation": {
    "type": "time",
    "stepsRange": {
      "start": 0,
      "end": 100
    },
    "trails": 10,
    "duration": 4
  }, //动画
  "lineWidth": 0.7, // 线宽
  "lineDash": [15], // 虚线
  "gradient": {
    0.25: "rgb(0,0,255)",
    0.55: "rgb(0,255,0)",
    0.85: "yellow",
    1.0: "rgb(255,0,0)"
  }, //渐变
  "draw": "grid" //展现方式 有：simple：简单、intensity：强度、honeycomb：蜂巢、grid：格子等
}

示例