【openlayers】地图【三】

鼠标位置控件

import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import BingMaps from 'ol/source/BingMaps'
import * as control from 'ol/control'
import * as coordinate from 'ol/coordinate';

 <div ref="mousePositionTxt"></div>

initMap () {
   
      this.map = new Map({
        target: 'map',
        controls: control.defaults().extend([
        // 鼠标控件
          new control.MousePosition({
            coordinateFormat: coordinate.createStringXY(4),
            projection: 'epsg:4326',
            target: this.$refs.mousePositionTxt,
            placeholder: '这里是个默认值'
          })
        ]),
        layers: [
          new Tile({
            source: new BingMaps({
              key: 'AiZrfxUNMRpOOlCpcMkBPxMUSKOEzqGeJTcVKUrXBsUdQDXutUBFN3-GnMNSlso-',
              imagerySet: 'Aerial'
            })
          })
        ],
        view: new View({
          projection: "epsg:4326", // 坐标系，有epsg:4326和epsg:3857
          center: [114.064839, 22.548857],
          zoom: 6 // 地图缩放级别（打开页面时默认级别）
        })
      })
    }

投影:
地理坐标系是三维的，我们要在地图或者屏幕上显示就需要转化为二维，这被称为投影（Map projection）。显而易见的是，从三维到二维的转化，必然会导致变形和失真，失真是不可避免的，但是不同投影下会有不同的失真，这让我们可以有得选择。常用的投影有等矩矩形投影（Platte Carre）和墨卡托投影

地理坐标系统 :
4326 WGS-84：是国际标准，GPS坐标（Google Earth使用、或者GPS模块）
epsg:4326 的数据一般是这种的。[114.05，22.37]。
所以我们常常看到和用到的坐标系数据往往不是墨卡托坐标，而是epsg:4326坐标系下的坐标数据。因为是常见的坐标。 百度使用的是epsg:4326坐标系数据

创建图层

将 ‘样式’ 添加到 ‘图特性’ 中，创建矢量容器，将图标特性添加容器，再将容器放到矢量图层 最终加入地图的图层中

import 'ol/ol.css'
import { Map, View, Feature } from 'ol'
import Tile from 'ol/layer/Tile'
import LayerVector from 'ol/layer/Vector'
import SourceVector from 'ol/source/Vector'
import Point from 'ol/geom/Point'
import { Style, Regularshape, Fill, stroke } from 'ol/style'

export default {
  name: 'SetZIndex',
  data () {
    return {
      map: null,
      squareZIndex: 1,
      triangleZIndex: 0,
      starZIndex: 0,
      styles: {
        'square': new Style({
          image: new Regularshape({
            fill: new Fill({ color: 'blue' }),
            stroke: new stroke({ color: 'black', width: 1 }),
            points: 4,
            radius: 80,
            angle: Math.PI / 4
          })
        }),
        'triangle': new Style({
          image: new Regularshape({
            fill: new Fill({ color: 'red' }),
            stroke: new stroke({ color: 'black', width: 1 }),
            points: 3,
            radius: 80,
            rotation: Math.PI / 4,
            angle: 0
          })
        }),
        'star': new Style({
          image: new Regularshape({
            fill: new Fill({ color: 'green' }),
            stroke: new stroke({ color: 'black', width: 1 }),
            points: 5,
            radius: 80,
            radius2: 4,
            angle: 0
          })
        })
      },
      layer0: null,
      layer1: null,
      layer2: null
    }
  },
  watch: {
    squareZIndex (newVal) { // 方块所在图层的 Z-index
      this.layer1.setZIndex(parseInt(newVal, 10) || 0)
    },
    triangleZIndex (newVal) { // 三角形所在图层的 Z-index
      this.layer2.setZIndex(parseInt(newVal, 10) || 0)
    },
    starZIndex (newVal) { // 星形所在图层的 Z-index
      this.layer0.setZIndex(parseInt(newVal, 10) || 0)
    }
  },
  methods: {
    initMap () {
      this.layer0 = this.createLayer([40, 40], this.styles['star'], this.starZIndex)
      this.layer1 = this.createLayer([0, 0], this.styles['square'], this.squareZIndex)
      this.layer2 = this.createLayer([0, 40], this.styles['triangle'], this.triangleZIndex)


      // 如果zindex相等，那么
                
                                
原文地址：https://www.jb51.cc/wenti/3282879.html
                                 
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。