<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="giser_yugang@163.com" />
<title>openlayers与echarts结合使用示例(example)</title>
<link rel="stylesheet" href="ol.css" type="text/css">
<script src="ol.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<style media="screen">
#map{
height: 70%;
width: 90%;
}
#chart{
height: 200px;
width: 200px;
}
#mapCon {
width: 100%;
height: 95%;
position: absolute;
}
#menu {
float: left;
position: absolute;
bottom: 10px;
left: 10px;
z-index: 2000;
}
.checkbox {
left: 20px;
}
/**
* 提示框的样式信息
*/
.tooltip {
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
color: white;
padding: 4px 8px;
opacity: 0.7;
white-space: nowrap;
}
.tooltip-measure {
opacity: 1;
font-weight: bold;
}
.tooltip-static {
background-color: #ffcc33;
color: black;
border: 1px solid white;
}
.tooltip-measure:before,
.tooltip-static:before {
border-top: 6px solid rgba(0, 0, 0, 0.5);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
content: "";
position: absolute;
bottom: -6px;
margin-left: -7px;
left: 50%;
}
.tooltip-static:before {
border-top-color: #ffcc33;
}
</style>
</head>
<body>
<div id="mapCon" style="display:none;">
<div id="menu">
<label>Geometry type </label>
<select id="type">
<option value="length">Length</option>
<option value="area">Area</option>
</select>
<label class="checkbox"><input type="checkbox" id="geodesic" checked="true" />use geodesic measures</label>
</div>
</div>
<input type="button" onclick="celiang();" value="测距"/>
<input type="button" oncliczk="closeceliang();" value="关闭测距"/>
<div id="map" class="map"></div>
<div id="chart" class="map"></div>
<script src="./echarts.min.js"></script>
<script type="text/javascript">
<!-- var offLineMap=new ol.layer.Tile({ -->
<!-- source:new ol.source.XYZ({ -->
<!-- url:'http://172.16.2.107/MapDownload/mapabc/satellite/{z}/{x}/{y}.jpg'//本例中地图瓦片保存在当前目录下的tile文件夹目录下 -->
<!-- }) -->
<!-- }); -->
<!-- var offLineMap2=new ol.layer.Tile({ -->
<!-- source:new ol.source.XYZ({ -->
<!-- url:'http://172.16.2.107/MapDownload/mapabc/overlay/{z}/{x}/{y}.png'//本例中地图瓦片保存在当前目录下的tile文件夹目录下 -->
<!-- }) -->
<!-- }); -->
//加载地图
function celiang(){
addInteraction();
}
function closeceliang(){
map.removeInteraction(draw); //移除绘制图形
map.getOverlays().clear();
this.source.clear();
//addInteraction();//添加绘图进行测量
}
var offLineMap3=new ol.layer.Tile({
source:new ol.source.XYZ({
url:'http://172.16.2.107/MapDownload/mapabc/roadmap/{z}/{x}/{y}.png'//本例中地图瓦片保存在当前目录下的tile文件夹目录下
})
});
var svglayer = new ol.layer.Vector({
source: new ol.source.Vector()
})
var map = new ol.Map({
//layers: [offLineMap,offLineMap2],
layers: [offLineMap3,svglayer],
view: new ol.View({
center: [106.51245, 29.54240],
projection: 'EPSG:4326',
zoom: 7,
minZoom:5,
maxZoom:18,
}),
target: 'map'
});
//加载echarts
var pt = [106.51245, 29.54240];
var pie = new ol.Overlay({
position: pt,
positioning: 'center-center',
element: document.getElementById('chart')
});
map.addOverlay(pie);
var chart = echarts.init(document.getElementById('chart'));
var data = [{name:'第一类',value:20},{name:'第二类',value:23},{name:'第三类',value:45},{name:'第四类',value:34},{name:'第五类',value:14}];
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
toolbox:{
show:true,
feature : {
mark : {show: true},
magicType : {
show: true,
type: ['pie', 'funnel']
},
}
},
calculable: true,
series: [{
type: 'pie',
radius: '60%',
startAngle:'45',
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle:{
color: '#000000',
fontWeight:'bold',
fontSize:16
}
}
},
lableLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
data:data
}]
};
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
//加载openlayer svg图标
/**
* 创建一个Vector的layer来放置图标
*/
var anchor = new ol.Feature({
geometry: new ol.geom.Point([107.90245, 29.54240]),
name: 'svgpoint',
});
//构建svg的Image对象
// svg图标代码
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">'+
'<path fill="#156BB1" d="M22.906,10.438c0,4.367-6.281,14.312-7.906,17.031c-1.719-2.75-7.906-12.665-7.906-17.031S10.634,2.531,15,2.531S22.906,6.071,22.906,10.438z"/>'+
'<circle fill="#FFFFFF" cx="15" cy="10.677" r="3.291"/></svg>';
//创建图片对象
var mysvg = new Image();
mysvg.src = 'data:image/svg+xml,' + escape(svg);
//图标设置样式
anchor.setStyle(new ol.style.Style({
image: new ol.style.Icon({
img: mysvg, // 设置Image对象
imgSize: [30, 30] // 及图标大小
})
}));
// 将Feature添加到之前的创建的layer中去
svglayer.getSource().addFeature(anchor);
map.on('click', function (evt) {
// var pixel = map.getEventPixel(evt.originalEvent);
var feature = map.forEachFeatureAtPixel(evt.pixel,
function (feature) {
return feature;
});
if (feature) {
var coordinates = feature.getGeometry().getCoordinates();
<!-- alert(coordinates) -->
let iconName = feature.get('name');
if(iconName == 'svgpoint'){
alert(iconName+"-click")
}
<!-- alert(iconName) -->
}
});
map.on('pointermove', function (e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map
