第一步:创建node环境;
第二步:创建一个html文件
第三步:引入高德的样式和行为依赖
第四步:创建容器让地图挂载在上边
<div id="map">
</div>
第五步:先把地图渲染出来
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
})
});
const map = new ol.Map({
//挂载到map上
target: "map",
// 设置图层 一个地图有多个图层
layers: [
gaode
],
view: new ol.View({
// 经纬度
center: [114.30, 30.50],
// 放大的级别
zoom: 12,
// 坐标
projection: 'EPSG:4326'
})
})
第六步:创建一个属于自己的坐标系的GEOJSON数据
var data = {
// 固定写法
type: "FeatureCollection",
// 这是一个属性
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [114.30, 30.50]
}
}
]
}
第七步:将自己数据放在数据源中进行使用
var source = new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures(data)
})
第八步:设置图层 我们需要表现出来
var layer = new ol.layer.Vector({
source
})
第九步:设置我们JSON数据的一个样式,一定需要样式搞到图层上
let style = new ol.style.Style({
image: new ol.style.Circle({
// 单位为deg
radius: 10,
// 填充东西
fill: new ol.style.Fill({
color: '#ff2d51'
}),
// 描边
stroke: new ol.style.Stroke(
{
width: 2,
color: "#000"
}
)
})
})
layer.setStyle(style);
第十步:map增加一个图层
map.addLayer(layer)
打开网页既可以看到一个属于自己的小红点