[Internal project]3D large-screen function sorting, large-screen display project based on AMAP

Orchid ling wine tulips, jade bowl amber light. But that his master may be drunken, and know not where he is.

During the project development, 3D display was needed and some problems were encountered. This is the guide for digging pits. Let them out now in the hope that they can help someone in need

Vue project introduces maps
Map location plugin
Events and their handling
Common methods

Introduction of Amap (mainly VUE)

Amap developer's official website
Introduction of maps:

The simplest way to introduce the map API using vue-CLI webpack is to introduce it directly in the header of the entry index.html. Remember to include the key. If you don’t have one, go to the official website of The Amap API to apply for one. The portal is as follows: Apply for a key portal

<script type="text/javascript" src="Https://webapi.amap.com/maps?v=1.3&key= * * * * * * * * * * * *" />
Copy the code

Create a map component:

let mapObj = new AMap.Map('map-location', {

  //'map-location' is the id of the corresponding page box

  resizeEnable: true.// Adjust the size

  zoom: 13 // Initial window

})

// AMap is the AMap constructor, here. Map is to create a Map,.marker is to create a coordinate point
Copy the code

Initialize a 3D map

In Mounted, perform initialization

this.cloudMap = new AMap.Map(this.$refs.dataMaps, {

  resizeEnable: true.// layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()],

  mapStyle: 'amap://styles/def937553c471693ab838e31fdbc6d82'.viewMode: '3D'./ / mode

  showBuildingBlock: true.pitch: 55./ / elevation

  zoom: 17 / / zoom

})
Copy the code

Map location plugin

The first step, of course, is to create a map instance, because positioning does not need to show the map, so you can set the CSS style of the box mounted on the map to 0, so that the layout of the page is not affected, you can directly obtain the longitude and latitude of the map, of course, the project needs to load the map

let mapObj = new AMap.Map('iCenter') //iCenter is the id container name
Copy the code

A location plug-in needs to be addedGeolocationCalled with the plugin method

mapObj.plugin('AMap.Geolocation'.function() {})
Copy the code

Instantiate an instance for configuration

var geolocation = new AMap.Geolocation({

  // Whether to use high precision positioning. Default: true

  enableHighAccuracy: true.// Set location timeout. Default: infinite

  timeout: 10000.// The offset of the location button's docking position, default: Pixel(10, 20)

  buttonOffset: new AMap.Pixel(10.20),

  // After successful positioning, adjust the map view range to make the positioning position and accuracy range visible in the view. Default: false

  zoomToAccuracy: true.// Locate the position of the button, RB represents the lower right

  buttonPosition: 'RB'

})
Copy the code

Monitor whether the location succeeds or fails. If it succeeds, the longitude and latitude of the current position can be obtained

AMap.event.addListener(geolocation, 'complete'.function(data) {

  data.position.getLng() // Locate the longitude returned successfully

  data.position.getLat() // Locate the latitude returned successfully

}) // Returns location information

AMap.event.addListener(geolocation, 'error'.function(data) {

  if (data.info == 'FAILED') {

    alert('Failed to get your current location! ')}})Copy the code

Map events and processing

1. Create a 3D model

Note: 3D models do not support events and their operations at this time

Add Object3DLayer

Object3DLayer is a layer specially used to carry Object3D objects. One Object3DLayer can carry multiple Object3D instance objects. Before drawing Object3D objects, add an Object3DLayer layer to the map:

var object3Dlayer = new AMap.Object3DLayer()

map.add(object3Dlayer)
Copy the code

Create an instance of type Object3D

var bounds = [new AMap.LngLat(116.39), new AMap.LngLat(117.39), new AMap.LngLat(117.40), new AMap.LngLat(116.40)]

var height = 50000

var color = '#0088ff' //rgba

var prism = new AMap.Object3D.Prism({ path: bounds, height: height, color: color })
Copy the code

Add Object3D instance to Object3DLayer

Add the Object3D instance to the Object3DLayer you added above

object3Dlayer.add(prism) / / add

//object3Dlayer.remove(prism); / / remove
Copy the code

2. Create a mass point`MassMarks`

The amap. MassMarks class can be used when you need to display points up to 100,000 on AMap and need good performance. Amap. MassMarks isn’t just any overlay, it’s actually AMap layer made up of a bunch of dots, and is currently only available in html5 browsers.

Create a mass point object

// Create a style object

var styleObject = new AMap.StyleObject({

url: '//vdata.amap.com/icons/b18/1/2.png'.// Icon address

size: new AMap.Size(11.11), // Icon size

anchor: new AMap.Pixel(5.5) // the icon displays the position offset, the reference point is the icon upper left corner});

 var massMarks = new AMap.MassMarks({ zIndex: 5.// The order in which the layers are stacked

 zooms: [3.19].Style: styleObject // Set the style object});
Copy the code

Set up the`MassMarks`The data set presented

var data = [

  {

    lnglat: [116.405285.39.904989].// dot marks position

    name: 'beijing'.id: 1

  }

  / / {},... , {},...

]

massMarks.setData(data) // Add mass points to the map instance massmarks.setmap (map);
Copy the code

Custom events

DOM events addDomListener
Click on the event addListener
Mass point event

AMap.event.addListener(marker, 'click', e => this.clickHandler(e, item))
Copy the code

Among themeContains latitude, longitude and geographic location information for the click point,itemCustom values can be passed

Basic project processing logic

There are three system states

When there is no alarm

| — — — — — — — — — – | — — — — — — — — — — — — — — — — — – | — — — — — — — — — — — — — — — — — — — — – : | — — — — — — — — — — — — — — — — — — — — — — — : |

| | | home page, click on the search results orientation to the current equipment | |

| | | home page click system switching different system point | |

| | | home page click on a system pop up box | corresponding statistics respectively based on the system to distinguish |

| | | | click personal center home page logged on |

| | equipment | list page click on close device list closed list click on the feature list below to | |

| | click home page pops up alarm list | | into alarm mode

When there is an alarm