【WebGIS】Openlayers基础开发

介绍

最近用到地图相关的基本功能，学习了开源的项目Openlayers基础开发，基本可以满足所有2D地图的需求。Openlayers使用了ES6提出类的思想设计，学习它主要需要理解它各个类的关系和类中的实现方式。
使用的V6版本，对它基础功能进行了简单的汇总编写。学习最简单最好的方式还是查阅官网：

官网
示例
API

OpenLayers的基础知识点参阅官方网站即可，里面的quickstart和常用的示例、API都进行了详细的介绍。

实现的基本功能和部分代码

• 初始化地图
  示例中使用了天地图底图，加载天地图前往官方地址申请Token。

 constructor(target, center) {
    
    
        this.layers = this.createBaseLayers()
        //地图加载
        this.map = new Map({
    
    
            interactions: de({
    
     doubleClickZoom: false }),
            controls: defaults({
    
    
                attribution: false,
                rotate: false,
                zoom: false,
            }),
            target,
            layers: this.layers,
            overlays: [],
            view: this.createBaseView(center)
        });
    }
    //创建图层 使用的天地图
    createBaseLayers() {
    
    
        const tiandi_base_map = new TileLayer({
    
    
            source: new XYZ({
    
    
                name: "天地图-矢量底图",
                url: "http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=天地图Token",
                projection: "EPSG:4326",
            }),
            visible: true
        });
        const tiandi_image_map = new TileLayer({
    
    
            source: new XYZ({
    
    
                name: "天地图-影像底图",
                url: "http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=天地图Token",
                projection: "EPSG:4326",
            }),
            visible: false
        });

        const tiandi_base_tag_map = new TileLayer({
    
    
            source: new XYZ({
    
    
                name: "天地图-矢量标记",
                url: "http://t0.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=天地图Token",
                projection: "EPSG:4326",
            }),
            visible: true
        });
        // const tiandi_image_tag_map = new TileLayer({
    
    
        //     source: new XYZ({
    
    
        //         name: "天地图-影像标记",
        //         url: "http://t0.tianditu.com/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=天地图Token",
        //         projection: "EPSG:4326",

        //     }),
        //     visible: false
        // });
        return [tiandi_base_map, tiandi_image_map, tiandi_base_tag_map]
    }
    //创建视图
    createBaseView(center) {
    
    
        const view = new View({
    
    
            //经度 纬度
            center,
            //指定投影EPSG:4326，等同于WGS84坐标系
            projection: 'EPSG:4326',

            //设置地图中心范围
            //经度29度到31度，纬度在102到104度之间
            //[minX, minY, maxX, maxY]
            // extent: [120, 29, 122, 36],

            //层级
            zoom: 14,
            // 限制地图缩放最大级别为14，最小级别为10
            minZoom: 10,
            maxZoom: 18
        });
        return view
    }

• 展示坐标点

 //显示点
    showPoints(data) {
    
    
        if (this.pointsLayer) {
    
    
            this.map.removeLayer(this.pointsLayer);
        }
        const styles = new Styles();
        let features = [];
        data.forEach((item) => {
    
    
            const feature = new Feature({
    
    
                geometry: new Point(item),
            });
            feature.setProperties(item);
            feature.setStyle(styles.createPointStyle(item.name));
            features.push(feature);
        });
        this.pointsLayer = new VectorLayer({
    
    
            source: new Vector({
    
    
                features,
            }),
        });
        this.map.addLayer(this.pointsLayer);
    }

• 展示面

  // 显示面
    showArea(data) {
    
    
        if (this.areasLayer) {
    
    
            this.map.removeLayer(this.areasLayer);
        }
        let areaList = [];
        data.forEach((wkt) => {
    
    
            let feature = new WKT().readFeature(wkt, {
    
    
                dataProjection: "EPSG:4326",
                featureProjection: "EPSG:4326",
            });
            const styles = new Styles();
            feature.setStyle(styles.getAreaStyle());
            feature.setProperties(wkt);
            areaList.push(feature);
        });
        this.areasLayer = new VectorLayer({
    
    
            source: new Vector({
    
    
                features: [...areaList],
            }),
        });
        this.map.addLayer(this.areasLayer);
    }

• 移动视图中心

  //移动视图
    animateViewCenter(center) {
    
    
        this.map.getView().animate({
    
    
            center, // 中心点
            zoom: 14, // 缩放级别
            duration: 1000, // 缩放持续时间，默认不需要设置
        });
    }
    //移动视图
    animateViewGeom(geom) {
    
    
        let format = new WKT();
        let feature = format.readFeature(geom, {
    
    
            dataProjection: "EPSG:4326",
            featureProjection: "EPSG:4326",
        });
        var geo = feature.getGeometry();
        var extent = geo.getExtent();
        this.map.getView().fit(extent, {
    
    
            duration: 2000, //动画的持续时间,
            // maxZoom: 18
        });
    }

• 展示弹框
• 测距、测面、打点
• 图层切换
• 添加点、面、线
• 编辑点、面、线
• …
  

完整代码

链接地址
下载代码后，需修改createBaseLayers方法中使用的天地图Token或更换其他图层。

npm i
npm run serve

安装依赖，便可成功启动。