提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
目录
前言
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
提示：以下是本篇文章正文内容，下面案例可供参考
一、openlayer库是干嘛的？
openlayers库是开源的二维WebGIS开发库，该库是应该算是最好的二维开源JS库了，目前我是这样认为的，使用该库可以在前端开发中加载各种地图数据。学习openlayers库是WebGIS开发的入门库，所以学起来很有必要
二、引入
2.1如何在HTML中引入并使用openlayers库
2.1.1如何将openlayers库引入开发文件中
代码如下（示例）：
<!-- 1.导入ol依赖 -->
<!-- 进入前端静态资源库，搜索ol 得到css 和js 地址 -->
<link rel="stylesheet" href="https://lib.baomitu.com/ol3/3.21.0-beta.2/ol.css">
<script src="https://lib.baomitu.com/ol3/3.21.0-beta.2/ol.js"></script>2.1.2设置地图控件div，作为地图挂载点
<!-- 2.设置地图的挂载点 -->
<div id="map">
</div>2.1.3在js脚本中设置地图的各种属性
<script>
// 3.初始化一个高德图层
const gaode = new ol.layer.Tile({
title: "高德地图",
source: new ol.source.XYZ({
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
wrapX: false
})
});
// 4.初始化一个openlayer地图
const map = new ol.Map({
// 将初始化的地图设置到id为map的容器上
target: 'map',
// 设置图层
layers: [gaode],
// 设置视图
view: new ol.View({
// 设置中心点
center: [114.30, 30.50],
// 设置缩放级别
zoom: 10,
projection: 'EPSG:4326'
})
})
</script>2.1.4为地图添加组件
// 实例化一个复位控件
const ZoomToExtent = new ol.control.ZoomToExtent({
extent: [110, 30, 160, 30],
})
// 将控件添加到地图中
map.addControl(ZoomToExtent)
/* 放大缩小控件 */
const zoomslider = new ol.control.ZoomSlider();
map.addControl(zoomslider)
//全屏控件
const fullScreen = new ol.control.FullScreen();
map.addControl(fullScreen)2.1.5在地图中添加要素数据
// 6.添加要素
// 先构建要素，然后将要素添加到数据源，然后将数据源添加到图层，再将图层添加到地图
/* 6.1、构建要素 */
var point = new ol.Feature({
geometry: new ol.geom.Point([114.30, 30.50])
})
let style = new ol.style.Style({
image: new ol.style.Circle({
// 点的半径
radius: 10,
// 填充颜色
fill: new ol.style.Fill({
color: "#ff2d51"
}),
// 描边
stroke: new ol.style.Stroke({
color: "#333",
width: 2
})
})
})
point.setStyle(style);
/* 6.2、将要素添加到矢量数据源 */
const source = new ol.source.Vector({
features: [point]
})
/* 6.3、将矢量数据源添加到矢量图层 */
const layer = new ol.layer.Vector({
source
})
/* 6.4、将矢量图层添加到地图容器 */
map.addLayer(layer)2.1.6在地图中添加geojson数据
// 7.设置geojson矢量数据
// 7.1创建geojson数据
var data = {
type: "FeatureCollection",
features: [
// 设置点数据
// {
// type: "Feature",
// geometry: {
// type: "Point",
// coordinates: [114.30, 30.50]
// }
// },
// 设置线数据
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [[114.30, 30.50], [114.30, 31]]
}
},
// 设置面数据
{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [[[114.30, 30.50], [116, 30.50], [116, 30]]]
}
}
]
}
var source = new ol.source.Vector({
/* 将geojson数据设置给实例数据源 */
features: new ol.format.GeoJSON().readFeatures(data)
})
var layer = new ol.layer.Vector({
source
})
// 给点数据设置样式
// const style = new ol.style.Style({
// image: new ol.style.Circle({
// radius: 8,
// fill: new ol.style.Fill({
// color: "#ff2d51"
// }),
// stroke: new ol.style.Stroke({
// color: '#333',
// width: 2
// })
// }),
// })
// 给线数据设置样式
const style = new ol.style.Style({
//边线颜色
stroke: new ol.style.Stroke({
color: '#ff2d51',
width: 4
}),
//设置填充色
fill: new ol.style.Fill({
color: "rgba(50, 50, 50, 0.3)"
})
})
layer.setStyle(style);
map.addLayer(layer);2.1.7加载本地geojson数据
// 8.加载本地geojson数据
// 8.1设置矢量数据源加载geojson数据
const source = new ol.source.Vector({
url: './data/map.geojson',
format: new ol.format.GeoJSON()
})
// 8.2设置图层
const layer = new ol.layer.Vector({
source
})
const style = new ol.style.Style({
image: new ol.style.Circle({
radius: 8,
fill: new ol.style.Fill({
color: '#ff2d51'
}),
stroke: new ol.style.Stroke({
color: '#333',
width: 2
})
})
})
layer.setStyle(style)
map.addLayer(layer)2.1.8加载网络geojson数据
// 9.加载网络geojson数据，加载方式和本地加载一样
const china_source = new ol.source.Vector({
url: 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000',
format: new ol.format.GeoJSON()
})
// 9.2设置图层
const china_layer = new ol.layer.Vector({
// 当数据源定义的名称不等于source时，不加前面的source可能加载不出来内容！！！！！！！！！！！！！！！！！！！！！！
source: china_source
})
const china_style = new ol.style.Style({
//填充色
fill: new ol.style.Fill({
color: 'rgba(50,50,50,0.4)'
}),
})
china_layer.setStyle(china_style)
map.addLayer(china_layer)
const source = new ol.source.Vector({
url: 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=420100',
format: new ol.format.GeoJSON()
})
const layer = new ol.layer.Vector({
source
})
const style = new ol.style.Style({
//填充色
fill: new ol.style.Fill({
color: 'yellow'
}),
//边线颜色
stroke: new ol.style.Stroke({
color: '#ff2d5180',
width: 2
})
})
layer.setStyle(style)
map.addLayer(layer)2.1.9地图点击事件及漫游
// 10.地图点击事件及漫游
const source = new ol.source.Vector({})
const layer = new ol.layer.Vector({
source
})
map.addLayer(layer)
// 10.1可以给地图绑定点击事件
map.on('click', (e) => {
// 10.2通过解构事件对象中的coordinate可以打印坐标
var { coordinate } = e
// console.log(coordinate);
// 10.3实现点击添加点的操作
var point = new ol.Feature({
geometry: new ol.geom.Point(coordinate)
})
source.addFeature(point)
// 10.4实现漫游
var view = map.getView()
view.animate({
center: coordinate
})
})
// 10.4实现复位操作
var btn = document.querySelector('.btn');
btn.onclick = function () {
map.getView().animate({
center: [114.30, 30.50],
zoom: 6,
duration: 1000
})
}点击事件要记得在HTML结构中添加一个button按钮
<!-- 2.设置地图的挂载点 -->
<div id="map">
</div>
<button class="btn">复位地图</button>
<script>2.2使用Vue引入openlayers库
2.2.1第一步
node终端npm安装ol包
npm install ol 2.2.2第二步
在组件中引入openlayers各种属性和方法然后使用
<script>
import Map from 'ol/Map.js'
import View from 'ol/View.js'
import TileLayer from 'ol/layer/Tile.js'
// import OSM from 'ol/source/OSM.js'
import XYZ from 'ol/source/XYZ'
import 'ol/ol.css'
export default {
data() {
return {
map: null,
}
},
mounted() {
// XYZ瓦片图服务（天地图）
this.map = new Map({
view: new View({
projection: 'EPSG:4326', //坐标系，即地球坐标系——WGS84：常见于 GPS 设备，Google 地图等国际标准的坐标体系。
center: [116.3972282409668, 39.90960456049752], //中心点坐标，即北京天安门
zoom: 12,
}),
layers: [
// 天地图路网
new TileLayer({
source: new XYZ({
url: 'http://t4.tianditu.com/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=e33bff145f017205e949052045b56087',
}),
}),
// 加载注记图层
new TileLayer({
source: new XYZ({
url: 'http://t3.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=e33bff145f017205e949052045b56087',
}),
}),
// 加载卫星影像
// new TileLayer({
// source: new XYZ({
// url: 'http://t3.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=e33bff145f017205e949052045b56087',
// }),
// }),
],
target: 'map',
})
},
}
</script>
<style>2.2.3注意事项
常用的OSM数据最近使用不了，因为地界的原因，加载不出来，所以常用的就剩天地图一种数据了。天地图数据是WGS84坐标系，即EPSG：4326，如果不声明坐标系，默认为墨卡托投影坐标系。所以说这两种数据是比较常用的开源地图数据了，其他的百度地图、高德地图都不是84坐标系，使用不太方便，如果坐标系有冲突，还需要进行转换。
总结
以上就是今天要讲的内容，本文仅仅简单介绍了openlayers的引入和简单初始化地图，可以去openlayers官网查看其他的地图相关属性和方法。
扫一扫
1909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
