vue 使用openlayers加载超图图层

vue 使用openlayers加载超图图层

介绍: http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/web/introduction/openlayersDevelop.html

• 安装

引入了@supermapgis/iclient-ol,就不需要再引入npm install ol了, 使用ol文件的方法和单独引入ol文件是一样的

npm install @supermapgis/iclient-ol

• 引入css样式
  在public/index.html中引入, 最好是将文件下载到项目中, 在项目中本地引入

<link href='https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css' rel='stylesheet' />
<link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' rel='stylesheet'/>

• 模块化开发安装

npm install @supermapgis/babel-plugin-import -D

• 然后，在 .babelrc 中添加如下配置：

{"plugins": [["@supermapgis/babel-plugin-import",{"libraryName": "@supermapgis/iclient-ol"}]]
}

• 使用

import "ol/ol.css";
import View from "ol/View";
import Map from "ol/Map";
import TileLayer from "ol/layer/Tile";
import Overlay from "ol/Overlay";
import XYZ from "ol/source/XYZ";
import { Vector as SourceVec, Cluster, OSM, TileArcGISRest, TileWMS, Vector as VectorSource } from "ol/source";
import { Feature } from "ol";
import Polygon from "ol/geom/Polygon";
import { Vector as VectorLayer } from "ol/layer";
import { Point, LineString } from "ol/geom";
import { Style, Icon, Fill, Stroke, Text, Circle as CircleStyle } from "ol/style";
import * as control from "ol/control";
import { Polygon, LineString } from "ol/geom";
import { fromExtent } from "ol/geom/Polygon";
import { TileSuperMapRest, Tianditu, Logo } from "@supermapgis/iclient-ol";
import GeoJSON from "ol/format/GeoJSON";/*** 超图图层* @param {*} map*/
addSupermapLayer(map) {var source = new TileSuperMapRest({url: "http://超图图层链接",});var layer = new TileLayer({source: source,projection: "EPSG:4326",name: "超图图层",});map.addLayer(layer);
}