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

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

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 !

相关文章
|
6月前
|
搜索推荐 数据可视化 BI
ECharts 蓝色系-荧光图标折线图01案例
ECharts 案例展示了一周内各路线数据的蓝色荧光折线图,揭示流量趋势。预览包括静态图片和动态GIF。使用ECharts 5.2.0配置图表,包含背景、网格、图例及数据。代码示例初始化图表、定义X轴类别和Y轴值,以及系列颜色。完整案例可在链接中下载。案例结合动态效果与个性化设计,增强数据可视化的吸引力。
70 0
ECharts 蓝色系-荧光图标折线图01案例
|
6月前
|
前端开发 JavaScript 算法
程序技术好文:高德地图经纬度坐标拾取工具
程序技术好文:高德地图经纬度坐标拾取工具
160 0
|
定位技术
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
327 0
|
定位技术 容器
高德地图进阶开发实战案例(10):地图选取起终点OD位置经纬度的驾车规划路线
高德地图进阶开发实战案例(10):地图选取起终点OD位置经纬度的驾车规划路线
144 0
|
前端开发 数据可视化 定位技术
百度地图开发:根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案
百度地图开发:根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案
438 0
百度地图开发:根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案
|
定位技术
高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
165 0
|
定位技术 API
高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
612 0
|
数据可视化 JavaScript 定位技术
地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果
地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果
580 0
|
JSON 定位技术 API
百度地图高级开发:获取某范围半径圆形区域检索覆盖物内的所有标注的解决方案(1)
百度地图高级开发:获取某范围半径圆形区域检索覆盖物内的所有标注的解决方案(1)
315 0
|
JavaScript 前端开发 定位技术
地图开发实战案例:高德地图设置中心点和级别的行政区多边形加载效果
地图开发实战案例:高德地图设置中心点和级别的行政区多边形加载效果
157 0

热门文章

最新文章