angular中使用openlayers开发地图

作者: Liekkasz | 来源:发表于2018-10-28 21:20 被阅读1次

angular中使用openlayers开发地图
OpenLayers简介及源码运行
arcgis api for js入门开发系列二十二地图模态层
Openlayer---第一课:概述
Openlayers实例-加载天地图
第三课 OL3基本概念
Openlayers API整理
WMTS地图服务使用
Cesium轨迹回放
Cesium基本图形绘制

一、框架版本

angular：6.1.10
openlayers：4.6.5

二、添加相应的包

在package.json文件中添加以下内容

{
    "dependencies": {
        "openlayers": "^4.6.5"
    },
    "devDependencies": {
        "@types/openlayers": "^4.6.12"
    }
}

三、新建地图组件

新建地图组件map-ol，包括以下内容：

hy-map-ol.component.html

<div #mapol id="mapol" class="mapol" style="width: 100%;height: 100%;">
    <div class="map-controll">
        <div class="zoom-in">
            <button class="zoom-btn" title="放大一级" (click)="zoomInOut(1)"><i class="anticon anticon-plus"></i></button>
        </div>
        <div class="zoom-out">
            <button class="zoom-btn" title="缩小一级" (click)="zoomInOut(-1)"><i class="anticon anticon-minus"></i></button>
        </div>
    </div>
    <div class="map-type">
        <div class="items">
            <div class="item" [ngClass]="{'active':selectedMapType==0}">
                <a (click)="changeMapType(0)">
                    <div class="type-name">晕渲图</div>
                    <img src="./assets/image/hymap/ter_c.jpg"/>
                </a>
            </div>
            <div class="item" [ngClass]="{'active':selectedMapType==1}">
                <a (click)="changeMapType(1)">
                    <div class="type-name">卫星图</div>
                    <img src="./assets/image/hymap/img_c.jpg"/>
                </a>
            </div>
            <div class="item" [ngClass]="{'active':selectedMapType==2}">
                <a (click)="changeMapType(2)">
                    <div class="type-name">区划图</div>
                    <img src="./assets/image/hymap/vec_c.jpg"/>
                </a>
            </div>
            <div class="item" [ngClass]="{'active':selectedMapType==3}">
                <a (click)="changeMapType(3)">
                    <div class="type-name">google地形</div>
                    <img src="./assets/image/hymap/google_a.png"/>
                </a>
            </div>
            <div class="item" [ngClass]="{'active':selectedMapType==4}">
                <a (click)="changeMapType(4)">
                    <div class="type-name">google卫星</div>
                    <img src="./assets/image/hymap/google_b.png"/>
                </a>
            </div>
            <div class="item">
                <a (click)="showCvaW(5)">
                    <div class="type-name"><input type='checkbox' [ngModel]="cvaW"/>地名标注</div>
                    <img src="./assets/image/hymap/cva_w.jpg"/>
                </a>
            </div>
        </div>
    </div>

    <div class="map-tool">
        <nz-select style="width: 145px;" [(ngModel)]="cond.dType" (ngModelChange)="changeDType()"
                   nzPlaceHolder="Choose">
            <nz-option nzValue="" nzLabel="请选择点类型"></nz-option>
            <nz-option nzValue="DT1" nzLabel="点类1"></nz-option>
            <nz-option nzValue="DT2" nzLabel="点类2"></nz-option>
        </nz-select>
    </div>

    <!-- 鼠标当前经纬度显示 -->
    <div id="mouse-position" class="mouse-position-wrapper">
        <div class="custom-mouse-position"></div>
    </div>

</div>

hy-map-ol.component.less

/* 缩放 */
.map-controll {
    position: absolute;
    width: 54px;
    height: 120px;
    right: 5px;
    bottom: 75px;
    z-index: 998;
    overflow: hidden;
}

.zoom-in, .zoom-out {
    box-shadow: 1px 2px 1px rgba(0, 0, 0, .15);
    width: 26px;
    height: 26px;
    margin-left: 13px;
    margin-top: 5px;
    background-color: #FFF;
    cursor: pointer;
}

.zoom-in .zoom-btn, .zoom-out .zoom-btn {
    cursor: pointer;
}

/* 渲染 */
.map-type {
    position: absolute;
    width: 100px;
    height: 65px;
    right: 5px;
    bottom: 5px;
    z-index: 5;
    overflow: hidden;
    cursor: pointer;
}

.map-type:hover {
    width: auto;
}

.map-type .item img {
    width: 80px;
    height: 60px;
}

.map-type .item {
    margin: 2px 1px 1px 10px;
    width: 80px;
    height: 60px;
    float: left;
    display: none;
}

.map-type:hover .item, .map-type .item.active {
    display: block;
}

.map-type .item .type-name {
    position: absolute;
    margin-top: 40px;
    text-align: center;
    height: 20px;
    line-height: 20px;
    width: 80px;
    color: white;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.5);
}

/* 经纬度显示 */
.mouse-position-wrapper {
    width: 245px;
    height: 30px;
    color: #000000;
    position: absolute;
    right: 0;
    bottom: 6px;
    z-index: 15;
}

/* 点筛选框 */
.map-tool {
    position: absolute;
    top: 20px;
    left: 51px;
    z-index: 15;
}

hy-map-ol.component.ts

import {AfterViewInit, Component, ElementRef, ViewChild} from "@angular/core";
import * as ol from "openlayers";
import {olx} from "openlayers";
import WMTSOptions = olx.source.WMTSOptions;
import ImageArcGISRestOptions = olx.source.ImageArcGISRestOptions;
import {ZapiService} from "@core/common/zapi/zapi.service";


@Component({
    selector: 'hy-map-ol',
    templateUrl: './hy-map-ol.component.html',
    styleUrls: ['./hy-map-ol.component.less'],
})

export class HyMapOlComponent implements AfterViewInit {
    @ViewChild('mapol') mapol;

    constructor(public zapi: ZapiService) {
    }

    ngAfterViewInit(): void {
        this.init();
        this.addPoints(this.dList);
    }

    cProjection = 'EPSG:4326';

    asmt = 5;
    selectedMapType = 0;

    cvaW = false;

    cond = {dType: ''};

    dList: any;

    map: any;

    // methods
    init() {
        let centerP = {longitude: 105.8, latitude: 30.578};

        let imageArcGisOpt: ImageArcGISRestOptions = {
            hidpi: false,
            ratio: 1,
            url: url
        } as ImageArcGISRestOptions;
        this.map = new ol.Map({
            target: "mapol",
            layers: [
                this.wmts("http://t0.tianditu.com/ter_c/wmts", "ter_c", true),//晕渲图
                this.wmts("http://t0.tianditu.com/img_c/wmts", "img_c", false),//卫星图
                this.wmts("http://t0.tianditu.com/vec_c/wmts", "vec_c", false),//区划图
                this.xyz("http://mt3.google.cn/vt/lyrs=t@131,r@216000000&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Gal", "google_a", false),
                this.xyz("http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G", "google_b", false),
                this.xyz("http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}", "cva_w", false),
                new ol.layer.Vector({
                    source: new ol.source.Vector()
                })
            ],
            controls: ol.control.defaults({
                zoom: false
            }).extend([
                new ol.control.MousePosition({
                    coordinateFormat: ol.coordinate.createStringXY(4),
                    projection: this.cProjection,
                    className: 'custom-mouse-position',
                    target: document.getElementById('mouse-position')
                }),
                new ol.control.ScaleLine({}),
            ]),
            view: new ol.View({
                center: [centerP.longitude, centerP.latitude],
                projection: ol.proj.get(this.cProjection),
                zoom: 6,
                minZoom: 4,
                maxZoom: 20
            })
        });
    }

    /**
     * 放大，缩小
     * @param zoomNo 变化等级，正数放大，负数缩小
     */
    zoomInOut(zoomNo: number) {
        let view = this.map.getView();
        let zoom = view.getZoom();
        view.setZoom(zoom + zoomNo);
    }

    /**
     * 切换图层
     * @param no 序号
     */
    changeMapType(no: number) {
        this.selectedMapType = no;
        let layers = this.map.getLayers().getArray();
        for (let i = 0; i < this.asmt; i++) {
            let layer = layers[i];
            let s = layer.getProperties();
            if (i == no) {
                layer.setVisible(true);
            } else {
                layer.setVisible(false);
            }

        }
    }

    /**
     * 显示/地名标注
     * @param no 序号
     */
    showCvaW(no: number) {
        this.cvaW = !this.cvaW;
        this.getLayerByIndex(no).setVisible(this.cvaW);
    }


    wmts(url, layerName, visible) {
        let projection = ol.proj.get(this.cProjection);
        let projectionExtent = projection.getExtent();
        let size = ol.extent.getWidth(projectionExtent) / 256;
        let resolutions = new Array(14);
        let matrixIds = new Array(14);
        for (let z = 0; z <= 14; ++z) {
            resolutions[z] = size / Math.pow(2, z);
            matrixIds[z] = z;
        }

        let wmtsOpt: WMTSOptions = {
            url: url,
            layer: layerName.split("_")[0],
            format: 'tiles',
            tileGrid: new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: matrixIds,
            }),
            matrixSet: layerName.split("_")[1],
            style: 'default'
        } as WMTSOptions;
        return new ol.layer.Tile({
            visible: visible,
            source: new ol.source.WMTS(wmtsOpt)
        });
    }

    xyz(url, layerName, visible) {
        return new ol.layer.Tile({
            visible: visible,
            source: new ol.source.XYZ({
                url: url
            })
        });
    }

    getLayerByIndex(index: number) {
        let layers = this.map.getLayers().getArray();
        for (let i = 0; i < layers.length; i++) {
            if (i == index) {
                return layers[i];
            }
        }
    }

    /**
     * 点类型切换
     */
    changeDType() {
        this.addPoints(this.sList);
    }

    /**
     * 添加点
     */
    addPoints(dList) {
        let layers = this.map.getLayers().getArray();
        let layer = layers[layers.length - 1];
        let vector;
        if (layer.getSource() == null) {
            vector = new ol.source.Vector({});
        } else {
            vector = layer.getSource();
        }
        // 清理原点图层数据
        vector.clear();
        for (let i = 0; i < dList.length; i++) {
            let dData = dList[i];
            if (this.cond.dList != '' && this.cond.dList != dData.type) {
                continue;
            }

            let longitude = dData.longitude;
            let latitude = dData.latitude;
            if (!longitude || !latitude) {
                continue;
            }
            // 初始化一个新的点要素
            let point = new ol.Feature({
                geometry: new ol.geom.Point([longitude, latitude]),
            });
            point.setId(st.iid);

            //设置点的样式
            let style = new ol.style.Style({
                image: new ol.style.Icon({
                    src: "assets/image/map/" + dData.type + ".png"
                }),
                text: new ol.style.Text({
                    text: dData.name,
                    offsetY: 12,
                    font: "500 14px Microsoft YaHei",    //字体与大小
                    fill: new ol.style.Fill({    //文字填充色
                        color: '#333'
                    }),
                    stroke: new ol.style.Stroke({    //文字边界宽度与颜色
                        color: '#fff',
                        width: 3
                    })
                })
            });
            point.setStyle(style);
            vector.addFeature(point);
        }
        if (layer.getSource() == null) {
            layer.setSource(vector);
        }
    }
}

angular中使用openlayers开发地图
一、框架版本 angular：6.1.10openlayers：4.6.5 二、添加相应的包在package.j...
OpenLayers简介及源码运行
OpenLayers 与 Leaflet 都是web端常用的地图展示开发库，对比着看简介 OpenLayers是...
arcgis api for js入门开发系列二十二地图模态层
前面实现一篇openlayers版本的地图模态层效果：openlayers入门开发系列之地图模态层篇本文实现的是...
Openlayer---第一课:概述
OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源...
Openlayers实例-加载天地图
天地图地图服务采用OGC的WMTS标准，使用Openlayers可以很方便的对天地图的图层进行叠加，天地图地图服务...
第三课 OL3基本概念
OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用，但从JavaS...
Openlayers API整理
Openlayers API整理 openlayers 发布于 2019-09-05 一、创建地图 1、地图Map...
WMTS地图服务使用
参考地址：如何使用WMTS地图服务WMTS服务初步理解与读取OpenLayers加载天地图方法——WMTS和XYZ
Cesium轨迹回放
在使用openlayers做二维地图的时候也开发过轨迹回话，其基本思路就是使用一个定时器，实时更新车辆的位置的方向...
Cesium基本图形绘制
之前用openlayers开发二维地图的时候，绘制点、线、面、圆、矩形、椭圆是基本的功能，所以在cesium地图中...