前端开发之GIS地图框架:openlayers

openLayers

  1. 开源的javascript的库,用来在web浏览器显示地图,提供的API类似于Google地图和Bing地图
  2. 使用的默认投影坐标:EPSG:3857,和OSM(OpenStreetMap)/Google Map/Bing Map默认坐标一致; 不同于高德百度地图的数据格式('EPSG:4326' WGS 84),使用前注意转换
  3. 坐标格式:coordinate: [lon,lat] [(longitude)经度, (Latitude)纬度]

注意点

  1. 如果该应用程序旨在在Internet Explorer或Android 4.x等旧平台上运行,则在OpenLayers之前需要包含另一个脚本:<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
  2. 加载问题:加载场景,地图加载

初始化一个简单的 map

  1. 引入

    CDN

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
    
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
    
    

    NPM

    npm install ol

    import { Map, View} from "ol";
    import TileLayer from "ol/layer/Tile"; 
    import { XYZ, OSM } from "ol/source";
    
  2. 创建map
    <div id="mapTarget" class="map"></div>
    <style>.map {width:800px;height:600px;}</style>
    <script type="text/javascript">
    let mapView = new View({
        center: [lon, lat],
        zoom: 4
      })
    let map = new Map({
      target: 'mapTarget',
      layers: [
        new TileLayer({
          source: new XYZ({url:'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scl=1&style=7&x={x}&y={y}&z={z}'}) //引入高德地图
          //source: new OSM() //使用OSM地图
        }),
      ],
      view: mapView
    })
    </script>
    

    CDN引入的创建方式也类似,只是需要格式有些变化,例如:new ol.map({})

为Map添加标记点

  1. 添加标记点

    import VectorLayer from "ol/layer/Vector";
    import Feature from "ol/Feature";
    import Point from "ol/geom";
    import VectorSource from "ol/source/Vector";
    
    let feature =  new Feature({ geometry: new Point([lon, lat]) })
    let pointLayer = new VectorLayer({
      source: new VectorSource({
        features:[feature]
      })
    })
    
    map.addLayer(pointLayer)
    
    
  2. 标记点样式 (图文标记)

    Style: 元素的样式

    Icon: 图标

    Text: 文字

    Fill: 元素填充样式

    图文样式
    
    import { Style, Icon, Text, Fill, Stroke } from "ol/style";
    
    let style = new Style({
       image: new Icon({
          anchor: [0.5, 0.5],
          anchorYUnits: "pixels",
          anchorOrigin: "bottom-right",
          offsetOrigin: "top-right",
          offset: [0, 0],
          opacity: 1,
          crossOrigin: "Anonymous",
          scale: 1,
          src: './img/starticon.png',
        }),
    
        text: new Text({
          text: '航线起点',
          font: "normal 16px Source Han Sans CN",
          textAlign: "center",
          fill: new Fill({ color: "#000000" }),
        }) // 标记文字的样式
    })
    
    feature.setStyle(style)
    

为Map 添加串线(由标记点连接而成)

  1. 使用openlayers 的 LineString (串线) api

Stroke: 串线样式

  1. 添加线
    import VectorLayer from "ol/layer/Vector";
    import VectorSource from "ol/source/Vector";
    import Feature from "ol/Feature";
    import LineString from "ol/geom";
    import { Style, Stroke } from "ol/style";
    
    let lineGeometry =  new LineString([coordinate0, coordinate1, ...])
    let lineStringLayer = new VectorLayer({
    source: new VectorSource({
      features: [
        new Feature({
          geometry: lineGeometry,
        }),
      ],
      wrap: false,
    }),
    style: new Style({
      stroke: new Stroke({
        color: "#4ed8aa",
        width: 6,
      }),
    }),
    });
    
    

openlayers 的 overlay 为地图添加覆盖层

  1. 添加overlay
    <div id="realAir"><img src="@/assets/demo/drone.gif" style="width: 40px;"></div>
    
    import { Map, View, Overlay } from "ol"; 
    
    let overlay =  new Overlay({
    id: "realair",
    element: document.getElementById("realAir"),
    position: realFeatures,
    positioning: "center-center"
    })
    
    map.addOverlay(overlay)
    
    

地图居中的两方式

  1. center: [lon, lat], zoom: 4
  2. mapView.fit(lineGeometry) //按当前串线的最适合尺寸缩放地图
上一篇
下一篇