Vue+openlayers点的定位

最新推荐文章于 2025-03-20 10:12:12 发布

小仙有礼了

最新推荐文章于 2025-03-20 10:12:12 发布

阅读量757

点赞数

分类专栏： openlayers 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/CFXXXL/article/details/123335542

版权

openlayers 专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了如何在地图应用中利用GeoJSON格式加载点定位。首先创建了一个新的视图，并设置了投影、中心点和缩放级别。接着，定义了GeoJSON对象，包含一个点的坐标。然后，将这些数据转换为矢量图层的特征，并配置了样式，包括边线颜色、填充色和形状。最后，将这个点定位图层添加到地图上，实现了在地图上的精确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在引入地图基础之上加载点的定位

let that = this;
      let newView = new View({
        projection: 'EPSG:4326',
        center:coordinate,
        zoom:14
      })
      that.map.setView(newView)
      let geojsonObject = {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates:coordinate
            }
          }
        ]
      };
      let features = new GeoJSON().readFeatures(geojsonObject)
      that.pointPosition = new VectorLayer({
        className:'pointFeature',
        title:'pointFeature',
        source:new VectorSource({
          features
        }),
        style: new Style({
          //填充色
          // fill: new Fill({
          //   color: 'rgb(0,255,72)'
          // }),
          //边线颜色
          stroke: new Stroke({
            color: '#ff0008',
            width: 4
          }),
          //形状
          image: new Circle({
            radius: 7,
            fill: new Fill({
              color: '#ff334b'
            })
          })
        })
      });
      that.map.addLayer(that.pointPosition)