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

首先，我也是参考网上各种大佬代码写出来的，然后根据自己需要揉到一起的例子
我这用的底图因为没钱买地图下载器所以比较丑，还好我不在乎外表。。。。（因为要内网下做项目，所以在这写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