简单示例 | A-Zero

# 简单示例

# 在html中使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础地图展示</title>
    <link href="ol.css" type="text/css">
    <script src="ol.js"></script>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        #mapBox{
            width: 100vw;
            height: 100vh;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="mapBox"></div>
    <script>
        const map=new ol.Map({
            target:"mapBox",
            layers:[
                new ol.layer.Tile({source:new ol.source.OSM()})
            ],
            view:new ol.View({
                projection:"EPSG:4326", // 默认3857
                // center: ol.proj.fromLonLat([120.13989, 30.27662]), // 转为3857
                center:[120.13989, 30.27662],
                zoom: 11,
                minZoom:10,
                maxZoom:13
            })
        })
    </script>    
</body>
</html>

# 在Vue中使用

//安装
npm install ol

//使用
<template>
    <div id="content">
        <div id="map" class="map"></div>
    </div>
</template>
 
<script>
import "ol/ol.css"
import { Map, View } from "ol"
import { defaults as defaultControls } from "ol/control"
import Tile from "ol/layer/Tile"
import XYZ from "ol/source/XYZ"
import Projection from "ol/proj/Projection"
import { fromLonLat, transform, addProjection } from "ol/proj"
 
export default {
    name: "tree",
    data() {
        return {
            map: null
        }
    },
    mounted() {
        this.initMap()
    },
    methods: {
      initMap() {
        let target = "map"
		let tileLayer = [
			new Tile({
			  source: new XYZ({
				// 天地图矢量经纬度投影
				url: "http://t3.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=KEY",
				projection: 'EPSG:4326'
			  }),
			}),
			new Tile({
			  source: new XYZ({
				// 天地图矢量经纬度注记
				url: "http://t3.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=KEY",
				projection: 'EPSG:4326'
			  }),
			}),
			new Tile({
			  source: new XYZ({
				// 天地图影像经纬度投影
				url: "http://t3.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=KEY",
				projection: 'EPSG:4326'
			  }),
			}),
			new Tile({
			  source: new XYZ({
				// 天地图影像经纬度注记
				url: "http://t3.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=KEY",
				projection: 'EPSG:4326'
			  }),
			}),
			new Tile({
			  source: new XYZ({
				// 天地图矢量墨卡托投影
				url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=KEY",
				projection: 'EPSG:3857'
			  }),
			}),
			new Tile({
			  source: new XYZ({
				// 天地图矢量墨卡托注记
				url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=KEY",
				projection: 'EPSG:3857'
			  }),
			}),
			new Tile({
			  source: new XYZ({
				// 天地图影像墨卡托投影
				url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=KEY",
				projection: 'EPSG:3857'
			  }),
			}),
			new Tile({
			  source: new XYZ({
				// 天地图影像墨卡托注记
				url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=KEY",
				projection: 'EPSG:3857'
			  }),
			})
		]
		// 设置4326投影，默认3857
		let projection = new Projection({
			code: 'EPSG:4326',
			units: 'degrees',
			extent: [-180, -90, 180, 90],
			global: true
		})
		addProjection(projection)
		
		let view = new View({
			center: [118.653678, 36.411430],
			// center: fromLonLat([118.653678, 36.411430]), // 3857
			zoom: 10,
			minZoom: 7,
			projection: projection // 不加默认为3857
		})
		this.map = new Map({
			target: target,
			layers: tileLayer,
			view: view
		})
      }
    }
};
</script>

注意: mounted调初始化方法地图不显示，浏览器窗口变化地图开始渲染

// 这样不行
this.$nextTick(() => {
    this.initMap()
})
// 这样可以
setTimeout(() => {   
	this.initMap()
}, 100);

# 加载WMS服务

import Tile from "ol/layer/Tile"
import TileWMS from 'ol/source/TileWMS'
import { fromLonLat, transform, get as getProjection } from "ol/proj"

// VERSION也可以是 1.3.0，取决于你的 GeoServer 配置
// STYLES设置显示的样式
let params = { LAYERS: 'gather:pts', VERSION: '1.1.1', STYLES: 'point', CQL_FILTER: '1=1'}
const wmsLayer = new Tile({
	name: 'plotmap',
	source: new TileWMS({
		url: '/wfs/geoserver/gather/wms',
		params: params,
		serverType: 'geoserver' // 有好几种地理服务器，要明确指定
	})
})
this.map.addLayer(wmsLayer)

// 点击元素的信息
this.map.on('click', evt=> {
	// const size = this.map.getSize()
	// const bbox = this.map.getView().calculateExtent(size)
	const viewResolution = this.map.getView().getResolution()
	const projection = this.map.getView().getProjection() //getProjection('EPSG:4326')
	//const coordinate = transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326')
	const url = wmsLayer.getSource().getFeatureInfoUrl(evt.coordinate, 
	                                                   viewResolution, 
													   projection, {
	  'INFO_FORMAT': 'application/json','QUERY_LAYERS': 'gather:map_pts'
	})

	if (url) {
	  fetch(url)
		.then(response => response.json())
		.then(json => {
		  // 解析要素数量
		  const featureCount = json.features.length
		  console.log('Feature Count:', featureCount)
		})
		.catch(error => console.error('Error fetching features:', error))
	}
})

# 加载WFS服务

import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import { Vector as VectorLayer, Tile as TileLayer } from 'ol/layer'
import { Vector as VectorSource, OSM } from 'ol/source'
import { GeoJSON } from 'ol/format'
import { bbox } from 'ol/loadingstrategy'
import { Style, Stroke, Circle, Fill } from 'ol/style'
import { Projection } from 'ol/proj'

// 创建wfs资源
const vectorSource = new VectorSource({
	// res.msg 请求的结果
	features: new GeoJSON().readFeatures(JSON.parse(res.msg), {
	featureProjection: 'EPSG:3857'
}),
// 或者通过url加载
loader: function (extent, resolution, projection) {
    var url = '/wfs/geoserver/gather/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=gather:00&outputFormat=application/json'
    fetch(url)
        .then(response => response.json())
        .then(json => {
            var features = new GeoJSON().readFeatures(json, {
                featureProjection: 'EPSG:3857' // 将数据投影到地图的投影
            })
            vectorSource.addFeatures(features)
        }).catch(error => console.error('Error loading WFS data:', error))
    },
    strategy: bbox // 根据视图的 bbox 加载数据
})
// 或者
let wfsVectorSource = new VectorSource({
	format: new GeoJSON(),
	projection: 'EPSG:4326',
	url: '/wfs/geoserver/gather/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=gather:00&outputFormat=application/json',
	strategy: bbox
});
var wfsVectorLayer = new VectorLayer({
	name: 'gridmap',
	source: vectorSource,
	style: (feature) => {
		const count = feature.get('count')
		let color = `0,120,255,0.7` // 蓝色
		if (count > 100) {
		    color = '200,0,120,0.7' // 紫色
		} else if (count <= 100 && count > 50) {
		    color = '255,0,0,0.7' // 红色
		} else if (count <= 50 && count > 10) {
		    color = '255,120,0,0.7' // 橙色
		} else if (count <= 10 && count > 5) {
		    color = '0,180,0,0.7' // 绿色
		}
		color = `rgba(${color})`
		return new Style({
		  fill: new Fill({
			color: color,
		  }),
		  text: new Text({
			text: count.toString(),
			font: '12px Arial',
			fill: new Fill({
			    color: '#000'
			}),
			// 创建wfs图层，注意需要设置好描边样式，否则不展示效果出来
			stroke: new Stroke({
			  color: '#fff',
			  width: 3
			})
		  })
		})
	},
	zIndex: 3,
})
this.map.addLayer(geojsonLayer)

# WFS服务条件过滤

const vectorSource = new VectorSource();
const vector = new VectorLayer({
  source: vectorSource,
  style: new Style({
    stroke: new Stroke({
      color: 'rgba(0, 0, 255, 1.0)',
      width: 2,
    }),
  }),
});
this.map.addLayer(vector);
// 构建一个多边形
var polygon1=new Polygon([[
      [117.12499999999999, 31.00586290462421],
      [117.12499999999999, 32.091882620021806],
      [116.90551757812499, 32.091882620021806],
      [116.90551757812499, 31.00586290462421],
      [117.12499999999999, 31.00586290462421]]]);
      
// 需要将构建的面要素进行坐标转换，变成一个polygon要素
polygon1.applyTransform(getTransformss('EPSG:4326','EPSG:3857'));


// 空间过滤
const featureRequest = new WFS().writeGetFeature({
  srsName: 'EPSG:3857',
  featureNS: 'http://localhost/map',
  featurePrefix: 'osm',
  featureTypes: ['xxxxx'],
  outputFormat: 'application/json',
 
  filter:
  // equalToFilter('region', '澳门特别行政区')
  // andFilter(
  //   likeFilter('SCENEDATE', '2022/3/*'),
  //   equalToFilter('region', '安徽省')
  // ),
   ol.format.filter.intersects('the_geom',polygon1)
   // equalToFilter('SCENEDATE', '2013/5/21')
});

// 属性过滤
var featureRequest = new ol.format.WFS().writeGetFeature({
	srsName: 'EPSG:4326',//坐标系
	featureNS: 'http://www.census.gov',// 注意这个值必须为创建工作区时的命名空间URI
	featurePrefix: 'tiger',//工作区的命名
	featureTypes: ['poi'],//所要访问的图层
	maxFeatures: 5000,
	outputFormat: 'application/json',
	filter: new ol.format.filter.like('NAME', 'lo*')//属性过滤条件
});

var that = this.map
fetch('http://localhost:8080/geoserver/map/wfs', {
  method: 'POST',
  body: new XMLSerializer().serializeToString(featureRequest),
})
  .then(function (response) {
    return response.json()
  
  })
  .then(function (json) {
    const features = new GeoJSON().readFeatures(json);
    vectorSource.addFeatures(features);
    that.getView().fit(vectorSource.getExtent());
  });

在openlayers官网中，还有很多空间查询，基本上都大同小异

openlayer_filter

# 使用示例

项目示例一 (opens new window) 项目示例二 (opens new window)

← 基础信息 OpenLayers3D →