Skip to content

蒋波涛 / super_mapboxgl_vue

Go to a project
Toggle navigation
Toggle navigation pinning
2a66dc96 by unknown
Options

20191218

1 parent a544a113
Inline Side-by-side
Showing 18 changed files with 1071 additions and 103 deletions
......@@ -2,13 +2,16 @@
* @Author: jiangbotao
* @Date: 2019-12-12 17:40:15
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-15 01:38:09
* @LastEditTime: 2019-12-18 00:53:58
* @FilePath: \supermapvue\README.md
-->
# SuperMapVue
> 基于SuperMap MapboxGL代码编写的VUE组件
> 1、一个有参考价值的网站 http://yancongwen.cn/mapbox-demo/
> 2、https://www.minedata.cn/industry/city
## Build Setup
``` bash
......
......@@ -32,7 +32,7 @@
</template>
<script>
import MyMenu from './components/menu/MyMenu';
import MyMenu from './menu/MyMenu';
export default {
name: 'App',
......
<!--
* MapboxGL基本地图设置并从服务器上获取相关信息
* @Author: jiangbotao
* @Date: 2019-12-09 23:17:48
* @LastEditors: jiangbotao
......@@ -16,8 +17,7 @@ import $ from 'jquery';
import mapboxgl from 'mapbox-gl';
import { Logo, MapService } from '@supermap/iclient-mapboxgl';
export default {
name: 'HelloWorld',
name: 'Map_Info',
data () {
return {
......@@ -52,7 +52,6 @@ export default {
zoom: 2
});
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
map.on('load', function () {
mapService();
});
......@@ -66,7 +65,6 @@ export default {
});
getMapStatusService.processAsync();
}
function callback(serviceResult) {
var result = serviceResult.result;
var innerHTML = '';
......@@ -76,7 +74,6 @@ export default {
.setHTML(innerHTML + "</br>")
.addTo(map);
}
$('#map').on('resize', function() {
console.log('resize');
});
......
<!--
* @Author: jiangbotao
* @Date: 2019-12-18 00:23:47
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-18 00:44:01
* @FilePath: \supermapvue\src\components\layers\Map_mapbox.vue
-->
<template>
<div >
<div id="map"></div>
</div>
</template>
<script>
import $ from 'jquery';
import mapboxgl from 'mapbox-gl';
import { Logo, MapService } from '@supermap/iclient-mapboxgl';
export default {
name: 'Mapbox',
data () {
return {
}
},
mounted(){
mapboxgl.accessToken = 'pk.eyJ1IjoieWFuY29uZ3dlbiIsImEiOiJjaml4eWgxMnowNHY0M3BvMW96cDI1bWJ6In0.QA-bmCCquo-mziBfZ8KOIQ';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
center: [-87.622088, 41.878781], // starting position [lng, lat]
zoom: 12 // starting zoom
});
map.on('load', function() {
// Add Mapillary sequence layer.
// https://www.mapillary.com/developer/tiles-documentation/#sequence-layer
map.addLayer({
"id": "mapillary",
"type": "line",
"source": {
"type": "vector",
"tiles": ["https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt"],
"minzoom": 6,
"maxzoom": 14
},
"source-layer": "mapillary-sequences",
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-opacity": 0.6,
"line-color": "rgb(53, 175, 109)",
"line-width": 2
}
}, 'waterway-label');
});
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
}
}
</script>
<style scoped>
#map {
position: absolute;
height: 100%;
width: 100%;
background-color: white
}
</style>
\ No newline at end of file
<template>
<div >
<div id="map"></div>
</div>
</template>
<script>
import $ from 'jquery';
import mapboxgl from 'mapbox-gl';
import { Logo, MapService } from '@supermap/iclient-mapboxgl';
export default {
name: 'HelloWorld',
data () {
return {
}
},
mounted(){
var map = new mapboxgl.Map({
container: 'map', // container id
style: {
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"tiles": ["https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"],
"tileSize": 256
},
"img": {
"type": "raster",
"tiles": ["https://services.wzmap.gov.cn/server/rest/services/TDT/YX2017/MapServer/tile/{z}/{y}/{x}?blankTile=false"],
"tileSize": 256
}
},
"layers": [
// {
// "id": "simple-tiles",
// "type": "raster",
// "source": "raster-tiles",
// "minzoom": 0,
// "maxzoom": 22
// },
{
"id": "img_lyr",
"type": "raster",
"source": "img",
"minzoom": 0,
"maxzoom": 22
}]
},
center: [120.86813445410331, 27.82247481387501], // starting position
zoom: 12 // starting zoom
});
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
}
}
</script>
<style scoped>
#map {
position: absolute;
height: 100%;
width: 100%;
background-color: white
}
</style>
\ No newline at end of file
<!--
* @Author: jiangbotao
* @Date: 2019-12-18 00:23:47
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-18 00:25:21
* @FilePath: \supermapvue\src\components\layers\Map_mapbox.vue
-->
<template>
<div >
<div id="map"></div>
</div>
</template>
<script>
import $ from 'jquery';
import mapboxgl from 'mapbox-gl';
import { Logo, MapService } from '@supermap/iclient-mapboxgl';
export default {
name: 'Gaode',
data () {
return {
}
},
mounted(){
var map = new mapboxgl.Map({
container: 'map', // container id
style: {
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"tiles": ["http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"],
"tileSize": 256
}
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
}]
},
center: [116, 30], // starting position
zoom: 2 // starting zoom
});
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
}
}
</script>
<style scoped>
#map {
position: absolute;
height: 100%;
width: 100%;
background-color: white
}
</style>
\ No newline at end of file
<!--
* @Author: jiangbotao
* @Date: 2019-12-18 00:23:47
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-18 00:28:00
* @FilePath: \supermapvue\src\components\layers\Map_mapbox.vue
-->
<template>
<div >
<div id="map"></div>
</div>
</template>
<script>
import $ from 'jquery';
import mapboxgl from 'mapbox-gl';
import { Logo, MapService } from '@supermap/iclient-mapboxgl';
export default {
name: 'Mapbox',
data () {
return {
}
},
mounted(){
mapboxgl.accessToken = 'pk.eyJ1IjoieWFuY29uZ3dlbiIsImEiOiJjaml4eWgxMnowNHY0M3BvMW96cDI1bWJ6In0.QA-bmCCquo-mziBfZ8KOIQ';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
center: [-74.50, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
}
}
</script>
<style scoped>
#map {
position: absolute;
height: 100%;
width: 100%;
background-color: white
}
</style>
\ No newline at end of file
<!--
* Mapbox GL展示天地图数据
* @Author: jiangbotao
* @Date: 2019-12-09 23:17:48
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-18 00:17:04
* @FilePath: \mymapbox\src\components\Map3857.vue
-->
<template>
<div >
<div id="map"></div>
</div>
</template>
<script>
import $ from 'jquery';
import mapboxgl from 'mapbox-gl';
import { Logo, MapService } from '@supermap/iclient-mapboxgl';
export default {
name: 'HelloWorld',
data () {
return {
}
},
mounted(){
var map = new mapboxgl.Map({
container: 'map', // container id
style: {
"version": 8,
"sources": {
"vec": {
"type": "raster",
"tiles": ["http://t0.tianditu.com/vec_w/wmts?service=WMTS&version=1.0.0&request=GetTile&layer=vec&style=default&format=tiles&TileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&tk=394404c8b901574fdc4cdf8c18a98448"],
"tileSize": 256
},
"cva": {
"type": "raster",
"tiles": ["http://t0.tianditu.com/cva_w/wmts?service=WMTS&version=1.0.0&request=GetTile&layer=cva&style=default&format=tiles&TileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&tk=394404c8b901574fdc4cdf8c18a98448"],
"tileSize": 256
}
},
"layers": [{
"id": "vec_lyr",
"type": "raster",
"source": "vec",
"minzoom": 0,
"maxzoom": 22
},{
"id": "cva_lyr",
"type": "raster",
"source": "cva",
"minzoom": 0,
"maxzoom": 22
}]
},
center: [116, 30], // starting position
zoom: 2 // starting zoom
});
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
}
}
</script>
<style scoped>
#map {
position: absolute;
height: 100%;
width: 100%;
background-color: white
}
</style>
\ No newline at end of file
<!--
* Mapbox GL展示天地图数据
* @Author: jiangbotao
* @Date: 2019-12-09 23:17:48
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-18 00:17:04
* @FilePath: \mymapbox\src\components\Map3857.vue
-->
<template>
<div >
<div id="map"></div>
</div>
</template>
<script>
import $ from 'jquery';
import mapboxgl from 'mapbox-gl';
import { Logo, MapService } from '@supermap/iclient-mapboxgl';
export default {
name: 'HelloWorld',
data () {
return {
}
},
mounted(){
var map = new mapboxgl.Map({
container: 'map', // container id
style: {
"version": 8,
"sources": {
"img": {
"type": "raster",
"tiles": ["http://t0.tianditu.com/img_w/wmts?service=WMTS&version=1.0.0&request=GetTile&layer=img&style=default&format=tiles&TileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&tk=394404c8b901574fdc4cdf8c18a98448"],
"tileSize": 256
},
"cia": {
"type": "raster",
"tiles": ["http://t0.tianditu.com/cia_w/wmts?service=WMTS&version=1.0.0&request=GetTile&layer=cia&style=default&format=tiles&TileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&tk=394404c8b901574fdc4cdf8c18a98448"],
"tileSize": 256
}
},
"layers": [{
"id": "img_lyr",
"type": "raster",
"source": "img",
"minzoom": 0,
"maxzoom": 22
},{
"id": "cia_lyr",
"type": "raster",
"source": "cia",
"minzoom": 0,
"maxzoom": 22
}]
},
center: [116, 30], // starting position
zoom: 2 // starting zoom
});
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
}
}
</script>
<style scoped>
#map {
position: absolute;
height: 100%;
width: 100%;
background-color: white
}
</style>
\ No newline at end of file
<!--
* @Author: jiangbotao
* @Date: 2019-12-18 00:23:47
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-18 01:38:13
* @FilePath: \supermapvue\src\components\layers\Map_mapbox.vue
-->
<template>
<div >
<div id="map"></div>
</div>
</template>
<script>
import $ from 'jquery';
import mapboxgl from 'mapbox-gl';
import { Logo, MapService } from '@supermap/iclient-mapboxgl';
export default {
name: 'Mapbox',
data () {
return {
}
},
mounted(){
var map = new mapboxgl.Map({
container: 'map',
zoom: 12,
center: [120.15, 30.25],
renderWorldCopies: false,
localIdeographFontFamily: "'黑体','san-serif'",
style: 'http://www.zjditu.cn/vtiles/styles/tdt/streets.json'
});
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
}
}
</script>
<style scoped>
#map {
position: absolute;
height: 100%;
width: 100%;
background-color: white
}
</style>
\ No newline at end of file
......@@ -2,19 +2,20 @@
* @Author: jiangbotao
* @Date: 2019-12-17 19:48:20
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-17 20:36:29
* @LastEditTime: 2019-12-18 00:18:57
* @FilePath: \supermapvue\src\components\ol\OL.vue
-->
<template>
<div >
<div id="map"></div>
</div>
<div >
<div id="map"></div>
</div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { XYZ } from 'ol/source';
import WKT from 'ol/format/WKT';
import VectorSource from "ol/source/Vector";
import Point from "ol/geom/Point";
import {Draw, Modify, Snap} from 'ol/interaction';
......@@ -22,95 +23,86 @@ import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
export default {
data() {
return {
map: null
};
},
mounted() {
var tdt_vec = new TileLayer({
source: new XYZ({
url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
})
});
var tdt_cva = new TileLayer({
source: new XYZ({
url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
})
});
// 矢量绘制图层
var source = new VectorSource();
var vectorLayer = new VectorLayer({
source: source,
style: new Style({
fill: new Fill({
color: 'rgba(255, 0, 0, 0.2)'
}),
stroke: new Stroke({
color: '#ffcc33',
width: 2
}),
image: new CircleStyle({
radius: 7,
data() {
return {
map: null
};
},
mounted() {
var tdt_vec = new TileLayer({
source: new XYZ({
url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
})
});
var tdt_cva = new TileLayer({
source: new XYZ({
url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
})
});
// 矢量绘制图层
var source = new VectorSource();
var vectorLayer = new VectorLayer({
source: source,
style: new Style({
fill: new Fill({
color: '#ffcc33'
color: 'rgba(255, 0, 0, 0.2)'
}),
stroke: new Stroke({
color: '#ffcc33',
width: 2
}),
image: new CircleStyle({
radius: 7,
fill: new Fill({
color: '#ffcc33'
})
})
})
})
});
this.map = new Map({
target: "map",
layers: [
tdt_vec, tdt_cva, vectorLayer
],
view: new View({
projection: "EPSG:4326",
center: [120.79, 27.99],
zoom: 12,
minZoom: 10,
maxZoom: 18
})
});
var modify = new Modify({source: source});
this.map.addInteraction(modify);
modify.on('modifyend',function(e){
var features = e.features.getArray();
console.log(features);
});
var draw, snap; // global so we can remove them later
function addInteractions(map) {
draw = new Draw({
source: source,
type: 'Point'
});
draw.on('drawstart', function (e) {
source.clear(); // implicit remove of last feature.
this.map = new Map({
target: "map",
layers: [
tdt_vec, tdt_cva, vectorLayer
],
view: new View({
projection: "EPSG:4326",
center: [120.79, 27.99],
zoom: 12,
minZoom: 10,
maxZoom: 18
})
});
draw.on('drawend', function(evt){
var feature = evt.feature;
var p = feature.getGeometry();
console.log(p.getCoordinates());
var coord = p.getCoordinates();
map.getView().animate({center: [coord[0], coord[1]]});
var modify = new Modify({source: source});
this.map.addInteraction(modify);
modify.on('modifyend',function(e){
var features = e.features.getArray();
console.log(features);
});
map.addInteraction(draw);
snap = new Snap({source: source});
map.addInteraction(snap);
}
/**
* Handle change event.
*/
// typeSelect.onchange = function(map) {
// map.removeInteraction(draw);
// map.removeInteraction(snap);
// addInteractions();
// };
addInteractions(this.map);
}
var draw, snap; // global so we can remove them later
function addInteractions(map) {
draw = new Draw({
source: source,
type: 'Point'
});
draw.on('drawstart', function (e) {
source.clear(); // implicit remove of last feature.
});
draw.on('drawend', function(evt){
var feature = evt.feature;
var p = feature.getGeometry();
var wktformat= new WKT();
console.log('Draw: ' + wktformat.writeGeometry(p));
var coord = p.getCoordinates();
map.getView().animate({center: [coord[0], coord[1]]});
});
map.addInteraction(draw);
snap = new Snap({source: source});
map.addInteraction(snap);
}
addInteractions(this.map);
}
};
</script>
......
<template>
<div>
<div id="map"></div>
</div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { XYZ } from "ol/source";
import VectorSource from "ol/source/Vector";
import Point from "ol/geom/Point";
import WKT from "ol/format/WKT";
import { Select, Draw, Modify, Snap } from "ol/interaction";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
export default {
data() {
return {
map: null
};
},
mounted() {
var tdt_vec = new TileLayer({
source: new XYZ({
url:
"http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
})
});
var tdt_cva = new TileLayer({
source: new XYZ({
url:
"http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
})
});
// 矢量绘制图层
var source = new VectorSource();
var vectorLayer = new VectorLayer({
source: source,
style: new Style({
fill: new Fill({
color: "rgba(255, 0, 0, 0.2)"
}),
stroke: new Stroke({
color: "#ffcc33",
width: 2
}),
image: new CircleStyle({
radius: 7,
fill: new Fill({
color: "#ffcc33"
})
})
})
});
this.map = new Map({
target: "map",
layers: [tdt_vec, tdt_cva, vectorLayer],
view: new View({
projection: "EPSG:4326",
center: [120.79, 27.99],
zoom: 12,
minZoom: 10,
maxZoom: 18
})
});
////select
var select = new Select();
this.map.addInteraction(select);
////draw
var draw = new Draw({
source: source,
stopClick: true,
freehand: false,
type: "Polygon"
});
this.map.addInteraction(draw);
draw.setActive(true);
draw.on("drawend", function(e) {
draw.setActive(false);
var feature = e.feature;
var wktformat = new WKT();
console.log("Draw: " + wktformat.writeGeometry(feature.getGeometry()));
});
////modify
var modify = new Modify({
features: select.getFeatures()
});
this.map.addInteraction(modify);
modify.on("modifyend", function(e) {
var features = e.features.array_;
var wktformat = new WKT();
console.log("Modify: " + wktformat.writeGeometry(features[0].getGeometry()));
});
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#map {
position: absolute;
height: 100%;
width: 100%;
background-color: white;
}
</style>
<!--
* @Author: jiangbotao
* @Date: 2019-12-17 23:19:19
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-18 00:02:39
* @FilePath: \supermapvue\src\components\ol\OL_measure.vue
-->
<template>
<div >
<div id="map"></div>
</div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { XYZ } from 'ol/source';
import WKT from 'ol/format/WKT';
import VectorSource from "ol/source/Vector";
import Point from "ol/geom/Point";
import {Draw, Modify, Snap} from 'ol/interaction';
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
export default {
data() {
return {
map: null
};
},
mounted() {
var tdt_vec = new TileLayer({
source: new XYZ({
url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
})
});
var tdt_cva = new TileLayer({
source: new XYZ({
url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
})
});
// 矢量绘制图层
var source = new VectorSource();
var vectorLayer = new VectorLayer({
source: source,
style: new Style({
fill: new Fill({
color: 'rgba(255, 0, 0, 0.2)'
}),
stroke: new Stroke({
color: '#ffcc33',
width: 2
}),
image: new CircleStyle({
radius: 7,
fill: new Fill({
color: '#ffcc33'
})
})
})
});
this.map = new Map({
target: "map",
layers: [
tdt_vec, tdt_cva, vectorLayer
],
view: new View({
projection: "EPSG:4326",
center: [120.79, 27.99],
zoom: 12,
minZoom: 10,
maxZoom: 18
})
});
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#map {
position: absolute;
height: 100%;
width: 100%;
background-color: white
}
.ol-tooltip {
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
color: white;
padding: 4px 8px;
opacity: 0.7;
white-space: nowrap;
font-size: 12px;
}
.ol-tooltip-measure {
opacity: 1;
font-weight: bold;
}
.ol-tooltip-static {
background-color: #ffcc33;
color: black;
border: 1px solid white;
}
.ol-tooltip-measure:before,
.ol-tooltip-static:before {
border-top: 6px solid rgba(0, 0, 0, 0.5);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
content: "";
position: absolute;
bottom: -6px;
margin-left: -7px;
left: 50%;
}
.ol-tooltip-static:before {
border-top-color: #ffcc33;
}
</style>
\ No newline at end of file
import Draw from 'ol/interaction/Draw'
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {
unByKey
} from 'ol/Observable.js';
import Overlay from 'ol/Overlay';
import {
getArea,
getLength
} from 'ol/sphere.js';
import View from 'ol/View';
import {
LineString,
Polygon
} from 'ol/geom.js';
import {
Circle as CircleStyle,
Fill,
Stroke,
Style
} from 'ol/style.js';
export default{
measure(map, measureType) {
/**
* Currently drawn feature.
* @type {module:ol/Feature~Feature}
*/
var sketch;
/**
* The help tooltip element.
* @type {Element}
*/
var helpTooltipElement;
/**
* Overlay to show the help messages.
* @type {module:ol/Overlay}
*/
var helpTooltip;
/**
* The measure tooltip element.
* @type {Element}
*/
var measureTooltipElement;
/**
* Overlay to show the measurement.
* @type {module:ol/Overlay}
*/
var measureTooltip;
/**
* Message to show when the user is drawing a polygon.
* @type {string}
*/
var continuePolygonMsg = '继续点击绘制多边形';
/**
* Message to show when the user is drawing a line.
* @type {string}
*/
var continueLineMsg = '继续点击绘制线';
createMeasureTooltip();
createHelpTooltip();
/**
* Handle pointer move.
* @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt The event.
*/
var pointerMoveHandler = function (evt) {
if (evt.dragging) {
return;
}
/** @type {string} */
var helpMsg = '请点击开始绘制';
if (sketch) {
var geom = (sketch.getGeometry());
if (geom instanceof Polygon) {
helpMsg = continuePolygonMsg;
} else if (geom instanceof LineString) {
helpMsg = continueLineMsg;
}
}
helpTooltipElement.innerHTML = helpMsg;
helpTooltip.setPosition(evt.coordinate);
helpTooltipElement.classList.remove('hidden');
};
map.on('pointermove', pointerMoveHandler);
map.getViewport().addEventListener('mouseout', function () {
helpTooltipElement.classList.add('hidden');
});
var draw;
var formatLength = function (line) {
var length = getLength(line);
var output;
if (length > 100) {
output = (Math.round(length / 1000 * 100) / 100) +
' ' + 'km';
} else {
output = (Math.round(length * 100) / 100) +
' ' + 'm';
}
return output;
};
var formatArea = function (polygon) {
var area = getArea(polygon);
var output;
if (area > 10000) {
output = (Math.round(area / 1000000 * 100) / 100) +
' ' + 'km<sup>2</sup>';
} else {
output = (Math.round(area * 100) / 100) +
' ' + 'm<sup>2</sup>';
}
return output;
};
var source;
// var layer ;
// 获取存放feature的vectorlayer层。map初始化的时候可以添加好了
for(let layerTmp of map.getLayers().getArray()){
if(layerTmp.get("name")=="feature"){
// layer = layerTmp;
// layerTmp.setSource(null)
source= layerTmp.getSource();
}
}
function addInteraction() {
var type = (measureType == 'area' ? 'Polygon' : 'LineString');
draw = new Draw({
source: source,
type: type,
style: new Style({
fill: new Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 2
}),
image: new CircleStyle({
radius: 5,
stroke: new Stroke({
color: 'rgba(0, 0, 0, 0.7)'
}),
fill: new Fill({
color: 'rgba(255, 255, 255, 0.2)'
})
})
})
});
map.addInteraction(draw);
var listener;
draw.on('drawstart',
function (evt) {
// set sketch
sketch = evt.feature;
/** @type {module:ol/coordinate~Coordinate|undefined} */
var tooltipCoord = evt.coordinate;
listener = sketch.getGeometry().on('change', function (evt) {
var geom = evt.target;
var output;
if (geom instanceof Polygon) {
output = formatArea(geom);
tooltipCoord = geom.getInteriorPoint().getCoordinates();
} else if (geom instanceof LineString) {
output = formatLength(geom);
tooltipCoord = geom.getLastCoordinate();
}
measureTooltipElement.innerHTML = output;
measureTooltip.setPosition(tooltipCoord);
});
}, this);
draw.on('drawend',
function () {
measureTooltipElement.className = 'tooltip tooltip-static';
measureTooltip.setOffset([0, -7]);
// unset sketch
sketch = null;
// unset tooltip so that a new one can be created
measureTooltipElement = null;
createMeasureTooltip();
unByKey(listener);
map.un('pointermove', pointerMoveHandler);
map.removeInteraction(draw);
helpTooltipElement.classList.add('hidden');
}, this);
}
function createHelpTooltip() {
if (helpTooltipElement) {
helpTooltipElement.parentNode.removeChild(helpTooltipElement);
}
helpTooltipElement = document.createElement('div');
helpTooltipElement.className = 'tooltip hidden';
helpTooltip = new Overlay({
element: helpTooltipElement,
offset: [15, 0],
positioning: 'center-left'
});
map.addOverlay(helpTooltip);
}
function createMeasureTooltip() {
if (measureTooltipElement) {
measureTooltipElement.parentNode.removeChild(measureTooltipElement);
}
measureTooltipElement = document.createElement('div');
measureTooltipElement.className = 'tooltip tooltip-measure';
measureTooltip = new Overlay({
element: measureTooltipElement,
offset: [0, -15],
positioning: 'bottom-center'
});
map.addOverlay(measureTooltip);
}
// 量测调用
addInteraction();
}
}
\ No newline at end of file
......@@ -3,7 +3,7 @@
* @Author: jiangbotao
* @Date: 2019-12-10 22:15:53
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-17 00:12:35
* @LastEditTime: 2019-12-18 00:51:46
* @FilePath: \supermapvue\src\components\vt\Map_wz.vue
-->
<template>
......
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-12 17:40:15
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-17 20:35:13
* @LastEditTime: 2019-12-18 01:19:00
* @FilePath: \supermapvue\src\main.js
*/
import Vue from 'vue'
......
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-13 23:53:57
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-17 19:54:02
* @LastEditTime: 2019-12-18 01:35:19
* @FilePath: \supermapvue\src\components\menu\MyMenu.vue
-->
<template>
......@@ -14,11 +14,11 @@
<a-sub-menu key="sub1">
<span slot="title"><a-icon type="user" /><span>基本信息</span></span>
<a-menu-item key="1_1"><router-link :to="'/'">地图信息</router-link></a-menu-item>
<a-menu-item key="1_2"><router-link :to="'/rastertile'">栅格瓦片</router-link></a-menu-item>
<a-menu-item key="1_3"><router-link :to="'/mvt'">矢量瓦片</router-link></a-menu-item>
<a-menu-item key="1_4"><router-link :to="'/measure'">地图量测</router-link></a-menu-item>
<a-menu-item key="1_5"><router-link :to="'/mvt_wz'">本地矢量瓦片</router-link></a-menu-item>
<a-menu-item key="1_6"><router-link :to="'/mvt_wzdemo'">温州Demo</router-link></a-menu-item>
<a-menu-item key="1_3"><router-link :to="'/rastertile'">栅格瓦片(iServer)</router-link></a-menu-item>
<a-menu-item key="1_4"><router-link :to="'/mvt'">矢量瓦片(iServer)</router-link></a-menu-item>
<a-menu-item key="1_5"><router-link :to="'/measure'">地图量测</router-link></a-menu-item>
<a-menu-item key="1_6"><router-link :to="'/mvt_wz'">本地矢量瓦片</router-link></a-menu-item>
<a-menu-item key="1_7"><router-link :to="'/mvt_wzdemo'">温州Demo</router-link></a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<span slot="title"><a-icon type="team" /><span>要素查询</span></span>
......@@ -48,8 +48,20 @@
<a-menu-item key="5_4"><router-link :to="'/theme_label'">注记图</router-link></a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub6">
<span slot="title"><a-icon type="radar-chart" /><span>数据源</span></span>
<a-menu-item key="6_1"><router-link :to="'/lyr_ags'">ArcGIS矢量图层</router-link></a-menu-item>
<a-menu-item key="6_2"><router-link :to="'/lyr_tdt'">天地图(矢量注记)</router-link></a-menu-item>
<a-menu-item key="6_3"><router-link :to="'/lyr_tdt_img'">天地图(影像注记)</router-link></a-menu-item>
<a-menu-item key="6_4"><router-link :to="'/lyr_mapbox'">Mapbox</router-link></a-menu-item>
<a-menu-item key="6_5"><router-link :to="'/lyr_gaode'">高德地图</router-link></a-menu-item>
<a-menu-item key="6_6"><router-link :to="'/lyr_3dmvt'">第三方矢量瓦片</router-link></a-menu-item>
<a-menu-item key="6_7"><router-link :to="'/lyr_zj_basic'">浙江天地图(基本)</router-link></a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub7">
<span slot="title"><a-icon type="up-square" /><span>OpenLayers</span></span>
<a-menu-item key="6_1"><router-link :to="'/map_ol'">OL</router-link></a-menu-item>
<a-menu-item key="7_1"><router-link :to="'/map_ol'">OL点与改变视图</router-link></a-menu-item>
<a-menu-item key="7_2"><router-link :to="'/map_ol2'">OL面绘制与修改</router-link></a-menu-item>
<a-menu-item key="7_3"><router-link :to="'/map_ol_measure'">OL量测(未实现)</router-link></a-menu-item>
</a-sub-menu>
</a-menu>
</template>
......
......@@ -2,7 +2,14 @@
* @Author: jiangbotao
* @Date: 2019-12-12 17:40:15
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-17 20:37:03
* @LastEditTime: 2019-12-18 00:31:32
* @FilePath: \supermapvue\src\router\index.js
*/
/*
* @Author: jiangbotao
* @Date: 2019-12-12 17:40:15
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-18 00:03:33
* @FilePath: \supermapvue\src\router\index.js
*/
import Vue from 'vue'
......@@ -18,6 +25,41 @@ export default new Router({
component: () => import('@/components/basic/Map_info')
},
{
path: '/lyr_tdt',
name: 'Map_TDT',
component: () => import('@/components/layers/Map_tdt')
},
{
path: '/lyr_tdt_img',
name: 'Map_TDT_img',
component: () => import('@/components/layers/Map_tdt_img')
},
{
path: '/lyr_ags',
name: 'Map_ags',
component: () => import('@/components/layers/Map_ags')
},
{
path: '/lyr_mapbox',
name: 'Map_mapbox',
component: () => import('@/components/layers/Map_mapbox')
},
{
path: '/lyr_gaode',
name: 'Map_gaode',
component: () => import('@/components/layers/Map_gaode')
},
{
path: '/lyr_3dmvt',
name: 'Map_3dmvt',
component: () => import('@/components/layers/Map_3dmvt')
},
{
path: '/lyr_zj_basic',
name: 'Map_zj_basic',
component: () => import('@/components/layers/Map_zj_basic')
},
{
path: '/rastertile',
name: 'MapRasterTile',
component: () => import('@/components/basic/Map_rastertiles')
......@@ -121,6 +163,16 @@ export default new Router({
path: '/map_ol',
name: 'Map_OL',
component: () => import('@/components/ol/OL')
},
{
path: '/map_ol2',
name: 'Map_OL2',
component: () => import('@/components/ol/OL2')
},
{
path: '/map_ol_measure',
name: 'Map_OL_measure',
component: () => import('@/components/ol/OL_measure')
}
]
})
......