openlayers入门开发系列之迁徙图篇

2023-10-08 20:10
文章标签 入门 开发 系列 openlayers 图篇 迁徙

本文主要是介绍openlayers入门开发系列之迁徙图篇，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本篇的重点内容是利用openlayers实现迁徙图功能，效果图如下：

实现思路

  • 迁徙图界面设计
 //迁徙图"<div style='height:25px;background:#30A4D5;margin-top:10px;width: 98%;margin-left: 3px;float: left;'>" +"<span style='margin-left:5px;font-size: 13px;color:white;'>迁徙图</span>" +"</div>" +'<div id="moveEchartsLayer" style="padding:5px;float: left;">' +'<input type="checkbox" name="moveechartslayer" id="moveechartslayer1"  style="width: 15px;height: 15px;vertical-align: middle;margin: auto;"/>' +'<label style="font-weight: normal;vertical-align: middle;margin: auto;">迁徙图</label>' +
'</div>'
  • 迁徙图点击事件
//迁徙图
$("#moveEchartsLayer input").bind("click", function () {if (this.checked) {if(!bxmap.olEchartsLayer.isLoad){bxmap.olEchartsLayer.Init(bmap);}else{bxmap.olEchartsLayer.loadEchartsLayer();}}else {bxmap.olEchartsLayer.removeEchartsLayer();}
})
  • 迁徙图模拟数据源
var move_option = {color: ["gold","aqua","lime"],tooltip : {trigger: "item",formatter: "{b}"},toolbox: {show : false,orient : "vertical",x: "right",y: "center",feature : {mark : {show: true},dataView : {show: true, readOnly: false},restore : {show: true},saveAsImage : {show: true}}},dataRange: {show : false,min : 0,max : 100,calculable : true,color: ["#ff3333"],textStyle:{color:"#fff"}},series : [{name: "嘉善县",type: "map",roam: true,hoverable: false,mapType: "none",itemStyle:{normal:{borderColor:"rgba(100,149,237,1)",borderWidth:0.5,areaStyle:{color: "#1b1b1b"}}},data:[],markLine : {smooth:true,symbol: ["circle", "circle"],  symbolSize : 1,itemStyle : {normal: {color:"#fff",borderWidth:1,borderColor:"rgba(30,144,255,0.5)"}},data : [                                                 [{name:"海宁市"},{name:"嘉善县"}],[{name:"南湖区"},{name:"嘉善县"}],[{name:"秀洲区"},{name:"嘉善县"}],[{name:"海盐县"},{name:"嘉善县"}],[{name:"平湖市"},{name:"嘉善县"}],[{name:"嘉善县"},{name:"嘉善县"}]],},geoCoord: {                                        "海宁市": [120.492, 30.4186],"南湖区": [120.84, 30.8224],"秀洲区": [120.805, 30.9241],"海盐县": [121.043, 30.7042],"平湖市": [120.835, 30.529],"桐乡市": [120.476, 30.6122],"嘉善县":[120.994, 30.8826]}},{name: "粤港澳 Top10",type: "map",mapType: "none",data:[],markLine : {smooth:true,effect : {show: true,scaleSize: 1,period: 30,color: "#fff",shadowBlur: 10},itemStyle : {normal: {borderWidth:1,lineStyle: {type: "solid",shadowBlur: 10}}},data : [                        [{name:"南湖区"}, {name:"嘉善县"}],[{name:"秀洲区"}, {name:"嘉善县"}],[{name:"海盐县"}, {name:"嘉善县"}],[{name:"平湖市"}, {name:"嘉善县"}],[{name:"海宁市"}, {name:"嘉善县"}],[{name:"桐乡市"}, {name:"嘉善县"}]]},markPoint : {symbol:"emptyCircle",symbolSize : function (v){return 10 + v/10
                    },effect : {show: true,shadowBlur : 0},itemStyle:{normal:{label:{show:false},color: '#f4e925',shadowBlur: 10,shadowColor: '#333'},emphasis: {label:{position:"top"}}},data : [                        {name:"海宁市",value:25},{name:"南湖区",value:60},{name:"秀洲区",value:95},{name:"海盐县",value:120},{name:"平湖市",value:105},{name:"桐乡市",value:70}                        ]}}]};
  • 迁徙图初始化以及核心代码实现
var bxmap = bxmap || {};
bxmap.olEchartsLayer = {map:null,isLoad:false,olMapExt:null,Init:function(bmap){this.map = bmap.getMap();this.isLoad = true;//加载移动流向图效果this.loadEchartsLayer();},hideEchartsLayer:function(){$("#markline_EchartMap").hide();},showEchartsLayer:function(){$("#markline_EchartMap").show();//地图跳转范围this.map.getView().setCenter([12849981.699040852, 2498879.3286656872]);this.map.getView().setZoom(6);},removeEchartsLayer:function(){if(this.olMapExt)this.olMapExt.clear();},loadEchartsLayer:function(){//加载移动流向图效果var olMapExt = this.olMapExt =  new OpenLayer3Ext(this.map, echarts2);var container = olMapExt.getEchartsContainer();var myChart = olMapExt.initECharts(container);window.onresize = myChart.resize;olMapExt.setOption(move_option, true);//地图跳转范围this.map.getView().setCenter([13442168.534000002,3599400.8270378476]);this.map.getView().setZoom(10);}

}

 

/*** echarts 百度地图扩展，必须在echarts初始化前使用** @desc echarts基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。*//*** 构造函数** @param {String|HTMLElement|ol.Map} obj* @param {echarts} ec* @constructor*/function OpenLayer3Ext(map,ec) {this._map=map;var size = map.getSize();var div = this._echartsContainer = document.createElement('div');div.style.position = 'absolute';div.style.height = size[1] + 'px';div.style.width = size[0] + 'px';div.id = 'markline_EchartMap';div.style.top = 0;div.style.left = 0;map.getViewport().appendChild(div);this._init(map,ec);};/*** echarts 容器元素** @type {HTMLElement}* @private*/OpenLayer3Ext.prototype._echartsContainer = null;/*** ol地图实例** @type {BMap.Map}* @private*/OpenLayer3Ext.prototype._map = null;/*** 使用的echarts实例** @type {ECharts}* @private*/OpenLayer3Ext.prototype._ec = null;/*** geoCoord** @type {Object}* @private*/OpenLayer3Ext.prototype._geoCoord = [];/*** 记录地图的便宜量** @type {Array.<number>}* @private*/OpenLayer3Ext.prototype._mapOffset = [0, 0];/*** 初始化方法** @param {String|HTMLElement|ol.Map} obj* @param {BMap} BMap* @param {echarts} ec* @private*/OpenLayer3Ext.prototype._init = function (map,ec) {var self = this;self._map = map;/*** 获取echarts容器** @return {HTMLElement}* @public*/self.getEchartsContainer = function () {return self._echartsContainer;};/*** 获取map实例** @return {BMap.Map}* @public*/self.getMap = function () {return self._map;}/*** 经纬度转换为屏幕像素** @param {Array.<number>} geoCoord  经纬度* @return {Array.<number>}* @public*/self.geoCoord2Pixel = function (geoCoord) {return self._map.getPixelFromCoordinate(ol.proj.fromLonLat(geoCoord));};/*** 屏幕像素转换为经纬度** @param {Array.<number>} pixel  像素坐标* @return {Array.<number>}* @public*/self.pixel2GeoCoord = function (pixel) {return self._map.getCoordinateFromPixel(pixel);};/*** 初始化echarts实例** @return {ECharts}* @public*/self.initECharts = function () {self._ec = ec.init.apply(self, arguments);self._bindEvent();self._addMarkWrap();return self._ec;};// addMark wrap for get position from baidu map by geo location// by kener at 2015.01.08self._addMarkWrap = function () {function _addMark(seriesIdx, markData, markType) {var data;if (markType == 'markPoint') {var data = markData.data;if (data && data.length) {for (var k = 0, len = data.length; k < len; k++) {self._AddPos(data[k]);}}}else {data = markData.data;if (data && data.length) {for (var k = 0, len = data.length; k < len; k++) {self._AddPos(data[k][0]);self._AddPos(data[k][1]);}}}self._ec._addMarkOri(seriesIdx, markData, markType);}self._ec._addMarkOri = self._ec._addMark;self._ec._addMark = _addMark;};/*** 获取ECharts实例** @return {ECharts}* @public*/self.getECharts = function () {return self._ec;};/*** 获取地图的偏移量** @return {Array.<number>}* @public*/self.getMapOffset = function () {return self._mapOffset;};/*** 对echarts的setOption加一次处理* 用来为markPoint、markLine中添加x、y坐标，需要name与geoCoord对应** @param {Object}* @public*/self.setOption = function (option, notMerge) {var series = option.series || {};// 记录所有的geoCoordfor (var i = 0, item; item = series[i++];) {var geoCoord = item.geoCoord;if (geoCoord) {for (var k in geoCoord) {self._geoCoord[k] = geoCoord[k];}}}// 添加x、yfor (var i = 0, item; item = series[i++];) {var markPoint = item.markPoint || {};var markLine = item.markLine || {};var data = markPoint.data;if (data && data.length) {for (var k = 0, len = data.length; k < len; k++) {self._AddPos(data[k]);}}data = markLine.data;if (data && data.length) {for (var k = 0, len = data.length; k < len; k++) {self._AddPos(data[k][0]);self._AddPos(data[k][1]);}}}self._ec.setOption(option, notMerge);}/*** 增加x、y坐标** @param {Object} obj  markPoint、markLine data中的项，必须有name* @param {Object} geoCoord*/self._AddPos = function (obj) {var coord = this._geoCoord[obj.name]var pos = this.geoCoord2Pixel(coord);obj.x = pos[0] ;//- self._mapOffset[0];obj.y = pos[1] ;//- self._mapOffset[1];
        };/*** 绑定地图事件的处理方法** @private*/self._bindEvent = function () {//self._map.getView().on('change:resolution', _zoomChangeHandler('zoom'));self._viewChangeCenter = self._map.getView().on('change:center', _moveHandler('moving'));self._mapMoveend = self._map.on('moveend', _moveHandler('moveend'));self._ec.getZrender().on('dragstart', _dragZrenderHandler(true));self._ec.getZrender().on('dragend', _dragZrenderHandler(false));//新增部分self._ec.getZrender().on('mousewheel', self.refresh);self._ec.getZrender().on('dblclick', self.refresh);}self.clear = function () {ol.Observable.unByKey(self._viewChangeCenter);ol.Observable.unByKey(self._mapMoveend);$("#markline_EchartMap").empty();$("#markline_EchartMap").remove();};/*** 地图缩放触发事件** @private*/function _zoomChangeHandler(type) {_fireEvent(type);}/*** 地图移动、如拖拽触发事件** @param {string} type moving | moveend  移动中|移动结束* @return {Function}* @private*/function _moveHandler(type) {return function (e) {// 记录偏移量var offsetEle =self._echartsContainer.parentNode.parentNode.parentNode;self._mapOffset = [-parseInt(offsetEle.style.left) || 0,-parseInt(offsetEle.style.top) || 0];self._echartsContainer.style.left = self._mapOffset[0] + 'px';self._echartsContainer.style.top = self._mapOffset[1] + 'px';_fireEvent(type);}}/*** Zrender拖拽触发事件** @param {boolean} isStart* @return {Function}* @private*/function _dragZrenderHandler(isStart) {return function () {self._map.dragging = isStart;}}/*** 触发事件** @param {stirng}  type 事件类型* @private*/function _fireEvent(type) {var func = self['on' + type];if (func) {func();} else {self.refresh();}}/*** 刷新页面** @public*/self.refresh = function () {if (self._ec) {var option = self._ec.getOption();var component = self._ec.component || {};var legend = component.legend;var dataRange = component.dataRange;if (legend) {option.legend.selected = legend.getSelectedMap();}if (dataRange) {option.dataRange.range = dataRange._range;}self._ec.clear();self.setOption(option);}};return OpenLayer3Ext;}

 

这篇关于openlayers入门开发系列之迁徙图篇的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/167708。

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
科研绘图系列：R语言扩展物种堆积图（Extended Stacked Barplot）

科研绘图系列：R语言扩展物种堆积图（Extended Stacked Barplot）

介绍 R语言的扩展物种堆积图是一种数据可视化工具，它不仅展示了物种的堆积结果，还整合了不同样本分组之间的差异性分析结果。这种图形表示方法能够直观地比较不同物种在各个分组中的显著性差异，为研究者提供了一种有效的数据解读方式。 加载R包 knitr::opts_chunk$set(warning = F, message = F)library(tidyverse)library(phyl
阅读更多...
数论入门整理（updating）

数论入门整理（updating）

一、gcd lcm 基础中的基础，一般用来处理计算第一步什么的，分数化简之类。 LL gcd(LL a, LL b) { return b ? gcd(b, a % b) : a; } <pre name="code" class="cpp">LL lcm(LL a, LL b){LL c = gcd(a, b);return a / c * b;} 例题：
阅读更多...
【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入（Embedding）方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节：嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”，它将文本中的单词或短语转换成计算机能够理解的数学形式，即向量。 正如翻译机将一种语言
阅读更多...
Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包，是 JAVA 基础类的一部分，基于 Java AWT 构建，提供了一系列轻量级、可定制的图形用户界面（GUI）组件。 与 AWT 相比，Swing 提供了许多比 AWT 更好的屏幕显示元素，更加灵活和可定制，具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2