Openlayers實(shí)現(xiàn)根據(jù)半徑繪制圓形
更新時(shí)間：2022年08月24日 15:36:02 作者：我是ed
這篇文章主要介紹了利用Openlayers實(shí)現(xiàn)繪制三個(gè)圓形，繪制完成之后，三個(gè)圓心連接起來(lái)，然后標(biāo)記出每?jī)蓚€(gè)圓心之間的距離，感興趣的可以了解一下
實(shí)現(xiàn)一個(gè)什么效果呢，就是在openlayers上面，繪制三個(gè)圓形，繪制完成之后，三個(gè)圓心連接起來(lái)，然后標(biāo)記出每?jī)蓚€(gè)圓心之間的距離。
期望效果
寫(xiě)在前面
其實(shí)這個(gè)效果很好實(shí)現(xiàn)的，之前有幾篇博文呢，關(guān)于 openlayers 根據(jù)半徑繪制圓形，根據(jù)經(jīng)緯度坐標(biāo)繪制連線(xiàn)啥的都有涉及過(guò)，所以說(shuō)如果要想實(shí)現(xiàn)今天想做的功能拼接一下就可以了，做一個(gè)快樂(lè)的代碼裁縫。
繪制圓形
簡(jiǎn)單的什么安裝 openlayers，導(dǎo)入，使用這里就不說(shuō)了，如果不清楚直接看之前的博客，今天不多廢話(huà)直接進(jìn)入正題。
首先第一步，我們先繪制著三個(gè)藍(lán)色的圓形。
關(guān)鍵代碼如下，特別說(shuō)一下哈，這是關(guān)鍵代碼，之前有人問(wèn)說(shuō)你代碼跑不起來(lái)，我特別無(wú)語(yǔ)，這是關(guān)鍵代碼，那些基本的創(chuàng)建變量啥的，一看報(bào)錯(cuò)就知道沒(méi)有創(chuàng)建，自己創(chuàng)建就行啦！沒(méi)有那么難??！適當(dāng)?shù)母囊幌戮秃昧寺铩?/p>
// 繪制圓
addPoint() {
// 下面這個(gè)經(jīng)緯度都是寫(xiě)死的哈，一會(huì)連線(xiàn)和標(biāo)簽都是一樣的數(shù)據(jù)
let sites = [{
site: [116.400819, 39.916263],
name: '覆蓋物1'
}, {
site: [116.450819, 39.917263],
name: '覆蓋物2'
}, {
site: [116.350819, 39.857263],
name: '覆蓋物3'
}]
let features = []
sites.forEach((item, index) => {
let feature = new Feature({
title: item.name,
geometry: new Circle(fromLonLat(item.site), this.getRadius(2000)),
})
feature.setStyle(
new Style({
fill: new Fill({
color: 'rgba(32, 157, 230, 1)'
}),
})
)
features.push(feature)
})
let source = new VectorSource()
source.addFeatures(features)
let layer = new VectorLayer({
opacity: 0.2
})
layer.setSource(source)
map.addLayer(layer)
},
好的，上面這一步完成之后呢，刷新頁(yè)面看到的效果應(yīng)該是下面的樣子。
添加圓形標(biāo)識(shí)
好了哈，我們給每個(gè)圓形添加一個(gè)文字標(biāo)識(shí)，就是 覆蓋物1,、覆蓋物2、覆蓋物3這種。
關(guān)鍵代碼：
// 添加標(biāo)識(shí)
addLabel() {
let sites = [{
site: [116.400819, 39.916263],
name: '覆蓋物1'
}, {
site: [116.450819, 39.917263],
name: '覆蓋物2'
}, {
site: [116.350819, 39.857263],
name: '覆蓋物3'
}]
let features = []
sites.forEach((item, index) => {
let feature = new Feature({
title: item.name,
geometry: new Point(fromLonLat(item.site)),
})
feature.setStyle(
new Style({
text: new Text({
textAlign: 'center',
textBaseline: 'middle',
font: 'normal 17px 微軟雅黑',
text: item.name,
fill: new Fill({
color: 'red'
}),
})
})
)
features.push(feature)
})
let sourceLabel = new VectorSource()
sourceLabel.addFeatures(features)
let layerLabel = new VectorLayer({
opacity: 1
})
layerLabel.setSource(sourceLabel)
map.addLayer(layerLabel)
},
上面的代碼執(zhí)行完成之后，就得到了下面的效果了。
繪制連線(xiàn)
接下來(lái)就是吧圓兩兩相連，用虛線(xiàn)也好，用實(shí)線(xiàn)也好，連接起來(lái)，這個(gè)也很簡(jiǎn)單，直接上代碼。
// 添加連線(xiàn)
addLink() {
let sites = [{
site: [116.400819, 39.916263],
name: '覆蓋物1'
}, {
site: [116.450819, 39.917263],
name: '覆蓋物2'
}, {
site: [116.350819, 39.857263],
name: '覆蓋物3'
}]
sites.push(sites[0])
let linkData = []
sites.forEach(item => {
linkData.push(fromLonLat(item.site))
})
let features = []
let featureLine = new Feature({
geometry: new LineString(linkData),
});
let lineStyle = new Style({
stroke: new Stroke({
color: '#000',
lineDash: [10, 10, 10, 10], // 重點(diǎn)在這
width: 2,
}),
});
// 添加線(xiàn)的樣式
featureLine.setStyle(lineStyle);
features.push(featureLine)
let sourceLink = new VectorSource()
sourceLink.addFeatures(features)
let layerLink = new VectorLayer()
layerLink.setSource(sourceLink)
map.addLayer(layerLink)
},
上面的代碼執(zhí)行完成之后呢，圓就兩兩相連了。
標(biāo)注距離
這個(gè)有兩個(gè)步驟，第一個(gè)步驟，計(jì)算距離，第二個(gè)步驟，標(biāo)注距離。
這個(gè)直接使用連線(xiàn)的圖層操作就可以了，所以說(shuō)修改連線(xiàn)代碼，繼續(xù)來(lái)計(jì)算距離，獲取距離后進(jìn)行標(biāo)注。
// 添加連線(xiàn)
addLink() {
let sites = [{
site: [116.400819, 39.916263],
name: '覆蓋物1'
}, {
site: [116.450819, 39.917263],
name: '覆蓋物2'
}, {
site: [116.350819, 39.857263],
name: '覆蓋物3'
}]
sites.push(sites[0])
let linkData = []
sites.forEach(item => {
linkData.push(fromLonLat(item.site))
})
let features = []
let featureLine = new Feature({
geometry: new LineString(linkData),
});
let lineStyle = new Style({
stroke: new Stroke({
color: '#000',
lineDash: [10, 10, 10, 10], // 重點(diǎn)在這
width: 2,
}),
});
// 添加線(xiàn)的樣式
featureLine.setStyle(lineStyle);
features.push(featureLine)
let distanceList = []
for (let index = 0; index < sites.length - 1; index++) {
let site = fromLonLat([(sites[index].site[0] + sites[index + 1].site[0]) / 2, (sites[index].site[1] + sites[index + 1].site[1]) / 2])
let length = getDistance(sites[index].site, sites[index + 1].site);
distanceList.push({
site,
length,
})
}
distanceList.forEach((item) => {
let feature = new Feature({
title: '這是測(cè)試用的',
geometry: new Point(item.site),
})
feature.setStyle(
new Style({
text: new Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基準(zhǔn)線(xiàn)
font: 'normal 12px 微軟雅黑', //文字樣式
text: item.length.toFixed(0) + 'm', //文本內(nèi)容
padding: [1, 1, 1, 1],
backgroundFill: new Fill({ //文本填充樣式（即文字顏色)
color: '#d5e2f9'
}),
fill: new Fill({ //文本填充樣式（即文字顏色)
color: 'red'
}),
})
})
)
features.push(feature)
})
let sourceLink = new VectorSource()
sourceLink.addFeatures(features)
let layerLink = new VectorLayer()
layerLink.setSource(sourceLink)
map.addLayer(layerLink)
},
好了，到此為止，最開(kāi)始想要實(shí)現(xiàn)的效果就都出來(lái)了。
好了，下面放一下全部代碼吧。
<template>
<div style="width:100%;height: 100%;position: relative;">
<div id="map"></div>
</div>
</template>
<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
import * as olProj from 'ol/proj';
import Draw from 'ol/interaction/Draw';
import Overlay from 'ol/Overlay';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
import { OSM, Vector as VectorSource } from 'ol/source';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import Feature from 'ol/Feature';
import { Point, MultiLineString, LineString, Polygon } from "ol/geom";
import { fromLonLat } from 'ol/proj';
import Circle from 'ol/geom/Circle';
import { ScaleLine, defaults as defaultControls } from 'ol/control';
import { circular } from 'ol/geom/Polygon';
import * as olSphere from 'ol/sphere';
import LinearRing from 'ol/geom/LinearRing';
import { getTransform } from 'ol/proj';
import { getArea, getLength, getDistance } from 'ol/sphere';
import { unByKey } from 'ol/Observable';
import WMTS from 'ol/source/WMTS';
import ImageLayer from 'ol/layer/Image';
import ImageWMS from 'ol/source/ImageWMS';
import TileWMS from 'ol/source/TileWMS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import * as olExtent from 'ol/extent';
import GeoJSON from 'ol/format/GeoJSON';
import Text from 'ol/style/Text';
var map = null; // /地圖實(shí)例
var view = null; // 視圖實(shí)例
export default {
name: "Home",
components: {
},
data() {
return { }
},
mounted() {
this.initMap()
},
methods: {
// 初始化地圖
initMap() {
// 實(shí)例化Map
map = new Map({ // 創(chuàng)建一個(gè)地圖
layers: [new TileLayer({
source: new OSM(),
}),],
target: 'map',
view: new View({
center: fromLonLat([116.403218, 39.92372]),
zoom: 15,
constrainResolution: true, // 設(shè)置縮放級(jí)別為整數(shù)
smoothResolutionConstraint: false, // 關(guān)閉無(wú)級(jí)縮放地圖
}),
});
view = map.getView()
// 加載圓形
this.addPoint()
},
// 繪制圓
addPoint() {
let sites = [{
site: [116.400819, 39.916263],
name: '覆蓋物1'
}, {
site: [116.450819, 39.917263],
name: '覆蓋物2'
}, {
site: [116.350819, 39.857263],
name: '覆蓋物3'
}]
let features = []
sites.forEach((item, index) => {
let feature = new Feature({
title: item.name,
geometry: new Circle(fromLonLat(item.site), this.getRadius(2000)),
})
feature.setStyle(
new Style({
fill: new Fill({
color: 'rgba(32, 157, 230, 1)'
}),
})
)
features.push(feature)
})
let source = new VectorSource()
source.addFeatures(features)
let layer = new VectorLayer({
opacity: 0.2
})
layer.setSource(source)
map.addLayer(layer)
this.addLabel()
this.addLink()
},
// 添加標(biāo)識(shí)
addLabel() {
let sites = [{
site: [116.400819, 39.916263],
name: '覆蓋物1'
}, {
site: [116.450819, 39.917263],
name: '覆蓋物2'
}, {
site: [116.350819, 39.857263],
name: '覆蓋物3'
}]
let features = []
sites.forEach((item, index) => {
let feature = new Feature({
title: item.name,
geometry: new Point(fromLonLat(item.site)),
})
feature.setStyle(
new Style({
text: new Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基準(zhǔn)線(xiàn)
font: 'normal 17px 微軟雅黑', //文字樣式
text: item.name, //文本內(nèi)容
fill: new Fill({ //文本填充樣式（即文字顏色)
color: 'red'
}),
})
})
)
features.push(feature)
})
let sourceLabel = new VectorSource()
sourceLabel.addFeatures(features)
let layerLabel = new VectorLayer({
opacity: 1
})
layerLabel.setSource(sourceLabel)
map.addLayer(layerLabel)
},
// 添加連線(xiàn)
addLink() {
let sites = [{
site: [116.400819, 39.916263],
name: '覆蓋物1'
}, {
site: [116.450819, 39.917263],
name: '覆蓋物2'
}, {
site: [116.350819, 39.857263],
name: '覆蓋物3'
}]
sites.push(sites[0])
let linkData = []
sites.forEach(item => {
linkData.push(fromLonLat(item.site))
})
let features = []
let featureLine = new Feature({
geometry: new LineString(linkData),
});
let lineStyle = new Style({
stroke: new Stroke({
color: '#000',
lineDash: [10, 10, 10, 10], // 重點(diǎn)在這
width: 2,
}),
});
// 添加線(xiàn)的樣式
featureLine.setStyle(lineStyle);
features.push(featureLine)
let distanceList = []
for (let index = 0; index < sites.length - 1; index++) {
let site = fromLonLat([(sites[index].site[0] + sites[index + 1].site[0]) / 2, (sites[index].site[1] + sites[index + 1].site[1]) / 2])
let length = getDistance(sites[index].site, sites[index + 1].site);
distanceList.push({
site,
length,
})
}
distanceList.forEach((item) => {
let feature = new Feature({
title: '這是測(cè)試用的',
geometry: new Point(item.site),
})
feature.setStyle(
new Style({
text: new Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基準(zhǔn)線(xiàn)
font: 'normal 12px 微軟雅黑', //文字樣式
text: item.length.toFixed(0) + 'm', //文本內(nèi)容
padding: [1, 1, 1, 1],
backgroundFill: new Fill({ //文本填充樣式（即文字顏色)
color: '#d5e2f9'
}),
fill: new Fill({ //文本填充樣式（即文字顏色)
color: 'red'
}),
})
})
)
features.push(feature)
})
let sourceLink = new VectorSource()
sourceLink.addFeatures(features)
let layerLink = new VectorLayer()
layerLink.setSource(sourceLink)
map.addLayer(layerLink)
},
// 半徑計(jì)算
getRadius(radius) {
let metersPerUnit = map.getView().getProjection().getMetersPerUnit();
let circleRadius = radius / metersPerUnit;
return circleRadius;
},
},
};
</script>
<style scoped>
#map {
width: 100%;
height: 100%;
background-color: azure;
}
</style>
<style scoped>
/deep/.ol-tooltip {
position: relative;
background: rgba(0, 0, 0, 0.7);
border-radius: 4px;
color: white;
padding: 4px 8px;
opacity: 0.7;
white-space: nowrap;
font-size: 12px;
cursor: default;
user-select: none;
}
/deep/.ol-tooltip-measure {
opacity: 1;
font-weight: bold;
}
/deep/.ol-tooltip-static {
background-color: #ffcc33;
color: black;
border: 1px solid white;
}
/deep/.ol-tooltip-measure:before,
/deep/.ol-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%;
}
/deep/.ol-tooltip-static:before {
border-top-color: #ffcc33;
}
</style>到此這篇關(guān)于Openlayers實(shí)現(xiàn)根據(jù)半徑繪制圓形的文章就介紹到這了,更多相關(guān)Openlayers繪制圓形內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
項(xiàng)目實(shí)踐一圖片上傳之form表單還是base64前端圖片壓縮(前端圖片壓縮)
這篇文章主要介紹了項(xiàng)目實(shí)踐一圖片上傳之form表單還是base64前端圖片壓縮(前端圖片壓縮)的相關(guān)資料,需要的朋友可以參考下2016-07-07
js 調(diào)用父窗口的具體實(shí)現(xiàn)代碼
想要實(shí)現(xiàn)如題所示:父窗體需要頂一個(gè)show()方法，具體實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
JavaScript Event學(xué)習(xí)第二章 Event瀏覽器兼容性
在這一章我將對(duì)重要的事件做一個(gè)概述，包括一些流行的瀏覽器的兼容性問(wèn)題。2010-02-02
JavaScript實(shí)現(xiàn)HTML5游戲斷線(xiàn)自動(dòng)重連的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)HTML5游戲斷線(xiàn)自動(dòng)重連的方法,需要的朋友可以參考下2017-09-09
JavaScript實(shí)現(xiàn)數(shù)組全排列、去重及求最大值算法示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)組全排列、去重及求最大值算法,結(jié)合實(shí)例形式分析了JavaScript針對(duì)數(shù)組的遞歸、遍歷、排序等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
js小技巧之訪(fǎng)問(wèn)元素屬性2009-05-05
es6中的解構(gòu)賦值、擴(kuò)展運(yùn)算符和rest參數(shù)使用詳解
這篇文章分別給大家介紹了關(guān)于es6中解構(gòu)賦值、擴(kuò)展運(yùn)算符和rest參數(shù)使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09
Three.js+React制作3D夢(mèng)中海島效果
深居內(nèi)陸的人們，大概每個(gè)人都有過(guò)大海之夢(mèng)吧。本文使用React+Three.js技術(shù)棧，實(shí)現(xiàn)3D海洋和島嶼，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-05-05
詳解BootStrap表單驗(yàn)證中重置BootStrap-select驗(yàn)證提示不清除的坑
這篇文章主要介紹了詳解BootStrap表單驗(yàn)證中重置BootStrap-select驗(yàn)證提示不清除的坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
JS實(shí)現(xiàn)百度搜索框關(guān)鍵字推薦
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)百度搜索框關(guān)鍵字推薦，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02