angular加载geoserver

布偶不说话

于 2021-02-25 15:58:08 发布

阅读量192

点赞数

分类专栏：编程技术

本文链接：https://blog.csdn.net/long_Amber/article/details/114087591

版权

编程技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用openlayers加载geoserver地图

首先安装ol模块

npm install ol

在项目根目录下新建jsconfig.json文件，jsconfig.json文件用于访问js文件

{
    "compilerOptions": {
        "checkJs": true,
        // Point to the JSDoc typed sources when using modules from the ol package
        "baseUrl": "./",
        "paths": {
            "ol": [
                "node_modules/ol/src"
            ],
            "ol/*": [
                "node_modules/ol/src/*"
            ]
        }
    },
    "include": [
        "**/*.js",
        "node_modules/ol/**/*.js"
    ]
}

添加css文件，在angular.json（angular项目为.angular-cli.json)文件中添加ol.css文件

找到这一段代码：

"root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/hzyf-angular",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                "output": "/assets/"
              }
            ],
            "styles": [
              "src/theme.less",
              "src/styles.scss"
            ],
            "scripts": []
          },

替换styles为：

            "styles": [
              "src/theme.less",
              "src/styles.scss",
              "node_modules/ol/ol.css"
            ],

在html里编写地图容器

<div id="map-container"></div>

在scss里限制样式：

html, body, #map-container{
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: sans-serif;
  }
  /*设置固定地图*/
  #map-container{
    height: 508px;
    width: 1180px;
    border: 1px solid;
  }

在component.ts里添加地图：

import { Component, OnInit } from '@angular/core';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import TileWMS from 'ol/source/TileWMS';
import Projection from 'ol/proj/Projection';
import XYZSource from 'ol/source/XYZ';
import Layer from 'ol/layer/Layer';
import Tile from 'ol/layer/Tile';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  constructor() { }

  ionViewDidEnter() {
    //修改bbox:边界值
    const bounds = [-74.047185, 40.679648,
      -73.90782, 40.882078];
    //修改EPSG：坐标系
    const projection = new Projection({
      code: 'EPSG:4326',
      units: 'degrees'
    });
    const lowmap = new Tile({
      source: new TileWMS({
        url: 'http://localhost:8080/geoserver/tiger/wms',//geoserver的发布图层地址
        params: {
          'FORMAT': 'image/png',
          'VERSION': '1.1.1',
          tiled: true,
          STYLES: '',
          LAYERS: 'tiger:poly_landmarks'  //geoserver的发布图层名称
        }
      })
    })
    const map = new Map({
      target: 'map-container',
      layers: [lowmap], //如果有新的图层，把新的图层加到这里，放在lowmap之前表示底图，之后表示叠加之上的图层。
      view: new View({
        projection: projection
      })
    });
    map.getView().fit(bounds, map.getSize())
  }

  ngOnInit(): void {
    this.ionViewDidEnter();
  }
}

启动运行结果：

在这里插入图片描述