@ -24,7 +24,9 @@
type = "primary" type = "primary"
icon = "el-icon-plus" icon = "el-icon-plus"
@ click = "handleAddPolygon" @ click = "handleAddPolygon"
> { { method === "mAddPolygon" ? "取消绘制" : "绘制区域" } } < / e l - b u t t o n > { {
method === "mAddPolygon" ? "取消绘制" : "绘制区域"
} } < / e l - b u t t o n
> >
< el -button < el -button
v - if = "showBtn && hasPolygon" v - if = "showBtn && hasPolygon"
@ -112,7 +114,11 @@
< div class = "div_tip" > < div class = "div_tip" >
< span > 按住alt键单击标注 ， 可以进入下一级地图 < / span > < span > 按住alt键单击标注 ， 可以进入下一级地图 < / span >
< / div > < / div >
< div id = "map" class = "div_map" : style = "{ height: mapHeight + 'px' }" > < / div > < div
id = "map"
class = "div_map"
: style = "{ height: mapHeight + 'px' }"
> < / div >
< / div > < / div >
< el -dialog < el -dialog
title = "手动录入" title = "手动录入"
@ -130,7 +136,11 @@
> >
< / e l - i n p u t - n u m b e r > < / e l - i n p u t - n u m b e r >
< span style = "margin-left: 15px" > 中心点纬度 ： < / span > < span style = "margin-left: 15px" > 中心点纬度 ： < / span >
< el -input -number size = "small" style = "width: 250px" v-model ="latitude" > < el -input -number
size = "small"
style = "width: 250px"
v - model = "latitude"
>
< / e l - i n p u t - n u m b e r > < / e l - i n p u t - n u m b e r >
< / div > < / div >
< div style = "margin-top: 20px" > < div style = "margin-top: 20px" >
@ -171,7 +181,9 @@
< span slot = "footer" class = "dialog-footer" > < span slot = "footer" class = "dialog-footer" >
< el -button @ click = "dialogVisible = false" > 取 消 < / e l - b u t t o n > < el -button @ click = "dialogVisible = false" > 取 消 < / e l - b u t t o n >
< el -button type = "primary" @click ="handleManuallyOk" > 确 定 < / el -button > < el -button type = "primary" @click ="handleManuallyOk"
> 确 定 < / e l - b u t t o n
>
< / span > < / span >
< / e l - d i a l o g > < / e l - d i a l o g >
< / div > < / div >
@ -205,6 +217,7 @@ import { mapType } from "@/utils/dai-map";
import { get as getProjection , Projection , addProjection } from "ol/proj.js" ; import { get as getProjection , Projection , addProjection } from "ol/proj.js" ;
import proj4 from "proj4" ; import proj4 from "proj4" ;
import { register as registerProj4 } from "ol/proj/proj4" ; import { register as registerProj4 } from "ol/proj/proj4" ;
import tdtWpZw from "@/utils/tdt-wp-zw" ;
var centerPointGlobal = [ 120.664619 , 36.504963 ] ; var centerPointGlobal = [ 120.664619 , 36.504963 ] ;
let loading ; / / 加 载 动 画 let loading ; / / 加 载 动 画
@ -451,7 +464,10 @@ const vueGis = {
let oneData = { } ; let oneData = { } ;
this . parentPolygon . forEach ( ( agencyItem ) => { this . parentPolygon . forEach ( ( agencyItem ) => {
if ( agencyItem . coordinates && agencyItem . coordinates !== "" ) { if (
agencyItem . coordinates &&
agencyItem . coordinates !== ""
) {
/ / 如 果 有 坐 标 / / 如 果 有 坐 标
oneData = { oneData = {
type : "Feature" , type : "Feature" ,
@ -506,7 +522,10 @@ const vueGis = {
let oneData = { } ; let oneData = { } ;
subAgencyArray . forEach ( ( agencyItem ) => { subAgencyArray . forEach ( ( agencyItem ) => {
if ( agencyItem . coordinates && agencyItem . coordinates !== "" ) { if (
agencyItem . coordinates &&
agencyItem . coordinates !== ""
) {
/ / 如 果 有 坐 标 / / 如 果 有 坐 标
oneData = { oneData = {
type : "Feature" , type : "Feature" ,
@ -653,6 +672,7 @@ const vueGis = {
/ / s o u r c e : n e w X Y Z ( { / / s o u r c e : n e w X Y Z ( {
/ / u r l : " h t t p : / / a p i . t i a n d i t u . g o v . c n / a p i ? v = 4 . 0 & t k = c 4 d c 9 8 7 b 4 4 2 b d 1 4 1 a 8 8 7 d 8 d 4 a 5 d 0 7 9 2 6 & x = { x } & y = { y } & l = { z } " / / u r l : " h t t p : / / a p i . t i a n d i t u . g o v . c n / a p i ? v = 4 . 0 & t k = c 4 d c 9 8 7 b 4 4 2 b d 1 4 1 a 8 8 7 d 8 d 4 a 5 d 0 7 9 2 6 & x = { x } & y = { y } & l = { z } "
/ / } ) , / / } ) ,
source : new XYZ ( { source : new XYZ ( {
/ / 指 定 u r l 瓦 片 / / 指 定 u r l 瓦 片
url : "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&style=7<ype=7&scl=0&size=0&x={x}&y={y}&z={z}" , url : "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&style=7<ype=7&scl=0&size=0&x={x}&y={y}&z={z}" ,
@ -703,91 +723,26 @@ const vueGis = {
map . removeInteraction ( dblClickInteraction ) ; map . removeInteraction ( dblClickInteraction ) ;
} , } ,
/ / 烟 台 专 用 / / 烟 台 用 ， 就 改 了 个 地 图 地 址
initMap2 ( ) { initMap2 ( ) {
this . setMapLocation ( ) ; this . setMapLocation ( ) ;
proj4 . defs (
"EPSG:4490" ,
'GEOGCS["China Geodetic Coordinate System 2000",DATUM["China_2000",SPHEROID["CGCS2000",6378137,298.257222101,AUTHORITY["EPSG","1024"]],AUTHORITY["EPSG","1043"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4490"]]'
) ;
registerProj4 ( proj4 ) ;
/ / 重 写 p r o j e c t i o n 4 4 9 0 ，
var projection = new Projection ( {
code : "EPSG:4490" ,
units : "degrees" ,
axisOrientation : "neu" ,
} ) ;
projection . setExtent ( [ - 180 , - 90 , 180 , 90 ] ) ;
projection . setWorldExtent ( [ - 180 , - 90 , 180 , 90 ] ) ;
addProjection ( projection ) ;
let projectionExtent = projection . getExtent ( ) ;
let size = getWidth ( projectionExtent ) / 256 ; / / s i z e 就 是 一 个 像 素 代 表 的 经 纬 度
let matrixIds = [ ] ;
function getResolutions ( ) {
let resolutions = [ ] ;
for ( let z = 7 ; z < 19 ; ++ z ) {
resolutions [ z ] = size / Math . pow ( 2 , z ) ;
matrixIds [ z ] = z ;
}
return resolutions ;
}
const resolutions = getResolutions ( ) ;
console . log ( "========= getProjection" , getProjection ( "EPSG:4490" ) ) ;
let url = "http://59.206.203.34/tileservice/SDPubMap" ;
if ( window . SITE_CONFIG [ "nodeEnv" ] == "dev_sdtdt" ) {
url =
"http://service.sdmap.gov.cn/tileservice/sdpubmap?tk=e758167d5b90c351b70a979c0820840c" ;
}
gaodeMapLayer = new TileLayer ( { gaodeMapLayer = new TileLayer ( {
title : "地图" , title : "地图" ,
source : new WMTS ( {
url , source : new XYZ ( {
layer : "sdvec" , / / 指 定 u r l 瓦 片
matrixSet : "c" , url : tdtWpZw . vec ,
format : "image/png" , wrapX : true , / / x 方 向 平 铺 ， 也 可 以 选 择 f a l s e
projection : getProjection ( "EPSG:4490" ) ,
tileGrid : new WMTSTileGrid ( {
origin : [ - 180 , 90 ] ,
resolutions ,
matrixIds ,
} ) ,
style : "default" ,
tilematrixset : "c" ,
/ / w r a p X : t r u e ,
tileLoadFunction ( imageTile , src ) {
/ / 使 用 滤 镜 将 白 色 修 改 为 深 色
let img = new Image ( ) ;
/ / i m g . c r o s s O r i g i n = ' '
/ / 设 置 图 片 不 从 缓 存 取 ， 从 缓 存 取 可 能 会 出 现 跨 域 ， 导 致 加 载 失 败
img . setAttribute ( "crossOrigin" , "anonymous" ) ;
img . onload = function ( ) {
let canvas = document . createElement ( "canvas" ) ;
let w = img . width ;
let h = img . height ;
canvas . width = w ;
canvas . height = h ;
let context = canvas . getContext ( "2d" ) ;
context . filter =
"grayscale(92%) invert(100%) sepia(20%) hue-rotate(140deg) saturate(2000%) brightness(70%) contrast(80%)" ;
context . drawImage ( img , 0 , 0 , w , h , 0 , 0 , w , h ) ;
imageTile . getImage ( ) . src = canvas . toDataURL ( "image/png" ) ;
} ;
img . src = src ;
} ,
} ) , } ) ,
/ / z I n d e x : 2 0
} ) ; } ) ;
( mapView = new View ( { ( mapView = new View ( {
/ / 中 心 点 坐 标 / / 中 心 点 坐 标
center : this . centerPoint , center : this . centerPoint ,
projection : getProjection ( "EPSG:4490" ) , / / p r o j e c t i o n : ' E P S G : 3 8 5 7 ' ,
projection : "EPSG:4326" ,
zoom : this . zoom , zoom : this . zoom ,
minZoom : this . minZoom , minZoom : this . minZoom ,
} ) ) , } ) ) ,
@ -795,6 +750,7 @@ const vueGis = {
/ / 创 建 地 图 容 器 / / 创 建 地 图 容 器
( map = new Map ( { ( map = new Map ( {
layers : [ gaodeMapLayer ] , layers : [ gaodeMapLayer ] ,
/ / l a y e r s : [ g a o d e M a p L a y e r , t i l e M a r k ] ,
/ / 加 载 瓦 片 图 层 数 据 / / 加 载 瓦 片 图 层 数 据
view : mapView , view : mapView ,
target : "map" , target : "map" ,
@ -816,6 +772,119 @@ const vueGis = {
map . removeInteraction ( dblClickInteraction ) ; map . removeInteraction ( dblClickInteraction ) ;
} , } ,
/ / 烟 台 专 用 先 弃 用
/ / i n i t M a p 2 ( ) {
/ / t h i s . s e t M a p L o c a t i o n ( ) ;
/ / p r o j 4 . d e f s (
/ / " E P S G : 4 4 9 0 " ,
/ / ' G E O G C S [ " C h i n a G e o d e t i c C o o r d i n a t e S y s t e m 2 0 0 0 " , D A T U M [ " C h i n a _ 2 0 0 0 " , S P H E R O I D [ " C G C S 2 0 0 0 " , 6 3 7 8 1 3 7 , 2 9 8 . 2 5 7 2 2 2 1 0 1 , A U T H O R I T Y [ " E P S G " , " 1 0 2 4 " ] ] , A U T H O R I T Y [ " E P S G " , " 1 0 4 3 " ] ] , P R I M E M [ " G r e e n w i c h " , 0 , A U T H O R I T Y [ " E P S G " , " 8 9 0 1 " ] ] , U N I T [ " d e g r e e " , 0 . 0 1 7 4 5 3 2 9 2 5 1 9 9 4 3 3 , A U T H O R I T Y [ " E P S G " , " 9 1 2 2 " ] ] , A U T H O R I T Y [ " E P S G " , " 4 4 9 0 " ] ] '
/ / ) ;
/ / r e g i s t e r P r o j 4 ( p r o j 4 ) ;
/ / / / 重 写 p r o j e c t i o n 4 4 9 0 ，
/ / v a r p r o j e c t i o n = n e w P r o j e c t i o n ( {
/ / c o d e : " E P S G : 4 4 9 0 " ,
/ / u n i t s : " d e g r e e s " ,
/ / a x i s O r i e n t a t i o n : " n e u " ,
/ / } ) ;
/ / p r o j e c t i o n . s e t E x t e n t ( [ - 1 8 0 , - 9 0 , 1 8 0 , 9 0 ] ) ;
/ / p r o j e c t i o n . s e t W o r l d E x t e n t ( [ - 1 8 0 , - 9 0 , 1 8 0 , 9 0 ] ) ;
/ / a d d P r o j e c t i o n ( p r o j e c t i o n ) ;
/ / l e t p r o j e c t i o n E x t e n t = p r o j e c t i o n . g e t E x t e n t ( ) ;
/ / l e t s i z e = g e t W i d t h ( p r o j e c t i o n E x t e n t ) / 2 5 6 ; / / s i z e 就 是 一 个 像 素 代 表 的 经 纬 度
/ / l e t m a t r i x I d s = [ ] ;
/ / f u n c t i o n g e t R e s o l u t i o n s ( ) {
/ / l e t r e s o l u t i o n s = [ ] ;
/ / f o r ( l e t z = 7 ; z < 1 9 ; + + z ) {
/ / r e s o l u t i o n s [ z ] = s i z e / M a t h . p o w ( 2 , z ) ;
/ / m a t r i x I d s [ z ] = z ;
/ / }
/ / r e t u r n r e s o l u t i o n s ;
/ / }
/ / c o n s t r e s o l u t i o n s = g e t R e s o l u t i o n s ( ) ;
/ / c o n s o l e . l o g ( " = = = = = = = = = g e t P r o j e c t i o n " , g e t P r o j e c t i o n ( " E P S G : 4 4 9 0 " ) ) ;
/ / l e t u r l = " h t t p : / / 5 9 . 2 0 6 . 2 0 3 . 3 4 / t i l e s e r v i c e / S D P u b M a p " ;
/ / i f ( w i n d o w . S I T E _ C O N F I G [ " n o d e E n v " ] = = " d e v _ s d t d t " ) {
/ / u r l =
/ / " h t t p : / / s e r v i c e . s d m a p . g o v . c n / t i l e s e r v i c e / s d p u b m a p ? t k = e 7 5 8 1 6 7 d 5 b 9 0 c 3 5 1 b 7 0 a 9 7 9 c 0 8 2 0 8 4 0 c " ;
/ / }
/ / g a o d e M a p L a y e r = n e w T i l e L a y e r ( {
/ / t i t l e : " 地 图 " ,
/ / s o u r c e : n e w W M T S ( {
/ / u r l ,
/ / l a y e r : " s d v e c " ,
/ / m a t r i x S e t : " c " ,
/ / f o r m a t : " i m a g e / p n g " ,
/ / p r o j e c t i o n : g e t P r o j e c t i o n ( " E P S G : 4 4 9 0 " ) ,
/ / t i l e G r i d : n e w W M T S T i l e G r i d ( {
/ / o r i g i n : [ - 1 8 0 , 9 0 ] ,
/ / r e s o l u t i o n s ,
/ / m a t r i x I d s ,
/ / } ) ,
/ / s t y l e : " d e f a u l t " ,
/ / t i l e m a t r i x s e t : " c " ,
/ / / / w r a p X : t r u e ,
/ / / / t i l e L o a d F u n c t i o n ( i m a g e T i l e , s r c ) {
/ / / / / / 使 用 滤 镜 将 白 色 修 改 为 深 色
/ / / / l e t i m g = n e w I m a g e ( ) ;
/ / / / / / i m g . c r o s s O r i g i n = ' '
/ / / / / / 设 置 图 片 不 从 缓 存 取 ， 从 缓 存 取 可 能 会 出 现 跨 域 ， 导 致 加 载 失 败
/ / / / i m g . s e t A t t r i b u t e ( " c r o s s O r i g i n " , " a n o n y m o u s " ) ;
/ / / / i m g . o n l o a d = f u n c t i o n ( ) {
/ / / / l e t c a n v a s = d o c u m e n t . c r e a t e E l e m e n t ( " c a n v a s " ) ;
/ / / / l e t w = i m g . w i d t h ;
/ / / / l e t h = i m g . h e i g h t ;
/ / / / c a n v a s . w i d t h = w ;
/ / / / c a n v a s . h e i g h t = h ;
/ / / / l e t c o n t e x t = c a n v a s . g e t C o n t e x t ( " 2 d " ) ;
/ / / / c o n t e x t . f i l t e r =
/ / / / " g r a y s c a l e ( 9 2 % ) i n v e r t ( 1 0 0 % ) s e p i a ( 2 0 % ) h u e - r o t a t e ( 1 4 0 d e g ) s a t u r a t e ( 2 0 0 0 % ) b r i g h t n e s s ( 7 0 % ) c o n t r a s t ( 8 0 % ) " ;
/ / / / c o n t e x t . d r a w I m a g e ( i m g , 0 , 0 , w , h , 0 , 0 , w , h ) ;
/ / / / i m a g e T i l e . g e t I m a g e ( ) . s r c = c a n v a s . t o D a t a U R L ( " i m a g e / p n g " ) ;
/ / / / } ;
/ / / / i m g . s r c = s r c ;
/ / / / } ,
/ / } ) ,
/ / } ) ;
/ / ( m a p V i e w = n e w V i e w ( {
/ / / / 中 心 点 坐 标
/ / c e n t e r : t h i s . c e n t e r P o i n t ,
/ / p r o j e c t i o n : g e t P r o j e c t i o n ( " E P S G : 4 4 9 0 " ) ,
/ / z o o m : t h i s . z o o m ,
/ / m i n Z o o m : t h i s . m i n Z o o m ,
/ / } ) ) ,
/ / / / 初 始 化 m a p 和 地 图 底 图
/ / / / 创 建 地 图 容 器
/ / ( m a p = n e w M a p ( {
/ / l a y e r s : [ g a o d e M a p L a y e r ] ,
/ / / / 加 载 瓦 片 图 层 数 据
/ / v i e w : m a p V i e w ,
/ / t a r g e t : " m a p " ,
/ / / / 目 标 加 载 到 m a p 中
/ / } ) ) ;
/ / m a p . o n ( " s i n g l e c l i c k " , f u n c t i o n ( e ) {
/ / / / c o n s o l e . l o g ( e . c o o r d i n a t e )
/ / / / c o n s o l e . l o g ( t r a n s f o r m ( e . c o o r d i n a t e , ' E P S G : 3 8 5 7 ' , ' E P S G : 4 3 2 6 ' ) ) ;
/ / } ) ;
/ / / / 去 除 双 击 放 大 效 果
/ / c o n s t d b l C l i c k I n t e r a c t i o n = m a p
/ / . g e t I n t e r a c t i o n s ( )
/ / . g e t A r r a y ( )
/ / . f i n d ( ( i n t e r a c t i o n ) = > {
/ / r e t u r n i n t e r a c t i o n i n s t a n c e o f D o u b l e C l i c k Z o o m ;
/ / } ) ;
/ / m a p . r e m o v e I n t e r a c t i o n ( d b l C l i c k I n t e r a c t i o n ) ;
/ / } ,
/ / 添 加 标 注 图 层 / / 添 加 标 注 图 层
addParentLayer ( ) { addParentLayer ( ) {
parentSource = new VectorSource ( { parentSource = new VectorSource ( {
@ -874,7 +943,9 @@ const vueGis = {
selectAltClick = new Select ( { selectAltClick = new Select ( {
condition : function ( mapBrowserEvent ) { condition : function ( mapBrowserEvent ) {
return click ( mapBrowserEvent ) && altKeyOnly ( mapBrowserEvent ) ; return (
click ( mapBrowserEvent ) && altKeyOnly ( mapBrowserEvent )
) ;
} , } ,
} ) ; } ) ;
@ -1092,7 +1163,8 @@ const vueGis = {
map . addInteraction ( draw ) ; map . addInteraction ( draw ) ;
draw . on ( "drawend" , ( feature ) => { draw . on ( "drawend" , ( feature ) => {
this . polygonCoor = feature . feature . values_ . geometry . flatCoordinates ; this . polygonCoor =
feature . feature . values_ . geometry . flatCoordinates ;
let coorString = "" ; let coorString = "" ;
for ( let i = 0 ; i < this . polygonCoor . length ; i ++ ) { for ( let i = 0 ; i < this . polygonCoor . length ; i ++ ) {
dai
3 years ago
tianq