openlayers

openlayers完全是以对象的形式调用的。
基本就是一层包一层。
new map({
    layers: [new TileLayer({
        sorces: new XYZ({
            url: '......'
        })
    })]
    target: "map", // 在哪个ID节点上展示
    view: new view({
        center: [121.324, 34.45]
        zoom: 10,
        projection:"EPSG:4326",  //默认的是另一种投影方式，需改成当前经纬度的投影方式
    })
})
我们为了更好的操作属性和方法。会将它扁平化。其实就是将内部的属性在外面先定义好。然后在内测套用即可。
const view = new view({})
const sorces = new XYZ({})
const layers = [new TileLayer({
sorces
})
]
new map({
layers,
sorces
})
其实在计算器内部堆栈中也是这样做的。
对象不是一层套一层。对象是扁平化的。通过指向另一个对象的地址来找到下一个对象的。
注意调用顺序。被调用的内容先写在上方。 注意图层有很多个、是个数组。
TileLayer 瓦片层
layer有三种：
TileLayer：瓦片图层 通常用来加载底图、性能很好。根据用户缩放等操作。加载对应的瓦片信息。比较常用的XYZ, OSM。XYZ比较常用。因为OSM是国外提供的。需要翻墙、网速不好。
imageLayer： 静态图片图层。
vectorLayer：矢量图层，不会失真。常用来添加地图标注、路径等。
用的最多的就是矢量图层。因为tileLayer图层通常做底图。所以往往只加一个。也会取网上提供的地图。
而矢量不会失真可操作的内容较多。
// 切换底图。
常见的就是切换 卫星地图、城市道路地图、 3D地图等
// 城市矢量底图
const gaodeSource = new XYZ({
    url: "https://1231231dsfaf.com"
})
// 卫星底图
const satelliteSource = new XYZ({
    url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}.com"
})
//标记底图
const markerSource = new XYZ({
    url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}.com"
})
const gaodeLayer = new TileLayer({
source: gaodeSource
})
const satelliteLayer = new TileLayer({
source: satelliteSource
})
const markerLayer = new TileLayer({
source: markerSource
})
const map = new Map({
target: "map",
view,
layers:[gaodeLayer, satelliteLayer, markerLayer ]
})
// 图层按照先后顺序依次绘制map上。如果希望展示其中某一个。将它的层级关系置顶即可
//使用操作的时候。通常会找暴露出来的set,get方法。或者使用动画。
gaodeLayer.setZIndex(100)
satelliteLayer.setZIndex(50)
markerLayer.setZIndex(30)
// 移除某个图层
map.removeLayer(gaodeLayer)
// 添加某个图层
map.addLayer(gaodeLayer)
// 显示、隐藏某个图层
gaodeLayer.setVisible(false/true)
XYZ的含义。 X,Y横纵坐标轴。 Z代表缩放级别。zoom
// 天地图。 国家地理信息公共服务平台
// 静态图层
const extent = [114.25, 225, 235, 421] // 左上角经纬度、 右下角经纬度。
const staticImageLayer = new ImageLayer({
    source: new Static({
        url:"/peiqi.webp",
        imageExtent: extent
    })
})
// 加载矢量图层 将一些矢量数据（很多格式 GEOJSON）加载到地图上
import VectorLayer from 'ol/layer/Vector.js'
import VectorSource from 'ol/source/Vector.js'
const vectorLayer = new VectorLayer({
    source: new VectorSource({
        url: 'https://geo.datav.aliyun.com/areas_v3/bound/10000.json',
        format: new GeoJSON()
    })
    style: new Style({
        file: new File({
            color: "red" //如果颜色挡住了下方。可以设置rgba透明度。
        })
    })
})
// geoJson的数据格式
{
"type":'FeatureCollection',  // 要素集合
features:[....] // 要素集合
要素集合单个item{
    type:feature, //要素
    properties{ // 自定义属性
    },
    geometry{ // 形状类型
     type: "Mu" //形状，多边形
     coordinates:[] 经纬度信息
    }
}
}
map.addLayer(vectorLayer)
// 矢量图层可以进行样式的定义。 new style