Skip to content

Commit

Permalink
change the code framework
Browse files Browse the repository at this point in the history
  • Loading branch information
cavencj committed Jun 29, 2024
1 parent 0b9151d commit 6108c4d
Show file tree
Hide file tree
Showing 30 changed files with 604 additions and 112 deletions.
21 changes: 11 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# cesium-map

<p>
<img src="https://img.shields.io/github/actions/workflow/status/dvgis/cesium-map/build.yml"/>
<img src="https://img.shields.io/github/actions/workflow/status/cesium-china/cesium-map/build.yml"/>
<img src="https://img.shields.io/badge/license-Apache%202-blue"/>
<img src="https://img.shields.io/npm/v/@dvgis/cesium-map?color=orange&logo=github" />
<img src="https://img.shields.io/npm/dw/@dvgis/cesium-map?logo=npm"/>
<img src="https://img.shields.io/npm/v/@cesium-china/cesium-map?color=orange&logo=github" />
<img src="https://img.shields.io/npm/dw/@cesium-china/cesium-map?logo=npm"/>
</p>

> Cesium 地图插件,用于添加国内各大地图厂商的地图
Expand All @@ -15,22 +15,22 @@

## 安装

`NPM / YARN`
`ESM`

```shell
npm install @dvgis/cesium-map
npm install @cesium-china/cesium-map
-----------------------------
yarn add @dvgis/cesium-map
yarn add @cesium-china/cesium-map
```

```js
import { AMapImageryProvider,BaiduImageryProvider, GeoVisImageryProvider } from '@dvgis/cesium-map'
import { AMapImageryProvider,BaiduImageryProvider, GeoVisImageryProvider } from '@cesium-china/cesium-map'
```

`CDN`

```html
<script src="https://cdn.jsdelivr.net/npm/@dvgis/cesium-map/dist/cesium.map.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@cesium-china/cesium-map/dist/cesium.map.min.js"></script>
```

## AMapImageryProvider
Expand Down Expand Up @@ -100,7 +100,8 @@ viewer.imageryLayers.add(new Cesium.ImageryLayer( new Cesium.TdtImageryProvider(
```js
var options = {
style: 1 //style: img、1:经典
style: 1,//style: img、1:经典
crs: 'WGS84' // 使用84坐标系,默认为:GCJ02,
}
viewer.imageryLayers.add(new Cesium.ImageryLayer( new Cesium.TencentImageryProvider(options)))
```
Expand Down Expand Up @@ -156,4 +157,4 @@ viewer.imageryLayers.add(new Cesium.ImageryLayer(

## 示例

> http://dc.dvgis.cn
> examples目录下提供了CND和ESM的两种使用方式
14 changes: 11 additions & 3 deletions exmaples/amap.html → examples/amap.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>高德地图</title>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.116/Build/Cesium/Cesium.js"></script>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Cesium.js"></script>
<script src="../dist/cesium.map.min.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.116/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>

<style>
*{
Expand Down Expand Up @@ -51,6 +51,14 @@
viewer.imageryLayers.removeAll()
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
viewer.imageryLayers.add(new Cesium.ImageryLayer(new Cesium.AMapImageryProvider({style:'img',crs:'WGS84' })))
viewer.imageryLayers.add(new Cesium.ImageryLayer(new Cesium.AMapImageryProvider({crs:'WGS84' })))

viewer.entities.add({
position:Cesium.Cartesian3.fromDegrees(120.72338195,31.26216956,0),
point:{
pixelSize:10,
color:Cesium.Color.RED
}
})
</script>
</html>
62 changes: 62 additions & 0 deletions examples/amap_esm.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>高德地图</title>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>
<style>
*{
padding: 0;
margin: 0;
}

html,body,.viewer-container{
width: 100%;
height: 100%;
overflow: hidden;
}

</style>
</head>


<body>
<div class="viewer-container" id="viewer-container"></div>
</body>

<script type="importmap">
{
"imports": {
"cesium": "https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/index.js",
"@cesium-china/cesium-map": "../dist/index.js"
}
}
</script>
<script type="module">
import * as Cesium from 'cesium'
import { AMapImageryProvider } from '@cesium-china/cesium-map'
let viewer = new Cesium.Viewer("viewer-container",{
baseLayer:false,
baseLayerPicker:false,
sceneModePicker:false,
navigationHelpButton:false,
homeButton:false,
infoBox:false,
timeline:false,
animation:false,
vrButton:false,
geocoder:false,
fullscreenButton:false,
navigationInstructionsInitiallyVisible:false,
shouldAnimate:true,
creditContainer: document.createElement("div")
})
viewer.imageryLayers.removeAll()
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
viewer.imageryLayers.add(new Cesium.ImageryLayer(new AMapImageryProvider({crs:'WGS84' })))
</script>
</html>
4 changes: 2 additions & 2 deletions exmaples/baidu.html → examples/baidu.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度地图</title>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.116/Build/Cesium/Cesium.js"></script>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Cesium.js"></script>
<script src="../dist/cesium.map.min.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.116/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>

<style>
*{
Expand Down
62 changes: 62 additions & 0 deletions examples/baidu_esm.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度地图</title>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>
<style>
*{
padding: 0;
margin: 0;
}

html,body,.viewer-container{
width: 100%;
height: 100%;
overflow: hidden;
}

</style>
</head>


<body>
<div class="viewer-container" id="viewer-container"></div>
</body>

<script type="importmap">
{
"imports": {
"cesium": "https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/index.js",
"@cesium-china/cesium-map": "../dist/index.js"
}
}
</script>
<script type="module">
import * as Cesium from 'cesium'
import { BaiduImageryProvider } from '@cesium-china/cesium-map'
let viewer = new Cesium.Viewer("viewer-container",{
baseLayer:false,
baseLayerPicker:false,
sceneModePicker:false,
navigationHelpButton:false,
homeButton:false,
infoBox:false,
timeline:false,
animation:false,
vrButton:false,
geocoder:false,
fullscreenButton:false,
navigationInstructionsInitiallyVisible:false,
shouldAnimate:true,
creditContainer: document.createElement("div")
})
viewer.imageryLayers.removeAll()
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
viewer.imageryLayers.add(new Cesium.ImageryLayer( new BaiduImageryProvider({style:'img',crs:'WGS84'})))
</script>
</html>
4 changes: 2 additions & 2 deletions exmaples/geovis.html → examples/geovis.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>星图地图</title>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.116/Build/Cesium/Cesium.js"></script>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Cesium.js"></script>
<script src="../dist/cesium.map.min.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.116/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>

<style>
*{
Expand Down
65 changes: 65 additions & 0 deletions examples/geovis_esm.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>星图地图</title>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>

<style>
*{
padding: 0;
margin: 0;
}

html,body,.viewer-container{
width: 100%;
height: 100%;
overflow: hidden;
}

</style>

</head>


<body>
<div class="viewer-container" id="viewer-container"></div>
</body>

<script type="importmap">
{
"imports": {
"cesium": "https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/index.js",
"@cesium-china/cesium-map": "../dist/index.js"
}
}
</script>

<script type="module">
import * as Cesium from 'cesium'
import { GeoVisImageryProvider } from '@cesium-china/cesium-map'
let viewer = new Cesium.Viewer("viewer-container",{
baseLayer:false,
baseLayerPicker:false,
sceneModePicker:false,
navigationHelpButton:false,
homeButton:false,
infoBox:false,
timeline:false,
animation:false,
vrButton:false,
geocoder:false,
fullscreenButton:false,
navigationInstructionsInitiallyVisible:false,
shouldAnimate:true,
creditContainer: document.createElement("div")
})
viewer.imageryLayers.removeAll()
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
viewer.imageryLayers.add(new Cesium.ImageryLayer(new GeoVisImageryProvider()))
</script>
</html>
4 changes: 2 additions & 2 deletions exmaples/google.html → examples/google.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>谷歌地图</title>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.116/Build/Cesium/Cesium.js"></script>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Cesium.js"></script>
<script src="../dist/cesium.map.min.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.116/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>

<style>
*{
Expand Down
66 changes: 66 additions & 0 deletions examples/google_esm.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>谷歌地图</title>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>

<style>
*{
padding: 0;
margin: 0;
}

html,body,.viewer-container{
width: 100%;
height: 100%;
overflow: hidden;
}

</style>

</head>


<body>
<div class="viewer-container" id="viewer-container"></div>
</body>


<script type="importmap">
{
"imports": {
"cesium": "https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/index.js",
"@cesium-china/cesium-map": "../dist/index.js"
}
}
</script>

<script type="module">
import * as Cesium from 'cesium'
import { GoogleImageryProvider } from '@cesium-china/cesium-map'
let viewer = new Cesium.Viewer("viewer-container",{
baseLayer:false,
baseLayerPicker:false,
sceneModePicker:false,
navigationHelpButton:false,
homeButton:false,
infoBox:false,
timeline:false,
animation:false,
vrButton:false,
geocoder:false,
fullscreenButton:false,
navigationInstructionsInitiallyVisible:false,
shouldAnimate:true,
creditContainer: document.createElement("div")
})
viewer.imageryLayers.removeAll()
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
viewer.imageryLayers.add(new Cesium.ImageryLayer(new GoogleImageryProvider({style:'img'})))
</script>
</html>
Loading

0 comments on commit 6108c4d

Please sign in to comment.