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

安装

npm install ol-map-tool --s

打包方式

npm run build 打包示例 npm run lib 打包组件 并且把lib里面的html文件改下 npm run ligjs上传至npm官方服务

初始化使用

引入

import OlMapTool from 'ol-map-tool';
import 'ol-map-tool/lib/ol-map-tool.css';

HTML

<div id="map"></div>

JS

  import OlMapTool from 'ol-map-tool';
  import 'ol-map-tool/lib/ol-map-tool.css';
  const config = {
  layerName: 'chinaBlue',
  center: [115.8, 28.7], // 中心坐标
  zoom: 10, // 缩放
  minZoom: 7,
  maxZoom: 21,
  isMoveSelect: true, // 鼠标滑过是否选中
  projection: 'EPSG:4326' // 坐标系
  }
  const onEvent = {
    // 选中回调
    onSelectClick: (p) => {
      this.$emit('onSelectClick', p)
    },
    // 鼠标滑过回调
    onPointerMove: (p) => {
      this.$emit('onPointerMove', p)
    }
  }
  const option = { target: 'map', config, onEvent, /* arcgisUrls, 动态底图图层 */ }
  this.olMapTool = new OlMapTool(option)

点、线、面图层渲染

方法1 导入GeoJson文件

const config =  {
    url: './data/geoMap.json',// 来源
    style, // 样式 格式参考Style 样式参考
    selectStyle, // 选中后样式
    layerName: 'geometryQuery', // 图层名称
  }
 this.OlMapTool.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.OlMapTool.addGeometryLayer(mapDataConfig);

GeoServer图层

热力图图层

// 热力图图层
 const heatConfig = {
      layerName: 'heatMap1', // 图层名称
      features: [
        {
          attributes: {
            callback,
            callbackParams: {},
            weight: "0.8", // 设置权重 范围0~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.OlMapTool.addHeatMapLayer(heatConfig);

轨迹还原

const opt = {
  features: [
    {
      geometry: [
        [116.07763476530948, 28.65668910573156],
        ...
      attributes,
      center: 12,
    }
  ],
  speed: 8, // 速度
  loop: true, // 是否循环
  style: {
    icon: {
      src: require('/public/img/ic_fly.png'),
      scale: 1, // 缩放
      offset: [-10, 0],
    },
    angle: 135,
  },
  // 轨迹样式
  trackStyle: {
    stroke: { width: 2, color: '#ffff00' },
  },
  selectStyle: {
    stroke: { width: 2, color: '#ff0000' },
    fill: { color: '#ff0000' }
  },
  layerName: 'trackLayer'
}
this.olMapTool.addAnimationLayer(opt);

飞机航线

const opt = {
  features: [
    {
      to: [118.36176535728272, 29.716182043981643],
      from: [116.07681626527076, 28.51613489288],
      attributes
    },
    {
      from: [118.36176535728272, 29.716182043981643],
      to: [116.07681626527076, 28.51613489288],
      attributes
    },
  ],
  speed: 8, // 速度
  loop: false, // 是否循环
  style: {
    stroke: { width: 1, color: 'rgba(228, 228, 54,1)' }, // 路线样式
    icon: {
      src: require('/public/img/icons/city_icon.png'),
      scale: 1, // 缩放
      offset: [-4, 0]
    }
  },
  // 轨迹样式
  trackStyle: {
    stroke: { width: 2, color: '#ff0000' }
  },
  selectStyle: {
    stroke: { width: 2, color: '#ff0000' },
    fill: { color: '#ff0000' }
  },
  layerName: 'flyLayer'
}
this.olMapTool.addAnimationLayer(opt);

交互事件

选中某元素回调

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

选中某元素回调

@onPointerMove 鼠标滑过回调

弹出层

this.OlMapTool.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.OlMapTool.addOverlay('clickOpen',config)
const position = [115.88218961004041,28.64971213329288]
this.OlMapTool.setOverlayPosition('clickOpen',position) // 修改某弹出层坐标

关闭弹出层

this.OlMapTool.closeOverlay(id)

移除弹出层

this.OlMapTool.unOverlay(id)

移除图层

this.OlMapTool.removeGeometryLayer(layerName)

移除全部图层

this.OlMapTool.removeLayerAll()

暂停动画

 this.OlMapTool.unAnimation(layerName)

开启测量

 this.OlMapTool.addMeasure()

关闭测量

 this.OlMapTool.unMeasure()

设置缩放等级

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

设置中心点

 this.OlMapTool.setCenter(center,zoom) // center：[0,0] 中心坐标 zoom: number 缩放等级 （选填）
 this.OlMapTool.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: '#FFFFFF', // 字体颜色
     backgroundFill: '#FF0000', // 背景色
     backgroundStroke: { width: 1, color: '#ffff00' }, // 边框
     offsetX: -50, // 偏移
     offsetY: -5,
     textAlign: "center",
     padding: [0, 4, 0, 4],
     rotation: 0.1, // 旋转
     scale: 1, // 缩放
 },
 fill: { color: 'rgba(255,255,255,0.3)' }
},

Address

openlayers-olStyle 说明文档

https://openlayers.org/en/v6.15.1/apidoc/module-ol_style_Style-Style.html