Description: Based on vue2. X + OpenLayers6. x simple secondary packaging, without in-depth contact with OpenLayers native can build maps, convenient use of warehouse address: Gitee

Introduce methods

NPM download

  npm install hit-map
Copy the code

The main js configuration

import HitMap from 'hit-map'
import 'hit-map/dist/hit-map.css'

Vue.use(HitMap)
Copy the code

The map instantiation component, which must be introduced, is the entry point for all components

hit-map
Copy the code
  • All layer components are inserted into this component as slots
  • Note: ref=”hitMap” is mandatory

Map tile assembly

Map – Usage method

<hit-map ref="hitMap" :mapUrl="mapUrl" :center="[23], 111," :zoom="10"></hit-map>
Copy the code

Map – This parameter is optional

Parameter names Will choose type instructions
ref is string Binding the dom
mapUrl no string Map tile address, currently only supports TILES in XYZ format (default: Gaode black)
center no string Initial map zoom level (default: 10)
controller no boolean Whether layer controller is required (default: False)
position no string The position of the layer controller is available only when the layer controller is selected. The options are left-top, left-center, left-bottom, right-top, right-center, and right-bottom. The default value is right-center

This is a layer of circular shapes, each of which acts as a layer, inserted into the hit-Map in the form of slots

hit-map-circle
Copy the code

Circular area assembly

Circle – Method of use

<hit-map-circle :data="data" name="circle"  />
Copy the code

Example of circle-datadata data

// A single graph
data: {
	center: [111.23],
	radius: 10,}// Multiple graphics
data: [
	{
		center: [111.23],
		radius: 10,
	},
	{
		center: [111.11.23],
		radius: 10,}]Copy the code

Circle – This parameter is optional

Parameter names Will choose type instructions
name no string The layer name
data no object / array Graph data, center is the circular position, radius is the radius of the circular area.
border no string Round area border color, default is #000 (support hexadecimal/RGB/RGBA)
width no string / number The border color of the circular area is 2 by default
background no string Background color of circular area, default rGBA (64, 158, 255, 0.4) (support hexadecimal/RGB/RGBA)
zIndex no string / number Layer level, 2 by default
visible no boolean Whether the layer is visible is false by default
appendToMap no boolean Whether to display it in the Layer controller. Default is true

circle – Event

The name of the event instructions The callback parameter
click Triggered when an area is clicked _event is the information about the current clicking region, target is the information about the clicking region, mouseEvent is the longitude and latitude of the clicking position

Polygon-shaped graphics layer, each component acts as a layer, in the form of slot insertion hit-map

hit-map-polygon
Copy the code

Rectangular area assembly

Polygon – Method of use

<hit-map-polygon :data="data" name="polygon"  />
Copy the code

Polygon-data data example

//[longitude, latitude]

// A single graph
data: [
	[111.777.23],
	[111.5678.23.22],
	[111.7869.23.33],
	[111.55.23.44],
	[111.23]]// Multiple graphics
data: [
	[
		[111.777.23],
		[111.5678.23.22],
		[111.7869.23.33],
		[111.55.23.44],
		[111.23]], [[111.555.23],
		[111.5678.23.22],
		[111.7869.23.33],
		[111.55.23.44],
		[111.23]],... ]Copy the code

Polygon – This parameter is optional

Parameter names Will choose type instructions
name no string The layer name
data no array A fixed point of a polygon consisting of multiple sets of latitude and longitude coordinates
border no string Polygon area border color, default is #000 (support hexadecimal/RGB/RGBA)
width no string / number Polygon area border color, default is 2
background no string Background color of polygon area, default rGBA (64, 158, 255, 0.4) (support hexadecimal/RGB/RGBA)
zIndex no string / number Layer level, 2 by default
visible no boolean Whether the layer is visible is false by default
appendToMap no boolean Whether to display it in the Layer controller. Default is true

polygon – Event

The name of the event instructions The callback parameter
click Triggered when an area is clicked _event is the information about the current clicking region, target is the information about the clicking region, mouseEvent is the longitude and latitude of the clicking position

## Path component Path graphic layer, each component acts as a layer, in the form of slot inserted hit-map

hit-map-line
Copy the code

Path/line assembly

Line – Usage method

<hit-map-line :data="data" name="line"  />
Copy the code

Line-data Indicates the data example

//[longitude, latitude]

// Single path
data: [
	[111.777.23],
	[111.5678.23.22],
	[111.7869.23.33],
	[111.55.23.44],
	[111.23]]// Multiple paths
data: [
	[
		[111.777.23],
		[111.5678.23.22],
		[111.7869.23.33],
		[111.55.23.44],
		[111.23]], [[111.555.23],
		[111.5678.23.22],
		[111.7869.23.33],
		[111.55.23.44],
		[111.23]],... ]Copy the code

Line – This parameter is optional

Parameter names Will choose type instructions
name no string The layer name
data no array A fixed point of a polygon consisting of multiple sets of latitude and longitude coordinates
border no string Path area border color, default is #000 (support hexadecimal/RGB/rGBA)
width no string / number Path border color, default is 2
zIndex no string / number Layer level, 2 by default
visible no boolean Whether the layer is visible is false by default
appendToMap no boolean Whether to display it in the Layer controller. Default is true

line – Event

The name of the event instructions The callback parameter
click Triggered when a path is clicked _event is the information about the mouse click, target is the information about the mouse click, mouseEvent is the longitude and latitude of the mouse click

## Mark overlay component path graphic layer, each component acts as a layer and inserts hit-map in slot form

hit-map-marker
Copy the code

Coordinate point overlay assembly

Marker – Method of use

<hit-map-marker :data="data" name="line"  />
Copy the code

Marker-data Data example


// Single coordinate point
data: {
	longitude: 111,
	latitude: 23, name: 'Yang Zheng no.1 ', age:37,}// Multiple coordinate points
data:[
	{
		longitude: 111,
		latitude: 23, name: 'Yang Zheng no.1 ', age:37,
	},
	{
		longitude: 111.333,
		latitude: 23, name: 'Yang Zheng No. 2 ', age:37.// Support separate styles for each pointWord-wrap: break-word! Important; "> < span style:// The text to display
			fontSize: 16.// Size of text
			offsetY: - 220..// The Y offset of the text
			offsetX: 0.// The X-axis offset of the text
			color: '#fff',    // Text color
			icon: vueIcon,    // Text icon (support base64, priority over layer set icon)}},]Copy the code

Marker – This parameter is optional

Parameter names Will choose type instructions
name no string The layer name
data no object / array Layer tag overlay data, support single tag or multiple groups of tags
markerId no string You can select a field in the marker data as the ID of the marker (easy to locate the marker directly later)
longitude no string Marks the longitude field in the data (the default is longitude)
latitude no string Mark fields representing latitude in data (default latitude)
icon no string ICONS for all the markers on this layer (base64 format supported), or you can set the ICONS for the coordinate points individually in the style field in the marker data
zIndex no string / number Layer level, default is 3
visible no boolean Whether the layer is visible is false by default
appendToMap no boolean Whether to display it in the Layer controller. Default is true

marker – Event

The name of the event instructions The callback parameter
click Tags trigger when clicked _event is the information about the mouse click, target is the information about the mouse click, mouseEvent is the longitude and latitude of the mouse click position

The information overlay component can be used with the data returned from the click event of each layer, or alone, with slot support

hit-map-overlay
Copy the code

Information box overlay component

Overlay – Method of use

<hit-map-overlay :position="position" content="content" >
	<slot></slot>
</hit-map-overlay>
Copy the code

Overlay-data data example

position: [111.23].// [longitude, latitude]Content: 'Yang Zheng no.1'Copy the code

Overlay – Optional parameter

Parameter names Will choose type instructions
position is string The coordinate point to which the information covering is located
content no string Contents displayed in the information box (if slots exist, slot contents are preferentially displayed)
align no string Defines the actual position of overlay relative to its position attribute. Default is top-left (optional: ‘bottom-left’, ‘bottom-center’, ‘bottom-right’, ‘center-left’, ‘center-center’, ‘center-right’, ‘top – left’, ‘the top – center’, and ‘top – right)
autoPan no string The default is false, if set to true, the map will be shifted on calls to setPosition so that the overlay is fully visible in the current view

Map drawing module

At present, it provides drawing tools for circles, polygons and lines (to be updated later). The tool supports moving, folding, clearing and other functions, and can be directly introduced

hit-map-draw
Copy the code

Draw – Method of use

<hit-map-draw />
Copy the code

draw – Event

The name of the event instructions The callback parameter
drawstart Triggered when drawing begins The event object
drawend Triggered when drawing ends Event object, feature: Feature object, userFeature: formatted graph data (feature and userFeature can be directly displayed when put into the data of the component of the corresponding graph)
change Triggered when graphics change The event object
clear Triggered when clearing graphs –

The track moving component, which is used to display the track, allows the addition of new moving target coordinate points during the coordinate moving process

hit-map-track
Copy the code

Track tracking module

Track – Method of use

<hit-map-track :data="data" />
Copy the code

Track-data Data example

// [longitude, latitude]
data: [
	[111.23423.23.345],
	[111.75445.23.56446],
	[111.4324.23.54356],
	[111.988.23.5646],
	[111.2177.23.78675],
	[111.5657.23.23432],
	[111.6574.23.6457],... ]Copy the code

Track – This parameter is optional

Parameter names Will choose type instructions
data no array Trajectory data
icon no string Move the icon’s picture
speed no string / number Speed of movement, default is 30 (higher speed is faster)
lineVisible no boolean Whether to display the path. Default is true
repeat no boolean Whether to enable cyclic playback. The default value is false

The thermal map component is used to present statistical measures of a certain area. The most common type of web site thermal map is a graphical representation of the favorite page areas and geographical areas of the visitor in a specially highlighted form.

hit-map-heat
Copy the code

Thermographic module

Heat – Method of use

<hit-map-heat :data="data" />
Copy the code

Heat-data data example

data: [
	{
		longitude: 111./ / longitude
		latitude: 23./ / latitude
		weight: 0.2 // The weight value of the coordinate point (0-1 decimal)
	},
	{
		longitude: 111.3434./ / longitude
		latitude: 23.54674859./ / latitude
		weight: 0.45 // The weight value of the coordinate point (0-1 decimal)}... ]Copy the code

Heat – This parameter is optional

Parameter names Will choose type instructions
name no string The layer name
data no object / array Thermal map data
gradient no array Heat map renders ribbon color
longitude no string The longitude field in the map data (the default is longitude)
latitude no string Fields representing latitude in thermal map data (default latitude)
radius no number Render point radius per pixel
blur no number The fuzzy degree of
zIndex no string / number Layer level, default is 1
visible no boolean Whether the layer is visible is false by default

Wind field components

Shows the map wind field layer

hit-map-wind
Copy the code

Wind – Use method

<hit-map-draw :data="data" />
Copy the code