三维地图前端arcgis_【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制...

概述

前面两篇文章通过扩展EchartsLayer.js这个图层类，实现了使用ArcGIS JS API和eCharts，在二维和三维场景下绘制迁徙图和散点图。这篇文章继续通过绘制网络路径图的例子，再来验证下我们扩展的这个图层类是否可用，先来看下最终效果：

实现思路

迁徙图、散点图和网络路径图这种图表跟地理坐标关系紧密，所以仅仅通过第一篇二维普通图表绘制的方式是无法实现这类图表绘制的，所以就需要我们来扩展eCharts的相关功能，使其能够够结合最新版的ArcGIS JS API来完成地图上这类图表的绘制，eCharts官网也提供了相应的扩展插件，但这种插件并不能很好地支持我们ArcGIS JS API的高版本，所以我们在这篇文章里直接扩展了一个图层类，下面是具体的实现思路：

实现ArcGIS JS API和eCharts的结合，最最关键的是要实现两个插件库里的坐标系转换，这是重点，只要搞清楚了这一点，我们完全可以脱离地图API库的束缚，理论上可以实现eCharts跟任意地图库的结合。在此处转换坐标时我们使用了eCharts提供的registerCoordinateSystem方法，通过这个方法我们注册了一个名为"arcgis"的坐标系，里面对eCharts中的dataToPoint、pointToData等方法进行了重写，然后将这些所有内容封装为了一个EchartsLayer图层类。至于这个文件的源码，文章结尾会提供，接下来我们看一下具体的实现步骤。

实现步骤

1、本文所用的demo同样是基于React框架搭建的，所以我们首先基于React框架搭建一个初始化项目，然后改写src目录下的App.js这个主文件，实例化出一张二维地图，这中间用到了esri-loader插件，具体的实现过程可查看我的这篇文章【【番外】 React中使用ArcGIS JS API 4.14开发】，里面有具体的实现步骤。

2、通过上述操作实例化完一张二维地图后，我们接下来就要进行网络路径图的绘制操作了，在开始之前我们需要数据，就是关于网络路径的坐标数据和相应权重值的数据，我将它存在了一份JS文件里，此文件比较大，所以并不打算在此处粘贴出来，有需要的可以到此地址下载。

3、下载到数据后，将数据拷贝至demo代码目录下，然后在组件代码中引入，此处我们是将它引入到我们新建的TrafficNetwork组件目录下，然后编写数据处理的函数，对下载下来的数据进行初始化处理，代码如下：

//初始化数据

_initData=() => {

const _self = this;

let data = trafficData;

let hStep = 300 / (data.length - 1);

_self.state.busLines = [].concat.apply([], data.map(function (busLine, idx) {

let prevPt;

let points = [];

for (let i = 0; i < busLine.length; i += 2) {

let pt = [busLine[i], busLine[i + 1]];

if (i > 0) {

pt = [

prevPt[0] + pt[0],

prevPt[1] + pt[1]

];

}

prevPt = pt;

points.push([pt[0] / 1e4, pt[1] / 1e4]);

}

return {

coords: points,

lineStyle: {

normal: {

color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))

}

}))

}

4、数据初始完成后，我们进行网络路径图表的绘制信息配置，也就是初始化series属性，代码如下：

//初始化图表配置

_initCharts=() => {

const _self = this;

_self.state.series = [{

type: 'lines',

coordinateSystem: 'arcgis',

polyline: true,

data: _self.state.busLines,

silent: true,

lineStyle: {

// color: '#c23531',

// color: 'rgb(200, 35, 45)',

opacity: 0.2,

width: 1

progressiveThreshold: 500,

progressive: 200

}, {

type: 'lines',

coordinateSystem: 'arcgis',

polyline: true,

data: _self.state.busLines,

lineStyle: {

width: 0

effect: {

constantSpeed: 20,

show: true,

trailLength: 0.1,

symbolSize: 1.5

zlevel: 1

}]

}

5、接下来和之前文章的流程一样，监听地图的绘制完成事件，然后调用图表绘制函数来绘制网络路径图，代码如下：

view.when(function() {

_self.state.mapview = view;

_self._drawCharts();

});

//绘制图表

_drawCharts=() => {

const _self = this;

const options = {

url: 'https://js.arcgis.com/4.14/dojo/dojo.js',

};

loadModules([

'http://localhost/test/EchartsLayer.min.js'

], options).then(([

echartsLayer

]) => {

console.log(_self.state.mapview)

//_self.state.mapview.when(function(){

let chart = new echartsLayer(_self.state.mapview);

let option = {

title: {

text: 'ArcGIS API for Javascript4.14扩展Echarts4之网络路径图',

subtext: 'Develop By X北辰北',

left: 'center',

textStyle: {

color: '#fff'

}

series: _self.state.series

};

chart.setChartOption(option);

//});

}

).catch((err) => {

console.log('图表绘制失败，' + err);

});

}

6、通过以上步骤就完成了网络路径的二维绘制，三维绘制的话很简单，只需要将MapView替换为SceneView即可，代码如下：

let view = new SceneView({

container: "mapview",

map: map,

scale: 50000000,

center: [107.246152,34.414465]

});

总结

我们通过三篇文章，介绍了关于在eCharts中有关地理坐标的图表如何在ArcGIS的底图上绘制的过程，这篇文章中的实现流程跟之前两篇一样，都是通过扩展EchartsLayer.js这个图层类来实现的，所以后续大家有需要将eCharts中有关地理坐标的图表绘制到ArcGIS地图上时，可用此扩展类来实现。关于将eCharts中普通的二维图表绘制到ArcGIS底图上的操作，因为不涉及地理坐标的问题，所以我们通过纯前端的方式即可解决，具体实现请看这篇文章【01 【ArcGIS JS API + eCharts系列】实现地图上二维图表的绘制】。

附：

TrafficNetwork组件代码：

import React,{Component} from 'react';

import {loadModules} from 'esri-loader';

import echarts from 'echarts';

import './trafficNetwork.css';

import trafficData from './data/trafficData';

class TrafficNetwork extends Component {

state = {

busLines: null,

series: null,

}

componentDidMount=() => {

this._initMapView();

this._initData();

this._initCharts();

}

//实例化地图

_initMapView=() => {

const _self = this;

const options = {

url: 'https://js.arcgis.com/4.14/',

css: 'https://js.arcgis.com/4.14/esri/themes/light/main.css'

};

loadModules(['esri/Map',

'esri/Basemap',

'esri/layers/TileLayer',

'esri/views/MapView',

'esri/views/SceneView',

], options).then(([

Map,

Basemap,

TileLayer,

MapView,

SceneView,

]) => {

let basemap = new Basemap({

baseLayers: [

new TileLayer({

url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",

title: "Basemap"

})

title: "basemap",

id: "basemap"

});

let map = new Map({

basemap: basemap

});

let view = new MapView({

container: "mapview",

map: map,

zoom: 10,

center: [116.403406,39.91582] //北京 116.403406,39.91582 成都 107.246152,34.414465

});

// let view = new SceneView({

// container: "mapview",

// map: map,

// scale: 50000000,

// center: [107.246152,34.414465]

// });

view.when(function() {

_self.state.mapview = view;

_self._drawCharts();

});

}

).catch((err) => {

console.log('底图创建失败，' + err);

});

}

//初始化数据

_initData=() => {

const _self = this;

let data = trafficData;

let hStep = 300 / (data.length - 1);

_self.state.busLines = [].concat.apply([], data.map(function (busLine, idx) {

let prevPt;

let points = [];

for (let i = 0; i < busLine.length; i += 2) {

let pt = [busLine[i], busLine[i + 1]];

if (i > 0) {

pt = [

prevPt[0] + pt[0],

prevPt[1] + pt[1]

];

}

prevPt = pt;

points.push([pt[0] / 1e4, pt[1] / 1e4]);

}

return {

coords: points,

lineStyle: {

normal: {

color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))

}

}))

}

//初始化图表配置

_initCharts=() => {

const _self = this;

_self.state.series = [{

type: 'lines',

coordinateSystem: 'arcgis',

polyline: true,

data: _self.state.busLines,

silent: true,

lineStyle: {

// color: '#c23531',

// color: 'rgb(200, 35, 45)',

opacity: 0.2,

width: 1

progressiveThreshold: 500,

progressive: 200

}, {

type: 'lines',

coordinateSystem: 'arcgis',

polyline: true,

data: _self.state.busLines,

lineStyle: {

width: 0

effect: {

constantSpeed: 20,

show: true,

trailLength: 0.1,

symbolSize: 1.5

zlevel: 1

}]

}

//绘制图表

_drawCharts=() => {

const _self = this;

const options = {

url: 'https://js.arcgis.com/4.14/dojo/dojo.js',

};

loadModules([

'http://localhost/test/EchartsLayer.min.js'

], options).then(([

echartsLayer

]) => {

console.log(_self.state.mapview)

//_self.state.mapview.when(function(){

let chart = new echartsLayer(_self.state.mapview);

let option = {

title: {

text: 'ArcGIS API for Javascript4.14扩展Echarts4之网络路径图',

subtext: 'Develop By X北辰北',

left: 'center',

textStyle: {

color: '#fff'

}

series: _self.state.series

};

chart.setChartOption(option);

//});

}

).catch((err) => {

console.log('图表绘制失败，' + err);

});

}

render() {

return (

)

}

export default TrafficNetwork;

EchartsLayer.min.js文件代码：

三维地图前端arcgis_【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制...相关推荐

04 【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制
概述前面两篇文章通过扩展EchartsLayer.js这个图层类,实现了使用ArcGIS JS API和eCharts,在二维和三维场景下绘制迁徙图和散点图.这篇文章继续通过绘制网络路径图的例子,再 ...
02 【ArcGIS JS API + eCharts系列】实现二、三维迁徙图的绘制
概述上一篇文章通过纯前端的方式实现了ArcGIS JS API和eCharts的普通二维图表绘制,因为这些图表绘制其实是跟地理坐标无关的,只需要设置图表的位置即可,所以仅仅用了纯前端的方式去实现.这 ...
03 【ArcGIS JS API + eCharts系列】实现二、三维散点图的绘制
概述上一篇文章中我们介绍了如何使用ArcGIS JS API和eCharts结合,在二维和三维场景下绘制迁徙图.这篇文章我们来介绍下如何在二维和三维场景下绘制散点图,其实散点图跟迁徙图一样,它的绘制 ...
ArcGIS JS API 4.x（二）加载 3.x所说的动态地图服务图层
前言:在使用arcgis js api 3.x的时候,有切片地图服务和动态地图服务,从3.x到4.x版本过渡的时候,希望能够找到和3.x对应的类,在上篇博客中,我们找到了和ArcGISTiledMap ...
三维地图前端arcgis_通过ArcGIS创建2D及3D地图
前端开发中,GIS的用途很明确,就是用来做地图.你对地图的操作,不管是图形的绘制还是实体的添加都是在基础地图之上.本文将向你讲诉如何使用GIS创建基础地图以一些API的使用. 前提在编写代码之前先简 ...
ArcGIS JS API实现地图场景视频融合
ArcGIS JS API实现地图场景视频融合效果展示实现步骤 1.创建地图场景 2.引入相应模块并创建地图场景 3.获取点坐标 4.生成网格 5.生成图形并添加进场景中总结完整代码效果展示 ...
基于ArcGIS JS API 4.11实现对FeatureLayer的多变量渲染
文章目录需求背景需求分析开发过程效果图注意事项参考链接在线示例需求背景有一个二维数组,里面包含几万个表示高度的值,现在要把这些高度值在地图上展示出来.可以通过小立方体的方式展现,长宽 ...
08 ArcGIS JS API 4.15实现萤火虫效果
概述前几天在看帖子的时候发现有大佬使用ArcGIS Pro和Portal制作了萤火虫的渲染效果,感觉前端可视化的时候还不错,所以自己也将实例数据下载下来之后用ArcGIS JS API来实现了一下, ...
ArcGIS JS API 4.X实现动态地图服务子图层显隐控制
ArcGIS JS API 4.X实现动态地图服务子图层显隐控制文章目录 ArcGIS JS API 4.X实现动态地图服务子图层显隐控制使用场景官网示例注意事项使用场景图层控制功能官网 ...

三维地图前端arcgis_【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制...

三维地图前端arcgis_【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制...相关推荐

最新文章

热门文章