vue+openLayers入门教程

介绍:OpenLayers官网OpenLayers插件类型可以理解为专门处理地图的一个库其中有两大类 map和view,map是ol中的核心组件,初始化一副地图(map),时,至少需要一个可视化区域(view),一个或多个图层(layer)和一个地图加载的挂载点(target)1.vue中使用Openlayers注意:地图容器需要设置宽高,否则看不到初始化的地图效果地图介绍一.关于投影1.投影,

风也曾吹过我_

22873人浏览 · 2021-09-14 14:12:18

风也曾吹过我_ · 2021-09-14 14:12:18 发布

介绍:

OpenLayers插件类型

可以理解为专门处理地图的一个库

其中有两大类 map和view,map是ol中的核心组件,初始化一副地图(map),时,至少需要一个可视化区域(view),一个或多个图层(layer)和一个地图加载的挂载点(target)

1.vue中使用Openlayers

注意:地图容器需要设置宽高,否则看不到初始化的地图效果

地图介绍

一.关于投影

1.投影,地球不是正圆的球体,是一个不规则的椭圆体,所以我们要是想让它展开在桌面上,就会发现地图都会和实际有出入,所以人们发明了各种各样的方式来缩小失真的程度.这种方式就是投用,投影目前常用的是2种,分别是:
“EPSG:4326”,在地图上将经纬度直接当做X/Y对待(最常用)
"EPSG:3785"又称为球面墨卡托投影。将地图投影到一个地图平面上。为了正确的在商业地图API上叠加地图数据，就必须使用该投影。最基本的是在商业地图API上显示栅格瓦片地图——例如TMS，WMS以及其他类似的瓦片。
2.如果我们不指定特别的投影，OpenLayers的默认投影为EPSG:3857
3.source: 数据源
4.Tile: 瓦片图层类，主要用来加载瓦片图。通过实例化瓦片图层对象，绑定其数据源（source) 加载对应的瓦片地图
5.TileArcGISRest: 使用ArcGis为地底图
6.View: 地图视图类

安装方式:

yarn install ol

2.openlayers简单使用说明

一.初始化地图

import { Map, View } from "ol";//地图,视图
import OSM from "ol/source/OSM"; //可以理解为数据源,就是一张图片
import TileLayer from "ol/layer/Tile"; //可以理解为图层
import { fromLonLat } from "ol/proj";//将坐标从经度/纬度转换为不同的投影。
export default {
  data() {
    return {
      map: null,
    };
  },
  methods: {
    createMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new OSM({}),
          }),
        ],
        view: new View({
          center: [116.394926, 39.9125],
          projection: "EPSG:3857",
          zoom: 8,
          maxZoom: 20,
        }),
      });
    },
  },
  mounted() {
    this.createMap();
  },
};

openlayersAPI

ol/proj

import {fromLonLat} from 'ol/proj'; 将坐标从经度/纬度转换为不同的投影。
fromLonLat(coordinat,projection)
coordinat:坐标为经度和纬度，即以经度为第一个元素，纬度为第二个元素的数组。
projection:目标投影。默认为 Web Mercator，即“EPSG:3857”。

import {toLonLat} from 'ol/proj'; 将坐标转换为经度/纬度。
toLonLat(coordinat,projection)
coordinat:投影坐标。
projection:坐标的投影。默认为 Web Mercator，即“EPSG:3857”。

import {transform} from 'ol/proj'; 将坐标从源投影转换为目标投影。这将返回一个新坐标（并且不会修改原始坐标）。
transform(coordinate, source, destination)
coordinate:
source:源投影样。
destination:目的地投影式。

3.openlayers一些配置了解

官网:https://openlayers.org/en/latest/apidoc/

this.map.addLayer(maplayer) //在页面新增图层
this.map.map,removeLayer(maplayer) //删除某一图层可结合this.map.getLayers().array_[index]使用
this.map.getLayers() //获取所有图层信息
maplayer.setOpacity(0); //设置透明度

4.vue使用Openlayers绘制点

//创建空的矢量容器(point)
let vectorSource = new VectorSource({});
      //创建图标层
      let vectorLayer = new VectorLayer({
        source: vectorSource,
      });
      this.clearTc();
      this.map.addLayer(vectorLayer);
      let poi = [];
      if (list.length) {
        list.forEach((item, index) => {
          item.coord = item.jwd;
          // fromLonLat像素点转经纬度
          poi.push(new Feature(new Point(fromLonLat(item.coord))));
          poi[index].set('name', item.name);
          poi[index].set('value', item.value);
          poi[index].set('id', item.id);
          let bdStyle = new Style({
            image: new CircleStyle({
              fill: new Fill({
                color: [128, 0, 128],
              }),
              radius: 6,
            }),
          });
          poi[index].setStyle(bdStyle);
        });
      }
		//根据业务需求所增加的排序
      poi.sort(function (a, b) {
        return b.get('value') - a.get('value');
      });
      poi.forEach((item, index) => {
        vectorSource.addFeature(item);
      });

5.vue使用Openlayers绘制线段

  let newList = [];
    drawList.forEach((item) => {
     newList =item.SectionCoord.geometry.coordinates[0].map(
      (ITEM) => fromLonLat(ITEM););
      let line = new Feature(new LineString(newList)); 
         line.setStyle(
         new Style({
         stroke: new Stroke({
          width: 4,
          color: '#00FF00',
         }),
        })
       );
  let vectorlayer = new VectorLayer({
  		source: new VectorSource({ features: [line] }),
    });
    this.map.addLayer(vectorlayer); //这里是执行，执行之后点就出来了

6.vue使用Openlayers监听点击事件

let that = this;
  this.map.on('click', async (e) => {
  let viewResolution = /** @type {number} */ (that.view.getResolution());
   let url = that.map
          .getLayers()
          .array_[1].getSource()
          .getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:3857', {
            INFO_FORMAT: 'application/json',
            FEATURE_COUNT: 50,
          });
if (url) {
  try {
    let res = await this.axios.get(url);
    for (let i = 0; i < res.data.features.length; i++) {
     if (res.data.features[i].id.includes('jgmile')) {
         if (res.data.features[i + 1] == null ||
 			!res.data.features[i].id.includes('jgmile') ) {
             //-----------点击的是区间----------
            let id = res.data.features[i].properties.seg;
            let result = this.mapSectionList.filter((item) => item.SectionId == id)[0];
        this.sectionQjName = `${result.SectionName} 区间 `;
         this.sectionQjNameDisplay = true;
        this.mapSectionInfo = result;
} else if (res.data.features[i + 1].id.includes('jgmile')) {
    //-----------点击的是站点----------
    let name = res.data.features[i].properties.station;
    let result = this.mapStationList.filter((item) => item.StationName == name)[0];
    this.stationFxName = `${result.StationName}站`;
    this.stationFxNameDisplay = true;
    this.mapStationInfo = result;
     }
    }
  }
 } catch (e) {
  );
 }
 }

7.vue+openlayers引入高德地图—老版本地图 (网上采取资料实现 – 项目最好不采用)

<template>
  <div class="box">
    <div id="map"></div>
  </div>
</template>
<script>
import { Map, View } from "ol";
import OSM from "ol/source/OSM";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { fromLonLat } from "ol/proj";
export default {
  data() {
    return {
      map: null,
    };
  },
  methods: {
    createMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
            }),
          }),
        ],
        view: new View({
          // center: fromLonLat([116.394926, 39.9125]),
          // center: [0,0],
          center: [116.394926, 39.9125],
          projection: "EPSG:4326",
          zoom: 10,
          maxZoom: 18,
        }),
      });
    },
  },
};

2.同时会出现图片拉伸问题,解决方法:
（1）引入import { fromLonLat } from "ol/proj";
（2）将 projection: "EPSG:4326",换成projection: "EPSG:3857"
（3）然后 center: fromLonLat([116.403414, 39.924091])

ol/proj.fromLonLat (coordinate，opt_projection) //将坐标从经度/纬度转换为不同的投影。
coordinate:[x,y]

8.openlayers引入百度地图 (网上采取资料实现 – 项目最好不采用)

<template >
  <div id="map" style="width: 100vw; height: 100vh"></div>
</template>
<script>
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import TileImage from "ol/source/TileImage";
import TileGrid from "ol/tilegrid/TileGrid";
import "ol/ol.css";
import { get } from "ol/proj";
export default {
  data() {
    return {
      map: null,
    };
  },
  methods: {
    createMap() {
      let projection = new get("EPSG:3857");
      let resolutions = [];
      for (let i = 0; i < 19; i++) {
        resolutions[i] = Math.pow(2, 18 - i);
      }
      let tilegrid = new TileGrid({
        origin: [0, 0],
        resolutions: resolutions,
      });
      let baidu_source = new TileImage({
        projection: projection,
        tileGrid: tilegrid,
        tileUrlFunction: function (tileCoord) {
          if (!tileCoord) {
            return "";
          }
          let z = tileCoord[0];
          let x = tileCoord[1];
          let y = -tileCoord[2] - 1;
          if (x < 0) {
            x = "M" + -x;
          }
          if (y < 0) {
            y = "M" + -y;
          }
          return (
            "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" +
            x +
            "&y=" +
            y +
            "&z=" +
            z +
            "&styles=pl&udt=20151021&scaler=1&p=1"
          );
        },
      });

      var baidu_layer = new Tile({
        source: baidu_source,
      });
      this.map = new Map({
        target: "map",
        layers: [baidu_layer],
        view: new View({
          center: [12959773, 4853101],
          zoom: 12,
        }),
      });
    },
  },
  mounted() {
    this.createMap();
  },
};
</script>

<style scoped>
.box {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}
#container {
  width: 100% !important;
  height: 100% !important;
}
.ol-control {
  display: none !important;
}
</style>

9.Vue+openlayers中使用拖拽缩放控件

代码片段:

import { ZoomSlider } from "ol/control";
createMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
            }),
          }),
        ],
        view: new View({
          center: fromLonLat([116.394926, 39.9125]),
          projection: "EPSG:3857",
          zoom: 12,
          maxZoom: 20,
        }),
      });
    
      let zoomslider = new ZoomSlider();
      this.map.addControl(zoomslider);
    },

10.openlayers使用全屏控件

import { FullScreen } from "ol/control";
 this.map.addControl(new FullScreen()); //在初始化地图是加上

11.openlayers使用鹰眼控件

注意事项:

实例化 overviewMapControl 控件，几个常用参数：
(1) className: 可自定义鹰眼控件的类名
(2) collapsed: 控件一开始为展开方式
(3) collapseLabel: 鹰眼展开时功能按钮上的标识
(4) label: 鹰眼折叠时功能按钮上的标识
鹰眼的数据源和主地图的数据源要对应一致
主地图的坐标系和鹰眼的坐标系，必须对应一致。
如下：均使用 EPSG:4326 坐标系

import { OverviewMap, defaults as defaultControls } from "ol/control";

createMap() {
      let overviewMapControl = new OverviewMap({
        className: "ol-overviewmap ol-custom-overviewmap",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
            }),
          }),
        ],
        view: new View({
          projection: "EPSG:3857", //坐标系
        }),
        collapseLabel: "»", //鹰眼展开时功能按钮上的标识
        label: "«", //鹰眼折叠时功能按钮上的标识
        collapsed: false, //初始为展开显示方式
      });

      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
            }),
          }),
        ],
        view: new View({
          center: fromLonLat([116.394926, 39.9125]),
          projection: "EPSG:3857",
          zoom: 12,
          maxZoom: 20,
        }),
      });
      //鹰眼控件
      this.map.addControl(overviewMapControl);
    },

12.点位显示非聚合

一、实现步骤

初始化一张地图
调用 showPoints() 来展示聚合点位，具体如下：
(1) ol.layer.Vector 创建矢量图层,数据源为 ol.source.Vector 类的实例对象

let vectorLayer = new VectorLayer({
    source: new VectorSource(),
    style: new Style({
        image: new Icon({
            src: pointImg
        })
    })
});

(2) 将点位数据遍历，生成 features 数组
(3) vectorLayer.getSource().addFeatures(features): 将要素添加到图层数据源中
(4) this.map.addLayer(vectorLayer): 聚合图层添加到地图中

全部代码:

<template >
  <div id="map" style="width: 100vw; height: 100vh"></div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import { OSM } from "ol/source";
import { Vector as VectorLayer } from "ol/layer";
import { Icon, Style } from "ol/style";
import VectorSource from "ol/source/Vector";
import Point from "ol/geom/Point";
import Feature from "ol/Feature";
import iconImg from "../../assets/img/device.png"; //图片 可自定义
export default {
  data() {
    return {
      map: null,
    };
  },
  methods: {
    //点位显示
    showPoints() {
      let mapData = [
        {
          domain_id: 10000029,
          domain_name: "北京市第一看守所",
          domain_type_name: "看守所",
          gps_x: "116.40384397",
          gps_y: "39.91487908",
          count: 0,
          channel_id: "",
          group_idx: 1,
        },
        {
          domain_id: 10000028,
          domain_name: "北京市第一看守所",
          domain_type_name: "看守所",
          gps_x: "116.47324397",
          gps_y: "39.91927908",
          count: 0,
          channel_id: "",
          group_idx: 1,
        },
        {
          domain_id: 10000027,
          domain_name: "北京市第一看守所",
          domain_type_name: "看守所",
          gps_x: "116.43324397",
          gps_y: "39.93483908",
          count: 0,
          channel_id: "",
          group_idx: 1,
        },
        {
          domain_id: 10000026,
          domain_name: "北京市第一看守所",
          domain_type_name: "看守所",
          gps_x: "116.50382397",
          gps_y: "39.99487708",
          count: 0,
          channel_id: "",
          group_idx: 1,
        },
      ];
      let vectorLayer = new VectorLayer({
        source: new VectorSource(),
        style: new Style({
          image: new Icon({
            src: iconImg,
          }),
        }),
      });

      let features = [];
      mapData.forEach((item) => {
        if (item.gps_x && item.gps_y) {
          let newObj = Object.assign({}, item);
          newObj.geometry = new Point([Number(item.gps_x), Number(item.gps_y)]);
          features.push(new Feature(newObj));
        }
      });
      vectorLayer.getSource().addFeatures(features);
      this.map.addLayer(vectorLayer);
    },

    //初始化默认地图
    createMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new Tile({
            source: new OSM(),
          }),
        ],
        view: new View({
          center: [116.40387397, 39.91488908],
          zoom: 12,
          maxZoom: 20,
          projection: "EPSG:4326",
        }),
      });
      this.showPoints();
    },
  },
  mounted() {
    this.createMap();
  },
};
</script>

<style scoped>
.box {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}
#container {
  width: 100% !important;
  height: 100% !important;
}
.ol-control {
  display: none !important;
}
</style>

13.点位显示聚合

一、实现步骤

初始化一张地图
调用 showPoints() 来展示聚合点位，具体如下：
(1) ol.source.Cluster 创建聚合对象并设置数据源和距离
(2) ol.layer.Vector 创建矢量图层,并为图层设置聚合数据源
(3) 将点位数据遍历，生成 features 数组
(4) sourceCluster.getSource().addFeatures(features): 将要素添加到数据源中
(5) this.map.addLayer(vectorLayer): 聚合图层添加到地图中

二、注意实现

1、创建矢量图层 vectorLayer 时候，可进行图层样式设置。
2、图层样式，分聚合和非聚合两种状态，调用 setClusterStyle 方法设置

const vectorLayer = new VectorLayer({
    source: sourceCluster,
    style: feature => this.setClusterStyle(feature)
});

<template>
<div class="map" id="map"></div>
</template>
<script>
    import "ol/ol.css";
    import Map from "ol/Map";
    import View from "ol/View";
    import { Cluster, Vector as VectorSource, OSM } from "ol/source";
    import {
        Circle as CircleStyle,
        Fill,
        Stroke,
        Style,
        Text,
        Icon,
    } from "ol/style";
    import { Vector as VectorLayer } from "ol/layer";
    import TileLayer from "ol/layer/Tile";
    import Point from "ol/geom/Point";
    import Feature from "ol/Feature";

    import pointImg from "../../assets/img/device.png";

    export default {
        name: "clusterLayout",

        data() {
            return {
                map: null,
            };
        },

        methods: {
            //初始化地图
            init() {
                this.map = new Map({
                    target: "map",
                    layers: [
                        new TileLayer({
                            source: new OSM({}),
                        }),
                    ],
                    view: new View({
                        center: [116.40387397, 39.91488908],
                        maxZoom: 18,
                        minZoom: 8,
                        zoom: 13,
                        projection: "EPSG:4326",
                    }),
                });
                this.showPoints();
            },

            //设置聚合图层的样式
            setClusterStyle(feature) {
                let features = feature.get("features");
                let size = features.length;
                let style;
                if (size == 1) {
                    style = [
                        new Style({
                            image: new Icon({
                                src: pointImg,
                            }),
                        }),
                    ];
                } else {
                    style = new Style({
                        image: new CircleStyle({
                            radius: 18,
                            stroke: new Stroke({
                                color: "#fff",
                            }),
                            fill: new Fill({
                                color: "#3399CC",
                            }),
                        }),
                        text: new Text({
                            font: "15px sans-serif",
                            text: size.toString(),
                            fill: new Fill({
                                color: "#fff",
                            }),
                        }),
                    });
                }
                return style;
            },

            // 展示聚合点位
            showPoints() {
                let mapData = [
                    {
                        domain_id: 10000029,
                        domain_name: "北京市第一看守所",
                        domain_type_name: "看守所",
                        gps_x: "116.40384397",
                        gps_y: "39.91487908",
                        count: 0,
                        channel_id: "",
                        group_idx: 1,
                    },
                    {
                        domain_id: 10000028,
                        domain_name: "北京市第一看守所",
                        domain_type_name: "看守所",
                        gps_x: "116.47324397",
                        gps_y: "39.91927908",
                        count: 0,
                        channel_id: "",
                        group_idx: 1,
                    },
                    {
                        domain_id: 10000027,
                        domain_name: "北京市第一看守所",
                        domain_type_name: "看守所",
                        gps_x: "116.43324397",
                        gps_y: "39.93483908",
                        count: 0,
                        channel_id: "",
                        group_idx: 1,
                    },
                    {
                        domain_id: 10000026,
                        domain_name: "北京市第一看守所",
                        domain_type_name: "看守所",
                        gps_x: "116.50382397",
                        gps_y: "39.99487708",
                        count: 0,
                        channel_id: "",
                        group_idx: 1,
                    },
                ];

                // 聚合图层数据源
                let sourceCluster = new Cluster({
                    distance: 100,
                    source: new VectorSource({
                        features: [],
                    }),
                });

                let vectorLayer = new VectorLayer({
                    source: sourceCluster,
                    style: (feature) => this.setClusterStyle(feature),
                });

                let features = [];
                mapData.forEach((item) => {
                    if (item.gps_x != "" && item.gps_y != "") {
                        let newObj = Object.assign({}, item);
                        newObj.geometry = new Point([Number(item.gps_x), Number(item.gps_y)]);
                        features.push(new Feature(newObj));
                    }
                });
                sourceCluster.getSource().addFeatures(features);
                this.map.addLayer(vectorLayer);
            },
        },

        mounted() {
            this.init();
        },
    };
</script>

<style scoped>
    .map {
        width: 100vw;
        height: 100vh;
    }
</style>

14.鼠标移入或点击显示气泡

一、实现关键

addPopup(): 地图初始化后，添加 overlay 到地图中
map对象添加 click 事件监听

this.map.on("click", evt => {
    this.mapPointerClick(evt);
});

mapPointerClick(): 鼠标移动的回调函数，判断鼠标移动之处的feature是否只有单个点位图层。只有单个点位图层，则弹出气泡显示详情
要素feature的数据，使用get()方法来获取

feature.get("domain_type_name")

二、注意事项

对于png图片，透明部分点击触发不了地图事件

<template>
<div>
    <div class="map" id="map"></div>
    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content"></div>
    </div>
    </div>
</template>
<script>
    import "ol/ol.css";
    import { Map, View } from "ol";
    import { Cluster, Vector as VectorSource, OSM } from "ol/source";
    import {
        Circle as CircleStyle,
        Fill,
        Stroke,
        Style,
        Text,
        Icon,
    } from "ol/style";
    import { Vector as VectorLayer } from "ol/layer";
    import TileLayer from "ol/layer/Tile";
    import Point from "ol/geom/Point";
    import Feature from "ol/Feature";
    import Overlay from "ol/Overlay";
    import pointImg from "../../assets/img/device.png";
    export default {
        data() {
            return {
                map: null,
                sourceCluster: null, //聚合层数据源
                overlay: null, //弹出层数据源
            };
        },

        methods: {
            //初始化地图
            init() {
                this.map = new Map({
                    target: "map",
                    layers: [
                        new TileLayer({
                            source: new OSM({}),
                        }),
                    ],
                    view: new View({
                        center: [116.40387397, 39.91488908],
                        maxZoom: 18,
                        minZoom: 8,
                        zoom: 13,
                        projection: "EPSG:4326",
                    }),
                });
                this.showPoints(); // 展示聚合点位
                this.addPopup(); //增加弹出层
                //map对象添加 pointermove 事件监听
                this.map.on("click", (evt) => {
                    this.mapPointerMove(evt);
                });
            },

            // 展示聚合点位
            showPoints() {
                let mapData = [
                    {
                        domain_id: 10000029,
                        domain_name: "北京市第一看守所",
                        domain_type_name: "看守所",
                        gps_x: "116.40384397",
                        gps_y: "39.91487908",
                        count: 0,
                        channel_id: "",
                        group_idx: 1,
                    },
                    {
                        domain_id: 10000028,
                        domain_name: "北京市第二看守所",
                        domain_type_name: "看守所",
                        gps_x: "116.47324397",
                        gps_y: "39.91927908",
                        count: 0,
                        channel_id: "",
                        group_idx: 1,
                    },
                    {
                        domain_id: 10000027,
                        domain_name: "北京市第三看守所",
                        domain_type_name: "看守所",
                        gps_x: "116.43324397",
                        gps_y: "39.93483908",
                        count: 0,
                        channel_id: "",
                        group_idx: 1,
                    },
                    {
                        domain_id: 10000026,
                        domain_name: "北京市第四看守所",
                        domain_type_name: "看守所",
                        gps_x: "116.50382397",
                        gps_y: "39.99487708",
                        count: 0,
                        channel_id: "",
                        group_idx: 1,
                    },
                ];

                // 聚合图层数据源
                this.sourceCluster = new Cluster({
                    distance: 100,
                    source: new VectorSource({
                        features: [],
                    }),
                });

                let vectorLayer = new VectorLayer({
                    source: this.sourceCluster,
                    style: (feature) => this.setClusterStyle(feature),
                });

                let features = [];
                mapData.forEach((item) => {
                    if (item.gps_x != "" && item.gps_y != "") {
                        let newObj = Object.assign({}, item);
                        newObj.geometry = new Point([Number(item.gps_x), Number(item.gps_y)]);
                        features.push(new Feature(newObj));
                    }
                });
                this.sourceCluster.getSource().addFeatures(features);
                this.map.addLayer(vectorLayer);
            },

            //设置聚合图层的样式
            setClusterStyle(feature) {
                let features = feature.get("features");
                let size = features.length;
                let style;
                if (size == 1) {
                    style = [
                        new Style({
                            image: new Icon({
                                src: pointImg,
                            }),
                        }),
                    ];
                } else {
                    style = new Style({
                        image: new CircleStyle({
                            radius: 18,
                            stroke: new Stroke({
                                color: "#fff",
                            }),
                            fill: new Fill({
                                color: "#3399CC",
                            }),
                        }),
                        text: new Text({
                            font: "15px sans-serif",
                            text: size.toString(),
                            fill: new Fill({
                                color: "#fff",
                            }),
                        }),
                    });
                }
                return style;
            },

            //添加弹出层
            addPopup() {
                this.overlay = new Overlay({
                    element: document.getElementById("popup"),
                    offset: [0, -13],
                });
                //添加 overlay 到 map
                this.map.addOverlay(this.overlay);

                //关闭弹出层
                let closer = document.getElementById("popup-closer");
                closer.onclick = () => {
                    this.overlay.setPosition(undefined);
                    closer.blur();
                    return false;
                };
            },

            //鼠标移动事件
            mapPointerMove(evt) {
                let coord = []; //坐标数组
                // this.map.getEventPixel() // 返回浏览器事件相对于视口的地图像素位置。
                let pixel = this.map.getEventPixel(evt.originalEvent);
                // forEachFeatureAtPixel(像素，回调，opt_options) //检测与视口上的像素相交的特征，并对每个相交的特征执行回调。检测中包含的层可以通过 中的layerFilter选项进行配置opt_options
                let featureMouseOver = this.map.forEachFeatureAtPixel(
                    pixel,
                    (feature) => feature
                );
                // featureMouseOver.getProperties() 获取所有属性名称和值的对象
                if (featureMouseOver) {
                    if (featureMouseOver.getProperties().features) {
                        //聚合情况下
                        if (featureMouseOver.getProperties().features.length == 1) {
                            //只有当前没有聚合才可以显示
                            let onceElement = featureMouseOver.getProperties().features[0];
                            // this.sourceCluster.getSource() 获取图层源
                            // this.sourceCluster.getSource().forEachFeature(callback) 遍历源上的所有功能，对每个功能调用提供的回调。如果回调返回任何“真实”值，迭代将停止并且函数将返回相同的值。注意：此函数仅迭代具有定义几何的特征。
                            this.sourceCluster.getSource().forEachFeature((feature) => {
                                if (onceElement == feature) {
                                    coord[0] = Number(feature.get("gps_x"));
                                    coord[1] = Number(feature.get("gps_y"));
                                    let name = feature.get("domain_name");
                                    let siteType = feature.get("domain_type_name");
                                    document.getElementById(
                                        "popup-content"
                                    ).innerHTML = `<p style="font-size:15px;">当前所在地名称: ${name}</p><p style="font-size:15px;">所在地类型: ${siteType}</p>`;
                                    //  this.overlay.setPosition(坐标) 设置此叠加层的位置。如果位置undefined是隐藏的覆盖。
                                    this.overlay.setPosition(coord);
                                }
                            });
                        }
                    }
                }

                //如果左边数组没有值的话就添加个undeifend
                if (!coord.length) {
                    this.overlay.setPosition(undefined);
                }
            },
        },
        mounted() {
            this.init();
        },
    };
</script>

<style scoped>
    .map {
        width: 100vw;
        height: 100vh;
    }
    .ol-popup {
        position: absolute;
        background-color: white;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width: 280px;
    }
    .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: "✖";
    }
</style>

15.绘制点线圆多边形

如果需要修改绘制的类型就更换Draw下type的值
点:Point 线:LineString 圆:Circle 多边形:Polygon

注意:如果把4中类型的绘制集成起来必须要写删除交互否则回不断的记录你上次选择的type 就会造成你绘制圆的同时也会绘制其他的形状

<template >
<div style="width: 100vw; height: 100vh">
    <div id="map" style="width: 100%; height: 100%"></div>
    <div class="btn">
        <el-button @click="drawPoint('点')">点</el-button>
        <el-button @click="drawPoint('线')">线</el-button>
        <el-button @click="drawPoint('圆')">圆</el-button>
        <el-button @click="drawPoint('多边形')">多边形</el-button>
        <el-button @click="clearDraw">清除绘画</el-button>
    </div>
    </div>
</template>
<script>
    import "ol/ol.css";
    import { Map, View } from "ol";
    import Tile from "ol/layer/Tile";
    import { OSM } from "ol/source";
    import { fromLonLat } from "ol/proj";
    import VectorLayer from "ol/layer/Vector"; //新的矢量层
    import VectorSource from "ol/source/Vector"; //新的矢量源
    import { Fill, Style, Stroke, Circle as CircleStyle } from "ol/style";
    import { Draw } from "ol/interaction";

    export default {
        data() {
            return {
                map: null, //地图层
            };
        },
        methods: {
            //初始化默认地图
            createMap() {
                this.map = new Map({
                    target: "map",
                    layers: [
                        new Tile({
                            source: new OSM(),
                        }),
                        this.initDrawLayers(),
                    ],
                    view: new View({
                        center: fromLonLat([116.40387397, 39.91488908]),
                        zoom: 12,
                        maxZoom: 20,
                        projection: "EPSG:3857",
                    }),
                });
            },

            // 增加点
            initDrawLayers() {
                let drawLayers = new VectorLayer({
                    source: new VectorSource(),
                    style: new Style({
                        //填充 设置矢量特征的填充样式
                        fill: new Fill({
                            color: "rgba(255, 255, 255, 0.2)",
                        }),

                        //画   线条时的线条的颜色
                        stroke: new Stroke({
                            color: "blue",
                            width: 2,
                        }),

                        //绘制点的颜色
                        image: new CircleStyle({
                            radius: 7,
                            fill: new Fill({
                                color: "green",
                            }),
                        }),
                    }),
                });
                return drawLayers;
            },

            //绘制
            drawPoint(drawType) {
                let type = "";
                switch (drawType) {
                    case "点":
                        type = "Point";
                        break;
                    case "线":
                        type = "LineString";
                        break;
                    case "圆":
                        type = "Circle";
                        break;
                    case "多边形":
                        type = "Polygon";
                        break;
                    default:
                        break;
                }
                
                if (this.draw) {
                    this.map.removeInteraction(this.draw);   //removeInteraction 删除交互
                }  
                this.draw = new Draw({
                    source: this.map.getLayers().array_[1].getSource(),
                    type,
                });
                this.map.addInteraction(this.draw);  // this.map.addInteraction 设置交互
            },

            //清除会话
            clearDraw() {
                //采取链式操作 减少多余代码显示
                this.map.getLayers().array_[1].getSource().clear();
            },
            
        },
        mounted() {
            this.createMap();
        },
        
    };
</script>

<style scoped>
    .btn {
        position: fixed;
        top: 10px;
        right: 10px;
    }
</style>

16.测量距离

一、注意实现

ol/sphere里有getLength()和getArea()可以用来测量距离和区域面积，默认的投影坐标系是EPSG:3857
若是 EPSG:3857，需要转换，直接使用 getLength() 和 getArea()
若不是EPSG:3857，则方案有两：
(1)使用时, 可以先把几何图形转换成‘EPSG:3857 ’的投影方式，然后再使用getLength和getArea
(2) ol/sphere里有getLength()和getArea(),可以设置options参数

var formatLength = function (line) {
	var sourceProj = map.getView().getProjection();//获取投影坐标系
	/****** 方法1 *********/
	// var geom = (line.clone().transform(sourceProj, 'EPSG:3857'));
	// var length = getLength(geom);

	/****** 方法2 *********/
	var length = getLength(line, {projection: sourceProj/*, radius: 6371008.8*/});
    ...
};

代码展示:

<template >
  <div style="width: 100vw; height: 100vh">
    <div id="map" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import { OSM, Vector as VectorSource } from "ol/source";
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
import { Vector as VectorLayer } from "ol/layer";
import { fromLonLat } from "ol/proj";
import Draw from "ol/interaction/Draw";
import Overlay from "ol/Overlay";
import { LineString } from "ol/geom";
import { getLength } from "ol/sphere";
import { unByKey } from "ol/Observable";

export default {
  data() {
    return {
      map: null,
      // vector: null,
      helpTooltipElement: null,
      measureTooltip: null,
      measureTooltipElement: null,
      raster: null,
      vector: null,
      sketch: null, //Currently drawn feature
      helpTooltip: null, //Overlay to show the help messages.
      draw: null, //global so we can remove it later
      listener: null,
    };
  },
  methods: {
    //初始化默认地图
    createMap() {
      let vector = new VectorLayer({
        source: new VectorSource(),
        style: new Style({
          stroke: new Stroke({
            color: "green",
            width: 2,
          }),
        }),
      });

      this.map = new Map({
        target: "map",
        layers: [
          new Tile({
            source: new OSM(),
          }),
          vector,
        ],
        view: new View({
          center: fromLonLat([116.40387397, 39.91488908]),
          zoom: 12,
          maxZoom: 25,
          projection: "EPSG:3857",
        }),
      });
      this.addInteraction();
    },

    //创建鼠标指针
    addInteraction() {
      this.draw = new Draw({
        source: this.map.getLayers().array_[1].getSource(),
        type: "LineString",
        style: new Style({
          stroke: new Stroke({
            color: "rgba(0, 0, 0, 0.5)",
            lineDash: [10, 10],
            width: 2,
          }),
          image: new CircleStyle({
            radius: 5,
            stroke: new Stroke({
              color: "rgba(0, 0, 0, 0.7)",
            }),
            fill: new Fill({
              color: "rgba(255, 255, 255, 0.2)",
            }),
          }),
        }),
      });

      this.map.addInteraction(this.draw);
      this.createMeasureTooltip();
      this.drawHandler();
    },

    //创建测量工具
    createMeasureTooltip() {
      if (this.measureTooltipElement) {
        this.measureTooltipElement.parentNode.removeChild(
          this.measureTooltipElement
        );
      }
      this.measureTooltipElement = document.createElement("div");
      this.measureTooltipElement.className = "ol-tooltip ol-tooltip-measure";
      this.measureTooltip = new Overlay({
        element: this.measureTooltipElement,
        offset: [0, -15],
        positioning: "bottom-center",
      });
      this.map.addOverlay(this.measureTooltip);
    },

    drawHandler() {
      this.draw.on("drawstart", (evt) => {
        this.sketch = evt.feature;
        let tooltipCoord = evt.coordinate;
        this.listener = this.sketch.getGeometry().on("change", (evt) => {
          let output;
          let geom = evt.target;
          if (geom instanceof LineString) {
            output = this.formatLength(geom);
            tooltipCoord = geom.getLastCoordinate();
          }
          this.measureTooltipElement.innerHTML = output;
          this.measureTooltip.setPosition(tooltipCoord);
        });
      });

      this.draw.on("drawend", () => {
        this.measureTooltipElement.className = "ol-tooltip ol-tooltip-static";
        this.measureTooltip.setOffset([0, -7]);
        this.sketch = null;
        this.measureTooltipElement = null;
        this.createMeasureTooltip();
        unByKey(this.listener);
      });
    },

    formatLength(line) {
      let sourceProj = this.map.getView().getProjection(); //获取投影坐标系
      let length = getLength(line, { projection: sourceProj });
      let output;
      if (length > 100) {
        output = Math.round((length / 1000) * 100) / 100 + " " + "km";
      } else {
        output = Math.round(length * 100) / 100 + " " + "m";
      }
      return output;
    },
  },
  mounted() {
    this.createMap();
  },
};
</script>

<style scoped lang="less">
// 提示的样式
/deep/ .ol-tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
  font-size: 12px;
}
//移动时的样式
/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>

17.测面

一、注意实现

ol/sphere里有getLength()和getArea()可以用来测量距离和区域面积，默认的投影坐标系是EPSG:3857
若是 EPSG:3857，需要转换，直接使用 getLength() 和 getArea()
若不是EPSG:3857，则方案有两：
(1)使用时, 可以先把几何图形转换成‘EPSG:3857 ’的投影方式，然后再使用getLength和getArea
(2) ol/sphere里有getLength()和getArea(),可以设置options参数

var formatArea = function(polygon){
	var sourceProj = map.getView().getProjection();//获取投影坐标系
	/****** 方法1 *********/
	// var geom = (polygon.clone().transform(sourceProj, 'EPSG:3857'));
	// var area = getArea(geom);
	/****** 方法2 *********/
	var area = getArea(polygon, {projection: sourceProj/*, radius: 6371008.8*/})
};

<template>
  <div class="map" id="map"></div>
</template>

<script>
import "ol/ol.css";
import Draw from "ol/interaction/Draw";
import { Map, View } from "ol";
import Overlay from "ol/Overlay";
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
import { Polygon } from "ol/geom";
import { OSM, Vector as VectorSource } from "ol/source";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { getArea } from "ol/sphere";
import { unByKey } from "ol/Observable";
import { fromLonLat } from "ol/proj";
export default {
  data() {
    return {
      map: null,
      vector: null,
      sketch: null, //当前绘制的样式
      measureTooltipElement: null, //测量工具提示元素
      measureTooltip: null, //叠加显示测量值
      draw: null, //把用来绘画的图层全局化 方便我们删除
      listener: null,
    };
  },

  methods: {
    init() {
      this.vector = new VectorLayer({
        source: new VectorSource(),
        style: new Style({
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.5)",
          }),
          stroke: new Stroke({
            color: "#ffcc33",
            width: 2,
          }),
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: "#ffcc33",
            }),
          }),
        }),
      });

      //初始化地图
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new OSM({}),
          }),
          this.vector,
        ],
        view: new View({
          center: fromLonLat([116.40387397, 39.91488908]),
          maxZoom: 18,
          zoom: 12,
          projection: "EPSG:3857",
        }),
      });

      // 添加map事件
      this.addInteraction();
    },

    addInteraction() {
      this.draw = new Draw({
        source: this.vector.getSource(),
        type: "Polygon",
        style: new Style({
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.5)",
          }),

          stroke: new Stroke({
            color: "rgba(0, 0, 0, 0.5)",
            lineDash: [10, 10],
            width: 2,
          }),

          image: new CircleStyle({
            radius: 5,
            stroke: new Stroke({
              color: "rgba(0, 0, 0, 0.7)",
            }),
            fill: new Fill({
              color: "rgba(255, 255, 255, 0.2)",
            }),
          }),
        }),
      });

      this.map.addInteraction(this.draw);
      this.createMeasureTooltip();
      this.drawHandler();
    },

    formatArea(polygon) {
      let sourceProj = this.map.getView().getProjection(); //获取投影坐标系
      let geom = polygon.clone().transform(sourceProj, "EPSG:3857");
      let area = getArea(geom);
      let output;
      if (area > 10000) {
        output =
          Math.round((area / 1000000) * 100) / 100 + " " + "km<sup>2</sup>";
      } else {
        output = Math.round(area * 100) / 100 + " " + "m<sup>2</sup>";
      }
      return output;
    },

    createMeasureTooltip() {
      if (this.measureTooltipElement) {
        this.measureTooltipElement.parentNode.removeChild(
          this.measureTooltipElement
        );
      }
      this.measureTooltipElement = document.createElement("div");
      this.measureTooltipElement.className = "ol-tooltip ol-tooltip-measure";
      this.measureTooltip = new Overlay({
        element: this.measureTooltipElement,
        offset: [0, -15],
        positioning: "bottom-center",
      });
      this.map.addOverlay(this.measureTooltip);
    },

    drawHandler() {
      this.draw.on("drawstart", (evt) => {
        this.sketch = evt.feature;
        let tooltipCoord = evt.coordinate;

        this.listener = this.sketch.getGeometry().on("change", (evt) => {
          let output;
          let geom = evt.target;
          if (geom instanceof Polygon) {
            output = this.formatArea(geom);
            tooltipCoord = geom.getLastCoordinate();
          }
          this.measureTooltipElement.innerHTML = output;
          this.measureTooltip.setPosition(tooltipCoord);
        });
      });

      this.draw.on("drawend", () => {
        this.measureTooltipElement.className = "ol-tooltip ol-tooltip-static";
        this.measureTooltip.setOffset([0, -7]);
        this.sketch = null;
        this.measureTooltipElement = null;
        this.createMeasureTooltip();
        unByKey(this.listener);
      });
    },
  },

  mounted() {
    this.init();
  },
};
</script>

<style lang="less" scoped>
.map {
  width: 100vw;
  height: 100vh;
  /deep/ .ol-tooltip {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: white;
    padding: 4px 8px;
    opacity: 0.7;
    white-space: nowrap;
    font-size: 12px;
  }
  /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>

18.测距+侧面(可删除)

综合了上面测距和侧面的功能
增加删除按钮和功能,具体实现如下：

（1）drawstart 绘画开始阶段：向 measureTooltip 中插入“删除测量”按钮
（2）drawend 绘画结束阶段：给“删除测量”按钮绑定事件
缓存绘画时候，缓存所绘制的feature 和 measureTooltip 在 drawCache 对象中
删除测量，便是从drawCache找到对象的 feature 和 measureTooltip 进行删除，分别调用 removeFeature 和 removeOverlay 方法

<template>
  <div class="map-box">
    <div class="map" id="map"></div>
    <div class="btns-box">
      <el-button type="primary" size="small" @click="measure('LineString')"
        >测量</el-button
      >
      <el-button type="primary" size="small" @click="measure('Polygon')"
        >测面</el-button
      >
      <el-button type="primary" size="small" @click="clearMeasure"
        >清除测量轨迹</el-button
      >
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import Draw from "ol/interaction/Draw";
import Map from "ol/Map";
import Overlay from "ol/Overlay";
import View from "ol/View";
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
import { LineString, Polygon } from "ol/geom";
import { OSM, Vector as VectorSource } from "ol/source";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { getArea, getLength } from "ol/sphere";
import { unByKey } from "ol/Observable";
import { fromLonLat } from "ol/proj";

export default {
  data() {
    return {
      layerIndex: 0,
      map: null,
      vector: null,
      sketch: null, //Currently drawn feature
      helpTooltipElement: null, //The help tooltip element.
      helpTooltip: null, //Overlay to show the help messages.
      measureTooltipElement: null, //The measure tooltip element.
      measureTooltip: null, //Overlay to show the measurement.
      draw: null, //global so we can remove it later
      listener: null,
      shapeType: null,
      drawCache: {},
    };
  },

  methods: {
    init() {
      this.vector = new VectorLayer({
        source: new VectorSource(),
        style: new Style({
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)",
          }),
          stroke: new Stroke({
            color: "#ffcc33",
            width: 2,
          }),
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: "#ffcc33",
            }),
          }),
        }),
      });

      //初始化地图
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new OSM({}),
          }),
          this.vector,
        ],

        view: new View({
          center: fromLonLat([116.40387397, 39.91488908]),
          maxZoom: 18,
          zoom: 13,
          projection: "EPSG:3857",
        }),
      });
    },

    //测距、测面
    measure(type) {
      this.shapeType = type;
      this.layerIndex++;
      this.drawCache[this.layerIndex] = {
        feature: null,
        measureTooltip: null,
      };
      if (this.draw) {
        this.map.removeInteraction(this.draw);
      }
      // 添加map事件
      this.addInteraction();
    },

    //清除测量
    clearMeasure() {
      for (let i in this.drawCache) {
        this.map.removeOverlay(this.drawCache[i].measureTooltip);
        this.vector.getSource().removeFeature(this.drawCache[i].feature);
      }
      this.drawCache = {};
      this.layerIndex = 0;
    },

    addInteraction() {
      this.draw = new Draw({
        source: this.vector.getSource(),
        type: this.shapeType,
        style: new Style({
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)",
          }),
          stroke: new Stroke({
            color: "rgba(0, 0, 0, 0.5)",
            lineDash: [10, 10],
            width: 2,
          }),
          image: new CircleStyle({
            radius: 5,
            stroke: new Stroke({
              color: "rgba(0, 0, 0, 0.7)",
            }),
            fill: new Fill({
              color: "rgba(255, 255, 255, 0.2)",
            }),
          }),
        }),
      });

      this.map.addInteraction(this.draw);
      this.createMeasureTooltip();
      this.createHelpTooltip();
      this.drawHandler();
    },

    //处理测距的长度
    formatLength(line) {
      let sourceProj = this.map.getView().getProjection(); //获取投影坐标系
      let length = getLength(line, { projection: sourceProj });
      let output;
      if (length > 100) {
        output = Math.round((length / 1000) * 100) / 100 + " " + "km";
      } else {
        output = Math.round(length * 100) / 100 + " " + "m";
      }
      return output;
    },

    //处理测面的面积
    formatArea(polygon) {
      let sourceProj = this.map.getView().getProjection(); //获取投影坐标系
      let geom = polygon.clone().transform(sourceProj, "EPSG:3857");
      let area = getArea(geom);
      let output;
      if (area > 10000) {
        output =
          Math.round((area / 1000000) * 100) / 100 + " " + "km<sup>2</sup>";
      } else {
        output = Math.round(area * 100) / 100 + " " + "m<sup>2</sup>";
      }
      return output;
    },

    //创建移动提示工具
    createMeasureTooltip() {
      if (this.measureTooltipElement) {
        this.measureTooltipElement.parentNode.removeChild(
          this.measureTooltipElement
        );
      }
      this.measureTooltipElement = document.createElement("div");
      this.measureTooltipElement.className = "ol-tooltip ol-tooltip-measure";
      this.measureTooltip = new Overlay({
        element: this.measureTooltipElement,
        offset: [0, -15],
        positioning: "bottom-center",
      });
      this.map.addOverlay(this.measureTooltip);
    },

    //创建帮助提示工具
    createHelpTooltip() {
      if (this.helpTooltipElement) {
        this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement);
      }
      this.helpTooltipElement = document.createElement("div");
      this.helpTooltipElement.className = "ol-tooltip hidden";
      this.helpTooltip = new Overlay({
        element: this.helpTooltipElement,
        offset: [15, 0],
        positioning: "center-left",
      });
      this.map.addOverlay(this.helpTooltip);
    },

    //绘制
    drawHandler() {
      //画画开始
      this.draw.on("drawstart", (evt) => {
        this.sketch = evt.feature;
        let tooltipCoord = evt.coordinate;

        this.listener = this.sketch.getGeometry().on("change", (evt) => {
          let output;
          let geom = evt.target;
          if (geom instanceof LineString) {
            output = this.formatLength(geom);
            tooltipCoord = geom.getLastCoordinate();
          } else if (geom instanceof Polygon) {
            output = this.formatArea(geom);
            tooltipCoord = geom.getInteriorPoint().getCoordinates();
          }
          let closeBtn =
            "<i class='tooltip-close-btn tooltip-close-btn_" +
            this.layerIndex +
            "' data-index='" +
            this.layerIndex +
            "'>×</i>";
          this.measureTooltipElement.innerHTML = output + closeBtn;
          this.measureTooltip.setPosition(tooltipCoord);
          this.drawCache[this.layerIndex].measureTooltip = this.measureTooltip;
        });
      });

      //画画
      this.draw.on("drawend", (evt) => {
        this.drawCache[this.layerIndex].feature = evt.feature;
        this.measureTooltipElement.className = "ol-tooltip ol-tooltip-static";
        this.measureTooltip.setOffset([0, -7]);
        this.sketch = null;
        this.measureTooltipElement = null;
        this.createMeasureTooltip();
        unByKey(this.listener);
        this.map.removeInteraction(this.draw);
        this.draw = null;

        // 删除图层
        let self = this;
        document
          .querySelector(".tooltip-close-btn_" + this.layerIndex)
          .addEventListener("click", function () {
            self.vector
              .getSource()
              .removeFeature(self.drawCache[this.dataset.index].feature);
            self.map.removeOverlay(
              self.drawCache[this.dataset.index].measureTooltip
            );
            delete self.drawCache[this.dataset.index];
          });
      });
    },
  },

  mounted() {
    this.init();
  },
  
};
</script>

<style lang="less" scoped>
.map-box {
  width: 100vw;
  height: 100vh;
  position: relative;
  .map {
    height: 100%;
  }
  .btns-box {
    position: absolute;
    right: 20px;
    top: 20px;
  }
}
.map {
  /deep/ .ol-tooltip {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: white;
    padding: 4px 14px 4px 8px;
    opacity: 0.7;
    white-space: nowrap;
    font-size: 12px;
  }
  /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: -5px;
    left: 50%;
  }
  /deep/ .ol-tooltip-static:before {
    border-top-color: #ffcc33;
  }

  //测面、测距的样式
  /deep/ .tooltip-close-btn {
    font-style: normal;
    position: absolute;
    color: #2d8cf0;
    right: 0px;
    top: -7px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    &:hover {
      color: #fff;
    }
  }
}
</style>

19.多地图切换 (OSM 高德百度)

踩坑:

也可以有很多种写法,但是不要每次调用Init方法,因为每次都会new一个新的map对象,所以会出现多个地图,我们此处可以去官网下查找其他更改数据源的方法,我此处用的是addLayer()方法

<template >
  <div class="box">
    <div id="map"></div>
    <div class="btn">
      <el-button @click="createMap">OSM</el-button>
      <el-button @click="create_GaoDe_Map">高德</el-button>
      <el-button @click="createMapBaidu">百度</el-button>
    </div>
  </div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import { TileImage, OSM } from "ol/source";
import TileGrid from "ol/tilegrid/TileGrid";
import { fromLonLat } from "ol/proj";
import XYZ from "ol/source/XYZ";
export default {
  data() {
    return {
      map: null,
      sourceLayer: null, //图层
    };
  },
  methods: {
    init() {
      this.map = new Map({
        target: "map",
        layers: [
          new Tile({
            source: new OSM(), //默认为OSM地图
          }),
        ],
        view: new View({
          center: fromLonLat([116.40387397, 39.91488908]),
          zoom: 12,
          maxZoom: 25,
          projection: "EPSG:3857",
        }),
      });
    },

    //初始化OSM地图
    createMap() {
      let layer = new Tile({
        source: new OSM(),
      });
      this.map ? this.map.addLayer(layer) : null;
    },

    //初始化高德地图
    create_GaoDe_Map() {
      let layer = new Tile({
        source: new XYZ({
          url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
        }),
      });
      this.map ? this.map.addLayer(layer) : null;
    },

    //初始化百度地图
    createMapBaidu() {
      let resolutions = [];
      for (let i = 0; i < 19; i++) {
        resolutions[i] = Math.pow(2, 18 - i);
      }
      let tilegrid = new TileGrid({
        origin: [0, 0],
        resolutions: resolutions,
      });
      let baidu_source = new TileImage({
        projection: "EPSG:3857",
        tileGrid: tilegrid,
        tileUrlFunction: function (tileCoord) {
          if (!tileCoord) {
            return "";
          }
          let z = tileCoord[0];
          let x = tileCoord[1];
          let y = -tileCoord[2] - 1;
          if (x < 0) {
            x = "M" + -x;
          }
          if (y < 0) {
            y = "M" + -y;
          }
          return (
            "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" +
            x +
            "&y=" +
            y +
            "&z=" +
            z +
            "&styles=pl&udt=20151021&scaler=1&p=1"
          );
        },
      });

      let newlayer = new Tile({
        source: new XYZ({
          url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
        }),
      });

      let layer = new Tile({
        source: baidu_source,
      });
      console.log(layer);

      this.map ? this.map.addLayer(newlayer) : null;
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped lang="less">
.box {
  width: 100vw;
  height: 100vh;
  // position: relative;
  #map {
    width: 100%;
    height: 100%;
  }
  .btn {
    position: fixed;
    top: 10px;
    right: 10px;
  }
}
</style>

20.导出地图

<template>
<div class="map-box">
    <div class="map" id="map"></div>
    <div class="export-btn">
        <a id="image-download" download="map.png"></a>
        <el-button type="primary" size="small" @click="exportPNG">Download PNG</el-button>
    </div>
    </div>
</template>

<script>
    import "ol/ol.css";
    import Map from "ol/Map";
    import View from "ol/View";
    import { OSM } from "ol/source";
    import { Tile as TileLayer } from "ol/layer";
    import { fromLonLat } from "ol/proj";
    export default {
        data() {
            return {
                map: null,
            };
        },

        methods: {
            init() {
                this.map = new Map({
                    target: "map",
                    layers: [
                        new TileLayer({
                            source: new OSM({ crossOrigin: "anonymous" }),
                        }),
                    ],

                    view: new View({
                        center: fromLonLat([113.0567, 23.67537]),
                        maxZoom: 25,
                        zoom: 13,
                        projection: "EPSG:3857",
                    }),
                });
            },

            //将地图导出为PNG
            exportPNG() {
                this.map.once("rendercomplete", () => {
                    let mapCanvas = document.createElement("canvas");
                    let size = this.map.getSize();
                    mapCanvas.width = size[0];
                    mapCanvas.height = size[1];
                    let mapContext = mapCanvas.getContext("2d");
                    Array.prototype.forEach.call(
                        document.querySelectorAll(".ol-layer canvas"),
                        function (canvas) {
                            if (canvas.width > 0) {
                                let opacity = canvas.parentNode.style.opacity;
                                mapContext.globalAlpha = opacity === "" ? 1 : Number(opacity);
                                mapContext.drawImage(canvas, 0, 0);
                            }
                        }
                    );
                    if (navigator.msSaveBlob) {
                        navigator.msSaveBlob(mapCanvas.msToBlob(), "map.png");
                    } else {
                        let link = document.getElementById("image-download");
                        link.href = mapCanvas.toDataURL();
                        link.click();
                    }
                });
                this.map.renderSync();
            },
        },

        mounted() {
            this.init();
        },
    };
</script>

<style lang="less" scoped>
    .map-box {
        width: 100vw;
        height: 100vh;
        // height: 100%;
        position: relative;
        .map {
            width: 100%;
            height: 100%;
        }
        .export-btn {
            position: absolute;
            right: 15px;
            top: 15px;
        }
    }
</style>

21.阻止双击放大地图事件

import DoubleClickZoom from "ol/interaction/DoubleClickZoom";

clearDouble() {
    let dblClickInteraction = this.map
    .getInteractions()
    .getArray()
    .find((interaction) => {
        return interaction instanceof DoubleClickZoom;
    });
    this.map.removeInteraction(dblClickInteraction);
},

22.openlayers之地图图层数据来源(ol.source)详解

source 是 Layer 的重要组成部分，表示图层的来源，也就是服务地址。除了在构造函数中制定外，可以使用 layer.setSource(source) 稍后指定。

一、包含的类型

上面介绍的都是可以实例化的类，还有一部分基类，不能被实例化，只负责被继承，有：

ol.source.Image，提供单一图片数据的类型，直接继承自 ol.source.Source；
ol.source.Tile，提供被切分为网格切片的图片数据，继承自 ol.source.Source；
ol.source.Vector，提供矢量图层数据，继承自 ol.source.Source；

二、用法说明

1. ol.source.Vector
矢量图层的数据来源
1.1 事件
包含四个事件，addfeature，changefeature，clear，removefeature。
addfeature，当一个要素添加到 source 中触发； 
changefeature，当要素变化时触发； 
clear，当 source 的 clear 方法调用时候触发； 
removefeature，当要素移除时候发生。

1.2 参数
/**
 * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
 *     features: (Array.<ol.Feature>|undefined),
 *     format: (ol.format.Feature|undefined),
 *     loader: (ol.FeatureLoader|undefined),
 *     logo: (string|olx.LogoOptions|undefined),
 *     strategy: (ol.LoadingStrategy|undefined),
 *     url: (string|undefined),
 *     wrapX: (boolean|undefined)}}
 * @api
 */
attribution，地图右下角的 logo 包含的内容；
features，地理要素，从字符串读取的数据；
format，url属性设置后，加载要素使用的数据格式，采用异步的 AJAX 加载；
loader，加载要素使用的加载函数；
logo，logo包含的内容；
strategy，加载要素使用的策略，默认是 一次性加载所有要素；
url，要素数据的地址；
wrapX，是否在地图水平坐标轴上重复，默认是 true。

1.3实例
features 方法 
假如有一个包含空间数据的字符串，geojsonObject，是GeoJSON字符串格式，那么可以用来初始化一个图层。
var vectorSource = new ol.source.Vector({
  features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
 });
var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: style
});
map.addLayer(vectorLayer);

url + format 方法 
如果有一个文件作为数据源，那么可以配置 url 属性来加载数据：
var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'data/geojson/countries.geojson',
    format: new ol.format.GeoJSON()
  })
这两种方法中都会指定数据来源格式， 矢量数据源支持的格式包含很多：gml、EsriJSON、geojson、gpx、igc、kml、osmxml、ows、polyline、topojson、wfs、wkt、wms capabilities（兼容 wms 的格式）、 wms getfeatureinfo、 wmts capabilities、xlink、xsd等格式。这些格式都有readFeatures 、readFeature 和readGeometry 方法用于读取数据。
    
2. ol.source.Tile
提供被切分为切片的图片地图数据 
可配置的选项

/**
 * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
 *            extent: (ol.Extent|undefined),
 *            logo: (string|olx.LogoOptions|undefined),
 *            opaque: (boolean|undefined),
 *            tilePixelRatio: (number|undefined),
 *            projection: ol.proj.ProjectionLike,
 *            state: (ol.source.State|undefined),
 *            tileGrid: (ol.tilegrid.TileGrid|undefined),
 *            wrapX: (boolean|undefined)}}
 */
与 vector 一样的选项就不介绍了，介绍与 vector 特有的选项：

extent，地图视图默认的坐标范围；
opaque，不透明与否，一个布尔值，默认 false；
tilePixelRatio，切片的大小调整选项，如 256 × 256，和 512 × 512；
projection，投影；
state，地图所处的状态，包括undefined，loading，ready，error；
tileGrid，覆盖在地图上的格网；
接受的事件
tileloadstart，切片开始加载时触发的事件；
tileloadend，切片加载完毕触发事件；
tileloaderror，切片加载出错时的处理。
    
3. ol.source.Image
提供单一的图片地图。 
可以配置的选项

/**
 * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
 *            extent: (null|ol.Extent|undefined),
 *            logo: (string|olx.LogoOptions|undefined),
 *            projection: ol.proj.ProjectionLike,
 *            resolutions: (Array.<number>|undefined),
 *            state: (ol.source.State|undefined)}}
 */
resolutions，地图分辨率。其他的选项都与以上的一样。
触发的事件

imageloadstart，图片地图开始加载触发的事件；
imageloadend，图片地图加载完毕触发的事件；
imageloaderror，图片地图加载出错时触发的事件。
四、总结
source 是 layer 中必须的选项，定义着地图数据的来源，与数据有关的函数，如addfeature、getfeature等函数都定义在 source 中，而且数据源支持多种格式。

23.Openlayers的类

Ajax：顾名思义，用于实现Ajax功能，只是OpenLayers的开发者们把它单独写到一个类里了，其中用到了Prototype.js框架里的一些东西。同时，设计的时候也考虑了跨浏览器的问题。

BaseTypes：这里定制了OpenLayers中用到的string，number 和 function。比如，OpenLayers. String. startsWith，用于测试一个字符串是否一以另一个字符串开头；OpenLayers. Number. limitSigDigs，用于限制整数的有效数位；OpenLayers. Function.bind，用于把某一函数绑定于对象等等。

Console：OpenLayers.Console，此名称空间用于调试和把错误等输出到“控制台”上，需要结合使用…/Firebug/firebug.js。

Control：我们通常所说的控件类，它提供各种各样的控件，比如上节中说的图层开关LayerSwitcher，编辑工具条EditingToolbar等等。加载控件的例子：

class = new OpenLayers.Map(‘map’, { controls: [] });

map.addControl(new OpenLayers.Control.PanZoomBar());

map.addControl(new OpenLayers.Control.MouseToolbar());

Events：用于实现OpenLayers的事件机制。具体来说，OpenLayers中的事件分为两种，一种是浏览器事件，例如mouseup,mousedown之类的；另外一种是自定义的，如addLayer之类的。OpenLayers中的事件机制是非常值得我们学习的，后面将具体讨论。

Feature：我们知道：Feature是geography 和attributes的集合。在OpenLayers中，特别地OpenLayers.Feature 类由一个Feature和一个lonlat组成。

Format：此类用于读／写各种格式的数据，它的子类都分别创建了各个格式的解析器。这些格式有：XML、GML、GeoJSON、GeoRSS、JSON、KML、WFS、WKT(Well-Known Text)。

Geometry：怎么翻译呢，几何？是对地理对象的描述。它的子类有Collection、Curve、LinearRing、LineString、MultiLineString、MultiPoint、MultiPolygon、Point、Polygon、Rectangle、Surface，正是这些类的实例，构成了我们看到的地图。需要说明的是，Surface 类暂时还没有实现。

Handler：这个类用于处理序列事件，可被激活和取消。同时，它也有命名类似于浏览器事件的方法。当一个handler 被激活，处理事件的方法就会被注册到浏览器监听器listener ，以响应相应的事件；当一个handler被取消，这些方法在事件监听器中也会相应的被取消注册。Handler通过控件control被创建，而control通过icon表现。

Icon：在计算机屏幕上以图标的形式呈现，有url、尺寸size和位置position 3个属性。一般情况，它与 OpenLayers.Marker结合应用，表现为一个Marker。

Layer：图层。

Map：网业中动态地图。它就像容器，可向里面添加图层Layer和控件Control。实际上，单个Map是毫无意义的，正是Layer和Control成就了它。

Marker：它的实例是OpenLayers.LonLat 和OpenLayers.Icon的集合。通俗一点儿说，Icon附上一定的经纬度就是Marker。

Popup：地图上一个小巧的层，实现地图“开关”功能。使用例子：

Class = new OpenLayers.Popup(“chicken”,

new OpenLayers.LonLat(5,40),

new OpenLayers.Size(200,200),“example popup”,true);

map.addPopup(popup);

Renderer ：渲染类。在 OpenLayers 中，渲染功能是作为矢量图层的一个属性存在的，我们称之为渲染器，矢量图层就是通过这个渲染器提供的方法将矢量数据显示出来。
Tile：设计这个类用于指明单个“瓦片”Tile，或者更小的分辨率。Tiles存储它们自身的信息，比如url和size等。

24.GeoJSON介绍

GeoJSON是一种用于编码各种地理数据结构的格式

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

以GeoJSON支持以下几何类型：Point，LineString， Polygon，MultiPoint，MultiLineString，和MultiPolygon。具有附加属性的几何对象是Feature对象。特征集由FeatureCollection对象包含。

GeoJSON 规范 (RFC 7946)

2015 年，互联网工程任务组 (IETF) 与原始规范作者一起组成了GeoJSON WG来标准化 GeoJSON。 RFC 7946于 2016 年 8 月发布，是 GeoJSON 格式的新标准规范，取代了 2008 GeoJSON 规范。

25.解析GeoJSON数据

有两种概况,一个是安装包或者文件夹解析成GeoJSON数据,这个里面必须报好一个.shp文件作为入口.或者是.getjson文件.

第一种情况:

1. yarn add shpjs 
2. const shapefile = require("shpjs");
shapefile("http://127.0.0.1:5500/国道").then((geojson) => {
    this.fileData = geojson;
});
注意:路径如果读取本地有可能会读取不到并报错,所以我把数据放在了线上
如何放在线上?
使用vscode,下载liveServe插件,然后再文件夹中找到该文件,然后再vscode中启动,并创建一个Html文件,任意命名,因为没有Html文件的话vscode是识别不到的,然后 `shift+!`生成html结构,然后右键有一个open widht live serve 点击它接口生成线上服务,这个vcode窗口不可以关闭,可以最小化,

第二种情况:因为已经是geojson文件了所以我们拿过来直接解析即可

let VectorLayer = new Vector({
    source: new VectorSource({
        projection: "EPSG:4326",
        url: "./simplestyles.geojson",
        format: new GeoJSON(),
        defaultFeatureProjection: "EPSG:4326",
    }),
});
this.map.addLayer(VectorLayer); //添加图层
注意:这个url也需要是线上地址,本地路径有可能会报错

26.openLayers加载ArcGIS服务

因为是矢量数据所以使用Image 也就是投影
let layers = '0,1,2,3,4,'
let ImgLayer = new Image({
    source: new ImageArcGISRest({
        ratio: 1,
        params: {
            layers: `show:${layers}`,
            projection: "EPSG:4490",
        },
        url: "/map/arcgis/rest/services/%E5%BC%A0%E5%AE%B6%E5%8F%A3/%E7%94%B5%E5%AD%90%E5%BA%95%E5%9B%BE/MapServer",
    }),
});
this.map.addLayers()

27.创建天地图,ArcGIS瓦片地图,Bing地图,谷歌地图

注意:这些url中的key都需要自己去相对应的官网去注册都是不收费的O~

  //创建天地图
    create_sky_map() {
      let tian_di_tu_satellite_layer = new Tile({
        title: "天地图卫星影像", //基本无用
        source: new XYZ({
          url: "arcgisServe?T=ter_w&tk=ley&x={x}&y={y}&l={z}",
        }),
      });

      let tian_di_tu_road_layer = new Tile({
        title: "天地图路网",
        source: new XYZ({
          url: "arcgisServe?T=vec_w&x={x}&y={y}&l={z}&tk=ley",
        }),
      });

      let tian_di_tu_annotation = new Tile({
        title: "天地图文字标注",
        source: new XYZ({
          url: "arcgisServe?T=cva_w&x={x}&y={y}&l={z}&tk=ley",
        }),
      });

      let Layergroup = new LayerGroup({
        layers: [tian_di_tu_road_layer, tian_di_tu_annotation],
      });

      return Layergroup;
    },

    //创建ArcGIS底图
    create_GIS_Map() {
      let url = `https://services.arcgisonline.com/ArcGIS/rest/services/****/MapServer`;
      let Img_laye = new Tile({
        source: new TileArcGISRest({
          ratio: 1,
          params: {},
          url1,
        }),
      });
      return Img_laye;
    },

    //创建Bing地图
    create_Bimg_map() {
      let layer = new Tile({
        title: "Bimg_map",
        source: new BingMaps({
          key: "https://www.bingmapsportal.com/key",
          imagerySet: "AerialWithLabelsOnDemand",
        }),
      });
      return layer;
    },

    //创建谷歌地图
    create_Google() {
      let layer = new Tile({
        title: "谷歌矢量地图服务",
        source: new XYZ({
          url: "http://www.google.cn/maps/vt?lyrs=****n&x={x}&y={y}&z={z}",
        }),
      });
      return layer;
    },

28.openlayers添加弹出层

//创建弹出层
      let queryalert = document.getElementsByClassName("queryAlert")[0]; 
      if (!queryalert) {
        queryalert = document.createElement("div");
        queryalert.className = "queryAlert";
      }
      this.overlay = new Overlay({
        element: queryalert, 
        autoPan: true,
        //autoPanAnimation: {
        //  duration: 250,
        //},
      });
      this.map.addOverlay(this.overlay);
      queryalert.style.display = "block";
      queryalert.innerHTML = DomTemplate;
      this.overlay.setPosition(obj.e.coordinate);

28.openlayers坐标转换

https://spatialreference.org/ref/sr-org/wgs84/proj4/

proj4方法库

import proJ4 from "proj4";
// proJ4(自身的坐标系,要转换的坐标系,投影坐标)
let one = proJ4(proj_4490, proj_4526, newList); //返回一个数组

后续会继续更新…

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

华为云开发者联盟

解锁HDC 2024之旅：从购票到报名，全程攻略

华为云开发者联盟

华为云云原生FinOps解决方案，释放云原生最大价值

华为云开发者联盟

所有评论(0)

查看更多评论

风也曾吹过我_

@weixin_50496450

已为社区贡献2条内容

vue+openLayers入门教程

风也曾吹过我_

介绍:

OpenLayers官网

OpenLayers插件类型

1.vue中使用Openlayers

地图介绍

安装方式:

2.openlayers简单使用说明

openlayersAPI

ol/proj

3.openlayers一些配置了解

4.vue使用Openlayers绘制点

5.vue使用Openlayers绘制线段

6.vue使用Openlayers监听点击事件

7.vue+openlayers引入高德地图—老版本地图 (网上采取资料实现 – 项目最好不采用)

8.openlayers引入百度地图 (网上采取资料实现 – 项目最好不采用)

9.Vue+openlayers中使用拖拽缩放控件

10.openlayers使用全屏控件

11.openlayers使用鹰眼控件

12.点位显示 非聚合

一、实现步骤

13.点位显示 聚合

一、实现步骤

二、注意实现

14.鼠标移入或点击显示气泡

一、实现关键

二、注意事项

15.绘制 点 线 圆 多边形

16.测量距离

一、注意实现

17.测面

一、注意实现

18.测距+侧面(可删除)

19.多地图切换 (OSM 高德 百度)

20.导出地图

21.阻止双击放大地图事件

22.openlayers之地图图层数据来源(ol.source)详解

一、包含的类型

二、用法说明

23.Openlayers的类

24.GeoJSON介绍

25.解析GeoJSON数据

26.openLayers加载ArcGIS服务

27.创建天地图,ArcGIS瓦片地图,Bing地图,谷歌地图

28.openlayers添加弹出层

28.openlayers坐标转换

所有评论(0)

风也曾吹过我_

12.点位显示非聚合

13.点位显示聚合

15.绘制点线圆多边形

19.多地图切换 (OSM 高德百度)