地图开发实战案例:高德地图弧线连接线标注

简介: 地图开发实战案例:高德地图弧线连接线标注

HTML代码

<div id="container"></div>
<script src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值&"></script>
<script src="//webapi.amap.com/loca?v=1.3.2&key=您申请的key值"></script>
<script src="//a.amap.com/Loca/static/dist/jquery.min.js"></script>


javascript代码

 var map = new AMap.Map('container', {
        mapStyle: 'amap://styles/1de318cbb8d12c02303a22c550b9ccc9',
        features: ['bg', 'road'],
        center: [116.40866,39.87596],
        zoom: 11,
        pitch: 66,
        rotation: 45,
        viewMode: '3D'
    });
    var layer = new Loca.LinkLayer({
        map: map,
        fitView: false,
    });
   var d=[{"lnglat":[["116.309712","40.066607"],["116.286219","40.048605"]],"dis":1550}];
  //标注
  for (var i=0;i<2;i++){
     var marker = new AMap.Marker({
            position: d[0].lnglat[i],
            map: map
        })
  }
        layer.setData(d, {
            lnglat: 'lnglat'
        });
        layer.setOptions({
            blendMode: 'lighter',
            style: {
                // 曲率 [-1, 1] 区间
                curveness: function(data) {
                  if(data.value.dis < 100){
                    return 0.07;
                  } else if(data.value.dis < 300){
                    return 0.05;
                  } else if(data.value.dis < 500){
                    return 0.02;
                  }  else if(data.value.dis < 700){
                    return 0.01;
                  } else {
                    return 0.005;
                  }
                },
                opacity: 0.8,
                color: '#5DFBF9'
            }
        });
        layer.render();


Done !

相关文章
|
5天前
|
存储 弹性计算 人工智能
2026年阿里云ECS云服务器部署OpenClaw(Clawdbot)保姆级教程:零基础上手,全程复制可用
2026年,OpenClaw(原Clawdbot、Moltbot)凭借“自然语言驱动+自动化执行+插件化扩展”的核心优势,成为开源AI智能体赛道的标杆项目,GitHub星标数突破18万+,吸引了无数零基础用户和企业团队尝试部署使用。但对新手而言,“云服务器部署”始终是一道门槛——不懂ECS配置、不会终端命令、害怕环境调试出错,导致很多人望而却步。
205 1
162Echarts - 桑基图(Sankey Diagram)
162Echarts - 桑基图(Sankey Diagram)
263 0
|
前端开发
css 实现 title的效果,并且自己写修改类似title样式
css 实现 title的效果,并且自己写修改类似title样式
css 实现 title的效果,并且自己写修改类似title样式
|
移动开发 编解码 Linux
EasyPlayer.js直播与回放功能视频开发实战过程记录
EasyPlayer.js直播与回放功能视频开发实战过程记录
1549 0
项目打包报错“caniuse-lite is outdated. Please run next command `npm update`”的解决方案
项目打包报错“caniuse-lite is outdated. Please run next command `npm update`”的解决方案
1175 1
|
6月前
|
文字识别 自然语言处理 物联网
Qwen‑Image 如何实现 95 %+ 多语种文本渲染准确率
摘要:依托跨语种海量高质量数据、20 B 参数的双通道 MMDiT 架构,以及由浅入深的课程式多任务训练策略,Qwen‑Image 将开源扩散模型在文字渲染上的字符准确率提升到 95 %以上,并保持段落级排版一致性。下文将从数据、模型、训练、评测四个维度拆解这一结果的技术原理,并给出快速复现与未来展望。
415 0
|
存储 算法 C++
【C++数据结构——查找】顺序查找(头歌实践教学平台习题)【合集】
若查找的关键字k=5,则SeqSearch函数输出是3,6,2,10,1,8,5,并返回值7。若查找的关键字为k=15,则函数输出是3,6,2,10,1,8,5,7,4,9,并返回值0。假设顺序表中R的关键字依次是3,6,2,10,1,8,5,7,4,9,(第一行是输入的一组原始关键字数据,第二行是要查找的关键字)顺序查找算法中要依次输出与k所比较的关键字,用空格分隔开。本关任务:实现顺序查找的算法。开始你的任务吧,祝你成功!
464 8
|
存储 弹性计算 网络安全
搭建基于OSS的图片分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个图片分享网站。
|
定位技术
GIS空间分析 网络分析2规划最佳路径
在本文中,你将学习到ArcGIS中 网络分析2规划最佳路径的详细过程
340 0
|
存储 关系型数据库 数据库
SQLite 与 PostgreSQL:详细比较
【8月更文挑战第13天】
1538 4