天地图绘制图标和点击事件并绘制成面(二)

画点

/**
* 画点
*/
drawMarker (markerOptions) {
      let markerLngLat = new T.LngLat(markerOptions.lng, markerOptions.lat) // 标注的经纬度
      let size = this.defaultConfig.markerSize
      let uniqueCode = new Date().valueOf()
      let icon = new T.Icon({ // 创建图片对象
        iconUrl: require('../../assets/images/nenghaolei.png'),
        iconSize: new T.Point(size, size),
        iconAnchor: new T.Point(size / 2, size),
        uniqueCode: uniqueCode
      })
      let marker = new T.Marker(markerLngLat, { icon: icon })
      this.map.addOverLay(marker)
      this.addClickHandler(markerOptions, marker)
}

效果如下
在这里插入图片描述

icon的点击事件

addClickHandler (data, marker) {
      let self = this
      marker.addEventListener('click', function (e) {
        self.handleInfoWin(data, e)
      })
},
/**
*点击icon
*/
clickIcon (data, e) {
}

绘制成面

drawArea () {
	let style = {
        color: 'rgb(0, 255, 244)',
        weight: 0,
        opacity: 0,
        lineStyle : 'dashed', // 虚线
        fillColor : 'rgb(0, 255, 244)',
        fillOpacity : 0.5 // 透明度
      }
      let points = []
      content.marker.forEach(item => {
        var point = new T.LngLat(item.lng, item.lat)
        points.push(point)
      })
      var poly = new T.Polygon(points, style2)
      this.map.addOverLay(poly)
}

效果如下
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在Canvas中绘制图标上绑定点击事件,你需要考虑以下几个步骤: 1. 获取鼠标点击的坐标。 2. 遍历绘制图标,判断点击坐标是否在图标范围内。 3. 如果点击坐标在某个图标范围内,则触发相应的点击事件。 下面是一个简单的示例代码,演示了如何在Canvas中绘制图标上绑定点击事件: ```javascript // 获取Canvas元素 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // 存储图标信息的数组 var icons = [ { x: 50, y: 50, width: 50, height: 50 }, // 第一个图标的位置和尺寸 { x: 100, y: 100, width: 50, height: 50 }, // 第图标的位置和尺寸 // ...添加更多的图标信息 ]; // 绑定点击事件处理函数 canvas.addEventListener('click', function(event) { var mouseX = event.clientX - canvas.offsetLeft; var mouseY = event.clientY - canvas.offsetTop; // 遍历图标数组,判断点击坐标是否在图标范围内 for (var i = 0; i < icons.length; i++) { var icon = icons[i]; if ( mouseX >= icon.x && mouseX <= icon.x + icon.width && mouseY >= icon.y && mouseY <= icon.y + icon.height ) { // 在此处触发相应的点击事件 console.log('点击了图标' + i); break; } } }); ``` 在上述代码中,首先定义了一个存储图标信息的数组`icons`,其中每个图标都包含了其位置和尺寸信息。然后,通过`addEventListener()`方法绑定了Canvas的点击事件处理函数。在点击事件处理函数中,获取鼠标点击的坐标,并遍历图标数组,判断点击坐标是否在某个图标范围内。如果是,则可以在相应位置触发你需要的点击事件。 请注意,上述示例代码假设Canvas元素没有发生缩放或其他变换。如果Canvas元素有缩放、平移或旋转等变换操作,你需要对点击坐标进行相应的转换以匹配变换后的图标位置。 希望这个示例能帮助到你在Canvas中绘制图标上绑定点击事件

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值