yuruke

yuruke 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

yuruke 提出了问题 · 7月20日

vuex数据没有更新,watch却监听到了的原因会是什么?

vue中使用vuex将数据保存在store中,computed 属性取数据,store.commit 方法提交数据,watch监听数据变化时执行方法。问题是没有提交数据的情况下,watch能监听到数据变化,原因是什么呢?

关注 3 回答 1

yuruke 发布了文章 · 7月1日

mapboxgl区划标签避让不遮盖实现

mapboxgl区划标签避让不遮盖实现

test.gif

mapboxgl地图区划标签采用Marker实现导致密集区域会相互遮盖

new mapboxgl.Marker(el)
        .setLngLat([dataTemp.lon,dataTemp.lat])
        .addTo(map);

经过查阅资料后决定采用Source cluster方式解决,clusterRadius可以根据地图缩放自动聚合检测,聚合半径可设置
1、首先添加一个addSource

    map.addSource(sourceId, {
      "type": "geojson",
      "data": {
          "type": "FeatureCollection",
          "features": _this.formatData(datas,map) 
      },
      "cluster": true,
      "clusterRadius": 35 // 聚合半径
    });

2、添加区划标签图层

    map.addLayer({//添加区划标签图层
      'id': layerId,
      'type': 'symbol',
      'source': sourceId,
      'layout': {
        'visibility': 'visible',
        'text-field': ['get', 'regionname'],
        'text-font': ['Helvetica Neue', 'Arial', 'Helvetica', 'sans-serif'],
        'text-offset': [0, 0],
        'text-anchor': 'top',
        'text-size':14,
      },
      'paint':{
        'text-color':'#000000',
        
      }
    });

3、鼠标经过区划文字弹出小窗口展示信息,此处采用Popup方便后期扩展

    map.on('mouseenter', layerId, function(e) {
      let markerData = e.features[0].properties;
      _this.clearMarker(map);//先清除上次的弹窗
      _this.addMarker(markerData,map);//打开本次区划弹窗
    });
addMarker(){
    let className = 'region-selected-marker-box region-selected-marker-box-';
    let html = "自定义现实内容";
    var popup = new mapboxgl.Popup({
      offset: [20,5], 
      className: className,
      anchor:'left',
      closeButton:false
    })
      .setLngLat([lon,lat])
      .setHTML(html)
      .setMaxWidth("300px")
      .addTo(map);
 }

到此,地区区划标签主动避让就已经实现了,此种方式的优势是不需要重复计算,利用地图cluster属性即可实现,clusterRadius可以设置聚合半径

查看原文

赞 0 收藏 0 评论 0

yuruke 回答了问题 · 6月30日

如何实现网页端地图录屏?

如果不考虑有Iframe的情况,只录制自己实现的地图,由于地图生成的是canvas元素,这个对象本身不会返回什么,也是不能实现获取信息,导致不能录制canvas元素

关注 2 回答 2

yuruke 提出了问题 · 5月21日

如何实现网页端地图录屏?

如何实现网页web端录屏,包括带有地图的录制,iframe的录制,地图的操作都能录制下来的那种?
image.png

关注 2 回答 2

yuruke 关注了专栏 · 2019-11-02

前端进阶

前端进阶

关注 7835

yuruke 关注了用户 · 2019-11-02

日拱一兵 @tanrigongyibing

欢迎关注,公众号「日拱一兵」,以读侦探小说思维趣味轻松学习Java技术

送你《1000G 免费精选技术学习资料》(2020 年最新)
https://mp.weixin.qq.com/s/9p...

关注 19391

yuruke 关注了专栏 · 2019-11-02

LeanCloud 官方专栏

LeanCloud(原 AVOS Cloud) 是针对移动应用的一站式云端服务,专注于为应用开发者提供工具和平台。提供包括LeanStorage 数据存储、LeanMessage 通信服务、LeanAnalytics 统计分析、LeanModules 拓展模块等四大类型的后端云服务,加速应用开发。

关注 5001

yuruke 关注了专栏 · 2019-11-02

SegmentFault 行业快讯

第一时间为开发者提供行业相关的实时热点资讯

关注 24184

yuruke 关注了专栏 · 2019-11-02

JowayYoung谈前端

谢谢曾经努力的自己,欢迎关注公众号『 IQ前端 』,一个专注于CSS/JS开发技巧的前端公众号,更多前端小干货等着你喔

关注 4056

yuruke 关注了标签 · 2019-11-02

javascript

JavaScript 是一门弱类型的动态脚本语言,支持多种编程范式,包括面向对象和函数式编程,被广泛用于 Web 开发。

一般来说,完整的JavaScript包括以下几个部分:

  • ECMAScript,描述了该语言的语法和基本对象
  • 文档对象模型(DOM),描述处理网页内容的方法和接口
  • 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口

它的基本特点如下:

  • 是一种解释性脚本语言(代码不进行预编译)。
  • 主要用来向HTML页面添加交互行为。
  • 可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务:

  • 嵌入动态文本于HTML页面
  • 对浏览器事件作出响应
  • 读写HTML元素
  • 在数据被提交到服务器之前验证数据
  • 检测访客的浏览器信息

《 Javascript 优点在整个语言中占多大比例?

关注 132832

认证与成就

  • 获得 0 次点赞
  • 获得 12 枚徽章 获得 0 枚金徽章, 获得 3 枚银徽章, 获得 9 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-01-15
个人主页被 172 人浏览