文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Openlayers实现根据半径绘制圆形

2024-04-02 19:55

关注

实现一个什么效果呢,就是在openlayers上面,绘制三个圆形,绘制完成之后,三个圆心连接起来,然后标记出每两个圆心之间的距离。

期望效果

写在前面

其实这个效果很好实现的,之前有几篇博文呢,关于 openlayers 根据半径绘制圆形,根据经纬度坐标绘制连线啥的都有涉及过,所以说如果要想实现今天想做的功能拼接一下就可以了,做一个快乐的代码裁缝。

绘制圆形

简单的什么安装 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>
  </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绘制圆形内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯