| DEJA | 您所在的位置：网站首页 › 8656m-cy61飞线图 › DEJA |
DEJA
|
前言
编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合，有自己琢磨实现的，也有参考其他大神后整理实现的，初步算了算现在有实现130个左右的功能，后续也会不断的追加，所以暂时打算一周2-3更的样子来更新本专栏（每篇博文都会奉上完整demo的源代码，尽可能把代码简洁一些）。博文内容如存在错误或者有可改进之处，也希望在这里和各位大佬交流提高一下。 更多内容/样例/demo说明：DEJA_VU3D完整功能目录 介绍专栏内容本着尽可能简洁的原则，这篇文章我们来介绍基于Cesium实现飞线图（汇聚）的绘制，并支持鼠标点击获取数据和参数。实现如图所示：
```javascript const endOption = { name: "无锡", coords: [120.3442, 31.5527], }; const startOption = [ { name: "北京", value: 20, coords: [116.4551, 40.2539], }, { name: "上海", value: 12, coords: [121.4648, 31.2891], }, { name: "广州", value: 32, coords: [113.5107, 23.2196], }, { name: "大连", value: 42, coords: [122.2229, 39.4409], }, { name: "青岛", value: 12, coords: [120.4651, 36.3373], }, { name: "石家庄", value: 12, coords: [114.4995, 38.1006], }, { name: "南昌", value: 3, coords: [116.0046, 28.6633], }, { name: "合肥", value: 56, coords: [117.29, 32.0581], }, { name: "呼和浩特", value: 32, coords: [111.4124, 40.4901], }, { name: "宿州", value: 23, coords: [117.5535, 33.7775], }, { name: "曲阜", value: 16, coords: [117.323, 35.8926], }, { name: "杭州", value: 7, coords: [119.5313, 29.8773], }, { name: "武汉", value: 36, coords: [114.3896, 30.6628], }, { name: "深圳", value: 26, coords: [114.5435, 22.5439], }, { name: "珠海", value: 18, coords: [113.7305, 22.1155], }, { name: "福州", value: 47, coords: [119.4543, 25.9222], }, { name: "西安", value: 31, coords: [109.1162, 34.2004], }, { name: "赣州", value: 39, coords: [116.0046, 25.6633], }, ]; function getLineData() { const lineData = []; startOption.forEach((element) => { const data = { fromName: element.name, toName: endOption.name, value: element.value, coords: [element.coords, endOption.coords], //网内汇聚 }; lineData.push(data); }); return lineData; } function getPointData() { const pointData = []; startOption.forEach((element) => { let coords = element.coords; const data = { name: element.name, value: [coords[0], coords[1], element.value], }; pointData.push(data); }); return pointData; } // 自定义图标 var symbol = "path://M512 28.444444 113.777778 597.333333l170.666667 0 0 113.777778 455.111111 0 0-113.777778 170.666667 0L512 28.444444zM284.444444 881.777778l455.111111 0 0-113.777778L284.444444 768 284.444444 881.777778zM284.444444 995.555556l455.111111 0 0-56.888889L284.444444 938.666667 284.444444 995.555556z"; const pathOption = { animation: false, GLMap: {}, series: [ { type: "lines", coordinateSystem: "GLMap", zlevel: 2, effect: { show: true, period: 6, trailLength: 0.1, symbol: symbol, symbolSize: 15, }, lineStyle: { normal: { color: function (param) { if (param.data.value < 30) { return "#ffff00"; 前言编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合，有自己琢磨实现的，也有参考其他大神后整理实现的，初步算了算现在有实现130个左右的功能，后续也会不断的追加，所以暂时打算一周2-3更的样子来更新本专栏（每篇博文都会奉上完整demo的源代码，尽可能把代码简洁一些）。博文内容如存在错误或者有可改进之处，也希望在这里和各位大佬交流提高一下。 更多内容/样例/demo说明：DEJA_VU3D完整功能目录 介绍专栏内容本着尽可能简洁的原则，这篇文章我们来介绍基于Cesium实现飞线图（汇聚）的绘制，并支持鼠标点击获取数据和参数。实现如图所示：
```javascript const endOption = { name: "无锡", coords: [120.3442, 31.5527], }; const startOption = [ { name: "北京", value: 20, coords: [116.4551, 40.2539], }, { name: "上海", value: 12, coords: [121.4648, 31.2891], }, { name: "广州", value: 32, coords: [113.5107, 23.2196], }, { name: "大连", value: 42, coords: [122.2229, 39.4409], }, { name: "青岛", value: 12, coords: [120.4651, 36.3373], }, { name: "石家庄", value: 12, coords: [114.4995, 38.1006], }, { name: "南昌", value: 3, coords: [116.0046, 28.6633], }, { name: "合肥", value: 56, coords: [117.29, 32.0581], }, { name: "呼和浩特", value: 32, coords: [111.4124, 40.4901], }, { name: "宿州", value: 23, coords: [117.5535, 33.7775], }, { name: "曲阜", value: 16, coords: [117.323, 35.8926], }, { name: "杭州", value: 7, coords: [119.5313, 29.8773], }, { name: "武汉", value: 36, coords: [114.3896, 30.6628], }, { name: "深圳", value: 26, coords: [114.5435, 22.5439], }, { name: "珠海", value: 18, coords: [113.7305, 22.1155], }, { name: "福州", value: 47, coords: [119.4543, 25.9222], }, { name: "西安", value: 31, coords: [109.1162, 34.2004], }, { name: "赣州", value: 39, coords: [116.0046, 25.6633], }, ]; function getLineData() { const lineData = []; startOption.forEach((element) => { const data = { fromName: element.name, toName: endOption.name, value: element.value, coords: [element.coords, endOption.coords], //网内汇聚 }; lineData.push(data); }); return lineData; } function getPointData() { const pointData = []; startOption.forEach((element) => { let coords = element.coords; const data = { name: element.name, value: [coords[0], coords[1], element.value], }; pointData.push(data); }); return pointData; } // 自定义图标 var symbol = "path://M512 28.444444 113.777778 597.333333l170.666667 0 0 113.777778 455.111111 0 0-113.777778 170.666667 0L512 28.444444zM284.444444 881.777778l455.111111 0 0-113.777778L284.444444 768 284.444444 881.777778zM284.444444 995.555556l455.111111 0 0-56.888889L284.444444 938.666667 284.444444 995.555556z"; const pathOption = { animation: false, GLMap: {}, series: [ { type: "lines", coordinateSystem: "GLMap", zlevel: 2, effect: { show: true, period: 6, trailLength: 0.1, symbol: symbol, symbolSize: 15, }, lineStyle: { normal: { color: function (param) { if (param.data.value < 30) { return "#ffff00"; 前言编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合，有自己琢磨实现的，也有参考其他大神后整理实现的，初步算了算现在有实现130个左右的功能，后续也会不断的追加，所以暂时打算一周2-3更的样子来更新本专栏（每篇博文都会奉上完整demo的源代码，尽可能把代码简洁一些）。博文内容如存在错误或者有可改进之处，也希望在这里和各位大佬交流提高一下。 更多内容/样例/demo说明：DEJA_VU3D完整功能目录 介绍专栏内容本着尽可能简洁的原则，这篇文章我们来介绍基于Cesium实现飞线图（汇聚）的绘制，并支持鼠标点击获取数据和参数。实现如图所示：
```javascript const endOption = { name: "无锡", coords: [120.3442, 31.5527], }; const startOption = [ { name: "北京", value: 20, coords: [116.4551, 40.2539], }, { name: "上海", value: 12, coords: [121.4648, 31.2891], }, { name: "广州", value: 32, coords: [113.5107, 23.2196], }, { name: "大连", value: 42, coords: [122.2229, 39.4409], }, { name: "青岛", value: 12, coords: [120.4651, 36.3373], }, { name: "石家庄", value: 12, coords: [114.4995, 38.1006], }, { name: "南昌", value: 3, coords: [116.0046, 28.6633], }, { name: "合肥", value: 56, coords: [117.29, 32.0581], }, { name: "呼和浩特", value: 32, coords: [111.4124, 40.4901], }, { name: "宿州", value: 23, coords: [117.5535, 33.7775], }, { name: "曲阜", value: 16, coords: [117.323, 35.8926], }, { name: "杭州", value: 7, coords: [119.5313, 29.8773], }, { name: "武汉", value: 36, coords: [114.3896, 30.6628], }, { name: "深圳", value: 26, coords: [114.5435, 22.5439], }, { name: "珠海", value: 18, coords: [113.7305, 22.1155], }, { name: "福州", value: 47, coords: [119.4543, 25.9222], }, { name: "西安", value: 31, coords: [109.1162, 34.2004], }, { name: "赣州", value: 39, coords: [116.0046, 25.6633], }, ]; function getLineData() { const lineData = []; startOption.forEach((element) => { const data = { fromName: element.name, toName: endOption.name, value: element.value, coords: [element.coords, endOption.coords], //网内汇聚 }; lineData.push(data); }); return lineData; } function getPointData() { const pointData = []; startOption.forEach((element) => { let coords = element.coords; const data = { name: element.name, value: [coords[0], coords[1], element.value], }; pointData.push(data); }); return pointData; } // 自定义图标 var symbol = "path://M512 28.444444 113.777778 597.333333l170.666667 0 0 113.777778 455.111111 0 0-113.777778 170.666667 0L512 28.444444zM284.444444 881.777778l455.111111 0 0-113.777778L284.444444 768 284.444444 881.777778zM284.444444 995.555556l455.111111 0 0-56.888889L284.444444 938.666667 284.444444 995.555556z"; const pathOption = { animation: false, GLMap: {}, series: [ { type: "lines", coordinateSystem: "GLMap", zlevel: 2, effect: { show: true, period: 6, trailLength: 0.1, symbol: symbol, symbolSize: 15, }, lineStyle: { normal: { color: function (param) { if (param.data.value < 30) { return "#ffff00"; |
飞线图创建主要借助于Echarts插件，注意插件版本要求 mockClickChart(event, this._chart),
Cesium.ScreenSpaceEventType.LEFT_CLICK
);
return this._chart;
};
完整demo
前端界面调用FlyingLine.vue
import EchartsLayer from "./EchartsLayer";
import pathOption from "./data";
const Cesium = window.Cesium;
let viewer = undefined;
export default {
data() {
return {};
},
mounted() {
let key =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwZDhhOThhNy0zMzUzLTRiZDktYWM3Ni00NGI5MGY2N2UwZDUiLCJpZCI6MjQzMjYsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODUwMzUwNDh9.DYuDF_RPKe5_8w849_y-sutM68LM51O9o3bTt_3rF1w";
Cesium.Ion.defaultAccessToken = key;
window.viewer = viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
enablePickFeatures: false,
}),
terainProvider: Cesium.createWorldTerrain(),
geocoder: true,
homeButton: true,
sceneModePicker: true,
baseLayerPicker: true,
navigationHelpButton: true,
animation: true,
timeline: true,
fullscreenButton: true,
vrButton: true,
//关闭点选出现的提示框
selectionIndicator: false,
infoBox: false,
});
viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
this.initCamera();
this.initEchartsMap();
},
methods: {
initEchartsMap() {
let echartsLayer = new EchartsLayer(viewer, pathOption);
// 绑定点击事件
echartsLayer._chart.on("click", (params) => {
console.log(20180824012121, params);
});
},
initCamera() {
viewer.camera.flyTo({
destination: window.Cesium.Cartesian3.fromDegrees(
114.46654690269462,
22.05893520102907,
1739337
),
orientation: {
heading: 6.2725992867021105,
pitch: -1.179484583028378,
roll: 6.282598084227001,
},
});
},
},
getLocation() {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (event) {
let earthPosition = viewer.scene.pickPosition(event.position);
if (Cesium.defined(earthPosition)) {
let cartographic = Cesium.Cartographic.fromCartesian(earthPosition);
let lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
let lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);
let height = cartographic.height.toFixed(2);
console.log(earthPosition, {
lon: lon,
lat: lat,
height: height,
});
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},
};
#cesiumContainer {
position: relative;
width: 100%;
height: 100%;
}
飞线图数据data.js
【本文地址】