快捷導(dǎo)航

vue使用天地圖、openlayers實現(xiàn)多個底圖疊加顯示效果

更新時間：2022年04月14日 15:43:21 作者：船長在船上

這篇文章主要介紹了vue使用天地圖、openlayers實現(xiàn)多個底圖疊加顯示,根據(jù)返回的經(jīng)緯度列表通過天地圖、openlayers實現(xiàn)底圖添加，本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧

實現(xiàn)效果：

需求：根據(jù)返回的經(jīng)緯度列表通過天地圖、openlayers實現(xiàn)底圖添加（航道圖層、線圖層、水深圖層）

tk：自己申請的密鑰

安裝opelayers

cnpm i -S ol
#或者
npm install ol

<script>
    // openlayers地圖
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";//彈窗
import {Point} from "ol/geom";
import {Feature} from "ol";
import { defaults as defaultControls } from "ol/control";//默認(rèn)縮放
import {FullScreen,ScaleLine} from "ol/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';//旋轉(zhuǎn)
 
export default {
        data(){
            tk:"密鑰",
            center:{
                longitude:"",
                latitude:""
            },
            map:null,
        },
        methods:{
            initMap() {
              let defaultsMap = {
                tileUrl1:"圖層地址1",
                tileUrl2:"圖層地址2",
                tileUrl3:"圖層地址3",
                origin: [-400, 400],
                zoom: 5,
                resolutions: [
                      //根據(jù)項目需要設(shè)置
                ],
                fullExtent: [
                          //根據(jù)項目需要設(shè)置
                ],
                inters: [1000, 100],
                center: [this.center.longitude, this.center.latitude],
                projection: getProjection("EPSG:4326")
              };
              // let projection = getProjection('EPSG:4326');
 
              // 底圖天地圖注記  cta——道路+中文注記
              let baseLayer = new TileLayer({
                title: "天地圖",
                source: new XYZ({
                  url:"http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" +this.tk
                 }),
                  zIndex: 2
          });
      //天地圖路網(wǎng)
              let roadLayer = new TileLayer({
                    title: "天地圖路網(wǎng)",
                    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
              });
      
 
              // 加載地圖層mapservice
 
              let tileGrid = new TileGrid({
                tileSize: 256,
                origin: defaultsMap.origin,
                extent: defaultsMap.fullExtent,
                resolutions: defaultsMap.resolutions
              });
 
              // 航道圖層
              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
              });
 
              // 水深圖層
              let soundgMap = new TileLayer({
                    source: new XYZ({
                      tileGrid: tileGrid,
                      projection: defaultsMap.projection,
                      url: defaultsMap.tileUrl3
                    }),
                    zIndex: 11
              });
 
 
              // 加載地圖
              this.map = new Map({
                    target: "trajecttoryMap",
                    controls: defaultControls().extend([
                      new FullScreen(),
                      new ScaleLine({
                        units: "metric"
                      })
                  // new ZoomSlider()
                ]),
                interactions: defaultInteractions({
                  pinchRotate: false // 移動端禁止地圖旋轉(zhuǎn)
                }),
                loadTilesWhileAnimating: true,
                layers: [baseLayer, roadLayer, cjinobeaconMap, framesMap, soundgMap],
                //overlays: [this.overlay], // 把彈窗加入地圖
                view: new View({
                      projection: defaultsMap.projection,
                      center: defaultsMap.center,
                      extent: defaultsMap.fullExtent,
                      // resolutions: defaultsMap.resolutions,
                      zoom: 14,
                      minZoom: 7,
                      maxZoom:17
                })
              });
      
            },
        },
        mounted(){
            this.initMap();
        }
}
</script>

到此這篇關(guān)于vue使用天地圖、openlayers實現(xiàn)多個底圖疊加顯示的文章就介紹到這了,更多相關(guān)vue天地圖openlayers內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: