其实这个效果很好实现的，之前有几篇博文呢，关于 openlayers 根据半径绘制圆形，根据经纬度坐标绘制连线啥的都有涉及过，所以说如果要想实现今天想做的功能拼接一下就可以了，做一个快乐的代码裁缝。
关键代码如下，特别说一下哈，这是关键代码，之前有人问说你代码跑不起来，我特别无语，这是关键代码，那些基本的创建变量啥的，一看报错就知道没有创建，自己创建就行啦！没有那么难啊！适当的改一下就好了嘛。
// 绘制圆
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)
好的，上面这一步完成之后呢，刷新页面看到的效果应该是下面的样子。
添加圆形标识
好了哈，我们给每个圆形添加一个文字标识，就是 覆盖物1,、覆盖物2、覆盖物3这种。
关键代码：
// 添加标识
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)
上面的代码执行完成之后，就得到了下面的效果了。
接下来就是吧圆两两相连，用虚线也好，用实线也好，连接起来，这个也很简单，直接上代码。
// 添加连线
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], // 重点在这
width: 2,
// 添加线的样式
featureLine.setStyle(lineStyle);
features.push(featureLine)
let sourceLink = new VectorSource()
sourceLink.addFeatures(features)
let layerLink = new VectorLayer()
layerLink.setSource(sourceLink)
map.addLayer(layerLink)
上面的代码执行完成之后呢，圆就两两相连了。
这个有两个步骤，第一个步骤，计算距离，第二个步骤，标注距离。
这个直接使用连线的图层操作就可以了，所以说修改连线代码，继续来计算距离，获取距离后进行标注。
// 添加连线
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], // 重点在这
width: 2,
// 添加线的样式
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: '这是测试用的',
geometry: new Point(item.site),
feature.setStyle(
new Style({
text: new Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基准线
font: 'normal 12px 微软雅黑', //文字样式
text: item.length.toFixed(0) + 'm', //文本内容
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)
好了，到此为止，最开始想要实现的效果就都出来了。
好了，下面放一下全部代码吧。
<template>
<div style="width:100%;height: 100%;position: relative;">
<div id="map"></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; // /地图实例
var view = null; // 视图实例
export default {
name: "Home",
components: {
data() {
return { }
mounted() {
this.initMap()
methods: {
// 初始化地图
initMap() {
// 实例化Map
map = new Map({ // 创建一个地图
layers: [new TileLayer({
source: new OSM(),
}),],
target: 'map',
view: new View({
center: fromLonLat([116.403218, 39.92372]),
zoom: 15,
constrainResolution: true, // 设置缩放级别为整数
smoothResolutionConstraint: false, // 关闭无级缩放地图
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()
// 添加标识
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)
// 添加连线
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], // 重点在这
width: 2,
// 添加线的样式
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: '这是测试用的',
geometry: new Point(item.site),
feature.setStyle(
new Style({
text: new Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基准线
font: 'normal 12px 微软雅黑', //文字样式
text: item.length.toFixed(0) + 'm', //文本内容
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)
// 半径计算
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>到此这篇关于Openlayers实现根据半径绘制圆形的文章就介绍到这了,更多相关Openlayers绘制圆形内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
教你巧用webpack在日志中记录文件行号2022-11-11
前端面向对象编程之ES5语法ES6语法详解2022-11-11
JavaScript实现大文件上传的示例代码2022-11-11
详解JavaScript中的箭头函数的使用2022-11-11
微信小程序返回到顶部功能的简单实现2022-11-11
webpack5 import动态导入实现按需加载并给文件统一命名的配置方2022-11-11
教你修改element-ui源码给el-dialog添加全屏功能2022-11-11
element-ui dialog弹窗增加全屏功能(推荐)2022-11-11
美国设下计谋,用娘炮文化重塑日本,已影响至中国2021-11-19
时空伴随者是什么意思?时空伴随者介绍2021-11-09
工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终2021-11-05
2022年放假安排出炉：五一连休5天 2022年所有节日一览表2021-10-26
电脑版 - 返回首页
2006-2023 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号
