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);
}