vue+openlayers设置地图背景颜色（本例子为背景颜色设置为黑色）

最新推荐文章于 2024-01-31 09:38:10 发布

原创最新推荐文章于 2024-01-31 09:38:10 发布 · 7.4k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #openlayers

openlayer 同时被 2 个专栏收录

12 篇文章

订阅专栏

vue

9 篇文章

订阅专栏

在Vue项目中使用OpenLayers时，若要将地图背景颜色设为黑色，无需直接在OpenLayers中操作，只需修改包含地图的div元素的背景色。通过CSS设置该div的背景颜色即可实现。

思考：我之前用的是JavaScripts+openlayers，在网上搜了很多资料，自己也尝试了很多次，都没有设置成功，貌似不可行，估计需要拿过来的地图就是黑色的，这个可以去找黑色地图（我没找啊，因为后来需求变了，需要将openlayers集成到vue中，于是我就改变策略了），vue+openlayers设置背景颜色其实很简单，只需要设置地图所在的div的背景颜色即可

代码：

<template>
    <div id="map" class="mapStyle" ref="rootmap">
       
    </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
// import TileLayer from "ol/layer/Tile";

import VectorLayer from "ol/layer/Vector";

// import OSM from "ol/source/OSM";
import VectorSource from "ol/source/Vector";
import Feature from "ol/Feature";
import GeoJSON from "ol/format/GeoJSON";
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";
import Fill from "ol/style/Fill";
// import Select from "ol/interaction/Select"
import {bbox} from 'ol/loadingstrategy';
export default {
  data() {
    return {
    
    };
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap(){
      var extent = [11285.07103919199,20056.574012374178,61290.31172946711,33996.47243386325];
      var wfsVectorSource = new VectorSource({
        url: 'http://localhost:8082/geoserver/workhome/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=workhome%3A28f&outputFormat=application%2Fjson',
        format: new GeoJSON(),
        features: Array.Feature,
        strategy: bbox
      })

      var styles = new Style({
        stroke: new Stroke({
            // color: 'blue',
            color: 'rgba(30,144,255)',
            width: 3
        }),
        fill: new Fill({
            color: 'rgba(0, 0, 255, 0.1)'
        })
      })

      var wfsVectorLayer = new VectorLayer({
        style: styles,
        source: wfsVectorSource,
        visible:true,
      })
      
      this.map = new Map({
        target: "map",
        layers: [
          wfsVectorLayer
        ],
        view: new View({
            center: [31955.4551374715, 28165.253430237015],
            projection: 'EPSG:3857',
            zoom: 14
        }),
      });
      this.map.getView().fit(extent, this.map.getSize());
      this.map.getView().setZoom(14);
};
</script>

<style>
#map{height:100%;}
/*隐藏ol的一些自带元素*/
.ol-attribution,.ol-zoom { display: none;}

.mapStyle {
  background-color: black
}
</style>