vue+openlayes 实现等值面geojson贴图效果

最新推荐文章于 2024-03-19 12:08:14 发布

今天也需要努力搬砖呐

最新推荐文章于 2024-03-19 12:08:14 发布

阅读量429

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_46262744/article/details/130615749

版权

使用openlayers实现geojson数据的贴图效果

在这里插入图片描述

首先第一种要特别注意：url是一个地址 url 和 features 不要一起用

import { Map, View } from "ol";
import { Tile } from "ol/layer";
import { format } from "ol/coordinate";
import TileWMS from "ol/source/TileWMS";
import MousePosition from "ol/control/MousePosition";
import Vector from "ol/layer/Vector";
import {Style,Icon,Fill,Stroke,Text, Circle as CircleStyle} from "ol/style";
import { Feature } from "ol";
import VectorSource from "ol/source/Vector";
import { GeoJSON } from "ol/format";
  addGeoJson() {
  //这个是我写的切换radio的颜色的方法 没需要不需要添加
      let color = '#3C3EBC';
      if(this.disasterColour==='1'){
        color= '#3C3EBC';
      }else if(this.disasterColour==='2'){
        color= '#FFFF00';
      }else if(this.disasterColour==='3'){
        color= '#FF8800  ';
      }else if(this.disasterColour==='4'){
        color= '#FF3333 ';
      }
     
      let styleFunction = function (feature) {
        console.log( feature.values_.color, '颜色');
        return new Style({
          fill: new Fill({
            color: color,//设置默认蓝色
          }),
        });
      };
      //先删除已有图层，如果有的话
      let layers = this.map.getLayers();
      console.log(layers, 'layers');
      layers.array_.forEach(layer => {
        if(layer.values_.title && layer.values_.title == 'dzm'){
          this.map.removeLayer(layer);
        }
      });

      let ly = new Vector({
        title: "dzm",
        source: new VectorSource({
          projection: "EPSG:4326",
          url: "static/json/aaa.json",  //get请求的地址 后台直接处理过的json
          format: new GeoJSON(),
        }),
        style: styleFunction,
      });
      this.map.addLayer(ly);
    },

第二种是不能使用这个方法使用features

 addGeoJson() {
  //这个是我写的切换radio的颜色的方法 没需要不需要添加
      let color = '#3C3EBC';
      if(this.disasterColour==='1'){
        color= '#3C3EBC';
      }else if(this.disasterColour==='2'){
        color= '#FFFF00';
      }else if(this.disasterColour==='3'){
        color= '#FF8800  ';
      }else if(this.disasterColour==='4'){
        color= '#FF3333 ';
      }
     
      let styleFunction = function (feature) {
        console.log( feature.values_.color, '颜色');
        return new Style({
          fill: new Fill({
            color: color,//设置默认蓝色
          }),
        });
      };
      //先删除已有图层，如果有的话
      let layers = this.map.getLayers();
      console.log(layers, 'layers');
      layers.array_.forEach(layer => {
        if(layer.values_.title && layer.values_.title == 'dzm'){
          this.map.removeLayer(layer);
        }
      });
        //这里可以写后台的接口获取接口值 
        let arrGEOJSON=res,data.result
     var features = new GeoJSON().readFeatures(arrGEOJSON)  //这个意思是将数据进行转换转换为features 
      let ly = new Vector({
        title: "dzm",
        source: new VectorSource({
          projection: "EPSG:4326",
          features:features 
        }),
        style: styleFunction,
      });
      this.map.addLayer(ly);
    }