ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue中openlayers热力图,标记带文本,弹窗,绘制边界,多图片标记学习总结

2021-09-24 17:32:37  阅读:263  来源: 互联网

标签:vue 标记 coordinates ol openlayers new var import type


首先,我也是参考网上各种大佬代码写出来的,然后根据自己需要揉到一起的例子
我这用的底图因为没钱买地图下载器所以比较丑,还好我不在乎外表。。。。(因为要内网下做项目,所以在这写demo就没加载其他在线地图资源了,就放了这个特丑的自己下的。。。)


<div class="container-fluid">
<h1>热力图,标记带文本,弹窗,绘制边界,多图片标记</h1>
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div id="popup" class="ol-popup" ref="ol_popup">
<a href="#" id="popup-closer" class="ol-popup-closer" ref="popup_closer"></a>
<div id="popup-content" ref="popup_content"></div>
</div>
</div>
<div class="span4">
<form>
<input id="radius" type="hidden" value="5"/>
<input id="blur" type="hidden" value="15"/>
</form>
</div>
</div>
</div>
</template>
<script>
// 地图打点,弹窗,关闭弹窗 (完整demo)
// import Map from 'ol/Map.js';
// import View from 'ol/View.js';
// import {defaults as defaultControls, ScaleLine} from 'ol/control.js';
// import TileLayer from 'ol/layer/Tile.js';
// import TileWMS from 'ol/source/TileWMS.js';
// // 图上图标相关
// import OlFeature from 'ol/Feature'
// import OlGeomPoint from 'ol/geom/Point'
// import OlLayerVector from 'ol/layer/Vector'
// import OlSourceVector from 'ol/source/Vector'
// import OlStyleStyle from 'ol/style/Style'
// import OlStyleIcon from 'ol/style/Icon'
// import OlStyleStroke from 'ol/style/Stroke'
// import OlStyleCircle from 'ol/style/Circle'
// // 用来添加相关文字描述的
// import Text from 'ol/style/Text'
// import Fill from 'ol/style/Fill'
// import Overlay from 'ol/Overlay';
// import {toStringHDMS} from 'ol/coordinate';
// import {toLonLat as gettolonlat} from 'ol/proj';
// import TileJSON from 'ol/source/TileJSON';
// // 边界相关
// import OlsourceOSM from 'ol/source/OSM';
// import OlgeomPolygon from 'ol/geom/Polygon';

//
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import TileWMS from 'ol/source/TileWMS.js';
import Stamen from 'ol/source/Stamen.js';
import OlLayerVector from 'ol/layer/Vector'
import OlSourceVector from 'ol/source/Vector'
import OlGeoJSON from 'ol/format/GeoJSON'
import OlHeatmap from 'ol/layer/Heatmap'
import {defaults as defaultControls, ScaleLine} from 'ol/control.js';

import OlFeature from 'ol/Feature'
import OlGeomPoint from 'ol/geom/Point'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
import OlStyleStroke from 'ol/style/Stroke'
import OlStyleCircle from 'ol/style/Circle'
import OlgeomPolygon from 'ol/geom/Polygon';

import Overlay from 'ol/Overlay.js'
import {toLonLat as gettolonlat} from 'ol/proj';
// 用来添加相关文字描述的
import Text from 'ol/style/Text'
import Fill from 'ol/style/Fill'
// jq
import $ from 'jquery'
export default {
data () {
return {
text: ['1','2','3','4','5','67','8','9'],
min: 1e8,
max: 2e13,
steps: 50
}
},
mounted () {
this.getMap()
},
methods: {
clamp(value, low, high) {
return Math.max(low, Math.min(value, high));
},
getColor(feature) {
const ramp= colormap({
colormap: 'blackbody',
nshades: this.steps
})
const area = getArea(feature.getGeometry());
const f = Math.pow(clamp((area - this.min) / (max - this.min), 0, 1), 1 / 2);
const index = Math.round(f * (this.steps - 1));
return ramp[index];
},
getMap () {
/*
**假数据....................................................................................................................................
*/
// 热力图
var heatData = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
101.22802734375,25.83984375
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
101.66748046875,25.59814453125
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
101.84326171875,25.64208984375
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
100.7666015625,25.72998046875
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
100.92041015625,25.59814453125
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
100.810546875,25.4443359375
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
100.9423828125,25.33447265625
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
100.3271484375,25.48828125
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
102.2607421875,25.224609375
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
102.06298828125,25.15869140625
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
100.546875,26.47705078125
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
100.4150390625,26.08154296875
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
100.6787109375,24.6533203125
]
}
}
]
}
// 边界
var coordinates= [[102.39680614984, 25.233089086201], [102.3600565732, 25.242113456225], [102.34874458254, 25.250260274602],
[102.34302344712, 25.283707567814], [102.30241786584, 25.282510303013], [102.30089945595, 25.298823482743],
[102.29495791414, 25.307241631948], [102.28090327938, 25.31483263219], [102.27787165052, 25.331469477361],
[102.28158063671, 25.338247525913], [102.26875571365, 25.343837920124], [102.24821332321, 25.376802733207],
[102.23310126435, 25.375365915021], [102.23011329982, 25.381697774551], [102.22184575331, 25.383995827578],
[102.21027968492, 25.379304161599], [102.18913489167, 25.383847635371], [102.16955596667, 25.377573094897],
[102.16201098872, 25.379609944384], [102.15156389182, 25.374358469115], [102.1461431628, 25.367421131629],
[102.12300485064, 25.359558075585], [102.11864425251, 25.358974561797], [102.11380102691, 25.364149005012],
[102.10453631204, 25.365747471036], [102.07808699163, 25.347255333082], [102.06520517495, 25.342543682533],
[102.05951109694, 25.349081054111], [102.04244565157, 25.35250818155], [102.0250699279, 25.325493098635],
[102.02102101934, 25.333168625588], [102.01588753438, 25.331656255311], [102.01023132175, 25.32337571318],
[102.01591420209, 25.312498282132], [102.00799784424, 25.305823430052], [102.00636157925, 25.296778788538],
[101.9970503394, 25.296137984976], [101.99575758984, 25.292616557636], [101.97796493669, 25.288167135931],
[101.97696786259, 25.282481020224], [101.97075825127, 25.28108093448], [101.95848391237, 25.267707809995],
[101.95715258101, 25.263327709699], [101.98168044494, 25.25377572019], [101.96338018644, 25.238052279683],
[101.95795687613, 25.242937187356], [101.94329751003, 25.238005833847], [101.93175719996, 25.233136537486],
[101.92430219371, 25.224967956262], [101.93485016275, 25.210980369693], [101.94526901764, 25.19855812205],
[101.94603449564, 25.19354561018], [101.94951752277, 25.188098708124], [101.95882736017, 25.177581436424],
[101.97897749255, 25.176575285822], [101.97881329629, 25.154560252512], [101.97587001134, 25.146838503303],
[101.98371154588, 25.133455992809], [101.97593603278, 25.124828346814], [101.98315680573, 25.100125533332],
[101.97155622343, 25.086210562194], [101.99084261053, 25.081393909686], [101.98663839805, 25.06927009966],
[101.96955722573, 25.068076860016], [101.96884211824, 25.057480462171], [101.97636631342, 25.054371684127],
[101.9795686888, 25.047516077888], [101.98518115869, 25.044388313572], [101.99304702223, 25.045029326691],
[102.00085160251, 25.042331508548], [102.00745257085, 25.038313328591], [102.03161208113, 25.025467631252],
[102.04575150493, 25.055833869462], [102.06992028353, 25.067915618111], [102.08846730729, 25.070826442849],
[102.09595254341, 25.076218017715], [102.11977736834, 25.07863161916], [102.1425959885, 25.070345862074],
[102.16234951106, 25.075084806785], [102.16799658016, 25.082010788788], [102.18330725326, 25.078432633031],
[102.19158959317, 25.091180779552], [102.21946331827, 25.102793872514], [102.23085386426, 25.100744473507],
[102.2308084102, 25.104832177913], [102.2565631512, 25.125816298924], [102.26463610295, 25.118734529522],
[102.2720390385, 25.102442160668], [102.28248965384, 25.119346336362], [102.29631227787, 25.128663778615],
[102.30298578394, 25.127129306082], [102.31838231488, 25.145192295628], [102.35175120566, 25.14858516025],
[102.3647252165, 25.166701558473], [102.36002676882, 25.179323942797], [102.37183376251, 25.184576516774],
[102.39959624353, 25.184618207342], [102.41343867583, 25.191765541398], [102.41039919172, 25.194936098147],
[102.39584874998, 25.193328689781], [102.3867886771, 25.198351231932], [102.38715826257, 25.205987067737],
[102.39482310976, 25.20909112999], [102.39525305779, 25.212222926017], [102.38556017544, 25.214479099127],
[102.38481252713, 25.223681632946], [102.3994912696, 25.227137227499], [102.39680614984, 25.233089086201]
]
/*
**边界绘制
*/
//声明一个新的数组
var coordinatesPolygon = new Array();
//循环遍历将经纬度转到"EPSG:4326"投影坐标系下
for (var i = 0; i < coordinates.length; i++) {
var pointTransform = gettolonlat([coordinates[i][0], coordinates[i][1]], "EPSG:4326");
coordinatesPolygon.push(pointTransform);
}
var sources = new OlSourceVector();
var vectors = new OlLayerVector({
source: sources,
// style: function(feature) {
// return new OlStyleStyle({
// fill: new Fill({
// color: this.getColor(feature)
// // color: 'red'
// }),
// stroke: new OlStyleStroke({
// color: 'rgba(255,255,255,0.8)'
// })
// });
// },
style: function () {
return new OlStyleStyle({
fill: new Fill({
// color: this.getColor(feature)
color: function (feature) {
const ramp= colormap({
colormap: 'blackbody',
nshades: this.steps
})
const area = getArea(feature.getGeometry());
const f = Math.pow(this.clamp((area - this.min) / (max - this.min), 0, 1), 1 / 2);
const index = Math.round(f * (this.steps - 1));
console.log(index, ramp[index])
return ramp[index];
}
}),
stroke: new OlStyleStroke({
color: 'red',
width: 2
}),
image: new OlStyleCircle({
radius: 10,
fill: new Fill({
color: '#ffcc33'
})
})
})
},
wrapX: false
});
var plygon = new OlgeomPolygon([coordinatesPolygon])
//多边形要素类
var features = new OlFeature({
geometry: plygon,
});
sources.addFeature(features);
/*
**二次标点..........................................................................
*/
var vectorSource = new OlSourceVector({});
var places = [
[103.22802734375,25.83984375, require('../../assets/u3.png'), 'red'],
[100.92041015625,25.59814453125, require('../../assets/u3.png'), '#fff'],
[101.2607421875,25.224609375, require('../../assets/shui.png'), /* [113, 140, 0]*/'green' ],
];
var features = [];
for (var i = 0; i < places.length; i++) {
var iconFeature = new OlFeature({
geometry: new OlGeomPoint(gettolonlat([places[i][0], places[i][1]], 'EPSG:4326', 'EPSG:3857')),
});
var iconStyle = new OlStyleStyle({
image: new OlStyleIcon({
anchor: [0.5, 0.5],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
src: places[i][2],
color: places[i][3],
crossOrigin: 'anonymous',
})
});
iconFeature.setStyle(iconStyle);
vectorSource.addFeature(iconFeature);
}
var vectorLayer = new OlLayerVector({
source: vectorSource,
updateWhileAnimating: true,
updateWhileInteracting: true,
});
/*
**标点.....................................................................................................................
*/
// 部署图标
var layer = new OlLayerVector({
source: new OlSourceVector(),
wrapX: false
})
var t1=[100.1, 99.2, 101.21, 102.3, 103.4, 104.5, ]
var t2=[23.9, 24.9, 25.9, 24.1, 26.9, 23.0 ]
for(var i = 0; i <= 5; i++){
var anchor = new OlFeature({
geometry: new OlGeomPoint([t1[i], t2[i]], "XY"),
name: '临沧市'
});
// 设置样式,在样式中就可以设置图标
anchor.setStyle(new OlStyleStyle({
image: new OlStyleIcon({
src: require('../../assets/shui.png')
}),
text: new Text({
font: '15px Microsoft YaHei',
text: this.text[i],
fill: new Fill({
color: 'red'
})
})
}));
layer.getSource().addFeature(anchor);
}
/*
**点击标记出现弹窗.....................................................................................................................
*/
var overlay = new Overlay({
element: document.getElementById('popup'),
// autoPan: true,
autoPanAnimation: {
duration: 250
}
});
/*
**底图.....................................................................................................................
*/
//底图
var layers = [
new TileLayer({
source: new TileWMS({
url: 'http://localhost:8888/geoserver/cite/wms',
params: {
'layers': 'cite:云南省_卫图_Level_6',
'TILED': true
},
wrapX: false,
serverType: 'geoserver'
})
}),
layer,
vectorLayer,
vectors
]
var map = new Map({
overlays: [overlay],
layers: layers,
target: 'map',
view: new View({
projection: 'EPSG:4326',
center: [102.2158203125, 26.1376953125],
zoom: 6,
// maxZoom: 6,
// minZoom: 6,
extent: [97.52752127079129,21.10829862305311,106.18250666789166,29.238382000943528]
// - 21.10829862305311,97.52752127079129 + 29.238382000943528,106.18250666789166
// [21.10829862305311,106.18250666789166,97.52752127079129,29.238382000943528] 只能向右
// [21.10829862305311,106.18250666789166,29.238382000943528,97.52752127079129]点一下就消失
// [97.52752127079129,29.238382000943528,106.18250666789166,21.10829862305311]
// [21.10829862305311,97.52752127079129,29.238382000943528,106.18250666789166]
}),
controls: defaultControls({ // 去除默认控制器
attribution: false,
rotate: false,
zoom: false
}),
loadTilesWhileAnimating: true,
});

/*
**热力图.....................................................................................................................
*/

var blur = document.getElementById('blur');
var radius = document.getElementById('radius');
// Heatmap热力图
var vector = new OlHeatmap({
//矢量图层 获取gejson数据
source: new OlSourceVector({
features: (new OlGeoJSON()).readFeatures(heatData,{
dataProjection : 'EPSG:4326',
featureProjection : 'EPSG:4326' //这句话代表目标坐标系为4326
})
}),
blur: parseInt(blur.value, 10),
radius: parseInt(radius.value, 10),
wrapX: false
});
/*
**图层上其余操作加载.....................................................................................................................
*/
map.addLayer(vector);
map.on('singleclick', function(evt) {
// if (t1.indexOf(evt.coordinate[0]) > -1 && t2.indexOf(evt.coordinate[1]) > -1) {
$('#popup').hide()
$('#popup-content').empty()
var coordinate = evt.coordinate;
// var hdms = toStringHDMS(toLonLat(coordinate));
$('#popup-content').append('<p>You clicked here:</p><code>' + coordinate + '</code>');
overlay.setPosition(coordinate);
$('#popup').show()
// }
});
map.on('click',function(evt){
// $('#popup-content').empty()
});
$('#popup-closer').on('click', function() {
overlay.setPosition(undefined);
$('#popup-closer').blur();
return false;
})
}
}
}
</script>
<style scoped>
.ol-popup {
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}
/* #popup-content{
width: 200px;
height: 200px;
} */
</style>
在这里插入代码片
————————————————
版权声明:本文为CSDN博主「吴、柒」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_44547882/article/details/102495776

标签:vue,标记,coordinates,ol,openlayers,new,var,import,type
来源: https://www.cnblogs.com/javalinux/p/15331370.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有