使用技术：vue3.2+openlayers8.2.0 {{ isHeatLayer ? '点位图' : '热力图' }}
注：本文openlayers版本为8.2.0openlayers官网地址：https://openlayers.org/一、认识openlayers：OpenLayers 是一个专为Web GIS客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。从OpenLayers2.2版本以后，OpenLayers已经将所用到的Prototype.js组件整合到了自身当中，并不断在Prototype.js的基础上完善面向对象的开发。OpenLayers2.4版本以后提供了矢量画图功能，方便动态地展现“点、线和面”这样的地理数据 —— 百度来的二、为什么选择openlayers免费项目需要：项目需要使用离线地图，openlayers可以加载下载的瓦片地图资源三、openlayers结构：ol.Map：地图对象ol.View：视图，控制地图显示的中心位置，范围，层级等Layer：图层，一个layer由两部分构成：数据源source和样式style，openlayers允许多个layer重叠在一起，需要注意图层添加顺序，防止先加入的图层被遮盖，可设置zIndex控制层级Source：数据源，和图层一一对应，有一个Source，必然需要一个Layer，然后把这个Layer添加到Map上，就可以显示出来了图层类：ol.source.Tile：平铺图层，对应的是瓦片数据源ol.source.Image：图像图层，对应的是一整张图，而不像瓦片那样很多张图，从而无需切片，也可以加载一些地图，适用于一些小场景地图ol.source.Vector：矢量图层，对应的是矢量地图源，点，线，面等等常用的地图元素(Feature)Feature：用于地理特征的矢量元素，具有几何geometry()和其他属性，类似于矢量文件格式(如GeoJSON)中的特性ol.geom.Circle()：圆形 ol.geom.Geometry()：几何图形 ol.geom.GeometryCollection()： ol.geom.LinearRing()：环线 ol.geom.LineString()：线段 ol.geom.Point()：点 ol.geom.Polygon()：多边形 ol.geom.MultiLineString() ol.geom.MultiPoint() ol.geom.MultiPolygon() ol.geom.SimpleGeometry()Style：样式，指明了各个类型的要素所使用的样式geometry：要素的属性/要素/返回一个地理要素的函数，用来渲染成相应的地理要素。一般与image属性配合使用，用于定义image要显示的位置。fill：填充要素的样式。只有一个color属性。其格式为：color: 'rgba(255, 125, 125, 0.5)'image：图片样式，类型为 ol.style.Image，也可设置为ol.style.Image的两个派生类：ol.stylel.Circle和ol.style.Icon。然而，image属性并不仅仅对图片生效。默认image会对整个layer的要素生效。例如将image赋值为ol.style.Circle，那么point要素会渲染成一个圆。stroke：要素边界样式，类型为 ol.style.Stroke。主要属性为color和width。text：要素文字的样式，类型为 ol.style.Text。主要配合ol.geom.Point在指定位置显示文本。文本内容由ol.style.Text.text属性控制。因此，若多个点共享同一个style，那么这些点显示的文本是相同的。若要每个点显示不同的文本，需要每个Feature单独设置自己的style。zIndex：z轴次序。用于控制layer的上下堆叠层级对一个ol.geom.Point而言，fill和stroke属性是无效的，其最主要的style是image属性。将image属性设为ol.stylel.Circle，则该点会显示为一个圆；将image属性设为ol.style.Icon，则该点会显示为一个图标。 对一个ol.geom.Circle而言，最主要的style属性是fill和stroke，这两个属性决定了圆的内部颜色和外侧轮廓。而image属性则是无效的案例：在地图上绘制一个点（vue3.2+openlayers8.2.0）/* 步骤： 调用new ol.geom.Point来创建一个geometry对象。 将geometry对象作为属性，调用new ol.Feature来创建一个Feature。 多个Feature构成一个features数组，作为属性，调用new ol.source.Vector来创建一个source。 调用new ol.style.Style来创建一个style。 将创建的source和style作为属性，调用来new ol.layer.Vector创建一个layer。 map.addLayer(layer)，将图层添加到地图上 */ // 引入依赖 import 'ol/css'; import Map from 'ol/Map'; import Feature from 'ol/Feature'; import { Vector as VectorLayer } from 'ol/layer'; import Point from 'ol/geom/Point'; import { Icon, Style, Fill, Text, Stroke } from 'ol/style'; // 创建点 const point = new Feature({ geometry: new Point([120.123, 31.95]), data: 'point' }) // 点的样式 const iconStyle = new Style({ image: new Icon({ crossOrigin: 'anonymous', // 设置图标 src: 'http://123.com/icon.png', // 设置图标缩放 scale: 0.2, // 设置图标偏移 anchor: [0.6, 1], }), text: new Text({ text: '一个点', cursor: 'pointer', fill: new Fill({ color: '#000' }), backgroundFill: new Fill({ color: '#00E400' }), offsetX: 0, offsetY: -35, font: 'normal 14px 微软雅黑', stroke: new Stroke({ color: '#00E400', width: 2 }) }) }) // 设置样式 point.setStyle(iconStyle) const pointLayerSource = new VectorSource({ features: point}) const pointLayer = new VectorLayer({ source: pointLayerSource }) // 将图层添加地图上 mapObj.addLayer(pointLayer)Interaction：交互，地图缩放、移动、点击、几何图形绘制、编辑等Control：控件，地图交互的入口，封装好的类，如地图上放大缩小按钮，固定在地图某个位置，不会随地图缩放、移动变化，处于地图最上层四、常用方法地图事件click 无拖动单击dblclick 无拖动双击moveend 移动地图结束时movestart 移动地图开始时pointerdrag 当拖动指针时触发pointermove 当指针移动时触发。注意，在触摸设备上，这是在地图平移时触发的，因此与mousemove不同postcompose postrender 在映射帧呈现后触发precompose propertychange 当属性被更改时触发rendercomplete 渲染完成时触发，即当前视图的所有源和tile都已加载完毕，所有tile都将淡出singleclick 一个真正的无拖放和无双击的单击。注意，这个事件被延迟了250毫秒，以确保它不是双击地图方法addControl(control) 将给定的控件添加到地图中removeControl(control) 从地图中移除已给定的控件addInteraction(interaction) 将给定的交互添加到地图中removeInteraction(interaction) 从地图中移除已给定的交互addLayer(layer) 将给定的图层添加到地图的顶部removeLayer(layer) 从地图中移除已给定的图层addOverlay(overlay) 将给定的叠加层添加到地图中removeOverlay(overlay) 从地图中移除已给定的叠加层forEachFeatureAtPixel(pixel, callback, opt_options) 检测与视图端口上的像素相交的特性，并对每个相交的特性执行回调。检测中包含的层可以通过opt_options中的layerFilter选项配置forEachLayerAtPixel(pixel, callback, opt_options) 检测在视图端口上的像素处具有颜色值的层，并对每个匹配的层执行回调。检测中包含的层可以通过opt_layerFilter配置getControls() 获取地图控件getCoordinateFromPixel(pixel) 获取给定像素的坐标。这将返回地图视图投影中的坐标。getEventCoordinate(event) 返回浏览器事件的视图投影中的坐标getEventPixel(event) 返回浏览器事件相对于视图端口的地图像素位置getFeaturesAtPixel(pixel, opt_options) 获取视图端口上与像素相交的所有特性getInteractions() 获取地图交互getLayerGroup() 获取与此地图关联的图层组setLayerGroup(layerGroup) 设置与此地图关联的图层组getLayers() 获取与此地图关联的图层的集合getOverlayById(id) 通过其标识符获取覆盖(overlay. getId()返回的值)。注意，索引将字符串和数字标识符视为相同的。getoverlaybyid(2)将返回id为2或2的叠加层。getOverlays() 获得地图叠加getPixelFromCoordinate(coordinate) 获取坐标的像素。它接受地图视图投影中的坐标并返回相应的像素getSize() 获取地图尺寸setSize(size) s设置地图尺寸getTarget() 获取呈现此映射的目标。注意，这将返回作为选项或setTarget中输入的内容。如果这是一个元素，它将返回一个元素;如果是字符串，它会返回这个字符串setTarget(target) 设置要将地图呈现的目标元素getTargetElement() 获取呈现此映射的DOM元素。与getTarget相反，这个方法总是返回一个元素，如果映射没有目标，则返回nullgetView() 获取地图视图。视图管理中心和分辨率等属性。setView(view) 设置地图视图getViewport() 获取作为map视图端口的元素hasFeatureAtPixel(pixel, opt_options) 检测在viewport上是否与一个像素相交。可以通过opt_layerFilter配置在检测中包含的层。几何事件getCenter() 返回中心坐标getFirstCoordinate() 返回几何图形的第一个坐标getLastCoordinate() 返回几何图形的最后一个坐标getLayout() 返回几何图形的layoutgetRadius() 返回圆的半径getType() 获取这个几何图形的类型setCenter(center) 将圆心设置为coordinatesetRadius(radius) 设置圆的半径。半径的单位是投影的单位。交互事件draw 绘制地理要素功能select 选择要素功能modify 更改要素snap 鼠标捕捉，当鼠标距离某个要素一定距离之内，自动吸附到要素
场景：vue3+ts+高德地图2.0，地图卡顿，缩放、拖拽等卡住解决思路：如果是挂载罗盘、控制控件、鹰眼地图...太多组件，可根据实际需求去除用不到的组件检查地图插件版本，将版本更新到较稳定的新版本将地图挂载到window上关于将全局变量添加到window上创建一个.d.ts后缀的文件，例如index.d.ts在index.d.ts文件中// 全局参数定义 ，export {};不可缺少 export {}; declare global { interface Window { mymap: any; } }在地图页将地图对象挂载到全局window.mymap = new AMap.Map("container", { // 地图配置 })如果提示变量找不到，如Property 'mymap' does not exist on type 'Window & typeof globalThis'. Did you mean 'Map'?检查tsconfig.json文件，在include中配置之前创建的index.d.ts路径即可
web端高德地图+地图打点+自动设置窗口缩放
一、申请相关项目的ak注意应用类别为浏览器端二、在项目中安装依赖npm i @amap/amap-jsapi-loader --save三、引入、使用 <DataDialog /> // js // 样式