林安随笔 - Map
type: channel
link: https://www.yuaq.cn/index.php/tag/Map/
items: openlayers地图打点+热力图
items: openlayers入门
items: 关于高德地图卡顿
items: web端高德地图+地图打点+自动设置窗口缩放

openlayers地图打点+热力图
type: item
date: 2024-08-09T10:03:00+08:00
description: 使用技术：vue3.2+openlayers8.2.0 {{ isHeatLayer ? '点位图' : '热力图' }}

openlayers入门
type: item
date: 2024-08-05T10:22:00+08:00
description: 注：本文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来创建一…

关于高德地图卡顿
type: item
date: 2023-09-22T10:16:00+08:00
description: 场景：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端高德地图+地图打点+自动设置窗口缩放
type: item
date: 2023-06-19T15:08:00+08:00
description: 一、申请相关项目的ak注意应用类别为浏览器端二、在项目中安装依赖npm i @amap/amap-jsapi-loader --save三、引入、使用 <DataDialog /> // js // 样式