天地图绘制图标和点击事件并绘制成面（二）

最新推荐文章于 2024-08-20 10:49:35 发布

小游-523

最新推荐文章于 2024-08-20 10:49:35 发布

阅读量1.3k

点赞数

分类专栏：天地图文章标签： javascript vue

本文链接：https://blog.csdn.net/weixin_49099187/article/details/121477152

版权

天地图专栏收录该内容

3 篇文章 1 订阅

订阅专栏

画点

/**
* 画点
*/
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)
}