# MapV

mapgis-3d-mapv-layer

# 属性

# geojson

  • 类型: Object
  • 侦听属性
  • 描述: 必填项,标准的 geojson 地理数据结构。

# options

  • 类型: Object

  • 默认值: { mapboxgl: { roam: true }, series: [{ coordinateSystem: 'mapboxgl', type: 'lines' }] }

  • 侦听属性

  • 描述: options 参数参考 Mapv 框架的原生 API 创建。

  • 默认值:

    var options = {
      context: "2d",
      draw: "heatmap",
    };
    

    # countField

  • 类型: String

  • 非侦听属性

  • 默认值: "count"

  • 描述: countField 是 geojson 对象中的 count 属性的属性名称,若不传入 countField,则默认 geojson 对象中 count 属性名称为“count”。

# 示例

<template>
  <mapgis-web-scene>
    <mapgis-3d-arcgis-tile-layer
      :baseUrl="url"
      :layer-style="layerStyle"
      :srs="srs"
    />
    <mapgis-3d-mapv v-bind="$props"></mapgis-3d-mapv>
  </mapgis-web-scene>
</template>
<script>
import {
  MapgisWebScene,
  Mapgis3dArcgisTileLayer,
  Mapgis3dMapvLayer,
} from "@mapgis/webclient-vue-cesium";
import { BaseServer } from "@mapgis/webclient-es6-service";

export default {
  components: {
    MapgisWebScene,
    Mapgis3dArcgisTileLayer,
    Mapgis3dMapvLayer,
    BaseServer,
  },
  data() {
    return {
      url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
      layerStyle: {
        visible: true,
        opacity: 1,
        zIndex: 2,
      },
      srs: "EPSG:4326",
      options: {
        context: "2d",
        fillStyle: "rgba(55, 50, 250, 0.8)",
        size: 40,
        globalAlpha: 0.5,
        label: {
          show: true,
          fillStyle: "white",
          shadowColor: "yellow",
          font: "15px Arial",
          shadowBlur: 10,
        },
        gradient: {
          0: "rgba(49, 54, 149, 0)",
          0.2: "rgba(69,117,180, 0.7)",
          0.3: "rgba(116,173,209, 0.7)",
          0.4: "rgba(171,217,233, 0.7)",
          0.5: "rgba(224,243,248, 0.7)",
          0.6: "rgba(254,224,144,0.7)",
          0.7: "rgba(253,174,97,0.7)",
          0.8: "rgba(244,109,67,0.8)",
          0.9: "rgba(215,48,39,0.8)",
          0.95: "rgba(165, 0, 38,0.8)",
        },
        shadowColor: "rgba(255, 255, 50, 1)",
        shadowBlur: 10,
        max: 100,
        draw: "grid",
      },
      geojson: {},
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.geojson = {};
      let randomCount = 500;
      let data = [];
      while (randomCount--) {
        data.push({
          geometry: {
            type: "Point",
            coordinates: [75 + Math.random() * 50, 20.3 + Math.random() * 20],
          },
          properties: {
            count: 30 * Math.random(),
          },
        });
      }
      this.geojson = {
        features: data,
      };
    },
  },
};
</script>
<style lang="css">
.main {
  height: 600px;
  width: 100%;
}
</style>