Shulou(Shulou.com)05/31 Report--

This article mainly introduces vue how to use sky map and openlayers to achieve multiple base map overlay display effect related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that after reading this vue how to use sky map and openlayers to achieve multiple base map overlay display effect article will have a harvest, let's take a look at it.

Achieve results:

Requirements: add base map (waterway layer, line layer, depth layer) through sky map and openlayers according to the returned longitude and latitude list.

Tk: the key applied for by yourself

Install opelayers

Cnpm I-S ol# or npm install ol/ / openlayers map import "ol/ol.css"; import {Icon, Style, Stroke} from "ol/style"; import 'ol/ol.css'import Map from "ol/Map"; import View from "ol/View"; import TileLayer from "ol/layer/Tile"; import XYZ from "ol/source/XYZ"; import {get as getProjection} from "ol/proj.js" Import {getBottomLeft, getTopRight} from 'ol/extent.js'import {Vector as SourceVec} from' ol/source';import {Vector as LayerVec} from 'ol/layer';import Overlay from "ol/Overlay"; / pop-up window import {Point} from "ol/geom"; import {Feature} from "ol"; import {defaults as defaultControls} from "ol/control"; / / default scaling import {FullScreen,ScaleLine} from "ol/control"; / / full screen, scale control import TileGrid from 'ol/tilegrid/TileGrid' Import {LineString, Polygon} from 'ol/geom.js'import {setTimeout} from' timers';import {Polyline} from "ol/format"; / / import {vectorContext} from "ol/render"; import {getVectorContext} from "ol/render"; import {defaults as defaultInteractions} from 'ol/interaction' / / rotate export default {data () {tk: "key", center: {longitude: ", latitude:"}, map:null,} Methods: {initMap () {let defaultsMap = {tileUrl1: "layer address 1", tileUrl2: "layer address 2", tileUrl3: "layer address 3", origin: [- 400,400], zoom: 5 Resolutions: [/ / set according to project needs], fullExtent: [/ / set according to project needs], inters: [1000], center: [this.center.longitude, this.center.latitude] Projection: getProjection ("EPSG:4326")} / / let projection = getProjection ('EPSG:4326') / / Base map cta-- road + Chinese note let baseLayer = new TileLayer ({title: "heaven and earth map") Source: new XYZ ({url: "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + this.tk}), zIndex: 2}) / / Road network let roadLayer = new TileLayer ({title: "road network of heaven and earth map", source: new XYZ ({projection: defaultsMap.projection) Url: "http://t4.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=" + this.tk}), zIndex: 1}) / / load map layer mapservice let tileGrid = new TileGrid ({tileSize: 256, origin: defaultsMap.origin, extent: defaultsMap.fullExtent, resolutions: defaultsMap.resolutions}) / / Channel layer let cjinobeaconMap = new TileLayer ({source: new XYZ ({tileGrid: tileGrid, projection: defaultsMap.projection, url: defaultsMap.tileUrl1}), zIndex: 9}) / / let framesMap = new TileLayer ({source: new XYZ ({tileGrid: tileGrid, projection: defaultsMap.projection, url: defaultsMap.tileUrl2}), zIndex: 10}) / / Water depth map let soundgMap = new TileLayer ({source: new XYZ ({tileGrid: tileGrid, projection: defaultsMap.projection, url: defaultsMap.tileUrl3}), zIndex: 11}) / / load the map this.map = new Map ({target: "trajecttoryMap", controls: defaultControls () .extend ([new FullScreen ()) New ScaleLine ({units: "metric"}) / / new ZoomSlider ()], interactions: defaultInteractions ({pinchRotate: false / / Mobile forbids map rotation}), loadTilesWhileAnimating: true Layers: [baseLayer, roadLayer, cjinobeaconMap, framesMap, soundgMap], / / overlays: [this.overlay], / / add pop-up windows to the map view: new View ({projection: defaultsMap.projection, center: defaultsMap.center, extent: defaultsMap.fullExtent / / resolutions: defaultsMap.resolutions, zoom: 14, minZoom: 7, maxZoom:17})}) },}, mounted () {this.initMap ();}} this is the end of the article on "how vue uses Sky Map and openlayers to achieve the overlay display effect of multiple base images". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to use sky map and openlayers to achieve multiple base map overlay display effect". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.