覆盖物

点 线 面 基础矢量数据的统称和抽象

关于洞的问题

• 按照 GIS 的定义，多边形的经纬为三维数组, 我们系统中也支持用二维数组作为 Polygon 经纬度，如果为二维数组我们默认了你给的多边形不存在洞的情况，标准的格式如下

 [
     [
         [],
         [],
         []
     ], //外环
     [
         [],
         [],
         []
     ], //洞
     [
         [],
         [],
         []
     ] //洞
     .......
 ]
 //比如:
const lnglats = [
    [
        [117.104554, 30.504444],
        [117.118974, 30.506219],
        [117.12893, 30.508586],
        [117.13305, 30.511248],
        [117.139917, 30.514501],
        [117.147126, 30.518642],
        [117.153993, 30.5216],
        [117.161546, 30.526036],
        [117.171502, 30.529289],
        [117.177339, 30.531655],
        [117.184892, 30.531063],
        [117.197595, 30.533133],
        [117.212014, 30.535499],
        [117.223001, 30.536682],
        [117.233987, 30.536977],
        [117.23845, 30.538456],
        [117.240854, 30.545848],
        [117.251153, 30.543778],
        [117.251497, 30.53816],
        [117.24875, 30.530767],
        [117.246347, 30.523965],
        [117.243943, 30.515684],
        [117.241197, 30.504149],
        [117.238107, 30.493795],
        [117.229524, 30.481073],
        [117.221971, 30.474268],
        [117.215104, 30.469533],
        [117.204461, 30.466574],
        [117.190728, 30.462727],
        [117.183862, 30.464207],
        [117.156739, 30.47456],
        [117.14644, 30.47841],
        [117.140603, 30.482257],
        [117.127214, 30.485215],
        [117.107988, 30.487878]
    ],
    [
        [117.162061, 30.49361],
        [117.167211, 30.49716],
        [117.172361, 30.50071],
        [117.177167, 30.505739],
        [117.184034, 30.512542],
        [117.18987, 30.522894],
        [117.2012, 30.525851],
        [117.210126, 30.527034],
        [117.219396, 30.526443],
        [117.225919, 30.527034],
        [117.234159, 30.529104],
        [117.237935, 30.528808],
        [117.235532, 30.522894],
        [117.234502, 30.516683],
        [117.232785, 30.507514],
        [117.226262, 30.491835],
        [117.217336, 30.480297],
        [117.202916, 30.4729],
        [117.194677, 30.470828],
        [117.184034, 30.473491],
        [117.177511, 30.47793],
        [117.170644, 30.484439],
        [117.167897, 30.489173]
    ]
];

more info

• 相关示例

动态更新样式配置

• 需要更新覆盖物的样式，可以访问 setStyle()方法
• 相关示例

复杂的图标

• 如果图标需要自定义，动态变化的图标，我们可以利用画布技术（Canvas)，来动态的绘制复杂的图标，然后序列化成 base64 作为点的图标使用
• 相关示例

html 模块做为点的图标

• 如果有时点的图标是 html 模块，可以是图表，动画，视频，表格等复杂的内容且不能用画布技术（Canvas)来解决的，我们可以用 Marker 来替代点
• 相关示例

var marker = new YY.Marker(
  [120, 31],
  '<div class="html-marker" id="echartsDiv" style="width:300px;height:300px;"> </div>',
  {
    pitchWithMap: true,
    rotateWithMap: true,
  }
);

marker.addTo(map);

setTimeout(() => {
  createChart(document.getElementById("echartsDiv"));
}, 1000);

// ECharts's chart creation
function createChart(dom) {
  var myChart = echarts.init(dom);
  var option = {
    title: {
      x: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      x: "center",
      y: "bottom",
      data: [
        "rose1",
        "rose2",
        "rose3",
        "rose4",
        "rose5",
        "rose6",
        "rose7",
        "rose8",
      ],
    },
    toolbox: {
      show: true,
      feature: {
        mark: {
          show: true,
        },
        dataView: {
          show: true,
          readOnly: false,
        },
        magicType: {
          show: true,
          type: ["pie", "funnel"],
        },
        restore: {
          show: true,
        },
        saveAsImage: {
          show: true,
        },
      },
    },
    calculable: true,
    series: [
      {
        name: "Area mode",
        type: "pie",
        radius: [30, 110],
        center: ["50%", "50%"],
        roseType: "area",
        data: [
          {
            value: 10,
            name: "rose1",
          },
          {
            value: 5,
            name: "rose2",
          },
          {
            value: 15,
            name: "rose3",
          },
          {
            value: 25,
            name: "rose4",
          },
          {
            value: 20,
            name: "rose5",
          },
          {
            value: 35,
            name: "rose6",
          },
          {
            value: 30,
            name: "rose7",
          },
          {
            value: 40,
            name: "rose8",
          },
        ],
      },
    ],
  };
  myChart.setOption(option);
}

样式采用渐变颜色

• 点，线，面我们都支持用渐变色来进行填充
• 相关示例
• 相关示例
• 相关示例

覆盖物层级调整

• 如果我们要调节覆盖物的层级（上下遮盖关系）, 可以访问 setZIndex()方法
• 相关示例

警告

注意覆盖物的层级和它所在的图层（VectorLayer）也有关系，如果其所在的图层 Zindex 小，即使你将覆盖物的 zindex 值设置的很大，其也不会再上面的， 所以同一个图层中，覆盖物的 zindex 越大，其只是在该图层的最上面，其是否在所有覆盖物的最上面还取决于其所在图层的 zindex 值

虚线

• 只需要在构造覆盖物的样式进行设置 lineDasharray

new YY.Polygon(lnglats[0], YY.Style.formatFill({
     polygonFill: 'red',
     lineDasharray: [10, 10]
})

• 相关示例