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

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

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 !

相关文章
|
数据可视化 JavaScript 定位技术
地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果
地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果
625 0
|
定位技术
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
374 0
|
定位技术 API
高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
707 0
|
定位技术
高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
184 0
|
安全 定位技术 开发者
(可直接复制使用)vue2+高德地图poi搜索和高德组件,可以地图选点,经纬度,比例尺,卫星图,路网,路况等等
(可直接复制使用)vue2+高德地图poi搜索和高德组件,可以地图选点,经纬度,比例尺,卫星图,路网,路况等等
697 0
(可直接复制使用)vue2+高德地图poi搜索和高德组件,可以地图选点,经纬度,比例尺,卫星图,路网,路况等等
|
Web App开发 JSON 定位技术
|
定位技术 图形学
[Unity3d]自制圆形小地图
继续今天的学习心得,unity中小地图的制作,实现了小地图中红色小箭头代表场景中的主角,然后人物方向的转变,小地图中箭头也随之改变方向。 效果图                                                                                                                          右上角就是小地图,上面有个红色小箭头就是代表主角人物所在场景中的位置,箭头的方向就代表人物所面向的方向。
1619 0
|
JSON 前端开发 数据可视化
【前端搞地图】教你如何绘制一张填色专题地图
【前端搞地图】教你如何绘制一张填色专题地图
1639 0
【前端搞地图】教你如何绘制一张填色专题地图
|
定位技术
(十四)WebGIS中地图放大缩小的设计和实现
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/。 1.背景 在上一章中,我们给出了整个工具栏设计的核心,使用命令模式,并设计了具体工具类所继承的基类——Command类。
799 0
|
JSON 定位技术 API
百度地图高级开发:获取某范围半径圆形区域检索覆盖物内的所有标注的解决方案(1)
百度地图高级开发:获取某范围半径圆形区域检索覆盖物内的所有标注的解决方案(1)
348 0

热门文章

最新文章