前言OpenLayers入门第一篇已经过去好久了。为什么没有后续？主要有两个原因。就是因为很多时候即使做了功能，还是没有完全理解。不是很清楚的东西除了贴代码就写不出来了。其实第一篇文章也很基础很简单，但惊喜的是看的人最多，这让我意识到即使贴出代码也可能对某些人有帮助。这是本文的主要目的。可能有些地方不懂，但别问，你问了我也不知道。如果你正好知道什么，非常欢迎在评论中分享，谢谢~首先分享一个我无意中找到的教程，http://linwei.xyz/ol3-primer/index.html.虽然是在v3版本的基础上引入的，可能很多API都变了，但还是值得一看。除了OpenLayers本身的介绍，还会有一些地理基础知识的分享。这种比较全面的中文教程真是难得，见且珍惜。接下来分享一些常用的在线地图瓦片资源：1.高德瓦片，最大支持放大到20级，而且字体比较大，不过最近好像只能到19级了。http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=72。高德瓦，最大支持20级放大，颜色为灰绿色。http://webst0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}3.高德瓦片，可放大至18级，最常用的样式。http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=84。谷歌地图瓦片最多可放大22级，颜色偏绿。https://mt0.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}绘制多边形importFeaturefrom'ol/Feature'importPolygonfrom'ol/geom/Polygon'import{VectorasVectorSource}from'ol/source'import{Style,Stroke,Fill}from'ol/style'import{VectorasVectorLayer}from'ol/layer'//数据是每个多边形一个点的经纬度坐标数组，[[120.11997452699472,30.314227730637967],[120.11997452699472,30.314227730637967],...]functionrenderArea(data){//createfeatureconstfeatures]on([newfeature({newfeature)//使用多边形类型})]//创建矢量数据源constsource=newVectorSource({features})//创建样式conststyle=newStyle({stroke:newStroke({color:'#4C99F8',width:3,lineDash:[5]}),fill:newFill({color:'rgba(255,255,255,0.1)'})})//创建矢量图层constareaLayer=newVectorLayer({source,style,zIndex:1})//添加到地图实例map.addLayer(areaLayer)}多边形的绘制很简单，使用几何类型中的多边形类创建一个要素即可区域中间显示的名字显示可以通过Overlay叠加显示，主要是计算显示位置：importOverlayfrom'ol/Overlay';import{boundingExtent}from'ol/extent';import{getCenter}from'ol/extent';import{fromLonLat}from'ol/proj';//获取一个多边形的四个边界点，data:[[120.11997452699472,30.314227730637967],[120.11997452699472,30.314227730637967],...]getfuncdata(Extentdata)最小值=99999999；让miny=99999999；让maxx=-99999999999；让maxy=-99999999999;data.forEach((item)=>{if(item[0]>maxx){maxx=item[0];if(item[0]
