|
@@ -1,143 +1,87 @@
|
|
|
<template>
|
|
|
<view id="container" class=""></view>
|
|
|
+ <!-- <link href="ol/ol.css"></link> -->
|
|
|
</template>
|
|
|
-<script>
|
|
|
-import "ol/ol.css";
|
|
|
-import gcoord from "gcoord";
|
|
|
-import { transform } from "ol/proj.js";
|
|
|
-import Map from "ol/Map";
|
|
|
-import View from "ol/View";
|
|
|
-// import TileLayer from "ol/layer/Tile";
|
|
|
-import XYZ from "ol/source/XYZ";
|
|
|
-import Tile from "ol/layer/Tile";
|
|
|
-// const getUserInfo = () => {
|
|
|
-// apiUserInfo().then(res => {
|
|
|
-// console.log(res);
|
|
|
-// userinfo.value = res.data
|
|
|
-// })
|
|
|
-// }
|
|
|
-let map: any = null;
|
|
|
-export default {
|
|
|
- name: "map-view",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- maps: {},
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- // this.initAMap();
|
|
|
- this.createMap();
|
|
|
- },
|
|
|
- unmounted() {
|
|
|
- map && map.destroy();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- initAMap() {
|
|
|
- map = new AMap.Map("container", {
|
|
|
- viewMode: "3D", // 是否为3D地图模式
|
|
|
- zoom: 11,
|
|
|
- center: [116.397428, 39.90923],
|
|
|
- });
|
|
|
- // 设置离线地图
|
|
|
- map.setPlugins({
|
|
|
- "AMap.Offline": {},
|
|
|
- });
|
|
|
- // 添加离线地图数据
|
|
|
- map.offline.setCity("北京");
|
|
|
- },
|
|
|
- createMap() {
|
|
|
- var view = new View({
|
|
|
- center: transform([103.23, 35.33], "EPSG:4326", "EPSG:3857"), //地图初始中心点
|
|
|
- // center: gcoord.transform([103.23, 35.33], "EPSG:4326", "EPSG:3857"), //地图初始中心点
|
|
|
- // [106.67591743605254, 38.21012898330025],
|
|
|
- // gcoord.WGS84,
|
|
|
- // gcoord.BD09
|
|
|
- // ), //地图初始中心点
|
|
|
- projection: "EPSG:4326",
|
|
|
- zoom: 4,
|
|
|
- minZoom: 1,
|
|
|
- });
|
|
|
- this.addMap("container", view);
|
|
|
- },
|
|
|
- addMap(target: any, view) {
|
|
|
- if (this.maps[target]) return;
|
|
|
- // var gaodeMapLayer = new TileLayer({
|
|
|
- // title: "高德地图",
|
|
|
- // source: new XYZ({
|
|
|
- // url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
|
|
|
- // wrapX: false,
|
|
|
- // }),
|
|
|
- // });
|
|
|
- var key = "12df6e32906dbb916fad14dc65ebdbf8"; // 请替换成你的key
|
|
|
- // 矢量底图
|
|
|
- var vecLayer = new Tile({
|
|
|
- source: new XYZ({
|
|
|
- url:
|
|
|
- "http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
|
|
|
- key,
|
|
|
- }),
|
|
|
- });
|
|
|
- // 矢量标注
|
|
|
- var cvaLayer = new Tile({
|
|
|
- source: new XYZ({
|
|
|
- url:
|
|
|
- "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
|
|
|
- key,
|
|
|
- }),
|
|
|
- });
|
|
|
-
|
|
|
- // 影像底图
|
|
|
- var imgLayer = new Tile({
|
|
|
- source: new XYZ({
|
|
|
- url:
|
|
|
- "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
|
|
|
- key,
|
|
|
- }),
|
|
|
- });
|
|
|
- // 影像标注
|
|
|
- var imgCiaLayer = new Tile({
|
|
|
- source: new XYZ({
|
|
|
- url:
|
|
|
- "http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
|
|
|
- key,
|
|
|
- }),
|
|
|
- });
|
|
|
- // 地形晕染
|
|
|
- var terLayer = new Tile({
|
|
|
- source: new XYZ({
|
|
|
- url:
|
|
|
- "http://t0.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
|
|
|
- key,
|
|
|
- }),
|
|
|
- });
|
|
|
- // 地形标注层
|
|
|
- var ctaLayer = new Tile({
|
|
|
- source: new XYZ({
|
|
|
- url:
|
|
|
- "http://t0.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
|
|
|
- key,
|
|
|
- }),
|
|
|
- });
|
|
|
-
|
|
|
- let map = new Map({
|
|
|
- //地图容器div的ID
|
|
|
- target,
|
|
|
- //地图容器中加载的图层
|
|
|
- // layers: [gaodeMapLayer],
|
|
|
- layers: [vecLayer, cvaLayer],
|
|
|
- //地图视图设置
|
|
|
- view, //同一个view
|
|
|
- });
|
|
|
- this.maps[target] = map;
|
|
|
- window.map = this.maps;
|
|
|
- console.log(window.map, "window.map");
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
+<script module="ol" lang="renderjs">
|
|
|
+ // import "ol/ol.css";
|
|
|
+ import gcoord from "gcoord";
|
|
|
+ import { transform } from "ol/proj.js";
|
|
|
+ import Map from "ol/Map";
|
|
|
+ import View from "ol/View";
|
|
|
+ // import TileLayer from "ol/layer/Tile";
|
|
|
+ import XYZ from "ol/source/XYZ";
|
|
|
+ import Tile from "ol/layer/Tile";
|
|
|
+ let map = null;
|
|
|
+ export default {
|
|
|
+ name: "map-view",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ maps: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.createMap();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ createMap() {
|
|
|
+ var view = new View({
|
|
|
+ center: transform([103.23, 35.33], "EPSG:4326", "EPSG:3857"), //地图初始中心点
|
|
|
+ // center: gcoord.transform([103.23, 35.33], "EPSG:4326", "EPSG:3857"), //地图初始中心点
|
|
|
+ // [106.67591743605254, 38.21012898330025],
|
|
|
+ // gcoord.WGS84,
|
|
|
+ // gcoord.BD09
|
|
|
+ // ), //地图初始中心点
|
|
|
+ projection: "EPSG:4326",
|
|
|
+ zoom: 4,
|
|
|
+ minZoom: 1,
|
|
|
+ });
|
|
|
+ this.addMap("container", view);
|
|
|
+ },
|
|
|
+ addMap(target, view) {
|
|
|
+ if (this.maps[target]) return;
|
|
|
+ // var gaodeMapLayer = new TileLayer({
|
|
|
+ // title: "高德地图",
|
|
|
+ // source: new XYZ({
|
|
|
+ // url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
|
|
|
+ // wrapX: false,
|
|
|
+ // }),
|
|
|
+ // });
|
|
|
+ var key = "12df6e32906dbb916fad14dc65ebdbf8"; // 请替换成你的key
|
|
|
+ // 矢量底图
|
|
|
+ var vecLayer = new Tile({
|
|
|
+ source: new XYZ({
|
|
|
+ url: "http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
|
|
|
+ key,
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ // 矢量标注
|
|
|
+ var cvaLayer = new Tile({
|
|
|
+ source: new XYZ({
|
|
|
+ url: "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
|
|
|
+ key,
|
|
|
+ }),
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ let map = new Map({
|
|
|
+ //地图容器div的ID
|
|
|
+ target,
|
|
|
+ //地图容器中加载的图层
|
|
|
+ // layers: [gaodeMapLayer],
|
|
|
+ layers: [vecLayer, cvaLayer],
|
|
|
+ //地图视图设置
|
|
|
+ view, //同一个view
|
|
|
+ });
|
|
|
+ this.maps[target] = map;
|
|
|
+ window.map = this.maps;
|
|
|
+ console.log(window.map, "window.map");
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
#container {
|
|
|
width: 100%;
|
|
|
- height: 100vh;
|
|
|
+ height: 50vh;
|
|
|
}
|
|
|
</style>
|