openlayers-统计图显示(中国区域高亮)
openlayers版本: v3.19.1-dist
统计图效果:
使用浏览器:谷歌80.0.3987.162(正式版本) (64 位)
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-Type" content="text/html; charset=UTF-8" /> <title>openlayers-统计图显示(中国区域高亮)</title> <link href="v3.19.1-dist/ol.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- 地图容器 --> <div id="mapCon" style="height: 95%;"></div> <!-- GDP图表容器 --> <div id="gdpChart" style="position: absolute;width:500px;height:380px"></div> </body> <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script> <script src="v3.19.1-dist/ol-debug.js" type="text/javascript"></script> <script src="js/zondyClient.js" type="text/javascript"></script> <script src="js/echarts.min.js" type="text/javascript"></script> <script type="text/javascript"> var map; $(document).ready(function (){ // 初始化天地图图层 var layer1 = new Zondy.Map.TianDiTu({ layerType: Zondy.Enum.Map.TiandituType.VEC, projection: ol.proj.get('EPSG:4326'), // 天地图key token: "e83d04f3e04272b8d9e91615e309fe36" }); // 初始化地图容器 map = new ol.Map({ target: "mapCon", layers: [layer1], view: new ol.View({ center: [109.05167, 31.78305],// 地图中心点(天地图里面的经纬度) zoom: 5, minZoom: 5,// 最大缩放级别 maxZoom: 5,// 最小缩放级别 projection: "EPSG:4326" }) }); // 禁止鼠标拖动 disabledMove(); // 显示中国区域 displayChina(); // 创建图表对象 var chart = new ol.Overlay({ // 设置图表显示位置 position: [109.05167, 31.78305], // 上面的经纬度就是图表的左上角、所以这里需要修补一下位置、类似css的top、margin(单位px) offset: [-260, -190], // 指定这个图表对象使用的是那个Div element: document.getElementById("gdpChart") }); // 把图表对象添加到地图容器中 map.addOverlay(chart); // 初始化GDP图表 initCharts(); }); /** 禁止鼠标拖动 */ function disabledMove(){ let pan = getFun(); pan.setActive(false); function getFun() { let pan; map.getInteractions().forEach(function(element, index, array) { if(element instanceof ol.interaction.DragPan) { pan = element; } }) return pan; } } /** 显示中国区域 */ function displayChina(){ var queryStruct = new Zondy.Service.QueryFeatureStruct(); //是否包含几何图形信息 queryStruct.IncludeGeometry = true; //是否包含属性信息 queryStruct.IncludeAttribute = true; //是否包含图形显示参数 queryStruct.IncludeWebGraphic = false; var queryParam = new Zondy.Service.QueryByLayerParameter("gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界政区", { resultFormat: "json", struct: queryStruct }); //设置查询分页号 queryParam.pageIndex = 0; //设置查询要素数目 queryParam.recordNumber = 20; //设置属性条件 queryParam.where = "name='中国'"; //实例化地图文档查询服务对象 var queryService = new Zondy.Service.QueryLayerFeature(queryParam, { ip: "develop.smaryun.com", port: "6163" }); queryService.query(function(result){ //初始化Zondy.Format.PolygonJSON类 var format = new Zondy.Format.PolygonJSON(); //将MapGIS要素JSON反序列化为ol.Feature类型数组 var features = format.read(result); //实例化一个矢量图层drawLayerr用于高亮显示结果 var drawSource = new ol.source.Vector({ //是否在地图水平坐标轴上重复 wrapX: false }); drawSource.addFeatures(features); drawLayer = new ol.layer.Vector({ source: drawSource, style: new ol.style.Style({ //填充色 fill: new ol.style.Fill({ color: 'gray' }), //边线样式 stroke: new ol.style.Stroke({ color: 'rgba(255,204, 51, 1)', width: 1 }) }) }); map.addLayer(drawLayer); }, function (){}); } /** 初始化GDP图表 */ function initCharts() { var myChart = echarts.init(document.getElementById("gdpChart")); var option = { color: ['#3398DB'], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: ['上海', '北京', '深圳', '广州', '重庆', '苏州', '成都'], axisTick: { alignWithLabel: true } } ], yAxis: [ { type: 'value' } ], series: [ { name: '2019年经济GDP(亿)', type: 'bar', barWidth: '60%', data: [38155.32, 35371.30, 26927.09, 23628.60, 23605.77, 19235.80, 17012.65] } ] }; myChart.setOption(option); } </script> </html>
openlayers-统计图显示(中国区域高亮)的更多相关文章
- ArcMap制图_显示指定区域地图内容
摘要:有一张完整的中国地图,有时仅要求针对某一特定区域制图,那么如何在不进行裁剪的情况下仅显示该区域范围的要素内容? 步骤: 1.打开ArcMap,加载完整的中国地图: 2.将要显示的区域范围制作成一 ...
- CSS---解决内容过多就会出文本溢出(显示在区域外面,不换行的情况)
当我们设置我的的div,或者其它文本框固定宽度之后,文本内容过多就会出文本溢出(显示在区域外面,不换行的情况). 这时我们可以使用Css中的几个属于来解.有以下的三个属于可以解决问题: 1,word- ...
- C# 使用winForm的TreeView显示中国城镇四级联动
直接上代码吧,这里 MySql.Data.MySqlClient;需要到mysql官网下载mysql-connector-net-6.9.8-noinstall.zip 访问密码 6073 usi ...
- Django设置TIME_ZONE和LANGUAGE_CODE为中国区域
Django默认的timezone是 TIME_ZONE = 'America/Chicago' LANGUAGE_CODE = 'en-us' 设置为中国区域: TIME_ZONE = 'Asia/ ...
- 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注
原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...
- 得到ImageView中drawable显示的区域的计算方法
我们都知道Imageview中有不同的拉伸比率,比如fitStart,centCrop这样的,所以imageview中的drawable不一定和imageview占有相同的位置和大小,那么怎么计算呢? ...
- 【FusionCharts学习-3】显示中国地图
概述 使用FusionCharts显示中国地图 资源获取 地图下载地址:http://www.fusioncharts.com/download/maps/definition/ 将下载的地图拷贝 ...
- css控制打印时只显示指定区域
CreateTime--2017年9月26日08:16:04 Author:Marydon css控制打印时只显示指定区域 思路: 1.使用打印命令@media print: 2.控制执行打印命令 ...
- [原创.数据可视化系列之一]使用openlayers 3 显示聚合数据
在地图上显示点数据是最常用的地图展示功能之一,但是如果很多点在地图上显示,或造成密密麻麻的一片,无法正常看清楚,这个时候,一般有两种解决方案,一种是根据数据重要程度进行标注,重要的显示大一些,不重要的 ...
随机推荐
- C++ 随机函数/伪随机函数
使用rand()函数时,每次随机数都是固定(伪随机数),在前面加上以下函数,每次生成的随机数为随机, srand((int)time(NULL)); rand();
- docker的安装,自己写了一个安装docker的脚本,辅助做docker安装的实验(ubuntu)
#!/bin/bash #获取用户名 [ pwd == '/root' ] && hn="root@$(hostname):~#" || hn="root ...
- 会话存储sessionStorage
会话存储的工作方式和本地存储的工作方式很接近,不同之处在于数据是各个浏览器上下文私有的,会在文档被关闭时移除(注意是被关闭时才移除,刷新是不会移除的).我们通过全局sessionStorage访问会话 ...
- 学习Docker的记录
一.下载Docker for Windows 与 安装教程 参考文档一步一步的来学习 文档1 文档2 二.Docker的常用命令介绍 docker run -it --rm -p 80 ...
- hive实践_01
本地一份包含有中文的文本文件在上传到hive前,需要先转化为UTF-8格式,否则会出现乱码.(notepad++ 格式>>>转化UTF-8编码格式) -------------- ...
- [Alg] 文本匹配-单模匹配-KMP
1. 暴力求解 如下图所示.蓝色的小三角表示和sequence比较时的开始字符,绿色小三角表示失败后模式串比对的开始字符,红色框表示当前比较的字符对. 当和模式串发生不匹配时,蓝色小三角后移一位,绿色 ...
- ERP系统功能及部署方式
ERP是对企业经营过程中的一些事项进行系统化管理的一种软件,所以ERP软件包含企业经营过程中需要用到的多种功能管理模块,并且ERP软件有两种部署方式.下面一起来了解一下相关的知识吧! ERP系统的功能 ...
- Js的new运算符
new运算符 在JavaScript中,new是一个语法糖,可以简化代码的编写,可以批量创建对象实例. 语法糖Syntactic sugar,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影 ...
- RTSP协议进行视频取流的方法、注意点及python实现
在视频应用中,我们一般都需要基于摄像头或录像机的视频流进行二次开发,那么就涉及到如何将视频流取出来. 在摄像机安装好之后,一般是通过局域网与本地的服务器进行连接,要取录像机的视频流就要在局域网范围内进 ...
- hdu1175 连连看(bfs疯狂MLE和T,遂考虑dfs+剪枝)
题目链接:http://icpc.njust.edu.cn/Problem/Hdu/1175/ 题目大意就是给出地图,上面有若干的数,相当于连连看,给了q个查询,问给出的两个位置的数能否在两次转弯以内 ...