实现弧度飞线图层需要 地图JS API 和 LOCA数据可视化API 组合实现.

概述-地图 JS API v2.0 | 高德地图API (amap.com)

概述-LOCA 数据可视化 API 2.0|高德地图API (amap.com)

我刚开始引入这个图层进行使用的时候,因为粗心没有细看 LOCA的手册导致一直报错,这里给大家说一下原因:

因为这个弧度飞线图层的演示代码里面引入 api 的方式不同,导致我一时不知道怎么引入,后来仔细看了 LOCA 的示例手册明白.

北京人口流出飞线-弧度飞线图层-示例详情-Loca API 2.0 | 高德地图API (amap.com)

接下来就是完整代码详解:

<template><div id="map" style="width: 100%;height: 100%;"></div>
</template><script setup>
import AMapLoader from '@amap/amap-jsapi-loader';function initMap() {window._AMapSecurityConfig = {securityJsCode: '8e920f73eb2e6880a92ea6662eefc476',}AMapLoader.load({key:"e4e3d44a98350790a1493450032bbec5", // 申请好的Web端开发者Key,首次调用 load 时必填/** 刚开始没有引入下面代码时,会报错: Loca is not defined*  Loca: {version: '2.0.0' // Loca 版本,缺省 1.3.2},而且 JSAPI的version(版本)要和Loca的version(版本)一致才可以,否则也会报错不懂的可以去看官方文档: https://lbs.amap.com/api/loca-v2/intro* */version:"2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15Loca: {version: '2.0.0' // Loca 版本,缺省 1.3.2},plugins:[], // 需要使用的的插件列表,如比例尺'AMap.Scale'等}).then((AMap) => {const map = new AMap.Map("map", {resizeEnable: true, // 是否监控地图容器尺寸变化viewMode: '3D',pitch: 48,// 地图俯仰角度,有效范围 0 度- 83 度center:[104.780269, 34.955403], // 地图中心点zoom:5, // 地图显示的缩放级别mapStyle:"amap://styles/grey", // 设置地图的显示样式});// Container: Loca 的核心控制类,可以控制光源、视角变换、图层渲染等。var loca = new Loca.Container({ // 创建一个容器map, // 传入地图实例 还可以这样写: map: map (ES6语法)});// 呼吸点// ScatterLayer: 带有动画效果的图层类型,用于展示散点数据,支持动画效果,如呼吸点、闪烁点等。大地面上的点,可展示三种类型:颜色圆、图标、动画图标var scatter = new Loca.ScatterLayer({ // 创建一个散点图层loca, // 传入容器实例 (相当于把散点图层添加到地图上)zIndex: 10, // 图层层级opacity: 0.6, // 图层透明度visible: true, // 图层是否可见zooms: [2, 22], // 图层显示的缩放级别范围});/** geojson 格式的数据源,一个数据源可以给多个图层同时提供数据。一个geojson数据源可以同时拥有点、线、面的数据类型,每个图层绘制的时候会自动获取 合适的数据类型进行渲染* */var pointGeo = new Loca.GeoJSONSource({ // 创建一个 GeoJSON 对象url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/pulselink-china-city-point.json', // 数据源的链接地址,一般是接口地址,返回的数据必须是 geojson 格式});scatter.setSource(pointGeo); // 给上面创建的散点图层设置数据源scatter.setStyle({ // 设置样式unit: 'meter', // 设置单位为米size: [100000, 100000], // 设置大小范围borderWidth: 0, // 设置边框宽度texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png', // 设置纹理duration: 2000, // 设置动画时长animate: true, // 设置动画});loca.add(scatter); // 将散点图层(scatter)添加到容器中// 弧线// PulseLinkLayer: 连接飞线图层,可以支持弧度,宽度,过渡色等能力。 并且还支持脉冲动画,可以表达数据的朝向var pulseLink = new Loca.PulseLinkLayer({ // 创建一个弧线图层// loca,zIndex: 10, // 设置图层的层级opacity: 1, // 设置图层的透明度visible: true, // 设置图层是否可见zooms: [2, 22], // 设置图层可见的缩放级别范围depth: true, // 设置是否开启深度检测});// GeoJSONSource: 图层的数据源,可以是本地数据,也可以是远程数据,数据格式必须是 geojson 格式var geo = new Loca.GeoJSONSource({ // 创建一个 GeoJSON 对象url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json', // 数据源的链接地址,一般是接口地址,返回的数据必须是 geojson 格式});pulseLink.setSource(geo); // 给上面的弧线图层设置数据源pulseLink.setStyle({ // 设置样式unit: 'meter', // 设置单位为米dash: [40000, 0, 40000, 0], // 设置虚线样式lineWidth: function () { // 设置线宽return [20000, 1000]; // 设置线宽范围},height: function (index, feat) { // 设置高度return feat.distance / 3 + 10; // 设置高度范围},altitude: 1000, // 设置高度smoothSteps: 30, // 设置平滑度speed: function (index, prop) { // 设置速度return 1000 + Math.random() * 200000; // 设置速度范围},flowLength: 100000, // 设置流动长度lineColors: function (index, feat) { // 设置线颜色return ['rgb(255,228,105)', 'rgb(255,164,105)', 'rgba(1, 34, 249,1)']; // 设置线颜色范围},maxHeightScale: 0.3, // 弧顶位置比例headColor: 'rgba(255, 255, 0, 1)', // 设置头部颜色trailColor: 'rgba(255, 255,0,0)', // 设置尾部颜色});loca.add(pulseLink); // 将图层添加到容器中loca.animate.start(); // 开始动画// 点击事件处理var clickInfo = new AMap.Marker({ // 点标记anchor: 'bottom-center', // 设置点标记锚点,可选值:'top-left','top-center','top-right'等详细请看官方文档: https://lbs.amap.com/api/jsapi-v2/documentation#markerposition: [116.396923, 39.918203, 0], // 点标记在地图上显示的位置});clickInfo.setMap(map); // 将点标记添加到地图上clickInfo.hide(); // 隐藏点标记map.on("click", function (e) {var feat = pulseLink.queryFeature(e.pixel.toArray());if (feat) {clickInfo.show();var props = feat.properties;clickInfo.setPosition(feat.coordinates[1]);clickInfo.setContent('<div style="text-align: center; height: 20px; width: 150px; color:#fff; font-size: 14px;">' +'速率: ' + feat.properties['ratio'] +'</div>');} else {clickInfo.hide();}});/*以下为:样式调试工具,仅用于开发阶段方便调试样式可以将可视化图层添加到调试工具中使用请勿在生产环境中使用* *//*var dat = new Loca.Dat(); // 创建一个 Dat 对象dat.addLayer(pulseLink); // 将图层添加到 Dat 对象中*/});
}
initMap();</script>

其中 https://a.amap.com/Loca/static/loca-v2/demos/mock_data/pulselink-china-city-point.json 的数据:

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"type": 0,"ratio": 0.0369,"lineWidthRatio": 1},"geometry": {"type": "Point","coordinates": [115.482331,38.867657]}},{"type": "Feature","properties": {"type": 1,"ratio": 0.035,"lineWidthRatio": 0.9447674418604651},"geometry": {"type": "Point","coordinates": [117.190182,39.125596]}},{"type": "Feature","properties": {"type": 2,"ratio": 0.0189,"lineWidthRatio": 0.47674418604651164},"geometry": {"type": "Point","coordinates": [121.472644,31.231706]}},{"type": "Feature","properties": {"type": 3,"ratio": 0.0167,"lineWidthRatio": 0.41279069767441856},"geometry": {"type": "Point","coordinates": [113.280637,23.125178]}},{"type": "Feature","properties": {"type": 4,"ratio": 0.0148,"lineWidthRatio": 0.35755813953488375},"geometry": {"type": "Point","coordinates": [106.504962,29.533155]}},{"type": "Feature","properties": {"type": 5,"ratio": 0.0147,"lineWidthRatio": 0.35465116279069764},"geometry": {"type": "Point","coordinates": [114.884091,40.811901]}},{"type": "Feature","properties": {"type": 6,"ratio": 0.0137,"lineWidthRatio": 0.32558139534883723},"geometry": {"type": "Point","coordinates": [113.746262,23.046237]}},{"type": "Feature","properties": {"type": 7,"ratio": 0.0136,"lineWidthRatio": 0.3226744186046511},"geometry": {"type": "Point","coordinates": [104.065735,30.659462]}},{"type": "Feature","properties": {"type": 0,"ratio": 0.0134,"lineWidthRatio": 0.3168604651162791},"geometry": {"type": "Point","coordinates": [114.502461,38.045474]}},{"type": "Feature","properties": {"type": 1,"ratio": 0.0116,"lineWidthRatio": 0.2645348837209302},"geometry": {"type": "Point","coordinates": [118.175393,39.635113]}},{"type": "Feature","properties": {"type": 2,"ratio": 0.011,"lineWidthRatio": 0.24709302325581392},"geometry": {"type": "Point","coordinates": [118.767413,32.041544]}},{"type": "Feature","properties": {"type": 3,"ratio": 0.0108,"lineWidthRatio": 0.24127906976744187},"geometry": {"type": "Point","coordinates": [120.153576,30.287459]}},{"type": "Feature","properties": {"type": 4,"ratio": 0.0101,"lineWidthRatio": 0.2209302325581395},"geometry": {"type": "Point","coordinates": [116.857461,38.310582]}},{"type": "Feature","properties": {"type": 5,"ratio": 0.0097,"lineWidthRatio": 0.20930232558139533},"geometry": {"type": "Point","coordinates": [117.939152,40.976204]}},{"type": "Feature","properties": {"type": 6,"ratio": 0.0087,"lineWidthRatio": 0.18023255813953484},"geometry": {"type": "Point","coordinates": [114.490686,36.612273]}},{"type": "Feature","properties": {"type": 7,"ratio": 0.0081,"lineWidthRatio": 0.1627906976744186},"geometry": {"type": "Point","coordinates": [113.665412,34.757975]}},{"type": "Feature","properties": {"type": 0,"ratio": 0.008,"lineWidthRatio": 0.15988372093023254},"geometry": {"type": "Point","coordinates": [114.085947,22.547]}},{"type": "Feature","properties": {"type": 1,"ratio": 0.0077,"lineWidthRatio": 0.1511627906976744},"geometry": {"type": "Point","coordinates": [120.619585,31.299379]}},{"type": "Feature","properties": {"type": 2,"ratio": 0.0074,"lineWidthRatio": 0.14244186046511628},"geometry": {"type": "Point","coordinates": [108.948024,34.263161]}},{"type": "Feature","properties": {"type": 3,"ratio": 0.0074,"lineWidthRatio": 0.14244186046511628},"geometry": {"type": "Point","coordinates": [117.000923,36.675807]}},{"type": "Feature","properties": {"type": 4,"ratio": 0.0071,"lineWidthRatio": 0.13372093023255813},"geometry": {"type": "Point","coordinates": [114.508851,37.0682]}},{"type": "Feature","properties": {"type": 5,"ratio": 0.0063,"lineWidthRatio": 0.11046511627906977},"geometry": {"type": "Point","coordinates": [115.665993,37.735097]}},{"type": "Feature","properties": {"type": 6,"ratio": 0.006,"lineWidthRatio": 0.10174418604651163},"geometry": {"type": "Point","coordinates": [120.355173,36.082982]}},{"type": "Feature","properties": {"type": 7,"ratio": 0.0055,"lineWidthRatio": 0.08720930232558138},"geometry": {"type": "Point","coordinates": [116.307428,37.453968]}},{"type": "Feature","properties": {"type": 0,"ratio": 0.0055,"lineWidthRatio": 0.08720930232558138},"geometry": {"type": "Point","coordinates": [112.982279,28.19409]}},{"type": "Feature","properties": {"type": 1,"ratio": 0.0054,"lineWidthRatio": 0.08430232558139536},"geometry": {"type": "Point","coordinates": [115.469381,35.246531]}},{"type": "Feature","properties": {"type": 2,"ratio": 0.0053,"lineWidthRatio": 0.08139534883720931},"geometry": {"type": "Point","coordinates": [119.107078,36.70925]}},{"type": "Feature","properties": {"type": 3,"ratio": 0.0051,"lineWidthRatio": 0.07558139534883722},"geometry": {"type": "Point","coordinates": [123.429096,41.796767]}},{"type": "Feature","properties": {"type": 4,"ratio": 0.0049,"lineWidthRatio": 0.06976744186046512},"geometry": {"type": "Point","coordinates": [117.184811,34.261792]}},{"type": "Feature","properties": {"type": 5,"ratio": 0.0049,"lineWidthRatio": 0.06976744186046512},"geometry": {"type": "Point","coordinates": [112.549248,37.857014]}},{"type": "Feature","properties": {"type": 6,"ratio": 0.0048,"lineWidthRatio": 0.06686046511627905},"geometry": {"type": "Point","coordinates": [113.122717,23.028762]}},{"type": "Feature","properties": {"type": 7,"ratio": 0.0048,"lineWidthRatio": 0.06686046511627905},"geometry": {"type": "Point","coordinates": [112.540918,32.999082]}},{"type": "Feature","properties": {"type": 0,"ratio": 0.0048,"lineWidthRatio": 0.06686046511627905},"geometry": {"type": "Point","coordinates": [114.649653,33.620357]}},{"type": "Feature","properties": {"type": 1,"ratio": 0.0047,"lineWidthRatio": 0.06395348837209303},"geometry": {"type": "Point","coordinates": [118.326443,35.065282]}},{"type": "Feature","properties": {"type": 2,"ratio": 0.0047,"lineWidthRatio": 0.06395348837209303},"geometry": {"type": "Point","coordinates": [120.301663,31.574729]}},{"type": "Feature","properties": {"type": 3,"ratio": 0.0047,"lineWidthRatio": 0.06395348837209303},"geometry": {"type": "Point","coordinates": [117.283042,31.86119]}},{"type": "Feature","properties": {"type": 4,"ratio": 0.0046,"lineWidthRatio": 0.061046511627906974},"geometry": {"type": "Point","coordinates": [119.586579,39.942531]}},{"type": "Feature","properties": {"type": 5,"ratio": 0.0044,"lineWidthRatio": 0.05523255813953489},"geometry": {"type": "Point","coordinates": [112.434468,34.663041]}},{"type": "Feature","properties": {"type": 6,"ratio": 0.0044,"lineWidthRatio": 0.05523255813953489},"geometry": {"type": "Point","coordinates": [115.980367,36.456013]}},{"type": "Feature","properties": {"type": 7,"ratio": 0.0044,"lineWidthRatio": 0.05523255813953489},"geometry": {"type": "Point","coordinates": [126.642464,45.756967]}},{"type": "Feature","properties": {"type": 0,"ratio": 0.0044,"lineWidthRatio": 0.05523255813953489},"geometry": {"type": "Point","coordinates": [121.549792,29.868388]}},{"type": "Feature","properties": {"type": 1,"ratio": 0.0043,"lineWidthRatio": 0.05232558139534883},"geometry": {"type": "Point","coordinates": [113.883991,35.302616]}},{"type": "Feature","properties": {"type": 2,"ratio": 0.0043,"lineWidthRatio": 0.05232558139534883},"geometry": {"type": "Point","coordinates": [113.295259,40.09031]}},{"type": "Feature","properties": {"type": 3,"ratio": 0.0042,"lineWidthRatio": 0.04941860465116278},"geometry": {"type": "Point","coordinates": [102.712251,25.040609]}},{"type": "Feature","properties": {"type": 4,"ratio": 0.0042,"lineWidthRatio": 0.04941860465116278},"geometry": {"type": "Point","coordinates": [116.587245,35.415393]}},{"type": "Feature","properties": {"type": 5,"ratio": 0.0041,"lineWidthRatio": 0.04651162790697675},"geometry": {"type": "Point","coordinates": [114.352482,36.103442]}},{"type": "Feature","properties": {"type": 6,"ratio": 0.004,"lineWidthRatio": 0.0436046511627907},"geometry": {"type": "Point","coordinates": [114.075031,32.123274]}},{"type": "Feature","properties": {"type": 7,"ratio": 0.004,"lineWidthRatio": 0.0436046511627907},"geometry": {"type": "Point","coordinates": [114.024736,32.980169]}},{"type": "Feature","properties": {"type": 0,"ratio": 0.004,"lineWidthRatio": 0.0436046511627907},"geometry": {"type": "Point","coordinates": [114.298572,30.584355]}},{"type": "Feature","properties": {"type": 1,"ratio": 0.0039,"lineWidthRatio": 0.04069767441860465},"geometry": {"type": "Point","coordinates": [115.650497,34.437054]}},{"type": "Feature","properties": {"type": 2,"ratio": 0.0039,"lineWidthRatio": 0.04069767441860465},"geometry": {"type": "Point","coordinates": [114.940278,25.85097]}},{"type": "Feature","properties": {"type": 3,"ratio": 0.0038,"lineWidthRatio": 0.0377906976744186},"geometry": {"type": "Point","coordinates": [125.3245,43.886841]}},{"type": "Feature","properties": {"type": 4,"ratio": 0.0037,"lineWidthRatio": 0.034883720930232565},"geometry": {"type": "Point","coordinates": [111.670801,40.818311]}},{"type": "Feature","properties": {"type": 5,"ratio": 0.0036,"lineWidthRatio": 0.031976744186046506},"geometry": {"type": "Point","coordinates": [115.819729,32.896969]}},{"type": "Feature","properties": {"type": 6,"ratio": 0.0035,"lineWidthRatio": 0.029069767441860465},"geometry": {"type": "Point","coordinates": [111.517973,36.08415]}},{"type": "Feature","properties": {"type": 7,"ratio": 0.0035,"lineWidthRatio": 0.029069767441860465},"geometry": {"type": "Point","coordinates": [120.864608,32.016212]}},{"type": "Feature","properties": {"type": 0,"ratio": 0.0035,"lineWidthRatio": 0.029069767441860465},"geometry": {"type": "Point","coordinates": [118.956806,42.275317]}},{"type": "Feature","properties": {"type": 1,"ratio": 0.0035,"lineWidthRatio": 0.029069767441860465},"geometry": {"type": "Point","coordinates": [112.736465,37.696495]}},{"type": "Feature","properties": {"type": 2,"ratio": 0.0034,"lineWidthRatio": 0.026162790697674413},"geometry": {"type": "Point","coordinates": [111.003957,35.022778]}},{"type": "Feature","properties": {"type": 3,"ratio": 0.0033,"lineWidthRatio": 0.023255813953488372},"geometry": {"type": "Point","coordinates": [118.016974,37.383542]}},{"type": "Feature","properties": {"type": 4,"ratio": 0.0033,"lineWidthRatio": 0.023255813953488372},"geometry": {"type": "Point","coordinates": [121.391382,37.539297]}},{"type": "Feature","properties": {"type": 5,"ratio": 0.0033,"lineWidthRatio": 0.023255813953488372},"geometry": {"type": "Point","coordinates": [113.114543,41.034126]}},{"type": "Feature","properties": {"type": 6,"ratio": 0.0033,"lineWidthRatio": 0.023255813953488372},"geometry": {"type": "Point","coordinates": [119.649506,29.089524]}},{"type": "Feature","properties": {"type": 7,"ratio": 0.0033,"lineWidthRatio": 0.023255813953488372},"geometry": {"type": "Point","coordinates": [106.713478,26.578343]}},{"type": "Feature","properties": {"type": 0,"ratio": 0.0032,"lineWidthRatio": 0.020348837209302327},"geometry": {"type": "Point","coordinates": [115.892151,28.676493]}},{"type": "Feature","properties": {"type": 1,"ratio": 0.0032,"lineWidthRatio": 0.020348837209302327},"geometry": {"type": "Point","coordinates": [108.705117,34.333439]}},{"type": "Feature","properties": {"type": 2,"ratio": 0.0032,"lineWidthRatio": 0.020348837209302327},"geometry": {"type": "Point","coordinates": [114.879365,30.447711]}},{"type": "Feature","properties": {"type": 3,"ratio": 0.0032,"lineWidthRatio": 0.020348837209302327},"geometry": {"type": "Point","coordinates": [109.99029,39.817179]}},{"type": "Feature","properties": {"type": 4,"ratio": 0.0032,"lineWidthRatio": 0.020348837209302327},"geometry": {"type": "Point","coordinates": [120.672111,28.000575]}},{"type": "Feature","properties": {"type": 5,"ratio": 0.0031,"lineWidthRatio": 0.017441860465116275},"geometry": {"type": "Point","coordinates": [108.320004,22.82402]}},{"type": "Feature","properties": {"type": 6,"ratio": 0.0031,"lineWidthRatio": 0.017441860465116275},"geometry": {"type": "Point","coordinates": [117.129063,36.194968]}},{"type": "Feature","properties": {"type": 7,"ratio": 0.0031,"lineWidthRatio": 0.017441860465116275},"geometry": {"type": "Point","coordinates": [120.139998,33.377631]}},{"type": "Feature","properties": {"type": 0,"ratio": 0.0031,"lineWidthRatio": 0.017441860465116275},"geometry": {"type": "Point","coordinates": [120.856394,40.755572]}},{"type": "Feature","properties": {"type": 1,"ratio": 0.0031,"lineWidthRatio": 0.017441860465116275},"geometry": {"type": "Point","coordinates": [114.412599,23.079404]}},{"type": "Feature","properties": {"type": 2,"ratio": 0.0031,"lineWidthRatio": 0.017441860465116275},"geometry": {"type": "Point","coordinates": [119.946973,31.772752]}},{"type": "Feature","properties": {"type": 3,"ratio": 0.003,"lineWidthRatio": 0.014534883720930232},"geometry": {"type": "Point","coordinates": [118.589421,24.908853]}},{"type": "Feature","properties": {"type": 4,"ratio": 0.003,"lineWidthRatio": 0.014534883720930232},"geometry": {"type": "Point","coordinates": [113.132855,29.37029]}},{"type": "Feature","properties": {"type": 5,"ratio": 0.003,"lineWidthRatio": 0.014534883720930232},"geometry": {"type": "Point","coordinates": [118.047648,36.814939]}},{"type": "Feature","properties": {"type": 6,"ratio": 0.0029,"lineWidthRatio": 0.011627906976744179},"geometry": {"type": "Point","coordinates": [119.306239,26.075302]}},{"type": "Feature","properties": {"type": 7,"ratio": 0.0029,"lineWidthRatio": 0.011627906976744179},"geometry": {"type": "Point","coordinates": [112.607693,26.900358]}},{"type": "Feature","properties": {"type": 0,"ratio": 0.0029,"lineWidthRatio": 0.011627906976744179},"geometry": {"type": "Point","coordinates": [115.041299,35.768234]}},{"type": "Feature","properties": {"type": 1,"ratio": 0.0029,"lineWidthRatio": 0.011627906976744179},"geometry": {"type": "Point","coordinates": [109.502882,34.499381]}},{"type": "Feature","properties": {"type": 2,"ratio": 0.0029,"lineWidthRatio": 0.011627906976744179},"geometry": {"type": "Point","coordinates": [115.992811,29.712034]}},{"type": "Feature","properties": {"type": 3,"ratio": 0.0029,"lineWidthRatio": 0.011627906976744179},"geometry": {"type": "Point","coordinates": [111.134335,37.524366]}},{"type": "Feature","properties": {"type": 4,"ratio": 0.0028,"lineWidthRatio": 0.008720930232558138},"geometry": {"type": "Point","coordinates": [114.341447,34.797049]}},{"type": "Feature","properties": {"type": 5,"ratio": 0.0028,"lineWidthRatio": 0.008720930232558138},"geometry": {"type": "Point","coordinates": [121.618622,38.91459]}},{"type": "Feature","properties": {"type": 6,"ratio": 0.0028,"lineWidthRatio": 0.008720930232558138},"geometry": {"type": "Point","coordinates": [113.826063,34.022956]}},{"type": "Feature","properties": {"type": 7,"ratio": 0.0028,"lineWidthRatio": 0.008720930232558138},"geometry": {"type": "Point","coordinates": [106.937265,27.706626]}},{"type": "Feature","properties": {"type": 0,"ratio": 0.0028,"lineWidthRatio": 0.008720930232558138},"geometry": {"type": "Point","coordinates": [87.617733,43.792818]}},{"type": "Feature","properties": {"type": 1,"ratio": 0.0028,"lineWidthRatio": 0.008720930232558138},"geometry": {"type": "Point","coordinates": [120.750865,30.762653]}},{"type": "Feature","properties": {"type": 2,"ratio": 0.0028,"lineWidthRatio": 0.008720930232558138},"geometry": {"type": "Point","coordinates": [113.307718,33.735241]}},{"type": "Feature","properties": {"type": 3,"ratio": 0.0027,"lineWidthRatio": 0.0058139534883720955},"geometry": {"type": "Point","coordinates": [103.823557,36.058039]}},{"type": "Feature","properties": {"type": 4,"ratio": 0.0027,"lineWidthRatio": 0.0058139534883720955},"geometry": {"type": "Point","coordinates": [109.741193,38.290162]}},{"type": "Feature","properties": {"type": 5,"ratio": 0.0027,"lineWidthRatio": 0.0058139534883720955},"geometry": {"type": "Point","coordinates": [112.23813,30.326857]}},{"type": "Feature","properties": {"type": 6,"ratio": 0.0026,"lineWidthRatio": 0.0029069767441860417},"geometry": {"type": "Point","coordinates": [113.382391,22.521113]}},{"type": "Feature","properties": {"type": 7,"ratio": 0.0025,"lineWidthRatio": 0},"geometry": {"type": "Point","coordinates": [112.144146,32.042426]}},{"type": "Feature","properties": {"type": 0,"ratio": 0.0025,"lineWidthRatio": 0},"geometry": {"type": "Point","coordinates": [113.113556,36.191112]}},{"type": "Feature","properties": {"type": 1,"ratio": 0.0025,"lineWidthRatio": 0},"geometry": {"type": "Point","coordinates": [114.391136,27.8043]}},{"type": "Feature","properties": {"type": 2,"ratio": 0.0025,"lineWidthRatio": 0},"geometry": {"type": "Point","coordinates": [111.691347,29.040225]}}]
}

高德地图:弧度飞线图层详解相关推荐

  1. 高德地图小程序步行路线显示_微信小程序 高德地图路线规划实现过程详解

    前言 最近项目中做到相关网约车小程序.需要使用到地图中的路线规划,对3种地图进行了分析.这里稍微做一下总结: 百度地图 百度坐标 (BD-09) 腾讯地图 火星坐标(GCJ-02) 高德地图 火星坐标 ...

  2. vue openlayers 加载高德地图等 gcj02 的图层偏移问题

    vue openlayers 加载高德地图等 gcj02 的图层偏移问题 这个问题是在使用 openlayers 地图引擎加载高德地图或者是谷歌地图都会遇到的问题,所以说呢这篇博文稍微说一下解决办法. ...

  3. python灰色波浪线,PyCharm关闭碍眼的波浪线图文详解

    下面我先给出了一小段代码示例,思考一下,为什么name,my_name 不会有波浪线,而 myname 和 wangbm 会有波浪线呢? Pycharm 本身会实时地对变量名进行检查,如果变量名不是一 ...

  4. Echarts实现3d 地图实现飞线效果

    Echarts实现3d 地图实现飞线效果 注意:重点关注data中的数据格式 在lines3D中symbol不能设置指定样式,echarts官网也没有这个参数,所以对于lines3D飞线如何实现飞机航 ...

  5. AMap JS 高德地图,修改渲染图层层级

    AMap高德地图,修改渲染图层层级 问题 官网方法 手动方法 更改层级演示 最后 问题 前端使用 AMap JS 高德地图时,覆盖物绘制线条(AMap.Polyline),会覆盖住下方的路段名称,路段 ...

  6. 百度地图api定位的使用详解和返回错误码61的解决方案

    返回错误码61的解决方案我记不住了,我是看了官方demo改的,不过可以看下面的配置设置,应该可以解决,如果不能解决,可以评论或联系我 百度地图api定位的使用详解 1.获取密钥 官网 2.下载SDK, ...

  7. 电脑主板排线设置详解

    电脑主板排线设置详解 都与跳线上的英文相对应要对好了,线上的英文都要对外面,反了不行的. 1电源开关连接线 连接电源开关连接线时,先从机箱面板连线上找到标有"power sw"的两 ...

  8. echart实现3d地图_3D飞线效果——让线“飞”起来的秘密

    在城市规划.统计.交通等行业,地图可视化已成为最直接也最吸引眼球的一种表达方式.例如人群迁徙.人口流动.OD出行.职住分析.客流来源等众多场景都需要用到飞线效果呈现. 2D飞线效果图 随着可视化技术的 ...

  9. vue+echarts平面地图和飞线

    记得引入文件 import * as echarts from 'echarts'; import '@/common/3Dworld.js'; 3Dworld.js链接 链接: 3Dworld.js ...

最新文章

  1. RPi 3B Aduio 3.5mm output
  2. hashlib 和loggin模块
  3. 分析影响流媒体服务器性能的硬件瓶颈
  4. VMware配置网络,主机互通,可上网
  5. java继承时父类常量覆盖吗_Java父类继承中的static和final用法
  6. iphonex适配游戏_Galaxy Fold应用适配大测试,这些软件超有远见!
  7. Android【报错】java.lang.RuntimeException: Unable to start activity Activity无法打开的问题
  8. 计算机网络基础系列(二)计算机网络体系结构
  9. asp.net中DataGrid双行跨列表头设计心得
  10. 鸡啄米vc++2010系列25(滚动条控件Scroll Bar)
  11. Linux之如何启动tomcat服务
  12. 卢卡奇总体性原则_重识青年卢卡奇的“历史”概念问题
  13. 拒绝瞎忙,高效的学习与工作经验谈
  14. jquery文档就绪的三种书写方式
  15. Windows 10 RTM 官方正式版
  16. 0210leetcode刷题5道python
  17. el-upload上传图片,限制上传数量,超过最大数量则不展示上传组件,可点击删除
  18. Lae程序员小漫画(三),仅供一乐
  19. 我的世界1.19.2最终优化模组推荐:这60个优化模组让你的体验更好
  20. Deployer 部署项目

热门文章

  1. Matlab二值图像栅格化和圆域范围框定
  2. 74HC245芯片简析
  3. JAVA泛型与集合类
  4. 【BZOJ 1006】 [HNOI2008]神奇的国度
  5. Excel:妙用自定义函数让班级名称自动化(转)
  6. 成都启之航电商:抖音小店使用效果+性价比产品+直播
  7. 计蒜客-蒜头君回家(bfs)
  8. 【计蒜客】蒜头君的旅游计划
  9. android_驱动_qcom_【高通SDM660平台】(1) ---Bringup Guide
  10. 论文研读-基于决策变量分析的大规模多目标进化算法