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

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

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月前
|
前端开发 JavaScript 算法
程序技术好文:高德地图经纬度坐标拾取工具
程序技术好文:高德地图经纬度坐标拾取工具
140 0
|
定位技术
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
313 0
|
前端开发 数据可视化 定位技术
百度地图开发:根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案
百度地图开发:根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案
415 0
百度地图开发:根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案
|
定位技术 API
高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
547 0
|
数据可视化 JavaScript 定位技术
地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果
地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果
547 0
|
定位技术
高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
147 0
|
JavaScript 前端开发 定位技术
地图开发实战案例:高德地图设置中心点和级别的行政区多边形加载效果
地图开发实战案例:高德地图设置中心点和级别的行政区多边形加载效果
149 0
|
JSON 定位技术 API
百度地图高级开发:获取某范围半径圆形区域检索覆盖物内的所有标注的解决方案(1)
百度地图高级开发:获取某范围半径圆形区域检索覆盖物内的所有标注的解决方案(1)
282 0
|
JSON 前端开发 数据可视化
Echarts实战案例代码(4):地图散点气泡图飞线(迁徙线)API接口前端处理数据的解决方案
Echarts实战案例代码(4):地图散点气泡图飞线(迁徙线)API接口前端处理数据的解决方案
311 0
|
安全 定位技术 开发者
(可直接复制使用)vue2+高德地图poi搜索和高德组件,可以地图选点,经纬度,比例尺,卫星图,路网,路况等等
(可直接复制使用)vue2+高德地图poi搜索和高德组件,可以地图选点,经纬度,比例尺,卫星图,路网,路况等等
568 0
(可直接复制使用)vue2+高德地图poi搜索和高德组件,可以地图选点,经纬度,比例尺,卫星图,路网,路况等等