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 显示聚合数据
在地图上显示点数据是最常用的地图展示功能之一,但是如果很多点在地图上显示,或造成密密麻麻的一片,无法正常看清楚,这个时候,一般有两种解决方案,一种是根据数据重要程度进行标注,重要的显示大一些,不重要的 ...
随机推荐
- Effective Go笔记
一 格式化 使用gofmt程序对go源码进行格式化,以便统一编码风格,可直接在GoLand进行配置[1].Go源码格式使用tab作为缩进,且很少使用括号. 二 注释 Go支持块注释/**/和行注释// ...
- 【转】sublime text 2中Emmet插件8个常用的技巧
因为开始做web项目,所以最近在用sublime编辑器,知道了一个传说中的emmet,原名是zen coding.html神插件可以说是.文章部分内容转自http://www.cnblogs.com/ ...
- 给 ABP vNext 应用安装私信模块
在上一节五分钟完成 ABP vNext 通讯录 App 开发 中,我们用完成了通讯录 App 的基础开发. 这本章节,我们会给通讯录 App 安装私信模块,使不同用户能够通过相互发送消息,并接收新私信 ...
- Natas26 Writeup（PHP反序列化漏洞）
Natas26: 打开页面是一个输入坐标点进行绘图的页面. <html> <head> <!-- This stuff in the header has nothing ...
- scrapy框架xpath的几点说明
1.xpath返回的是一个列表 2.调用Selector对象的extract方法将返回选中内容的Unicode字符串 SelectorList对象调用extract_first() 方法会返回其中第一 ...
- 【Code Force】Round #589 (Div. 2) D、Complete Tripartite
题目链接 大致题意 把一个图分成三块,要求任意两块之间是完全图,块内部没有连线 分析 首先根据块内没有连线可以直接分成两块 假定点1是属于块1的,那么所有与点1连接的点,都不属于块1:反之则是块1的 ...
- javaAPI操作ES分组聚合
连接es的客户端使用的 TransportClient SearchRequestBuilder requestBuilder = transportClient.prepareSearch(indi ...
- [UWP]使用AlphaMaskEffect提升故障艺术动画的性能（顺便介绍怎么使用性能探测器分析UWP程序）
前几天发布了抄抄<CSS 故障艺术>的动画这篇文章,在这篇文章里介绍了如何使用Win2D绘制文字然后配合BlendEffect制作故障艺术的动画.本来打算就这样收手不玩这个动画了,但后来又 ...
- 运行docker大致流程
平时部署测试环境使用jenkins将代码打包成docker镜像部署在rancher中,闲下来研究了一下docker的大致流程,自己画了一个流程图
- 万字综述，核心开发者全面解读PyTorch内部机制
斯坦福大学博士生与 Facebook 人工智能研究所研究工程师 Edward Z. Yang 是 PyTorch 开源项目的核心开发者之一.他在 5 月 14 日的 PyTorch 纽约聚会上做了一个 ...