Mapv 添加自定义图形扇形

最新推荐文章于 2024-08-07 10:12:23 发布

早晨阳光一般暖

最新推荐文章于 2024-08-07 10:12:23 发布

阅读量910

点赞数

分类专栏： mapv map javascript

本文链接：https://blog.csdn.net/LZY_1993/article/details/106692032

版权

javascript 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

map

4 篇文章 0 订阅

订阅专栏

mapv

3 篇文章 1 订阅

订阅专栏

1、效果

2、修改源码

在 pathSimple 对象 draw 方法下 'Point' 里添加自定义 symbol类型

添加红框内的代码，给定自定义图形的类型名称，当前例子 “sector”
代码：

if (symbol === 'sector') {
    context.arc(coordinates[0], coordinates[1], size, 0, 60 * Math.PI / 180);
    context.lineTo(coordinates[0] - size * Math.cos(60 * Math.PI / 180), coordinates[1] - size * Math.sin(60 * Math.PI / 180));
    context.arc(coordinates[0], coordinates[1], size, 240 * Math.PI / 180, 300 * Math.PI / 180);
    context.lineTo(coordinates[0] - size * Math.cos(60 * Math.PI / 180), coordinates[1] + size * Math.sin(60 * Math.PI / 180));
    context.arc(coordinates[0], coordinates[1], size, 120 * Math.PI / 180, 180 * Math.PI / 180);
    context.lineTo(coordinates[0] + size, coordinates[1]);
}

3、如何使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>
    </title>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="map">
</div>
<canvas id="canvas"></canvas>
<script src="http://api.map.baidu.com/api?v=2.0&ak=?????" type="text/javascript"></script>
<script src="mapv.js" type="text/javascript"></script>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("map", {
        enableMapClick: false
    });    // 创建Map实例
    map.centerAndZoom(new BMap.Point(113.802075, 23.071224), 9);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放


    var randomCount = 10;
    var data = [];
    var citys = ["广州", "深圳", "佛山", "东莞", "中山"];

    // 构造数据
    while (randomCount--) {
        var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
        data.push({
            geometry: {
                type: 'Point',
                coordinates: [cityCenter.lng - 1 + Math.random() * 2, cityCenter.lat - 1 + Math.random() * 2]
            },
            count: 30 * Math.random()
        });
    }

    var dataSet = new mapv.DataSet(data);

    var options = {
        // unit: 'm',
        size: 30,
        symbol: 'sector', // 核心，自定义的类型就在这里配置
        fillStyle: 'rgba(0, 0, 0, 0)', // 填充颜色
        strokeStyle: 'red', // 描边颜色
        lineWidth: 2, // 描边宽度
        draw: 'simple',
        methods: {
            click: function (item) {
                console.log(item);
            }
        },
    };

    var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
</script>
</body>
</html>