Ol-map-view NPM

基于openlayers6的vue应用内部地图组件

安装

npm install ol-map-view

使用

main文件引入

import OlMapView from 'ol-map-view'
import 'ol-map-view/lib/ol-map-view.css'
Vue.use(OlMapView)

组件调用

<!-- onSelectClick：选中某元素回调函数 -->
<!-- onPointerMove：鼠标滑过某元素回调 -->
<ol-map-view ref="OlMapView" :config="config" @onSelectClick="onSelectClick" @onPointerMove="onPointerMove">
  
  <!-- 导入弹窗模块 -->
  <div slot="overlays"> 
    <div id="clickOpen">点我~~~</div>
  </div>
</ol-map-view>

初始化

 data() {
    
    return {
      config: {
        //默认'chinaBlue'
        // chinaWhite 白底, chinaBlue 蓝底, tdtVec 天地图, tdtImg 天地影像, baidu 百度, gaode 高德
        layerName: 'chinaBlue', // tdtVec 天地图, tdtImg 天地影像, baidu 百度, gaode 高德
        center: [115.8, 28.7], // 中心坐标 默认[115.8, 28.7] 江西中心坐标
        zoom: 10, // 缩放
        minZoom: 7, 
        maxZoom: 21,
        projection: 'EPSG:4326' // 坐标系
      },
      rootMap: null, // 
    }
  },
 mounted() {
    // 获取地图工具对象
    this.rootMap = this.$refs.OlMapView.rootMap; 
    
 }

点、线、面图层渲染

方法1 导入GeoJson文件

const config =  {
    url: './data/geoMap.json',// 来源
    style, // 样式 格式参考Style 样式参考
    selectStyle, // 选中后样式
    layerName: 'geometryQuery', // 图层名称
  }
 this.rootMap.addGeometryLayer(config);

方法2 数据渲染

const mapDataConfig =  {
    features: [
       {
        // 属性
        attributes: {
          callbackParams: {},
          }
        },
        // 空间坐标 2中方式皆可
        //方式1
        // geometry: 'POINT(116.08307760642404 28.70426990703425)',
        // 方式2 点 1维数组 线 2维数组 面 3维数组
        geometry: [116.08307760642404,28.70426990703425],
        // 类型 Point 点,MultiPoint 多点,LineString 线,MultiLineString 多线,Polygon 面,MultiPolygon 多面
        geometryType: 'Point', 
        },    
        style: {} // 样式 可选
        selectStyle, // 选中后样式 可选
    ],
    style, // 样式
    selectStyle, // 选中后样式
    layerName: 'geometryQuery', // 图层名称
    center: 7 // 是否设置该图层为中心图层 参数值为缩放参数
  }
 this.rootMap.addGeometryLayer(mapDataConfig);

热力图图层

// 热力图图层
 const heatConfig = {
      layerName: 'heatMap1', // 图层名称
      features: [
        {
          attributes: {
            callback,
            callbackParams: {},
            id: 1,
          },
          geometry: 'POINT(116.08307760642404 28.70426990703425)',
          geometryType: 'Point',
        },
      ],
      // url: './data/heatMap.json',// geoJson文件导入
      gradient: ['#00f', '#0ff', '#0f0', '#ff0', '#f00'],	//设置梯度颜色值
      opacity: 1,				//设置透明度，范围0～1，默认1
      blur: 4,				//设置模糊大小，单位px，默认15
      radius: 3,				//设置半径大小，单位px，默认8
      shadow: 150,			//设置阴影大小，单位px，默认250
      visible: true			//设置是否可见，默认true
    }
    this.rootMap.addHeatMapLayer(heatConfig);

轨迹动画图层

    const aniMapDataConfig = {
      features: [
      // 方案1 固定路线轨迹
        {
          geometry: [
            [116.07763476530948, 28.65668910573156],
            [116.0754191943188, 28.644162529255752],
            [116.07242406498187, 28.631695874686592],
            [116.06769304178104, 28.62523611202581],
            [116.06657943012551, 28.61659679189305],
            [116.06639015538764, 28.609170460200044],
            [116.06797674257635, 28.599729967572355],
            [116.0714042152619, 28.589595044949437],
            [116.07159029013975, 28.578071534022293],
            [116.07274900170891, 28.56947994010334],                  
            [116.0728660079105, 28.556099544379357],
            [116.07492243114712, 28.5465690934233],
            [116.07783098313982, 28.53873680213302],
            [116.07823332025407, 28.53180276588264],
            [116.07945445928063, 28.524109970376045],
            [116.07681626527076, 28.51613489288]],
          attributes: {},
        },
        // 方案2 起止点轨迹
        {
          to: [118.36176535728272, 29.716182043981643],
          from: [116.07681626527076, 28.51613489288],
           attributes: {},
        },
        
      ],
      speed: 16, // 速度
      animating: false,
      style: {
        stroke: { width: 1.5, color: 'rgba(228, 228, 54,0.7)' },
        icon: {
          src: require('/public/img/car.png'),
          scale: 1, // 缩放
        }
      },
      selectStyle: {
        stroke: { width: 2, color: '#ff0000' },
        fill: { color: '#ff0000' }
      },
      layerName:'aniLayer' // 图层名称
    }
    this.rootMap.addAnimationLayer(aniMapDataConfig);

交互事件

选中某元素回调

方案1 @onSelectClick 全局回调
方案2 单个元素配置
 const callback = (p: any) => {
    }
features: [
          {
            name: 'carMove',
            attributes: {
              callbackParams: {},
              callback, // 元素回调
            },
            geometry: ...

选中某元素回调

@onPointerMove 鼠标滑过回调

弹出层

this.rootMap.addOverlay(id,config)

// 参考
<div slot="overlays">
    <div id="clickOpen">点我~~~</div>
</div>
 const config =   {
id: 'clickOpen',
offset: [0, -25], // 偏移
position: p.mapBrowserEvent.coordinate, // 坐标
autoPan: true,
autoPanMargin: 100,
positioning: 'top-right'
}
this.rootMap.addOverlay('clickOpen',config)
const position = [115.88218961004041,28.64971213329288]
this.rootMap.setOverlayPosition('clickOpen',position) // 修改某弹出层坐标

关闭弹出层

this.rootMap.closeOverlay(id)

移除弹出层

this.rootMap.unOverlay(id)

移除图层

this.rootMap.removeGeometryLayer(layerName)

移除全部图层

this.rootMap.removeLayerAll()

暂停动画

 this.rootMap.unAnimation(layerName)

开启测量

 this.rootMap.addMeasure()

关闭测量

 this.rootMap.unMeasure()

设置缩放等级

 this.rootMap.setZoom(1) // 放大zoom
 this.rootMap.setZoom(-1) // 缩小zoom
 this.rootMap.setViewZoom(12) // 设置zoom

设置中心点

 this.rootMap.setCenter(center,zoom) // center：[0,0] 中心坐标 zoom: number 缩放等级 （选填）
 this.rootMap.setCenter([116.08307760642404, 28.70426990703425],12)

style样式参考

style 样式 stroke 边样式 icon 图片只支持Point circle 圆形只支持Point fill 面样式

style: {
 stroke: { width: 4, color: '#ffff00' }, // 样式
 icon: {
   src: require('/public/img/icons/icon_shoufeizhan.png'),
   // anchor: [0.5, 1],
   scale: 0.7, // 缩放
 },
 circle: {
   radius: 10, // 直径
   fill: '#ffff00', // 填充颜色
   stroke: { width: 2, color: '#ff0000' }, // 边框
 },
 text: {
   text: '线', // 文本
 },
 fill: { color: 'rgba(255,255,255,0.3)' }
},