可视化例子(16)——Echarts4 与 arcgis api 4.x for js 结合实现模拟迁徙图效果

最新推荐文章于 2022-01-14 14:16:44 发布
最新推荐文章于 2022-01-14 14:16:44 发布
阅读量1.6k 收藏 11
点赞数 3
分类专栏： 可视化 Echarts ArcGIS API For JavaScript 文章标签： js echarts 可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ocean111best/article/details/109912866
版权

一、效果图（3D地球）

二、代码

Echarts 和 arcgis api 4.x for js 结合实现迁徙图效果的关键问题在于两者的坐标系不统一，因此需要进行 Echarts 坐标系和 arcgis 坐标系的转换。这里借鉴业余敲代码的思路，采用的方法是注册一个坐标系统：命名为arcgis(名称可自由拟定)的坐标系。在此基础上，采用dojo的define定义了一个名为EchartsLayer的模板。

echarts.registerCoordinateSystem('arcgis', this.getE3CoordinateSystem(view));

其中在 getE3CoordinateSystem 函数中，对 Echarts 里面的几个函数进行了重写。其中包括dataToPoint、pointToData等坐标转换内容。

getE3CoordinateSystem:function(map) {
				var CoordSystem = function CoordSystem(map) {
							this.map = map;
							this._mapOffset = [0, 0];
						};
				CoordSystem.create = function (ecModel) {
					  ecModel.eachSeries(function (seriesModel) {
						  if (seriesModel.get('coordinateSystem') ===   'arcgis') {
									seriesModel.coordinateSystem = new CoordSystem(map);
								}
							});
						};
				CoordSystem.getDimensionsInfo = function () {
							return ['x', 'y'];
						};
				CoordSystem.dimensions = ['x', 'y'];
				CoordSystem.prototype.dimensions =  ['x', 'y'];
				CoordSystem.prototype.setMapOffset = function setMapOffset(mapOffset) {
							this._mapOffset = mapOffset;
						}
				CoordSystem.prototype.dataToPoint = function dataToPoint(data) {
					   var point  = {
								type:"point",
								x:data[0],
								y:data[1],
								spatialReference:new SpatialReference(4326)
							};
					   var px = map.toScreen(point);
					   var mapOffset = this._mapOffset;
					   return [px.x - mapOffset[0], px.y - mapOffset[1]];
					   }
				CoordSystem.prototype.pointToData=  function pointToData(pt) {
							var mapOffset = this._mapOffset;
							var screentPoint  = { x:pt[0] + mapOffset[0],
												  y:pt[1] + mapOffset[1]
							};
							var data = map.toMap(screentPoint);
							return [data.x, data.y];
						};
				CoordSystem.prototype.getViewRect =  function getViewRect() {
							return new graphic.BoundingRect(0, 0, this.map.width, this.map.height);
						};
				CoordSystem.prototype.getRoamTransform = function getRoamTransform() {
							return matrix.create();
						};
						return CoordSystem
}

完整的 html 文件代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>迁徙图</title>
    
    <style>
        html, body, #map {
            padding:0;
            margin:0;
            height:100%;
            width:100%;
        }
		.mytitle{
			z-index：1000;
			color:#fff;
			font-size:16px;
			text-align:center;
			position:absolute;
			top:10px;
			left:40%;
			width:20%
		}
    </style>
    <!--<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.10/esri/css/main.css">-->
	<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css"/>
    <script src="echarts.min.js"></script>
	<script src="echarts-gl.js"></script>
	<script>
	var dojoConfig = {
        parseOnLoad: true,
        packages: [{
            name: "src",
            location: location.pathname.replace(/\/[^/]+$/, "")+"/src"
        }]
    };
	</script>
	<!--<script src="http://localhost/arcgis_js_api/library/4.10/init.js"></script>-->
	<script src="https://js.arcgis.com/4.11/"></script>
    <script>
        var map;

        require([
            "esri/Map",
			"esri/Basemap",
			"esri/layers/TileLayer",
			"src/echartsLayer",
            "esri/views/SceneView",
			"esri/views/MapView",
            "dojo/domReady!"
        ], function (
            Map,Basemap,TileLayer,echartsLayer,SceneView,MapView
        ) {
            var layer = new TileLayer({
				url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"
			});
			var customBasemap = new Basemap({
				baseLayers: [layer],
				title: "Custom Basemap",
				id: "myBasemap"
			});
			var map = new Map({
				basemap: customBasemap
			});
			var view = new SceneView({
			//var view = new MapView({
				center: [110.62, 36.32], // long, lat
				container: 'map',
				map: map,
				zoom: 4
			});

			
            var geoCoordMap = {
                '海门': [121.15, 31.89],
                '鄂尔多斯': [109.781327, 39.608266],
                '招远': [120.38, 37.35],
                '舟山': [122.207216, 29.985295],
                '齐齐哈尔': [123.97, 47.33],
                '盐城': [120.13, 33.38],
                '赤峰': [118.87, 42.28],
                '青岛': [120.33, 36.07],
                '乳山': [121.52, 36.89],
                '金昌': [102.188043, 38.520089],
                '泉州': [118.58, 24.93],
                '莱西': [120.53, 36.86],
                '日照': [119.46, 35.42],
                '胶南': [119.97, 35.88],
                '南通': [121.05, 32.08],
                '拉萨': [91.11, 29.97],
                '云浮': [112.02, 22.93],
                '梅州': [116.1, 24.55],
                '文登': [122.05, 37.2],
                '上海': [121.48, 31.22],
                '攀枝花': [101.718637, 26.582347],
                '威海': [122.1, 37.5],
                '承德': [117.93, 40.97],
                '厦门': [118.1, 24.46],
                '汕尾': [115.375279, 22.786211],
                '潮州': [116.63, 23.68],
                '丹东': [124.37, 40.13],
                '太仓': [121.1, 31.45],
                '曲靖': [103.79, 25.51],
                '烟台': [121.39, 37.52],
                '福州': [119.3, 26.08],
                '瓦房店': [121.979603, 39.627114],
                '即墨': [120.45, 36.38],
                '抚顺': [123.97, 41.97],
                '玉溪': [102.52, 24.35],
                '张家口': [114.87, 40.82],
                '阳泉': [113.57, 37.85],
                '莱州': [119.942327, 37.177017],
                '湖州': [120.1, 30.86],
                '汕头': [116.69, 23.39],
                '昆山': [120.95, 31.39],
                '宁波': [121.56, 29.86],
                '湛江': [110.359377, 21.270708],
                '揭阳': [116.35, 23.55],
                '荣成': [122.41, 37.16],
                '连云港': [119.16, 34.59],
                '葫芦岛': [120.836932, 40.711052],
                '常熟': [120.74, 31.64],
                '东莞': [113.75, 23.04],
                '河源': [114.68, 23.73],
                '淮安': [119.15, 33.5],
                '泰州': [119.9, 32.49],
                '南宁': [108.33, 22.84],
                '营口': [122.18, 40.65],
                '惠州': [114.4, 23.09],
                '江阴': [120.26, 31.91],
                '蓬莱': [120.75, 37.8],
                '韶关': [113.62, 24.84],
                '嘉峪关': [98.289152, 39.77313],
                '广州': [113.23, 23.16],
                '延安': [109.47, 36.6],
                '太原': [112.53, 37.87],
                '清远': [113.01, 23.7],
                '中山': [113.38, 22.52],
                '昆明': [102.73, 25.04],
                '寿光': [118.73, 36.86],
                '盘锦': [122.070714, 41.119997],
                '长治': [113.08, 36.18],
                '深圳': [114.07, 22.62],
                '珠海': [113.52, 22.3],
                '宿迁': [118.3, 33.96],
                '咸阳': [108.72, 34.36],
                '铜川': [109.11, 35.09],
                '平度': [119.97, 36.77],
                '佛山': [113.11, 23.05],
                '海口': [110.35, 20.02],
                '江门': [113.06, 22.61],
                '章丘': [117.53, 36.72],
                '肇庆': [112.44, 23.05],
                '大连': [121.62, 38.92],
                '临汾': [111.5, 36.08],
                '吴江': [120.63, 31.16],
                '石嘴山': [106.39, 39.04],
                '沈阳': [123.38, 41.8],
                '苏州': [120.62, 31.32],
                '茂名': [110.88, 21.68],
                '嘉兴': [120.76, 30.77],
                '长春': [125.35, 43.88],
                '胶州': [120.03336, 36.264622],
                '银川': [106.27, 38.47],
                '张家港': [120.555821, 31.875428],
                '三门峡': [111.19, 34.76],
                '锦州': [121.15, 41.13],
                '南昌': [115.89, 28.68],
                '柳州': [109.4, 24.33],
                '三亚': [109.511909, 18.252847],
                '自贡': [104.778442, 29.33903],
                '吉林': [126.57, 43.87],
                '阳江': [111.95, 21.85],
                '泸州': [105.39, 28.91],
                '西宁': [101.74, 36.56],
                '宜宾': [104.56, 29.77],
                '呼和浩特': [111.65, 40.82],
                '成都': [104.06, 30.67],
                '大同': [113.3, 40.12],
                '镇江': [119.44, 32.2],
                '桂林': [110.28, 25.29],
                '张家界': [110.479191, 29.117096],
                '宜兴': [119.82, 31.36],
                '北海': [109.12, 21.49],
                '西安': [108.95, 34.27],
                '金坛': [119.56, 31.74],
                '东营': [118.49, 37.46],
                '牡丹江': [129.58, 44.6],
                '遵义': [106.9, 27.7],
                '绍兴': [120.58, 30.01],
                '扬州': [119.42, 32.39],
                '常州': [119.95, 31.79],
                '潍坊': [119.1, 36.62],
                '重庆': [106.54, 29.59],
                '台州': [121.420757, 28.656386],
                '南京': [118.78, 32.04],
                '滨州': [118.03, 37.36],
                '贵阳': [106.71, 26.57],
                '无锡': [120.29, 31.59],
                '本溪': [123.73, 41.3],
                '克拉玛依': [84.77, 45.59],
                '渭南': [109.5, 34.52],
                '马鞍山': [118.48, 31.56],
                '宝鸡': [107.15, 34.38],
                '焦作': [113.21, 35.24],
                '句容': [119.16, 31.95],
                '北京': [116.46, 39.92],
                '徐州': [117.2, 34.26],
                '衡水': [115.72, 37.72],
                '包头': [110, 40.58],
                '绵阳': [104.73, 31.48],
                '乌鲁木齐': [87.68, 43.77],
                '枣庄': [117.57, 34.86],
                '杭州': [120.19, 30.26],
                '淄博': [118.05, 36.78],
                '鞍山': [122.85, 41.12],
                '溧阳': [119.48, 31.43],
                '库尔勒': [86.06, 41.68],
                '安阳': [114.35, 36.1],
                '开封': [114.35, 34.79],
                '济南': [117, 36.65],
                '德阳': [104.37, 31.13],
                '温州': [120.65, 28.01],
                '九江': [115.97, 29.71],
                '邯郸': [114.47, 36.6],
                '临安': [119.72, 30.23],
                '兰州': [103.73, 36.03],
                '沧州': [116.83, 38.33],
                '临沂': [118.35, 35.05],
                '南充': [106.110698, 30.837793],
                '天津': [117.2, 39.13],
                '富阳': [119.95, 30.07],
                '泰安': [117.13, 36.18],
                '诸暨': [120.23, 29.71],
                '郑州': [113.65, 34.76],
                '哈尔滨': [126.63, 45.75],
                '聊城': [115.97, 36.45],
                '芜湖': [118.38, 31.33],
                '唐山': [118.02, 39.63],
                '平顶山': [113.29, 33.75],
                '邢台': [114.48, 37.05],
                '德州': [116.29, 37.45],
                '济宁': [116.59, 35.38],
                '荆州': [112.239741, 30.335165],
                '宜昌': [111.3, 30.7],
                '义乌': [120.06, 29.32],
                '丽水': [119.92, 28.45],
                '洛阳': [112.44, 34.7],
                '秦皇岛': [119.57, 39.95],
                '株洲': [113.16, 27.83],
                '石家庄': [114.48, 38.03],
                '莱芜': [117.67, 36.19],
                '常德': [111.69, 29.05],
                '保定': [115.48, 38.85],
                '湘潭': [112.91, 27.87],
                '金华': [119.64, 29.12],
                '岳阳': [113.09, 29.37],
                '长沙': [113, 28.21],
                '衢州': [118.88, 28.97],
                '廊坊': [116.7, 39.53],
                '菏泽': [115.480656, 35.23375],
                '合肥': [117.27, 31.86],
                '武汉': [114.31, 30.52],
                '大庆': [125.03, 46.58]
            };

            var BJData = [
				[{name:'北京'}, {name:'上海',value:95}],
				[{name:'北京'}, {name:'广州',value:90}],
				[{name:'北京'}, {name:'大连',value:80}],
				[{name:'北京'}, {name:'南宁',value:70}],
				[{name:'北京'}, {name:'南昌',value:60}],
				[{name:'北京'}, {name:'拉萨',value:50}],
				[{name:'北京'}, {name:'长春',value:40}],
				[{name:'北京'}, {name:'包头',value:30}],
				[{name:'北京'}, {name:'重庆',value:20}],
				[{name:'北京'}, {name:'常州',value:10}]
			];

			var SHData = [
				[{name:'上海'},{name:'包头',value:95}],
				[{name:'上海'},{name:'昆明',value:90}],
				[{name:'上海'},{name:'广州',value:80}],
				[{name:'上海'},{name:'郑州',value:70}],
				[{name:'上海'},{name:'长春',value:60}],
				[{name:'上海'},{name:'重庆',value:50}],
				[{name:'上海'},{name:'长沙',value:40}],
				[{name:'上海'},{name:'北京',value:30}],
				[{name:'上海'},{name:'丹东',value:20}],
				[{name:'上海'},{name:'大连',value:10}]
			];

			var GZData = [
				[{name:'广州'},{name:'福州',value:95}],
				[{name:'广州'},{name:'太原',value:90}],
				[{name:'广州'},{name:'长春',value:80}],
				[{name:'广州'},{name:'重庆',value:70}],
				[{name:'广州'},{name:'西安',value:60}],
				[{name:'广州'},{name:'成都',value:50}],
				[{name:'广州'},{name:'常州',value:40}],
				[{name:'广州'},{name:'北京',value:30}],
				[{name:'广州'},{name:'北海',value:20}],
				[{name:'广州'},{name:'海口',value:10}]
			];

			var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

			var convertData = function (data) {
				var res = [];
				for (var i = 0; i < data.length; i++) {
					var dataItem = data[i];
					var fromCoord = geoCoordMap[dataItem[0].name];
					var toCoord = geoCoordMap[dataItem[1].name];
					if (fromCoord && toCoord) {
						res.push({
							fromName: dataItem[0].name,
							toName: dataItem[1].name,
							coords: [fromCoord, toCoord],
							value: dataItem[1].value
						});
					}
				}
				return res;
			};
			var color = ['#a6c84c', '#ffa022', '#46bee9'];
			var series = [];
			[['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {
				series.push({
					name: item[0] + ' Top10',
					type: 'lines',
					coordinateSystem: 'arcgis',
					zlevel: 1,
					effect: {
						show: true,
						period: 6,
						trailLength: 0.7,
						color: '#fff',
						symbolSize: 3
					},
					lineStyle: {
						normal: {
							color: color[i],
							width: 0,
							curveness: 0.2
						}
					},
					data: convertData(item[1])
				},
				{
					name: item[0] + ' Top10',
					type: 'lines',
					coordinateSystem: 'arcgis',
					zlevel: 2,
					symbol: ['none', 'arrow'],
					symbolSize: 10,
					effect: {
						show: true,
						period: 6,
						trailLength: 0,
						symbol: planePath,
						symbolSize: 15
					},
					lineStyle: {
						normal: {
							color: color[i],
							width: 1,
							opacity: 0.6,
							curveness: 0.2
						}
					},
					data: convertData(item[1])
				},
				{
					name: item[0] + ' Top10',
					type: 'effectScatter',
					coordinateSystem: 'arcgis',
					zlevel: 2,
					rippleEffect: {
						brushType: 'stroke'
					},
					label: {
						normal: {
							show: true,
							position: 'right',
							formatter: '{b}'
						}
					},
					symbolSize: function (val) {
						return val[2] / 8;
					},
					itemStyle: {
						normal: {
							color: color[i]
						}
					},
					data: item[1].map(function (dataItem) {
						return {
							name: dataItem[1].name,
							value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
						};
					})
				});
			});

        view.on('layerview-create',function(){
            var chart = new echartsLayer(view,echarts);
			var option = {
                title: {
                    text: '模拟迁徙图',
                    subtext: '',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: series
			};
			chart.setChartOption(option);
		});		
	});
    </script>
</head>
<body class="tundra">
    <div id="map"></div>
	<span class="mytitle"></span>
</body>
</html>

封装坐标转换等的 js 文件 echartsLayer.js 如下所示：

define(["dojo/_base/declare", "dojo/_base/lang", "esri/geometry/Point", "esri/geometry/SpatialReference"],
    function (declare, lang, n, SpatialReference) {
        return declare("EchartsLayer", null, {
			name:"EchartsLayer",
			view: null,
			box: null,
			chart: null,
			chartOption: null,
			visible:true,
			constructor: function (view, option) {
				//注册一个坐标系arcgis
				echarts.registerCoordinateSystem('arcgis', this.getE3CoordinateSystem(view));
				this.init(view,option);
			},
			init:function(view, option) {
				this.setBaseMap(view);
				this.createLayer();
				//this.setChartOption(option);
				
			},
			setBaseMap:function(view) {
				this.view = view;
			},
			setChartOption:function(option) {
				this.chartOption = option;
				this.setCharts();
			},
			setVisible:function(bool) {
				if (!this.box || this.visible===bool) return;
				this.box.hidden = !bool;
				this.visible = bool;
				bool===true && setCharts();
			},
			refreshBegin:function(){
				this.box.hidden = true;
			},
			refreshing:function(){
				setCharts();
			},
			refreshEnd:function(){
				this.box.hidden = false;
			},
			on:function(eventName, handler, context){
				this.chart.on(eventName, handler, context);
			},
			off:function(eventName, handler, context){
				this.chart.off(eventName, handler, context);
			},
			map_DragStart_Listener : null,
			map_DragEnd_Listener : null,
			map_ZoomStart_Listener : null,
			map_ZoomEnd_Listener : null,
			map_ExtentChange_Listener : null,
			map_click_Listener : null,
			setCharts:function() {
				if(!this.visible) return;
				if(this.chartOption==null||this.chartOption=='undefined') return;
				let baseExtent = this.view.extent;
				//判断是否使用了mark类型标签，每次重绘要重新转换地理坐标到屏幕坐标
				//根据地图extent,重绘echarts
				this.chartOption.xAxis = {show: false, min: baseExtent.xmin, max: baseExtent.xmax};
				this.chartOption.yAxis = {show: false, min: baseExtent.ymin, max: baseExtent.ymax};
				this.chart.setOption(this.chartOption);
				this.chartOption.animation = false;
			},
			/*创建layer的容器，添加到map的layers下面*/
			createLayer:function() {
				let box = this.box = document.createElement("div");
				box.setAttribute("id","testData")
				box.setAttribute("name","testData")
				box.style.width =  this.view.width + 'px';
				box.style.height = this.view.height + 'px';
				box.style.position = "absolute";
				box.style.top = 0;
				box.style.left = 0;
				let parent = document.getElementsByClassName("esri-view-surface")[0];
				parent.appendChild(box);
				this.chart = echarts.init(box);
				//this.setCharts();
				this.startMapEventListeners();
			},
			/*销毁实例*/
			removeLayer:function() {
				this.box.outerHTML = "";
				this.view = null;
				this.box = null;
				this.originLyr = null;
				this.features = null;
				this.screenData = [];
				this.chart = null;
				this.chartOption = null;
				this.map_DragStart_Listener.remove();
				this.map_DragEnd_Listener.remove();
				this.map_ZoomStart_Listener.remove();
				this.map_ZoomEnd_Listener.remove();
				this.map_ExtentChange_Listener.remove();
			},
			/*监听地图事件，根据图层是否显示，判断是否重绘echarts*/
			startMapEventListeners:function() {
				let view=this.view;
				view.watch("extent",lang.hitch(this,function () {
					

					if(!this.visible) return;
					this.setCharts();
					this.chart.resize();
					this.box.hidden = false;
				}));
				view.watch("rotation",lang.hitch(this,function () {
					if(!this.visible) return;
					this.setCharts();
					this.chart.resize();
					this.box.hidden = false;
				}));
				
			},
			getE3CoordinateSystem:function(map) {
				var CoordSystem = function CoordSystem(map) {
							this.map = map;
							this._mapOffset = [0, 0];
						};
				CoordSystem.create = function (ecModel) {
					  ecModel.eachSeries(function (seriesModel) {
						  if (seriesModel.get('coordinateSystem') ===   'arcgis') {
									seriesModel.coordinateSystem = new CoordSystem(map);
								}
							});
						};
				CoordSystem.getDimensionsInfo = function () {
							return ['x', 'y'];
						};
				CoordSystem.dimensions = ['x', 'y'];
				CoordSystem.prototype.dimensions =  ['x', 'y'];
				CoordSystem.prototype.setMapOffset = function setMapOffset(mapOffset) {
							this._mapOffset = mapOffset;
						}
				CoordSystem.prototype.dataToPoint = function dataToPoint(data) {
					   var point  = {
								type:"point",
								x:data[0],
								y:data[1],
								spatialReference:new SpatialReference(4326)
							};
					   var px = map.toScreen(point);
					   var mapOffset = this._mapOffset;
					   return [px.x - mapOffset[0], px.y - mapOffset[1]];
					   }
				CoordSystem.prototype.pointToData=  function pointToData(pt) {
							var mapOffset = this._mapOffset;
							var screentPoint  = { x:pt[0] + mapOffset[0],
												  y:pt[1] + mapOffset[1]
							};
							var data = map.toMap(screentPoint);
							return [data.x, data.y];
						};
				CoordSystem.prototype.getViewRect =  function getViewRect() {
							return new graphic.BoundingRect(0, 0, this.map.width, this.map.height);
						};
				CoordSystem.prototype.getRoamTransform = function getRoamTransform() {
							return matrix.create();
						};
						return CoordSystem
			}
			
		});
})

 

 

 

 

 

 

爱睡懒觉的老舅
关注
专栏目录
arcgis api 4.x for js 结合Echarts4实现航线图效果
12-15
arcgis api 4.x for js 结合Echarts4实现航线图效果，arcgis api 4.x for js 结合Echarts4实现航线图效果，arcgis api 4.x for js 结合Echarts4实现航线图效果
echarts飞机航线图修改飞机的样式
qq_40869428的博客
01-07 4576
echarts飞机航线图修改飞机的样式 我想把小飞机换成其他资源，比如救护车。但是官方给的代码只是： var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829...
Echarts三维坐标系
ZERO の BLOG
09-19 5657
Echarts三维坐标系 一、坐标系 1.1 globe-地图组件 提供地球坐标系 可展示三维图：散点图、气泡图、柱状图、飞线图 部分属性 |属性|含义|默认值| |:–||:–||:–| |globeRadius|地球半径|100| |globeOuterRadius|地球外半径，内外半径构成的空间用于绘图|150| 1.2 geo3D-三维地理坐标系组件 提供三维地理坐标系 可展示三维图...
Echarts 修改地图的标示
张夏_keep的博客
02-21 3755
原飞机的路径为： var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.
基于ArcGIS JS API 4.x集成echarts，实现迁徙图、散点图、热力图、柱状图、折线图、饼图
dGIS的博客
03-15 4716
echarts3.js库支持ArcGIS JS API 4.x 支持柱状图、折线图、饼图等基础图表以及迁徙图、散点图、热力图等图表 源码访问https://github.com/dksgis/Echarts3Layer-jsapi4x 基于作者 wandergis 的arcgis-echarts3的代码重构 重构了Echarts3Layer，使其支持ArcGIS JS API 4....
arcgis api 4.x for js 结合Echarts4实现迁徙图效果.zip
最新发布
06-19
《ArcGIS API 4.x for JavaScript与ECharts4结合实现迁徙图效果详解》 迁徙图是一种常用的数据可视化方式，常用于展示人口、物种、信息等在不同地理位置之间的流动情况。在Web开发中，利用高级的地图API如Esri的...
arcgis api 4.x for js 结合Echarts4实现统计图.zip
06-19
在本文中，我们将深入探讨如何使用ArcGIS API 4.x for JavaScript（以下简称ArcGIS API 4.x）结合ECharts 4来实现丰富的统计图表。ECharts是一个轻量级且功能强大的开源JavaScript图表库，而ArcGIS API是Esri提供的...
arcgis api 4.x for js 结合Echarts4实现散点图效果.zip
06-19
在本文中，我们将深入探讨如何使用ArcGIS API 4.x for JavaScript与ECharts 4集成，以创建引人入胜的散点图效果。ArcGIS API是Esri公司提供的一个强大的地图开发工具，用于构建交互式的地理信息系统（GIS）应用程序...
ArcGIS API for JavaScript v3.x与v4.x最新版本api与sdk开发包资源下载
06-08
提供ArcGIS API for JavaScript v3.x与v4.x最新的api与sdk开发包资源下载，2021.06.08最新版本为v3.36及v4.19，分享文件包含以往旧的资源包，因CSDN上传限制，现将资源包整合至天翼云（下载不会限速），以后将在天翼...
arcgis制作城、镇、村范围效果图
qq_35825462的博客
01-14 2133
arcgis制作城、镇、村范围效果图
关于怎么在echarts飞机迁移图中换掉飞机图标
热门推荐
just__zhouzhou的博客
05-24 1万+
其实这个在API文档中也有写到，但也是花费我一些时间修改的，所以就小小的记录下：官方的例子显示的迁移图：然后我们可以在js代码中找到以下代码：var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332...
echarts 地图_【ArcGIS JS API + eCharts系列】实现二、三维迁徙图的绘制，JavaScript, WebGIS, 地图...
weixin_39976382的博客
11-29 596
概述上一篇文章通过纯前端的方式实现了ArcGIS JS API和eCharts的普通二维图表绘制，因为这些图表绘制其实是跟地理坐标无关的，只需要设置图表的位置即可，所以仅仅用了纯前端的方式去实现。这篇文章通过参考【dGIS】大佬的文章，重构了EchartsLayer.js文件(因为网上所有关于EchartsLayer.js文件的代码全部是编译过的，阅读起来很不友好，并且有些Echarts...
百度地图+迁徙+自定义城市 echarts
hsany330的专栏
07-30 879
var geoCoordMap = { "1": [119.2070396626, 26.0471838188], "2": [119.2147498638, 26.0481609598], "3": [119.209339, 26.038355], "4": [119.2163806469, 26.0442086921], "5": [119.2132263691, 26.0498767809], "6": .
ArcGIS底图+eCharts 迁徙图图显示与隐藏
ScapeD的博客
01-11 2076
通过使用Echarts3Layer.js扩展，可以实现在ArcGIS底图上添加eCharts图表，可以简单得到比ArcGIS API for JS更好的效果。 一般的eCharts图表可以通过clear()方法或echarts.setOption(option,true);方法去掉，但是此处不行。因为此处新增加的实际是一个新的图层。我通过修改Echarts3Layer.js源码实现了图层的显示与...
Echarts4.0 迁徙图模拟Echarts2.0样式（实现飞行轨迹和迁徙线的颜色和点的颜色一致且颜色不一样）
zhengjie0722的博客
05-01 9450
  由于公司业务需求做Echarts4.0的迁徙图，但是Echarts4.0默认的迁徙图的飞行轨迹和迁徙线的颜色都是一样的，比较单调，现在模拟Echarts2.0的样式模拟了一个demo，虽然没有全部相同，但大体相近。备忘一下 let minigrateChart = echarts.init(document.getElementById("MinigrateChart")); ...
GIS | 绘制流向图（Flow Maps）
weixin_41340063的博客
09-23 6600
本文部分内容参考：https://blog.csdn.net/arcgis_all/article/details/8858228 高德地图开发者平台 高德可视化数据的功能可以画出流向图，但是有数据量的限制，选择种类也较少，之前的文章里面有提到过：https://blog.csdn.net/weixin_41340063/article/details/100096035 Echa...
echart地图
weixin_43390711的博客
12-08 229
//1,2,3,4是显示地图的基础步骤 let mapJson = require('../../json/china.json') -->1 echarts.registerMap('anyName',mapJson) -->2 series:[ { type:'map', -->3 mapType:'anyName', -->4 nameMap:{//地图的自定义名称映射 'BJ':'...
【第二季】Arcgis地图制图基础|（三）巧用制图表达
xu780820的博客
08-17 5439
写在前面的话： B站搜索“中图地信”便可观看全套71章节详细操作视频（有操作数据获取，同步学习） （一）房屋阴影效果的实现 创建房屋阴影效果，分以下2个步骤来实现。 第1步：将要素类符号转换为制图表达 【由于需要使用制图表达，因此数据需要存储在geodatabase当中】 [1]启动ArcMap，打开【房屋阴影.mxd】工程文件，如图 1； 图 1 初始符号化效果 [2]在内容列表中，右键单击【建筑点】图层，选择【将符号系统转换为制图表达】； 图 2 符号系统转换为制图表达 [
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值