一、高德地图瓦片1、高德在线瓦片地址：http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&样式=72。参数说明：lang=zh_cn设置中文，lang=en设置英文是矢量路网，style=8是图像路网3.总结为：矢量路网（包括路网，包括注释）url='http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7';矢量路网（含路网，不含标注）url='http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=7';image路网（含路网，含标注）'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8';imageroadnetwork（包括路网，不包括标注）url='http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8';图片地图（不含路网和标注）url='http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6';url='http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=6';2、使用XYZ方式加载高德地图OpenLayers提供了ol.source.XYZ类来加载在线瓦片地图数据源，通常加载不同的在线瓦片地图源，只需要改变ol.source.XYZ的参数url即可。importReact,{useEffect}from'react';import{Map,View}from'ol';importTileLayerfrom'ol/layer/Tile';import{defaults}from'ol/control';import{fromLonLat}from'ol/proj';importXYZfrom'ol/source/XYZ';import'ol/ol.css';exportdefaultfunctionIndex(){useEffect(()=>{//初始化地图initMap();},[])/***初始化地图*/constinitMap=()=>{leturl;//带有注释的矢量道路网络//url='http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7';//矢量路网不包含标注//url='http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=7';//带有注释的图像道路网络//url='http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8';//图像路网不包含标注//url='http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8';//图片地图（不含路网和标注）//url='http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6';url='http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=6';newMap({//挂载到id为map的div容器target:'map',//设置地图图层layers:[newTileLayer({source:newXYZ({url:url})})],//setmapviewview:newView({//设置空间参考系统为'EPSG:3857'projection:'EPSG:3857',//地图显示中心center:fromLonLat([104.066301,30.572961]),//地图显示levelzoom:10}),controls:defaults({//去掉属性控件attribution:false,//去掉缩放控件zoom:false,//去掉旋转控件rotate:false})})}return(
