maptalks+VUE 开发（2）-- 绘制多边形

一、效果图

二、使用步骤

1.引入

参照上篇文章

2.创建VectorLayer（渲染层）

代码如下（示例）：

var setStyle = []; // 用来set对应的图形颜色
var layer = new maptalks.VectorLayer("vector")
        .setStyle({
          filter: ["count"], // 参数字段名称，用于下方判断
          symbol: [
            {
              polygonFill: "#1bbc9b",// 图形覆盖颜色
              polygonOpacity: 0.5, // 图形覆盖区域透明度
              lineColor: "#000", // 线条颜色
              lineWidth: 2 // 线条宽度
            },
            {
              textName: "{count}",
              textSize: 40, // 字体大小
              textFill: "#fff" // 字体颜色
            }
          ]
        })
        .addTo(map);
        // 测试数据
        var all_areajson = [
        	{
		        data: [
		        	[120.67934355867, 31.3537775835051],
		        	[120.679495369867, 31.3532514762139],
		        	[120.679496834969, 31.3532515220261],
		        	[120.67952933559, 31.3531392797016],
		        	[120.679608108988, 31.3528642432155],
		        	[120.67934355867, 31.3537775835051]
		        ],
		        id: '1',
		        color: 'red'
	        },
	        {
		        data: [
		        	[120.784488349758, 31.3342529178723],
		        	[120.763580202957, 31.3320079394387],
		        	[120.761154448772, 31.3453159193853],
		        	[120.760231291861, 31.3503794500738],
		        	[120.760542777815, 31.3504675004089],
		        	[120.784488349758, 31.3342529178723]
		        ],
		        id: '2',
		        color: 'blue'
	        },
        ];
        for (let i = 0; i < all_areajson.length; i++) {
         setStyle.push({
          // filter：第一个参数用来判断对应的值，第二个对应上方参数名称，第三个判断相应的值；展示相应的文本内容和颜色
          filter: ["==","count",all_areajson[i].id],
          symbol: [
            {
              polygonFill: all_areajson[i].color, // 显示对应图形的颜色
              polygonOpacity: 0.1,
              lineColor: all_areajson[i].color,
              lineWidth: 3
            },
            // 用来显示对应图形的文本内容，不显示可删除
            {
              textName: "{count}",
              textSize: 20,
              textFill: "#fff"
            }
          ]
        });
         var data = all_areajson[i].data;
         for (let j = 0; j < data.length; j++) {
         	var polygon = new maptalks.Polygon(data[j], {
              properties: {
                count: all_areajson[i].id
              }
            }).addTo(layer);
         }
        }
layer.setStyle(setStyle);